博客后台管理DAY11

(十一)博客系统的前台展示页面

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

• 存放关于文章页面的骨架文件
• 挖坑

    
    
    
    {{block 'link'}}{{/block}}


    {{block 'main'}}{{/block}}

default.art

• 进行填坑操作
• 对于article.art 进行同样的操作
• 对文章的内容进行循环 ，判断索引
• 对于cover\title\username等都动态显示数据
• 对内容部分对标签进行替换，将html标记转换为空字符串（使用正则表达式）replace()，对文章内容进行截取substr(),对内容进行原文输出 
• 对页码也是动态显示，each result.display进行循环
• 给每一页的标签添加标签
• 对上一页和下一页进行处理对page进行配置，控制上下页的隐藏和显示功能，利用if的模板语法
• 对于选中的页码添加active的类名
• 对于跳转详情页面的href的地址？id=的形式

{{extend './common/layout.art'}}

{{block 'link'}}
    
{{/block}}

{{block 'main'}}
    {{include './common/header.art'}}
    
    

        {{each result.records}}
        

            
                
            
            

                {{$value.title}}
                

                    {{$value.author.username}}
                    {{dateFormat($value.publishDate, 'yyyy-mm-dd')}}
                
                

                    {{@$value.content.replace(/<[^>]+>/g, '').substr(0, 90) + '...'}}
                
            
        
        {{/each}}
    
    

    
    

        {{if result.page > 1}}
        上一页
        {{/if}}
        {{each result.display}}
        {{$value}}
        {{/each}}
        {{if result.page < result.pages}}
        下一页
        {{/if}}
    
    
{{/block}}

header.art

• 抽离header的公共部分

    

        
        

            
        
        
        
        

            

                首页
            
            

                登录
            
        
        
    

article.art

• 对于详情格式进行动态显示的处理
• art-template不会对Html标签进行解析，所以我们要进行一个转化

{{extend './common/layout.art'}}

{{block 'link'}}
    
{{/block}}

{{block 'main'}}
    {{include './common/header.art'}}
    
    

        

            

                

                    
{{article.title}}
                    

                        {{article.author.username}}
                        {{dateFormat(article.publishDate, 'yyyy-mm-dd')}}
                    
                
                

                    {{@article.content}}
                
                

                ···
                    
                
            
        
    

{{/block}}