1、静态网页模板
在项目目录之中,建立一个子目录views,用于存放网页模板。
假定这个项目有三个路径:根路径(/)、自我介绍(/about)和文章(/article)。那么,app.js可以这样写:
var express = require('express');
var app = express();
app.get('/', function(req, res) {
res.sendfile('./views/index.html');
});
app.get('/about', function(req, res) {
res.sendfile('./views/about.html');
});
app.get('/article', function(req, res) {
res.sendfile('./views/article.html');
});
app.listen(3000);
上面代码表示,三个路径分别对应views目录中的三个模板:index.html、about.html和article.html。另外,向服务器发送信息的方法,从send变成了sendfile,后者专门用于发送文件。
假定index.html的内容如下:
<html>
<head>
<title>首页</title>
</head>
<body>
<h1>Express Demo</h1>
<header>
<p>
<a href="/">首页</a> - <a href="/about">自我介绍</a> - <a href="/article">文章</a>
</p>
</header>
</body>
</html>
about.html内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
about
</body>
</html>
article.html内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
article
</body>
</html>
运行app.js后,访问http://localhost:3000/结果如下
2、动态网页模板
下面来制作一个动态网页网站,以使用ejs引擎为例
npm install ejs
将view engine修改为ejs,并将模板的后缀修改为.html
var express = require('express');
var app = express();
var ejs = require('ejs');
// 指定模板文件的后缀名为html
app.set('view engine', 'html');
//运行ejs引擎读取html文件
app.engine('.html', ejs.__express);
app.get('/', function (req, res){
res.render('index');
});
app.get('/about', function(req, res) {
res.render('about');
});
app.get('/article', function(req, res) {
res.render('article');
});
接下来,新建数据脚本。渲染是指将数据代入模板的过程。实际运用中,数据都是保存在数据库之中的,这里为了简化问题,假定数据保存在一个脚本文件中
在项目目录中,新建一个文件blog.js,用于存放数据。blog.js的写法符合CommonJS规范,使得它可以被require语句加载
// blog.js文件
var entries = [
{"id":1, "title":"第一篇", "body":"正文", "published":"7/2/2017"},
{"id":2, "title":"第二篇", "body":"正文", "published":"7/3/2017"},
{"id":3, "title":"第三篇", "body":"正文", "published":"7/4/2017"},
{"id":4, "title":"第四篇", "body":"正文", "published":"7/5/2017"},
{"id":5, "title":"第五篇", "body":"正文", "published":"7/10/2017"},
{"id":6, "title":"第六篇", "body":"正文", "published":"7/12/2017"}
];
exports.getBlogEntries = function (){
return entries;
}
exports.getBlogEntry = function (id){
for(var i=0; i < entries.length; i++){
if(entries[i].id == id) return entries[i];
}
}
新建header.html和footer.html
<!-- views/header.html文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%=title %></title>
</head>
<body>
<!-- views/footer.html文件 -->
<footer>
<p>
<a href="/">首页</a>
<a href="/about">自我介绍</a>
</p>
</footer>
</body>
</html>
接着,新建模板文件index.html
<!-- views/index.html文件 -->
<% include header.html %>
<h1>文章列表</h1>
<% for(var i=0; i < entries.length; i++){ %>
<p>
<a href="/article/<%=entries[i].id %>"><%=entries[i].title %></a>
<br>
<span>时间: <%=entries[i].published %></span>
</p>
<% } %>
<% include footer.html %>
新建模板文件about.html
<!-- views/about.html文件 -->
<% include header.html %>
<h1><%=title %> </h1>
<p>正文</p>
<% include footer.html %>
新建模板文件article.html
复制代码
<!-- views/article.html文件 -->
<% include header.html %>
<h1><%=blog.title %></h1>
<p>时间: <%=blog.published %></p>
<p><%=blog.body %></p>
<% include footer.html %>
最后,改写app.js文件
var express = require('express');
var app = express();
var ejs = require('ejs');
// 加载数据模块
var blogEngine = require('./blog');
app.set('view engine', 'html');
app.engine('html', ejs.__express);
app.get('/', function(req, res) {
res.render('index',{title:"最近文章", entries:blogEngine.getBlogEntries()});
});
app.get('/about', function(req, res) {
res.render('about', {title:"自我介绍"});
});
app.get('/article/:id', function(req, res) {
var entry = blogEngine.getBlogEntry(req.params.id);
res.render('article',{title:entry.title, blog:entry});
});
app.listen(3000);
上面代码中的render方法,现在加入了第二个参数,表示模板变量绑定的数据。
现在重启node服务器,然后访问http://127.0.0.1:3000来查看结果