用nodejs和express读取css / js文件
当谈到nodejs时，我是一个真正的noob，几天前开始这个。 我不明白为什么我的js和css文件不适用。 没有404错误，所以似乎并不是这样。 我试图用express来读取这些文件。 我在开发工具中遇到这些控制台错误：
GamblerScript.js：1未捕获的SyntaxError：意外的标记<
jquery-2.2.0.min.js：1未捕获的SyntaxError：意外的标记<
localhost /：5将资源解释为样式表，但使用MIMEtypestext / html：“ http：// localhost：8080 / css / Stylesheet.css ”进行传输。
（索引）：9 Uncaught ReferenceError：运行未定义
有没有人可以看到我做错了什么？
var http = require('http'); var fs = require('fs'); var index = fs.readFileSync('index.html'); var express = require('express'); var app = express(); app.get('/', function(req, res) { res.sendfile('/index.html'); }); app.use(express.static(__dirname + '/public')); fs.readFile('./index.html', function (err, html) { if (err) { throw err; } http.createServer(function(request, response) { response.writeHeader(200, {"Content-Type": "text/html"}); response.write(html); response.end(); }).listen(8080); }); <html lang="en"> <head> <title>Dices</title> <link rel="stylesheet" href="/css/Stylesheet.css"> <script src="/js/GamblerScript.js"></script> <script src="/js/jquery-2.2.0.min.js"></script> </head> <body onload="Run();"> <div id="spinboxcontainer"> <div class="spinbox"> <span class="spinspan">Dices</span> </div> <div id="container"> <div id="spinner1" class="spinner"> <div id="D1.1" class="one">1</div> <div id="D1.2" class="two">2</div> <div id="D1.3" class="three">3</div> <div id="D1.4" class="four">4</div> <div id="D1.5" class="five">5</div> <div id="D1.6" class="six">6</div> </div> </div> <div id=container2> <div id="spinner2" class="spinner"> <div id="D2.1" class="one">6</div> <div id="D2.2" class="two">5</div> <div id="D2.3" class="three">4</div> <div id="D2.4" class="four">3</div> <div id="D2.5" class="five">2</div> <div id="D2.6" class="six">1</div> </div> </div> </div> </body> </html>
function Run(){ alert('Welcome'); var clickNumber = 1; document.getElementById('spinner1').addEventListener("click", function(){ alert('Your click is number ' + clickNumber + '!'); document.body.className -= ' WhiteBackground'; clickNumber = clickNumber + 1; }); document.getElementById('spinner2').addEventListener("click", function(){ alert('Your click is number ' + clickNumber + '!'); document.body.className += ' WhiteBackground'; clickNumber = clickNumber + 1; }); };
你搞砸了不同的方法。 如果使用express ，则不需要http.createServer并用fs.readFile手动读取静态文件。 对于简单的静态服务器只是简化你的主文件就像这样
var express = require('express'); var app = express(); app.use(express.static(__dirname + '/public')); app.listen(8080, function() {console.log('server listening on port 8080...')})
你得到的错误是因为无论何时浏览器询问服务器的脚本文件，如jquery和GamblerScript您的自定义http服务器发送您的index.html文件和浏览器tryes执行它像javascript。
有几件事你做错了。
在代码的下半部分，在传递给fs.readFile()的callbackfs.readFile() ，创build一个Node服务器来处理所有的请求。 这里强调的单词是关键：您正在创build一个只使用Node的内置function的服务器，使用Express时不需要这样做; 并且服务器处理所有的请求，而不仅仅是那些到你的index.html文件的请求，正如我所想的那样。 所以，当你的CSS和JavaScript的请求进来时，你正在发送index.html作为回应。 这不会做。
幸运的是，解决scheme比原来的问题更简单。 只要这样做：
'use strict'; const path = require('path'); const express = require('express'); const app = express(); // This just lets you set an alternate port with an environment variable, // if you want. const PORT = process.env.PORT || 8080; // Set your static folder before any request handlers. app.use(express.static(path.resolve(__dirname, 'public'))); // Handles request to root only. app.get('/', (req, res) => { // If you needed to modify the status code and content type, you would do so // using the Express API, like so. However, this isn't necessary here; Express // handles this automatically. res.status(200); res.type('text/html'); // Use sendFile(absPath) rather than sendfile(path), which is deprecated. res.sendFile(path.resolve(__dirname, 'index.html')); }); // Call the listen() method on your app rather than using Node's http module. app.listen(PORT, (err) => { if (err) throw err; else console.log(`Listening on port ${PORT}`); });