关于前端:博客后台管理DAY11

12次阅读

共计 3926 个字符，预计需要花费 10 分钟才能阅读完成。

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(), 对内容进行原文输入 &nbsp
对页码也是动态显示，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}}

正文完