(十一)博客零碎的前台展现页面
BLOG -- 源码目录 ├── config -- 配置文件 ├── model -- 数据库操作 ├── public -- 动态资源 └── route -- 路由 └── home ├── index.js --首页文章详情路由 └── article.js -- 抛出一个文章展现页面的模块。 └── home.js --博客路由└── views -- 模板 └── home └── common ├──layout.art --公共骨架 └── header.art --头部公共局部 ├── article.art -- 文章展现 └── default.art --文章首页详情 └── app.js -- 创立网站服务home.js
- 增加博客文章详情展现页面
- 增加博客首页展现页面
// 援用expess框架const express = require('express');// 创立博客展现页面路由const home = express.Router();// 博客前台首页的展现页面home.get('/', require('./home/index'));// 博客前台文章详情展现页面home.get('/article', require('./home/article'));// 将路由对象做为模块成员进行导出module.exports = home;Index.js
- 抛出一个博客首页文章详情页面模块
- 对于art文件进行渲染
- 对文章汇合函数进行导入，从文章汇合中查问数据
- 多级联结查问populate，来查问作者的用户名
- 导入分页模块，进行分页的操作
- 获取页码值
const { Article } = require('../../model/article');// 导入分页模块const pagination = require('mongoose-sex-page');module.exports = async (req, res) => { // 获取页码值 const page = req.query.page; // 从数据库中查问数据 let result = await pagination(Article).page(page).size(4).display(5).find().populate('author').exec(); // res.send('欢送来到博客首页') // 渲染模板并传递数据 res.render('home/default.art', { result: result });}article.js
- 抛出一个文章展现页面的模块。
对于art文件进行渲染
- 承受客户端传来的文章的id值
- 通过对象解构导入文章汇合构造函数
- 依据id查问文章的具体信息
- 在页面中显示作者的信息，波及了多汇合联结查问populate()
// 导入文章汇合构造函数const { Article } = require('../../model/article');module.exports = async (req, res) => { // 接管客户端传递过去的文章id值 const id = req.query.id; // 依据id查问文章详细信息 let article = await Article.findOne({_id: id}).populate('author'); // res.send('欢送来到博客文章详情页面') res.render('home/article.art', { article});}layout.art
- 寄存对于文章页面的骨架文件
- 挖坑
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>首页</title> <link rel="stylesheet" href="/home/css/base.css"> {{block 'link'}}{{/block}}</head><body> {{block 'main'}}{{/block}}</body></html>default.art
- 进行填坑操作
- 对于article.art 进行同样的操作
- 对文章的内容进行循环 ，判断索引
- 对于cover\title\username等都动态显示数据
- 对内容局部对标签进行替换，将html标记转换为空字符串（应用正则表达式）replace()，对文章内容进行截取substr(),对内容进行原文输入 
- 对页码也是动态显示，each result.display进行循环
- 给每一页的标签增加标签
- 对上一页和下一页进行解决对page进行配置，管制高低页的暗藏和显示性能，利用if的模板语法
- 对于选中的页码增加active的类名
- 对于跳转详情页面的href的地址？id=的模式
{{extend './common/layout.art'}}{{block 'link'}} <link rel="stylesheet" href="/home/css/index.css">{{/block}}{{block 'main'}} {{include './common/header.art'}} <!-- 文章列表开始 --> <ul class="list w1100"> {{each result.records}} <li class="{{$index%2 == 0 ? 'fl' : 'fr'}}"> <a href="/home/article?id={{@$value._id}}" class="thumbnail"> <img src="{{$value.cover}}"> </a> <div class="content"> <a class="article-title" href="/home/article?id={{@$value._id}}">{{$value.title}}</a> <div class="article-info"> <span class="author">{{$value.author.username}}</span> <span>{{dateFormat($value.publishDate, 'yyyy-mm-dd')}}</span> </div> <div class="brief"> {{@$value.content.replace(/<[^>]+>/g, '').substr(0, 90) + '...'}} </div> </div> </li> {{/each}} </ul> <!-- 文章列表完结 --> <!-- 分页开始 --> <div class="page w1100"> {{if result.page > 1}} <a href="/home/?page={{result.page-1}}">上一页</a> {{/if}} {{each result.display}} <a href="/home/?page={{$value}}" class="{{$value == result.page ? 'active' : ''}}">{{$value}}</a> {{/each}} {{if result.page < result.pages}} <a href="/home/?page={{result.page - 0 + 1}}">下一页</a> {{/if}} </div> <!-- 分页完结 -->{{/block}}header.art
- 抽离header的公共局部
<!-- 头部框架开始 --><div class="header"> <div class="w1100"> <!-- 网站logo开始 --> <h1 class="logo fl"> <a href="default.html"><img src="images/logo.png" alt="黑马程序员"></a> </h1> <!-- 网站logo完结 --> <!-- 网站导航开始 --> <ul class="navigation fr"> <li> <a class="active" href="index.html">首页</a> </li> <li> <a href="#">登录</a> </li> </ul> <!-- 网站导航完结 --> </div></div><!-- 头部框架完结 -->article.art
- 对于详情格局进行动态显示的解决
- art-template不会对Html标签进行解析，所以咱们要进行一个转化
{{extend './common/layout.art'}}{{block 'link'}} <link rel="stylesheet" href="/home/css/article.css">{{/block}}{{block 'main'}} {{include './common/header.art'}} <!-- 文章框架开始 --> <div class="article"> <div class="w1100"> <div class="container"> <div class="article-header"> <h3 class="article-title">{{article.title}}</h3> <div class="article-info"> <span class="author">{{article.author.username}}</span> <span>{{dateFormat(article.publishDate, 'yyyy-mm-dd')}}</span> </div> </div> <div class="article-content"> {{@article.content}} </div> <div class="article-comment"> ··· </div> </div> </div> </div> </div> <!-- 文章框架完结 -->{{/block}}