Question

我正在尝试配置我的节点js来运行我的html代码。我正在使用bootstrap和Express Js。当我运行节点js时它没有加载css。任何人都可以帮我解决可能是什么问题。这就是节点js代码段。

var express = require("express");
var app     = express();
var path    = require("path");
app.get('/',function(req,res) {
    res.sendFile(__dirname + '/home.html')
})
app.use(express.static(__dirname + '/public'))
app.listen(3000);

console.log("Running at Port 3000");

当我直接加载HTML文件时，它会正确加载CSS，但是当我使用节点js加载它时，它会失败。这可能是导致问题的原因吗？

Answer 1

检查您的目录结构是否正确，以及您是否已授予Node.js输入目录和读取文件的正确权限。

如果您的目录结构如下所示：

/public
    /stylesheets
        home.css
home.html
server.js

您的server.js代码如下所示：

var express = require("express");
var app     = express();
var path    = require("path");
app.get('/',function(req,res) {
    res.sendFile(__dirname + '/home.html');
})
app.use(express.static(__dirname + '/public'));
app.listen('3000', function() { 
    console.log("Listening on port 3000"); 
});

运行时：

node ./server.js

在浏览器中访问此网址：

http://localhost:3000/stylesheets/home.css

您将返回home.css文件。

Answer 2

在Express js项目中配置数据库

/config
  /database.js
/server.js
/.env

const http = require('http');
const app = require('express')();
require('./config/database.js');
const bodyParser = require('body-parser');
const server = http.createServer(app);

server.listen(process.env.ServerPort, '0.0.0.0', () => {
  logger.info(`Express server listening on port ${process.env.ServerPort}`);
});

运行此命令

node server.js

database.js文件

const My = require('jm-ez-mysql');

// Init DB Connection
const connection = My.init({
  host: process.env.DBHOST,
  user: process.env.DBUSER,
  password: process.env.DBPASSWORD,
  database: process.env.DATABASE,
  dateStrings: true,
  charset: 'utf8mb4',
  timezone: 'utc',
  multipleStatements: true,
  connectTimeout: 100 * 60 * 1000,
  acquireTimeout: 100 * 60 * 1000,
  timeout: 100 * 60 * 1000,
});

module.exports = {
  connection,
};

Answer 3

在express js项目中，根据需要可以放置静态文件。

app.use('/static', express.static('public'))
Now, you can load the files that are in the public directory from the /static path prefix.

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

https://expressjs.com/en/starter/static-files.html 检查此链接，了解如何将静态文件与express js相连

Answer 4

网站的CSS需要加载到名为public的特定文件夹中，其中包含另外两个文件夹，名为样式表和脚本。您的css文件可以复制粘贴到stylesheets文件夹中，以便ejs文件加载它。

节点JS配置

4 个答案: