博客后台管理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

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

<!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}}

博客后台管理DAY11

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

日月彗心

引用和评论

vue2移动端电商项目，商城，仿蘑菇街（总结）

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

CSS 现在终于支持高度 auto 过渡动画了