本文主要是介绍（黑马程序员）MongoDB + Express + art-template 项目实例-博客管理系统 第二页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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@163.com</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@163.com</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@163.com</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 项目实例-博客管理系统 第二页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
