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的时候渲染登录页面
先进行模板配置，打开 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>wjb19891223@</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>wjb19891223@</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>wjb19891223@</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}}
在浏览器中刷新页面，发现没有问题。把其他几个模板文件也都修改下。
如果觉得《（黑马程序员）MongoDB + Express + art-template 项目实例-博客管理系统 第二页》对你有帮助，请点赞、收藏，并留下你的观点哦！
