nodejs新手问一个比较白痴的问题

发布于 11 年前作者 ensalty 6248 次浏览最后一次编辑是 9 年前来自问答

我有一个 jquery,jqxwidget的html页面 dashboard.html,我想用nodejs 发布到web上但是js的效果显示不出来,正常用apache是可以显示出来的,我应该从哪块入手

var http = require("http");
var fs = require('fs');
exports.start = function(){
http.createServer(function(request, response) {
fs.readFile('./dashboard.html', 'utf-8',function (err, data) {//读取内容
if (err) throw err;
response.writeHead(200, {"Content-Type": "text/html"});//注意这里
response.write(data);
response.end();
});
}).listen(8888);
console.log("server start...");

<body class='default'>
 <div id='chartContainer' style="width: 750px; height: 400px;">
 </div>
 <table style="width: 680px">
 <tr>
 <td style="padding-left: 50px;">
 <p style="font-family: Verdana; font-size: 12px;">Select the series type:
 </p>
 <div id='dropDownSeries'>
 </div>
 </td>

16 回复

ensalty 1楼•11 年前作者

有人吗? 不太理解我的html引用了一些js,但是只能显示出字符串,js的style都没有 <td style="padding-left: 50px;"> <p style="font-family: Verdana; font-size: 12px;">Select the series type: </p> <div id=‘dropDownSeries’> </div>

ensalty 2楼•11 年前作者

哪里有Jquery + nodejs的范例

ensalty 3楼•11 年前作者

@zhangking520

是吗? 我刚开始看nodejs,是不是css要response一下, JS还需要添加什么类似引入的操作吗现在css,js的效果出不来,正常 windows下打开html是正常的

<!DOCTYPE html> <html lang="en"> <head> <title id=‘Description’>jqxChart Live Updates</title> <link rel="stylesheet" href=".../jqwidgets/styles/jqx.base.css" type="text/css" /> <script src="./index.js"></script> <script type="text/javascript" src=".../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src=".../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src=".../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src=".../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src=".../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src=".../jqwidgets/jqxslider.js"></script> <script type="text/javascript" src=".../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src=".../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src=".../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src=".../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src=".../scripts/demos.js"></script> <script type="text/javascript">

berwin 4楼•11 年前

楼主。。你这样肯定是不行的。。。。你的css js 包括图片什么的都是访问不到的。。因为你只返回了一个html。

你打开network会发现,所有请求js css 什么的都是404找不到文件。。。

berwin 5楼•11 年前

var file = url.parse( req.url ).pathname;
 fs.readFile( 'public'+file, function( err, data ){
 if (err) return;
 res.end(data);
} );

加一段这个就行了。。。。这样能保证请求html这样的静态文件也能成功返回。。。public是一个存css js什么的文件夹

zhangking520 6楼•11 年前

这个和nodejs 没关系他只负责把html 输出给浏览器应该是你的html有问题

leapon 7楼•11 年前

css js 等静态资源文件一般是放在一个公共目录下,用 nodejs 或 apache 对公共目录支持一下。

ensalty 8楼•11 年前作者

@berwin

感谢大神,我加完了, ‘public’+file, 我log 打出来的的确是 js 文件和css文件,为啥还是空白,需要分类判断后缀之类的么

var http = require("http"); var fs = require(‘fs’); var url=require(‘url’); console.log(‘begin’);

exports.start = function(){ http.createServer(function(request, response) { var file = url.parse( request.url ).pathname;

var str = ‘/home/eqsvimp/nodejs/Jquery’+file;
console.log(str); fs.readFile( str, function( err, data ){ if (err) return; response.end(data); } );

fs.readFile(’./dashboard.html’, ‘utf-8’,function (err, data) {//读取内容 if (err) throw err; response.writeHead(200, {"Content-Type": "text/html"});//注意这里 response.write(data); response.end(); });

}).listen(8888); console.log("server start..."); }

ensalty 9楼•11 年前作者

这是url parse 出来的file list

/home/eqsvimp/nodejs/Jquery/ /home/eqsvimp/nodejs/Jquery/jqwidgets/styles/jqx.base.css /home/eqsvimp/nodejs/Jquery/index.js /home/eqsvimp/nodejs/Jquery/scripts/jquery-1.11.1.min.js /home/eqsvimp/nodejs/Jquery/jqwidgets/jqxcore.js /home/eqsvimp/nodejs/Jquery/jqwidgets/jqxdata.js /home/eqsvimp/nodejs/Jquery/jqwidgets/jqxchart.core.js /home/eqsvimp/nodejs/Jquery/jqwidgets/jqxdraw.js /home/eqsvimp/nodejs/Jquery/jqwidgets/jqxslider.js /home/eqsvimp/nodejs/Jquery/jqwidgets/jqxbuttons.js /home/eqsvimp/nodejs/Jquery/jqwidgets/jqxlistbox.js /home/eqsvimp/nodejs/Jquery/jqwidgets/jqxdropdownlist.js /home/eqsvimp/nodejs/Jquery/jqwidgets/jqxscrollbar.js /home/eqsvimp/nodejs/Jquery/scripts/demos.js

ensalty 10楼•11 年前作者

屏幕截图.jpg

ensalty 11楼•11 年前作者

@ensalty 一篇空白,只剩字体

DevinXian 12楼•11 年前

@ensalty 确保file list里面的路径单独提出来能够访问,放在浏览器地址栏试试!最好单独定义路由规则,类似上面的public/

ensalty 13楼•11 年前作者

@DevinXian 能给我举个例子吗 ,怎么叫单独访问,linux 里面路径都可以打开,权限都设置可访问,

response.writeHead(200, {"Content-Type": "text/html"});//注意这里

这里需要改吗, js的对应javascript css对应text/css的?

ensalty 14楼•11 年前作者

我就卡在这上面了,以前没弄过前台,如果能把原有项目的jQuery 的html 直接放到nodejs的服务器上,之后就方便了

ensalty 15楼•11 年前作者

这是dashboard.html

 var data = [];
 var max = 800;
 var timestamp = new Date();
		//alert(timestamp);
 for (var i = 0; i < 60; i++) {
 timestamp.setMilliseconds(0);
 timestamp.setSeconds(timestamp.getSeconds() - 1);
 data.push({ timestamp: new Date(timestamp.valueOf()), value: Math.max(100, (Math.random() * 1000) % max) });
			//alert(timestamp.valueOf());
		}
 data = data.reverse();
 // prepare jqxChart settings
 var settings = {
 title: "Live updates demo",
 description: "Data changes every second",
 enableAnimations: false,
 animationDuration: 1000,
 enableAxisTextAnimation: true,
 showLegend: true,
 padding: { left: 5, top: 5, right: 5, bottom: 5 },
 titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
 source: data,
 xAxis:
 {
 dataField: 'timestamp',
 type: 'date',
 baseUnit: 'second',
 unitInterval: 10,
 formatFunction: function (value) {
 return $.jqx.dataFormat.formatdate(value, "hh:mm:ss", 'en-us');
 },
 gridLines: { step: 2 },
 valuesOnTicks: true,
 labels: { angle: -45, offset: { x: -17, y: 0} }
 },
 colorScheme: 'scheme03',
 seriesGroups:
 [
 {
 type: 'line',
 columnsGapPercent: 50,
 alignEndPointsWithIntervals: true,
 valueAxis:
 {
 minValue: 0,
 maxValue: 1000,
 title: { text: 'Index Value' }
 },
 series: [
 { dataField: 'value', displayText: 'value', opacity: 1, lineWidth: 2, symbolType: 'circle', fillColorSymbolSelected: 'white', symbolSize: 4 }
 ]
 }
 ]
 };
 // create the chart
 $('#chartContainer').jqxChart(settings);
 // get the chart's instance
 var chart = $('#chartContainer').jqxChart('getInstance');
 // color scheme drop down
 var colorsSchemesList = ["scheme01", "scheme02", "scheme03", "scheme04", "scheme05", "scheme06", "scheme07", "scheme08"];
 $("#dropDownColors").jqxDropDownList({ source: colorsSchemesList, selectedIndex: 2, width: '200', height: '25', dropDownHeight: 100 });
 $('#dropDownColors').on('change', function (event) {
 var value = event.args.item.value;
 chart.colorScheme = value;
 chart.update();
 });
 // series type drop down
 var seriesList = ["line", "area", "stepline", "steparea", "splinearea", "spline", "column", "scatter", "stackedcolumn", "stackedsplinearea", "stackedspline"];
 $("#dropDownSeries").jqxDropDownList({ source: seriesList, selectedIndex: 0, width: '200', height: '25', dropDownHeight: 100 });
 $('#dropDownSeries').on('select', function (event) {
 var args = event.args;
 if (args) {
 var value = args.item.value;
 var group = chart.seriesGroups[0];
 chart.seriesGroups[0].type = value;
 chart.update();
 }
 });
		//custom
		var seriesList = ["qhr", "hour", "day"];
 $("#unit").jqxDropDownList({ source: seriesList, selectedIndex: 0, width: '200', height: '25', dropDownHeight: 100 });
 $('#unit').on('select', function (event) {
 var args = event.args;
 if (args) {
 var value = args.item.value;
				
				if(value == "qhr") {chart.xAxis.unitInterval = 15; alert(chart.xAxis.unitInterval);}
				if(value == "hour") {chart.xAxis.unitInterval = 60; alert(chart.xAxis.unitInterval);}
				if(value == "day") {chart.xAxis.unitInterval = 1440;alert(chart.xAxis.unitInterval);}
 
 chart.update();
 }
 });
		
 // auto update timer
 var ttimer = setInterval(function () {
 var max = 800;
 if (data.length >= 60)
 data.splice(0, 1);
 var timestamp = new Date();
 timestamp.setSeconds(timestamp.getSeconds());
 timestamp.setMilliseconds(0);
 data.push({ timestamp: timestamp, value: Math.max(100, (Math.random() * 1000) % max) });
 $('#chartContainer').jqxChart('update');
 }, 1000);
 });
</script>

</head> <body class=‘default’> <div id=‘chartContainer’ style="width: 750px; height: 400px;"> </div> <table style="width: 680px"> <tr> <td style="padding-left: 50px;"> <p style="font-family: Verdana; font-size: 12px;">Select the series type: </p> <div id=‘dropDownSeries’> </div> </td> <td> <p style="font-family: Verdana; font-size: 12px;">Select color scheme: </p> <div id=‘dropDownColors’> </div> </td>

		 <td>
 <p style="font-family: Verdana; font-size: 12px;">Select unit scheme:
 </p>
 <div id='unit'>
 </div>
 </td>
		
		
 </tr>
</table>

</body> </html>

DevinXian 16楼•11 年前

@ensalty 比如html中有<script src="这里是路径"></script>,把这个路径放到浏览器地址栏,看能否返回就完了。楼上有人说了,浏览器按F12,看network那一栏有没有404

nodejs新手问一个比较白痴的问题 - CNode技术社区