项目搭建
新建文件
public
views
model
route
然后npm init -y
安装所需要的模块
npm install express mongoose art-template express-art-template
添加app.js
使用express构建服务器
app.js是项目入口文件
const express = require('express');
//创建网站服务器
const app = express();
//监听端口
app.listen(80);
console.log('服务器启动成功');
此时使用 nodemon app.js即刻在localhost看到页面更新
模块化路由
在route中新建
home.js
和admin.js
分别对应博客展示界面和博客管理界面
home.js
const express = require('express');
const home = express.Router();
home.get('/', (req, res) => {
res.send('welcome home');
})
module.exports = home;
admin.js
//引用express框架
const express = require('express');
const admin = express.Router();
admin.get('/', (req, res) => {
res.send('welcome admin')
})
module.exports = admin;
此时输入localhost/home或者/admin即可看到相应界面
使用开放资源文件
下载到public文件夹中
在app.js中修改代码
//处理路径
const path = require('path')
//开放静态资源文件
//__dirname传入当前文件的绝对目录
app.use(express.static(path.join(__dirname, 'public')))
localhost/home/default.html可以看到静态资源文件
views中也要有admin和home文件夹,把静态资源文件复制进去,每个文件的后缀名都要改成art
渲染模板
例如,当访问localhost/admin/login,渲染login模板
本来要写绝对路径,但是每一个route都写绝对路径太麻烦了,于是在app.js中进行配置
//告诉express模板所在的位置
app.set('views', path.join(___dirname, 'views'));
//告诉express模板的默认的后缀是什么
app.set('view engine', 'art');
//当渲染后缀为art的模板时,所使用的模板引擎是什么;模板后缀
app.engine('art', require('express-art-template'));
于是在admin.js中,就可以这样写
admin.get('/login', (req, res) => {
res.render('admin/login')
})
不用写后缀art,因为app中已经配置好了
访问
http://localhost/admin/login
即可看到如图所示登录界面
模板文件中的相对路径不相对于当前文件的路径,而相对于浏览器中地址的请求路径。
此时地址是http://localhost/admin/login,但请求路径不包括文件,请求路径应该是localhost/admin。模板中的路径是相对于admin的。
此时,由于客户端的请求路径/admin和服务器端public文件夹中存储css文件的文件夹路径(也是/admin)相同,所以css文件可以访问得到。
如果将admin的请求路径改为abc(app.js中改为 app.use('/abc', admin);
),那么,在请求localhost/abc时,将无法访问到public中admin下的css文件。外链资源将请求不到。
需要把相对路径改为绝对路径。
即把:
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/base.css">
改为
<link rel="stylesheet" href="/admin/lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/admin/css/base.css">
其他所有的相对路径也都加上/admin/
总之,在模板文件中要以绝对路径代替相对路径。
优化模板
把页面中公共的部分通过子模版抽离。
admin页面的头部和侧边栏都是一样的,那么头部和侧边栏都要抽离到单独的界面当中去。
在views/admin下新建一个common文件夹,里面建立header.art和aside.art,分别存放头部和侧边栏代码。
把公共部分的代码复制进去。
然后再通过模板语法,把抽离出去代码,用特殊的语法引进来。
用 {{include './common/header.art'}}
来代替头部,用{{include './common/aside.art'}}
来代替侧边栏
此处不需要写绝对路径,因为这个路径由模板引擎来解析,而不是通过浏览器来解析。这个相对路径,是相对于当前文件的路径。
在common文件夹中新建layout.art,存放模板文件的骨架。
由于每个页面都有自己的css、js文件,也有自己的主体部分,所以我们要给这些地方挖坑。
使用{{block '坑的名字'}}{{/block}}
在原来的art中把骨架部分删除,用{{extend './common/layout.art'}}
引入骨架。
在user.art中,没有自己的css、js,只有自己的主体部分,于是用{{block '坑的名字'}} //主体部分代码 {{/block}}
将主体部分括起来。在模板解析的时候,就会引入骨架,并且把骨架中{{block 'main'}} {{/block}}
的部分用该主体部分模板填充。
在localhost/admin/user
中可以看到,页面显示正常。
同理,article-edit.art中多出的脚本文件也用{{block 'script'}}{{/block}}
来代替。
在地址localhost/admin/article-edit
,可以看到界面显示正常。