如何使用 node.js 在 html 中包含静态文件
Posted
技术标签:
【中文标题】如何使用 node.js 在 html 中包含静态文件【英文标题】：How to include static files in html using node.js 【发布时间】：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 中？ 【参考方案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 到 / 将是你的公共目录
【讨论】：
以上是关于如何使用 node.js 在 html 中包含静态文件的主要内容，如果未能解决你的问题，请参考以下文章
无法使用 Node Js App 在句柄栏模板中包含 CSS 样式