如何使用 Node、Express 将图像、CSS 和 JS 等浏览器内容发送到浏览器上的 html？

Question

正在处理一个项目并尝试使用 nodejs 和 express 来使用 API。显示信息时遇到问题。

直接用浏览器打开index.html文件，显示完美。但是当尝试使用node 和express 这样做时，得到以下信息：

server.js:

var Access_token = 'ACCESS_TOKEN';

var AirTable = require('airtable');
var base = new AirTable({apiKey:Access_token}).base('BASE');
var TableName = 'TABLE_NAME';
var ViewName = 'Grid view';

var express = require('express');
var app = express();


app.get('/', function(request, response){
  console.log(__dirname);
  response.sendFile(__dirname + '/index.html');
});

var listener = app.listen(process.env.PORT || '3000', function(){
  console.log("Your app is listening to port " + listener.address().port);
});

这就是我的文件目录的样子

发生了什么，我该怎么办？它清楚地显示了index.html，但它从不拉动css、scripts 或images。

Answer 1

随着项目的发展或学习新事物，您可能希望转向单页应用程序。

在您的 server.js 中使用它，从长远来看，这将为您提供多种帮助。

const path  = require('path');

// Setup views directory, file type and public filder.
app.set('views', __dirname + '/views');

// ejs is just like html, stands for Embedded JavaScript templates. 
app.set('view engine', 'ejs');

// This will allow all your files in public folder available on browser.
// Files like JS, CSS, and Images
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.render('login');
});

文件夹结构：

1. public
├─ 1. css
|  ├─ 1. app.css
|  ├─ 2. bootstrap.min.css
|  └─ 3. jquery-modal.min.css
├─ 2. js
|  ├─ 1. app.js
|  ├─ 2. jquery-modal.min.js
|  └─ 3. jquery.min.js
└─ 3. logo.jpg
2. views
├─ 1. index.ejs
└─ 2. login.ejs
6. .gitignore
7. app.js
8. package.lock.json
9. package.json

所有 ejs 都只是 HTML，以 .ejs 作为扩展名代替 .html。

Answer 2

添加到 esqew 答案，您应该将所有静态文件移动到一个文件夹（例如公共）中并实现 app.use：

app.use('static', express.static(__dirname + '/public'));

从您的代码中，您使用静态引用它，并且在文件系统中，文件夹的名称是“public”

Answer 3

您必须让 Express 知道对特定 URL 的请求将针对相应文件夹中的静态资产，而不是尝试自行路由。在您的侦听器之前添加这些行：

app.use(express.static('css'));
app.use(express.static('fonts'));
app.use(express.static('img'));
app.use(express.static('js'));

文档：Serving static files in Express