Express和传统的web应用
模板引擎
// app.js
// npm install --save express-art-template art-template
// 配置模板引擎
app.engine('html', require('express-art-template')); // 当渲染以 .art 结尾的资源文件的时候使用 express-art-template
app.set('view options', {
// 模板引擎的配置项
debug: process.env.NODE_ENV !== 'production'
});
app.set('views', path.join(__dirname, 'views')); // 模板文件的存储目录
app.set('view engine', 'html'); // 可以省略的模板文件后缀名
app.get('/', function (req, res) {
// 原生返回
// fs.readFile('./views/index.html', 'utf8', (err, templateStr) => {
// if(err) {
// return res.status(404).send('404 Not Found.')
// }
// const ret = template.render(templateStr, {
// foo: 'bar',
// todos: [
// {id: 1, title: '吃饭1'},
// {id: 2, title: '吃饭2'},
// {id: 3, title: '吃饭3'},
// {id: 4, title: '吃饭4'}
// ]
// });
// res.end(ret);
// });
// 只要配置了模板引擎，就可以使用render方法渲染页面
res.render('index', {
foo: 'bar',
todos: [
{ id: 1, title: '吃饭1' },
{ id: 2, title: '吃饭2' },
{ id: 3, title: '吃饭3' },
{ id: 4, title: '吃饭4' }
]
});
});
<!-- views/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="public/css/main.css">
</head>
<body>
<h1>hello world!</h1>
<!-- 在页面中添加标记，用于解析替换 -->
<h2>{{ foo }}</h2>
<ul>
{{ each todos}}
<li>{{ $value.title }}</li>
{{ /each }}
</ul>
<script src="public/js/main.js"></script>
</body>
</html>
静态托管
// Express 单独提供了一个内置中间件；托管静态资源
app.use('/public', express.static(
path.join(__dirname, './public',
{ // 资源托管的配置项
// index: ['index.html'],
index: false // 不会默认渲染 public/index.html 页面
}
)));
// 托管多个静态资源目录，优先请求前面的资源
// 资源托管的顺序问题
// app.use(express.static('./public'));
// app.use(express.static('./node_modules'));
视频
包括 Express + mongoDB 后台、 Express + art-template 前端。