6、构建博客管理页面模板
1）先把静态资源复制粘贴到 public 目录下：
2）开放静态资源文件
打开 app.js 文件：
// 引入 express 框架
const express = require('express');
// 处理路径的模块
const path = require('path');
// 创建网站服务器
const app = express();
// 开放静态资源文件
app.use(express.static(path.join(__dirname, 'public')));
// 引入路由模块
const home = require('./route/home');
const admin = require('./route/admin');
// 将路由和请求路径进行匹配
app.use('/home', home);
app.use('/admin', admin);
// 监听端口
app.listen(80);
console.log('网站服务器启动成功，请访问localhost');在浏览器中输入：http://localhost/home/default.html ，可以访问到静态页面了。
因为在 html 文件中要拼接后台的数据，所以要把所有的 html 文件剪切到 views 目录下对应的文件夹中，也可以都改为 .art 文件。（如果改为 .art 文件，那么下面的模板配置要写为 art）
1.3、渲染模板
当客户端访问的是 / 或 /login 的时候渲染登录页面
扫描二维码关注公众号，回复：
13418039 查看本文章
先进行模板配置，打开 app.js文件：
// 告诉 express 框架模板所在的位置
app.set('views', path.join(__dirname, 'views'));
// 告诉 express 框架模板的默认后缀是什么
app.set('view engine', 'html');
// 渲染后缀为 html 的模板时，所使用的模板引擎是什么
app.engine('html', require('express-art-template'));注意：如果上面 .html 文件都改为了 .art 文件，那么这里要写为：
// 告诉 express 框架模板所在的位置
app.set('views', path.join(__dirname, 'views'));
// 告诉 express 框架模板的默认后缀是什么
app.set('view engine', 'art');
// 渲染后缀为 art 的模板时，所使用的模板引擎是什么
app.engine('art', require('express-art-template'));// 引入 express 框架
const express = require('express');
// 处理路径的模块
const path = require('path');
// 创建网站服务器
const app = express();
// 告诉 express 框架模板所在的位置
app.set('views', path.join(__dirname, 'views'));
// 告诉 express 框架模板的默认后缀是什么
app.set('view engine', 'art');
// 渲染后缀为 art 的模板时，所使用的模板引擎是什么
app.engine('art', require('express-art-template'));
// 开放静态资源文件
app.use(express.static(path.join(__dirname, 'public')));
// 引入路由模块
const home = require('./route/home');
const admin = require('./route/admin');
// 将路由和请求路径进行匹配
app.use('/home', home);
app.use('/admin', admin);
// 监听端口
app.listen(80);
console.log('网站服务器启动成功，请访问localhost');在浏览器中输入：http://localhost/admin/login ，可以看到：登录页就被渲染出来了
1.4、模板内部外链资源的路径问题
查看页面的源代码，可以看到头部样式文件的路径是相对路径，而且这个相对路径是相对浏览器地址中的请求路径。view-source:http://localhost/admin/login
点击 base.css 可以看到：地址上多了一个 /admin 目录
view-source:http://localhost/admin/css/base.css
但是这时候 css 文件可以正常显示，这是因为客户端的请求路径 /admin 和服务器端存储 css 文件的路径目录，正好是相同的；一旦不相同就会出现问题。我们可以测试下，打开 app.js 文件，把 admin 的请求路径改为 abc：然后在浏览器中也输入 ：http://localhost/abc/login ，这是可以看到没有样式了：
app.use('/abc', admin);
现在可以把 abc 改回 admin 了，顺便把其他的模板文件都修改下。
1.5、优化模板
将模板中的公共部分，抽离到单独的文件中。
通过观察 admin 目录下的各个 .art 文件，可以把头部和侧边栏都抽离出来。
在 views - admin 目录下，新建 common 文件夹，存放公共部分文件。
新建 header.art 存放头部代码，新建 aside.art 存放侧边栏部分代码。
然后在各主文件中引用 header.art 和 aside.art 文件。
<body>
<!-- 子模板的相对路径，相对的是当前文件，因为它是有模板引擎解析的，而不是浏览器 -->
{
{ include './common/header.art' }}
<!-- 主体内容 -->
<div class="content">
{
{ include './common/aside.art' }}
<div class="main">打开 admin.js 文件，创建 user 路由：
// 创建用户列表路由
admin.get('/user', (req, res) => {
res.render('admin/user.art', {})
});在浏览器中打开：http://localhost/admin/user ，可以看到：
1.6、模板 html 的骨架抽离
在 common 目录下，新建 layout.art 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/admin/lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/admin/css/base.css">
{
{block 'link'}} {
{/block}}
</head>
<body>
{
{block 'main'}} {
{/block}}
<script src="/admin/lib/jquery/dist/jquery.min.js"></script>
<script src="/admin/lib/bootstrap/js/bootstrap.min.js"></script>
{
{block 'script'}} {
{/block}}
</body>
</html>打开 user.art 文件，引用骨架 layout：
{
{extend './common/layout.art'}}
{
{block 'main'}}
<!-- 子模板的相对路径，相对的是当前文件，因为它是有模板引擎解析的，而不是浏览器 -->
{
{ include './common/header.art' }}
<!-- 主体内容 -->
<div class="content">
{
{ include './common/aside.art' }}
<div class="main">
<!-- 分类标题 -->
<div class="title">
<h4>用户</h4>
<span>找到1个用户</span>
<a href="user-edit.html" class="btn btn-primary new">新增用户</a>
</div>
<!-- /分类标题 -->
<!-- 内容列表 -->
<table class="table table-striped table-bordered table-hover custom-table">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>角色</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>5b9a716cb2d2bf17706bcc0a</td>
<td>wangjian</td>
<td>[email protected]</td>
<td>超级管理员</td>
<td>正常</td>
<td>
<a href="user-edit.html" class="glyphicon glyphicon-edit"></a>
<i class="glyphicon glyphicon-remove" data-toggle="modal" data-target=".confirm-modal"></i>
</td>
</tr>
<tr>
<td>5b9a716cb2d2bf17706bcc0a</td>
<td>wangjian</td>
<td>[email protected]</td>
<td>普通用户</td>
<td>禁用</td>
<td>
<a href="user-edit.html" class="glyphicon glyphicon-edit"></a>
<i class="glyphicon glyphicon-remove" data-toggle="modal" data-target=".confirm-modal"></i>
</td>
</tr>
<tr>
<td>5b9a716cb2d2bf17706bcc0a</td>
<td>wangjian</td>
<td>[email protected]</td>
<td>普通用户</td>
<td>启用</td>
<td>
<a href="user-edit.html" class="glyphicon glyphicon-edit"></a>
<i class="glyphicon glyphicon-remove" data-toggle="modal" data-target=".confirm-modal"></i>
</td>
</tr>
</tbody>
</table>
<!-- /内容列表 -->
<!-- 分页 -->
<ul class="pagination">
<li>
<a href="#">
<span>«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#">
<span>»</span>
</a>
</li>
</ul>
<!-- /分页 -->
</div>
</div>
<!-- /主体内容 -->
<!-- 删除确认弹出框 -->
<div class="modal fade confirm-modal">
<div class="modal-dialog modal-lg">
<form class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">请确认</h4>
</div>
<div class="modal-body">
<p>您确定要删除这个用户吗?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<input type="submit" class="btn btn-primary">
</div>
</form>
</div>
</div>
<!-- /删除确认弹出框 -->
{
{/block}}在浏览器中刷新页面，发现没有问题。把其他几个模板文件也都修改下。