使用 nodejs 和 express 读取 css/js 个文件

Question

关于 nodejs，我是一个真正的菜鸟，几天前才开始的。我不明白为什么我的 js 和 css 文件没有被应用。没有 404 错误，所以看起来不是这样。我正在尝试使用 express 读取文件。我在开发工具中收到这些控制台错误：

GamblerScript.js:1 未捕获的语法错误：意外的标记 <

jquery-2.2.0.min.js:1 未捕获的语法错误：意外的标记 <

localhost/:5 资源解释为样式表但使用 MIME 类型传输 text/html：“http://localhost:8080/css/Stylesheet.css”。

(index):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;
});
};

Answer 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 文件，并且浏览器会尝试执行喜欢 javascript.

Answer 2

你有几处做错了。

在代码的下半部分，在传递给 fs.readFile() 的回调中，您创建了一个 Node 服务器来处理 all 请求。强调的词在这里很关键：您正在创建一个仅使用 Node 的内置功能的服务器，而在使用 Express 时不需要这样做；并且服务器处理所有请求，而不仅仅是我认为您想要的 index.html 文件的请求。因此，当对 CSS 和 JavaScript 的请求到来时，您将发送 index.html 作为响应。这样不行。

幸运的是，解决方案比原来的问题简单。只需这样做：

'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}`);
});

使用 nodejs 和 express 读取 css/js 个文件

Read css/js files with nodejs and express

html

javascript

node.js