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

时间:2016-06-07 08:07:26

标签: javascript php html css node.js

这不是关于 express.static()

的问题

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

我正在寻找一种类似 php include 的方式。由于php将处理所有PHP代码并发送编译的html,我认为可以在节点服务器上使用js完成同样的操作。

所以服务器会像下面那样:

  1. 从resources.html
  2. 获取HTML
  3. 将html推送到index.html
  4. 发送index.html
  5. 或者可能还有其他办法。有什么想法吗?

2 个答案:

答案 0 :(得分: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);

<强>视图/ 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

<强>视图/ 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>

答案 1 :(得分:0)

在根目录中创建 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来/将成为您的公共目录