如何通过浏览器使用Node，Express向HTML发送浏览器内容，例如图像，CSS和JS？

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

您必须让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

Answer 2

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

在您的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 3

除了常见问题解答，您还应该将所有静态文件移到过滤器（例如public）中，并实现app.use：

EXECUTE IMMEDIATE 'select count(*) from '||var_Table||'  where COMPANY = '||var_company order by COMPANY  
into var_NumRec;

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