(一)路由跳转和抽取公共部分代码
BLOG -- 源码目录
├── model -- 数据库操作
└── public -- 静态资源
├── home --博客展示页面
└── admin --博客管理页面
└── route -- 路由
├── admin.js --博客管理页面路由
└── home.js --博客展示页面路由
└── views -- 模板
├── home --博客展示页面art模板
└── admin --博客管理页面art模板
└──common --公共部分art模板
├── header --头部公共模板
├── aside --侧边栏公共模板
└── layout --骨架公共模板
├── article-edit.art
├── article.art
├── user.art
└── user-edit.art
└── app.js -- 创建网站服务1.2 案例初始化
建立项目所需文件夹
public 静态资源 model 数据库操作 route 路由 views 模板初始化项目描述文件
npm init -y下载项目所需第三方模块
npm install express mongoose art-template express-art-templateapp.js
- 创建网站服务器，引用expess框架
- 构建模块化路由，引入路由模块，为路由匹配请求路径
- 构建博客管理页面模板：引入路径，开放静态资源文件
渲染后缀为art的模板：app.set确认路径，引入express-art-template（一种作用域预声明的技术来优化模板渲染速度）模板引擎进行渲染
// 引用expess框架 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')
admin.js
- 创建模块化路由：引入express框架，创建页面展示页面路由，将路由对象作为模块成员导出
home.js与admin.js类似不做赘述
// 引用expess框架 const express = require('express'); // 创建博客展示页面路由 const admin = express.Router(); // 测试登录页面 admin.get('/', (req,res)=>{res.send('欢迎登录博客展示页面')}); // 将路由对象做为模块成员进行导出 module.exports = admin;
6.layout.js
- 优化模板（抽离公共部分），建立骨架模板，精简代码
- 类似的还有aside.js header.js都是把公共部分的代码抽离
<!DOCTYPE html> <html lang="en"> <head> ··· {{block 'link'}}{{/block}} </head> <body> {{block 'main'}} {{/block}} ··· {{block 'script'}} {{/block}} </body> </html>8.user.art
- 对于layout.art的填充，类似的包括user-edit.art article.art
- 将静态资源中的html提出来，后缀改为art
{{extend './common/layout.art'}} {{block 'main'}} <!-- 子模板的相对路径相对的就是当前文件 因为它是由模板引擎解析的 而不是浏览器 --> {{include './common/header.art'}} <!-- 主体内容 --> <div class="content"> {{include './common/aside.art'}} <div class="main"> <!-- 分类标题 --> <div class="title"> ··· <!-- /分类标题 --> <!-- 内容列表 --> ··· <!-- /内容列表 --> <!-- 分页 --> ··· <!-- /分页 --> </div> </div> <!-- /主体内容 --> {{/block}} {{block 'script'}} <script type="text/javascript"> ··· </script> {{/block}}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。