如何使用 node.js 在 html 中包含静态文件答案

【问题标题】：How to include static files in html using node.js如何使用 node.js 在 html 中包含静态文件
【发布时间】：2016-10-07 00:42:31
【问题描述】：

这不是关于express.static()

的问题

我有一个应用程序，我需要为多个具有相同 js 和 css 依赖项的页面提供服务。因此，编写 css 和 js 包括在每个页面上使用 <script> 或 <link> 标签是不好的做法。

我正在寻找一种看起来相似的 php 包含 方法来做到这一点。由于 php 会处理所有 php 代码并发送编译后的 html，我认为节点服务器上的 js 也可以这样做。

所以服务器会像下面这样：

从 resources.html 中获取 html
将上面的 html 推送到 index.html
发送 index.html

或者也许还有其他方法。有什么想法吗？

【问题讨论】：

为什么不将它包含在您的 index.html 中？

标签： javascript php html css node.js

【解决方案1】：

您可以将布局与您选择的模板引擎一起使用，并且每个视图都可以扩展该布局。例如，如果您使用 Jade 作为模板引擎。

index.js

var express = require("express");
var app = express();
var port = process.env.PORT || 7080;

app.set('view engine', 'jade'); 

app.get('/', function (req, res) {
  res.render('home');
});

app.listen(3000);

views/layout.jade

doctype html
html
  head
    script(src='/javascripts/home.js')
    link(rel='stylesheet', href='/stylesheets/style.css')
    block title
      title= "My Website"
  body
    .container
      block content

views/home.jade

extends ./layout.jade

block content
  h1 Hello World!

home.jade 视图扩展了布局并覆盖了content 块。访问http://localhost:3000/ 会返回以下内容：

<!DOCTYPE html>
<html>
  <head>
    <script src="/javascripts/home.js"></script>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <title>My Website</title>
  </head>
  <body>
    <div class="container"><h1>Hello World!</h1></div>
  </body>
</html>

【讨论】：

我了解了模板引擎的概念，但它让简单的事情变得更加复杂。谢谢你的回答顺便说一句。 :)
不幸的是，Node 不像 PHP 那样工作，所以我认为这是你最好的选择。如果有人有替代品，我会很感兴趣。
是的，很不幸。我正在使用提供 sendFile 选项的 express，但不允许在发送之前动态修改文件。但我发现 ejs 比所有模板引擎都好一点。

【解决方案2】：

在你的根目录中创建一个public文件夹

然后在主 app.js/server.js 中

添加以下行：-

`var express    = require('express'),
bodyParser = require('body-parser'),
userRoutes = require('./routes/user'),
mongoose = require('mongoose');
var app = express();
mongoose.connect('mongodb://localhost/meanDemo');
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
 extended: true
}));
app.use(express.static('public'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use('/', userRoutes);
app.get('/',function(req, res){
 res.render('userlist');
});
app.listen(3000);
console.log("sever started at 3000");

然后在视图中使用 /*filename 到 / 将是你的公共目录

【讨论】：