（黑马程序员）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 文件。
{{ include './common/header.art' }}{{ include './common/aside.art' }}打开 admin.js 文件，创建 user 路由：
// 创建用户列表路由
admin.get('/user', (req, res) => {res.render('admin/user.art', {})
});在浏览器中打开：http://localhost/admin/user ，可以看到：
1.6、模板 html 的骨架抽离
在 common 目录下，新建 layout.art 文件：
打开 user.art 文件，引用骨架 layout：
{{extend './common/layout.art'}}{{block 'main'}}{{ include './common/header.art' }}{{ include './common/aside.art' }}用户
找到1个用户新增用户ID 用户名 邮箱 角色 状态 操作 5b9a716cb2d2bf17706bcc0a wangjian wjb19891223@163.com 超级管理员 正常 5b9a716cb2d2bf17706bcc0a wangjian wjb19891223@163.com 普通用户 禁用 5b9a716cb2d2bf17706bcc0a wangjian wjb19891223@163.com 普通用户 启用
{{/block}}在浏览器中刷新页面，发现没有问题。把其他几个模板文件也都修改下。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！