web前端 | 博客（一）项目搭建

项目搭建

新建文件

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，可以看到界面显示正常。