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

ensalty 1楼•9 年前作者

有人吗？不太理解我的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楼•9 年前作者

哪里有Jquery + nodejs的范例

ensalty 3楼•9 年前作者

@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楼•9 年前

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

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

berwin 5楼•9 年前

1

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楼•9 年前

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

leapon 7楼•9 年前

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

ensalty 8楼•9 年前作者

@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楼•9 年前作者

这是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楼•9 年前作者

屏幕截图.jpg

ensalty 11楼•9 年前作者

@ensalty 一篇空白，只剩字体

DevinXian 12楼•9 年前

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

ensalty 13楼•9 年前作者

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

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

这里需要改吗， js的对应javascript css对应text/css的？

ensalty 14楼•9 年前作者

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

ensalty 15楼•9 年前作者

这是dashboard.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”> $(document).ready(function () {

        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楼•9 年前

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