NodeJS简易博客系统（九）后台管理实现及项目总结

素颜马尾好姑娘i 2022-05-14 14:26 413阅读 0赞

功能描述及流程在上一篇已经说明，现在来写具体实现过程。

# 一、页面实现 #

## （1）模板 ##

首页模板main\_template.html

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;博客后台管理&lt;/title&gt;
    &lt;link rel="stylesheet" href="/public/css/bootstrap.css"&gt;
    &lt;link rel="stylesheet" href="/public/css/admin.css"&gt;
    &lt;script type="text/javascript" src="/public/js/jquery.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/public/js/bootstrap.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/public/js/admin.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
{% if userInfo.isadmin %}
&lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
        &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="/admin"&gt;后台管理&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
            &lt;ul class="nav navbar-nav"&gt;
                &lt;li&gt;&lt;a href="/admin/user"&gt;用户信息&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/admin/category"&gt;所有分类&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/admin/category/add"&gt;添加分类&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/admin/content"&gt;所有博文&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/admin/content/add"&gt;添加博文&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="nav navbar-nav navbar-right"&gt;
                &lt;li class="dropdown"&gt;
                    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;{
       {userInfo.username}}&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;ul class="dropdown-menu"&gt;
                        &lt;li&gt;&lt;a href="/"&gt;退出管理&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;
{% block main %}
{% endblock %}
{% else %}
&lt;div class="welcome" &gt;
    &lt;h1&gt;对不起，你不是管理员！&lt;/h1&gt;
    &lt;p&gt;&lt;a class="btn btn-primary btn-lg" href="/" role="button"&gt;返回上一步&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
{% endif %}
&lt;/body&gt;
&lt;/html&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

首页index.html

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre><code>{% extends "main_template.html" %}
{% block main %}
&lt;div class="welcome" &gt;
    &lt;h1&gt;Welcome，管理员！&lt;/h1&gt;
    &lt;p&gt;欢迎您管理后台！&lt;/p&gt;
&lt;/div&gt;
{% endblock %}</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

用户信息userindex.html

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre><code>{% extends "main_template.html" %}

{% block main %}

&lt;ol class="breadcrumb"&gt;
    &lt;li&gt;&lt;a href="#"&gt;管理首页&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;用户信息&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;table class="table table-bordered table-hover table-striped" style="color:#fc6423"&gt;
    &lt;tr &gt;
        &lt;th&gt;用户ID&lt;/th&gt;
        &lt;th&gt;用户名&lt;/th&gt;
        &lt;th&gt;密码&lt;/th&gt;
        &lt;th&gt;是否为管理员&lt;/th&gt;
    &lt;/tr&gt;
    {% for user in users %}
    &lt;tr&gt;
        &lt;td&gt;{
       {user._id.toString()}}&lt;/td&gt;
        &lt;td&gt;{
       {user.username}}&lt;/td&gt;
        &lt;td&gt;{
       {user.password}}&lt;/td&gt;
        &lt;td&gt;{
       {user.isadmin}}&lt;/td&gt;
    &lt;/tr&gt;
    {% endfor %}

&lt;/table&gt;
&lt;nav aria-label="..."&gt;
    &lt;ul class="pager"&gt;
        &lt;li&gt;&lt;a href="/admin/user?page=1"&gt;首页&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/admin/user?page={
       {page-1}}"&gt;上一页&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;span&gt;共{
       {counts}}条数据&lt;/span&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/admin/user?page={
       {page+1}}"&gt;下一页&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/admin/user?page={
       {total}}"&gt;最后一页&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;
{% endblock %}</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

所有分类category.html

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre><code>{% extends "main_template.html" %}

{% block main %}

&lt;ol class="breadcrumb"&gt;
    &lt;li&gt;&lt;a href="#"&gt;管理首页&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;分类管理&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;table class="table table-bordered table-hover table-striped" style="color:#fc6423"&gt;
    &lt;tr &gt;
        &lt;th&gt;分类ID&lt;/th&gt;
        &lt;th&gt;分类名称&lt;/th&gt;
        &lt;th&gt;分类操作&lt;/th&gt;
    &lt;/tr&gt;
    {% for category in categories %}
    &lt;tr&gt;
        &lt;td&gt;{
       {category._id.toString()}}&lt;/td&gt;
        &lt;td&gt;{
       {category.name}}&lt;/td&gt;
        &lt;td&gt;
            &lt;a href="/admin/category/edit?id={
       {category._id.toString()}}"&gt;修改&lt;/a&gt; |
            &lt;a href="/admin/category/delete?id={
       {category._id.toString()}}"&gt;删除&lt;/a&gt;
        &lt;/td&gt;

&lt;/tr&gt;
    {% endfor %
&lt;/table&gt;

{% endblock %}</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

添加分类addcategory.html

分类编辑editcategory.html

所有博文content.html

添加博文addcontent.html

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre><code>{% extends "main_template.html" %}
{% block main %}
&lt;ol class="breadcrumb"&gt;
    &lt;li&gt;&lt;a href="#"&gt;管理首页&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;添加博文&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;form role="form" method="post" style="font-size: 22px;text-align: center"&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="name"&gt;博文标题&lt;/label&gt;
        &lt;input type="text" class="form-control" name="name" id="name" placeholder="请填写博文名称"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="category"&gt;请选择分类&lt;/label&gt;
        &lt;select name="category" id="category" class="form-control"&gt;
            {% for category in categories %}
            &lt;option value="{
       {category.id}}"&gt;{
       {category.name}}&lt;/option&gt;
            {% endfor %}
        &lt;/select&gt;
        &lt;div class="form-group" style="margin-top: 20px;font-size: 20px;"&gt;
            &lt;label for="description"&gt;请填写简介&lt;/label&gt;
            &lt;textarea name="description" id="description" class="form-control" rows="4"
                      placeholder="请输入内容简介" style="overflow: auto;"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;div class="form-group" style="margin-top: 20px;font-size: 20px;"&gt;
            &lt;label for="content"&gt;请填写正文&lt;/label&gt;
            &lt;textarea name="content" id="content" class="form-control" rows="15" placeholder="请输入内容"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary btn-lg" style="margin-top: 50px;"&gt;新增博文&lt;/button&gt;
&lt;/form&gt;
{% endblock %}</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

博文编辑editcontent.html

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre><code>{% extends "main_template.html" %}
{% block main %}
&lt;ol class="breadcrumb"&gt;
    &lt;li&gt;&lt;a href="#"&gt;管理首页&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;修改博文&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;form role="form" method="post" style="font-size: 22px;text-align: center"&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="name"&gt;博文标题&lt;/label&gt;
        &lt;input type="text" class="form-control" name="name" id="name" value="{
       {info.title}}"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="category"&gt;请选择分类&lt;/label&gt;
        &lt;select name="category" id="category" class="form-control"&gt;
            {% for category in categories %}
                {% if info.category._id.toString() == category._id.toString() %}
                    &lt;option value="{
       {category.id}}" selected&gt;{
       {category.name}}&lt;/option&gt;
                {% else %}}
                    &lt;option value="{
       {category.id}}" &gt;{
       {category.name}}&lt;/option&gt;
                {% endif %}
            {% endfor %}
        &lt;/select&gt;
        &lt;div class="form-group" style="margin-top: 20px;font-size: 20px;"&gt;
            &lt;label for="description"&gt;请填写简介&lt;/label&gt;
            &lt;textarea name="description" id="description" class="form-control" rows="4"
                      style="overflow: auto;"&gt;{
       {info.description}}&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;div class="form-group" style="margin-top: 20px;font-size: 20px;"&gt;
            &lt;label for="content"&gt;请填写正文&lt;/label&gt;
            &lt;textarea name="content" id="content" class="form-control" rows="15"
                      placeholder="请输入内容"&gt;{
       {info.composition}}&lt;/textarea&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-primary btn-lg" style="margin-top: 50px;"&gt;提交修改&lt;/button&gt;
&lt;/form&gt;
{% endblock %}</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

删除分类确认页面confirm.html

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre><code>{% extends "main_template.html" %}
{% block main %}
&lt;div class="welcome" &gt;
    &lt;h1&gt;您确定删除？&lt;/h1&gt;
    &lt;form role="form" method="post" style="font-size: 22px;text-align: center" action="/admin/category/delete?id={
       {id}}"&gt;
        &lt;button type="submit" class="btn btn-primary btn-lg"&gt;确定！&lt;/button&gt;
        &lt;a class="btn btn-primary btn-lg" href="/admin/category"&gt;再想想&lt;/a&gt;
    &lt;/form&gt;
&lt;/div&gt;
{% endblock %}</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

删除博文确认页面confirm2.html

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre><code>{% extends "main_template.html" %}
{% block main %}
&lt;div class="welcome" &gt;
    &lt;h1&gt;您确定删除？&lt;/h1&gt;
    &lt;form role="form" method="post" style="font-size: 22px;text-align: center" action="/admin/content/delete?id={
       {id}}"&gt;
        &lt;button type="submit" class="btn btn-primary btn-lg"&gt;确定！&lt;/button&gt;
        &lt;a class="btn btn-primary btn-lg" href="/admin/content"&gt;再想想&lt;/a&gt;
    &lt;/form&gt;
&lt;/div&gt;
{% endblock %}</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

操作成功页面success.html

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre><code>{% extends "main_template.html" %}
{% block main %}
&lt;div class="welcome" &gt;
    &lt;h1&gt;操作成功，请点击返回上一页面&lt;/h1&gt;
    &lt;p&gt;&lt;a class="btn btn-primary btn-lg" href="/admin/category" role="button"&gt;返回&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
{% endblock %}</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

操作失败页面error.html

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre><code>{% extends "main_template.html" %}
{% block main %}
&lt;div class="welcome" &gt;
    &lt;h1&gt;操作无效，请返回并重试！&lt;/h1&gt;
    &lt;p&gt;&lt;a class="btn btn-primary btn-lg" href="/admin/category/add" role="button"&gt;返回上一步&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
{% endblock %}</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

## （2）样式文件 ##

admin.css

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre><code>.welcome {
    text-align: center;
}
.table th, .table td {
    text-align: center;
    vertical-align: middle!important;
}
.table{
    table-layout: fixed;
}
.pager{
    font-size: 20px;
}</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

# 二、routers代码 #

admin.js

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <pre><code>let express = require("express");
let router = express.Router();
let User = require("../models/user");
let Category = require("../models/category");
let Content = require("../models/content");
router.get("/",function(req,res){
    res.render("admin/index",{userInfo:req.userInfo});
});
router.get("/user",function(req,res){
    let page = Number(req.query.page||1);
    // 默认每页显示8条数据
    let limit = 8;
    let skip = (page-1)*limit;
    let total;
    let counts;
    User.count().then(function(count){
        total = Math.ceil(count/limit);
        page = Math.max(1,page);
        page = Math.min(page,total);
        counts = count;
    });
    User.find().limit(limit).skip(skip).then(function(users){
        res.render("admin/userindex",{
            userInfo:req.userInfo,
            users:users,
            page:page,
            total:total,
            counts:counts
        })
    });

});
router.get("/category",function(req,res){
    Category.find().sort({_id:-1}).then(function(categories){
        res.render("admin/category",{
            userInfo:req.userInfo,
            categories:categories
        });
    });

});
router.get("/category/add",function(req,res){
    res.render("admin/addcategory",{userInfo:req.userInfo});

});
router.post("/category/add",function(req,res){
    let name =req.body.name||"";
    if(name==""){
        res.render("admin/error",{userInfo:req.userInfo});
    }
    else{
        Category.findOne({name:name},function(err,info){
            if(err){
                console.log(err);
            }
            if(info){
                res.render("admin/error",{userInfo:req.userInfo});
                return false;
            }
            let newcate = new Category({
                name:name
            });
            newcate.save();
            res.render("admin/success",{userInfo:req.userInfo});

});
    }
});
router.get("/category/edit",function(req,res){
    let cateid = req.query.id||"";
    Category.find({id:cateid}).then(function(cateinfo){
        res.render("admin/categoryedit",{
            userInfo:req.userInfo ,
            name:cateinfo.name
        });
    });

});
router.post("/category/edit",function(req,res){
    let name =req.body.name||"";
    let id = req.query.id||"";

if(name==""){
        res.render("admin/error",{userInfo:req.userInfo});
        return false;
    }else{
        Category.findOne({_id:id},function(err,info){
            if(err){
                console.log(err);
            }
            if(info){
                console.log(info);
                info.name = name;
                info.save();
                res.render("admin/success",{userInfo:req.userInfo});
            }

});
    }
});
router.get("/category/delete",function(req,res){
        let id = req.query.id||"";
        //console.log(id);
        res.render("admin/confirm",{
            userInfo:req.userInfo,
            id:id
        });
});
router.post("/category/delete",function(req,res){
    let id = req.query.id||"";
    //console.log(id);
    Category.remove({_id:id}).then(function(){
        res.render("admin/success",{
            userInfo:req.userInfo
        });
    });

});
router.get("/content",function(req,res){    Content.find().populate(["category","user"]).sort({_id:-1}).then(function(contents){
        res.render("admin/content",{
            userInfo:req.userInfo,
            contents:contents
        });
    });

});
router.get("/content/add",function(req,res){
    let cate=null;
    Category.find().then(function(categories){
        cate = categories;
        res.render("admin/addcontent",{
            userInfo:req.userInfo,
            categories :cate
        });
    });

});
router.post("/content/add",function(req,res){
    let title = req.body.name||"";
    let category = req.body.category||"";
    let description = req.body.description||"";
    let content = req.body.content||"";
    if(title==""||category==""||description==""||content==""){
        res.render("admin/addok",{
            userInfo:req.userInfo,
            message:"还有未填入的信息，请重新填入！"
        });
        return false;
    }else {
        let newcontent = new Content({
            title:title,
            category:category,
            description:description,
            composition:content,
            addtime:new Date(),
            num:0,
            user :req.userInfo._id.toString()
        });
        newcontent.save();
        res.render("admin/addok",{
            userInfo:req.userInfo,
            message : "更新博文成功"
        });
    }

});
router.get("/content/edit",function(req,res){
    let cate=null;
    let id = req.query.id||"";
    Category.find().then(function(categories){
        cate = categories;
    });

Content.findOne({_id:id}).populate("category").then(function(info){
        //console.log(info);
        res.render("admin/editcontent",{
            userInfo:req.userInfo,
            info :info,
            categories:cate
        });
    });

});
router.post("/content/edit",function(req,res){
    let id = req.query.id||"";
    let title = req.body.name||"";
    let category = req.body.category||"";
    let description = req.body.description||"";
    let content = req.body.content||"";
    if(title==""||category==""||description==""||content==""){
        res.render("admin/addok",{
            userInfo:req.userInfo,
            message:"无效的修改，请重新修改！"
        });
        return false;
    }else {
        Content.update({_id:id},{
            title : title,
            category: category,
            description : description,
            content : content,
            addtime:new Date(),
            user :req.userInfo._id.toString()
        }).then(function(){
            res.render("admin/addok",{
                userInfo:req.userInfo,
                message : "修改成功！"
            });
        });

}

});
router.get("/content/delete",function(req,res){
    let id = req.query.id||"";
    res.render("admin/confirm2",{
        userInfo:req.userInfo,
        id:id
    });
});
router.post("/content/delete",function(req,res){
    let id = req.query.id||"";
    //console.log(id);
    Content.remove({_id:id}).then(function(){
        res.render("admin/addok",{
            userInfo:req.userInfo,
            message : "删除成功！点击返回上一页！"
        });
    });

});
module.exports = router;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

# 三、运行效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2Mzk5Nw_size_27_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2Mzk5Nw_size_27_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2Mzk5Nw_size_27_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2Mzk5Nw_size_27_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2Mzk5Nw_size_27_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2Mzk5Nw_size_27_color_FFFFFF_t_70 5][]

# 四、项目总结 #

至此，这个简单的项目就完结了，作为一个入门项目，简单是必须的，不过，通过这个我也学到了express框架、mongodb、mongoose数据库框架的基本使用，express框架作为一个轻量级的web框架，小而快是它的特性。这个项目也有了最基本的业务逻辑，前端向后端提交数据，提交方法根据不同需求可以是get、post、put、delete方法，其中本项目没有使用到后面两个方法，后端收到前端提交的数据后，用body-parse框架去获取发送过来的数据，这些数据由业务逻辑代码作相应的解析和格式化后请求数据库信息并反馈给前端，前端用swig模板引擎去作渲染，这就是体现了一个web应用的基本数据传递的流程。当然，nodejs和express以及mongoose还有很多强大的功能待作者后续研究，以上便是我对这个小项目的总结。所有的代码都贴出来了，如果还需要源码请转：[https://download.csdn.net/download/weixin\_42363997/10745703][https_download.csdn.net_download_weixin_42363997_10745703]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2Mzk5Nw_size_27_color_FFFFFF_t_70]: /images/20220504/f134d8348a0449f8b5a8044f7c26dd4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2Mzk5Nw_size_27_color_FFFFFF_t_70 1]: /images/20220504/47057061347e4167b1c4f89f9fe76c01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2Mzk5Nw_size_27_color_FFFFFF_t_70 2]: /images/20220504/ebb1d50cfb66481c823fa2b5bbfa7f31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2Mzk5Nw_size_27_color_FFFFFF_t_70 3]: /images/20220504/1f4f71d2d8554465badce7d06a3133c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2Mzk5Nw_size_27_color_FFFFFF_t_70 4]: /images/20220504/077838820e9140d299d7775c244cdc49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM2Mzk5Nw_size_27_color_FFFFFF_t_70 5]: /images/20220504/c1736894f0b94bf2b577bf5fe75edccc.png
[https_download.csdn.net_download_weixin_42363997_10745703]: https://download.csdn.net/download/weixin_42363997/10745703