【项目实战】nodejs 实战-图书管理系统

曾经终败给现在 2022-02-24 20:16 524阅读 0赞

用了几天时间走了一趟沐风ol的实战教程，很感谢Up主，因为我怕学了忘，所以记录下来，以便后来进行观看记录，这几天，我彻底明白了前后端如何分离操作，如何连接数据库操作，如何在前台渲染数据，如何区分后台渲染和前台渲染。接下来，我还要把这个应用到我毕设上面，用Vue框架实现的工程和Node.js融合，最后，再次感谢Up主的[实战视频][Link 1]。

## 第一步：新建js文件先安装这两个指令 ##

npm install --save art-template
    npm install --save express

## 第二步：渲染data数据，并展示出来 ##

// node.js
    // 模板引擎整合
    
    const express = require('express');
    
    const path = require('path');
    
    const template = require('art-template');
    
    const app = express();
    
    //设置模板的路径
    
    app.set('views',path.join(__dirname,'views'));
    
    //设置模板引擎
    
    app.set('view engine','art');
    
    //使express兼容art-template模板引擎
    
    app.engine('art',require('express-art-template'));
    
    app.get('/list',(req,res)=>{
        let data = {
            title:'水果',
            list:['apple','orange','banana']
        }
        res.render('list',data);
    });
    
    app.listen(3000,()=>{
        console.log('runing....');
    });

> list.art

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>模板</title>
      </head>
      <body>
            <div>{
       {title}}</div>
            <div>
            <ul>
                {
       {each list}}
                <li>{
       {$value}}</li>
                {
       {/each}}
            </ul>
            </div>
      </body>
    </html>

## 第三步：实现json数据的业务模块、路由模块设置、以及json数据的渲染 ##

> // index.js

//图书馆管理系统入口文件
    
    const express = require('express');
    const router = require('./router.js');//第一步
    const path = require('path');
    const template = require('art-template');
    const bodyParser = require('body-parser');
    const app = express();
    
    //设置模板的路径
    
    app.set('views',path.join(__dirname,'views'));
    
    //设置模板引擎
    
    app.set('view engine','art');
    
    //使express兼容art-template模板引擎
    
    app.engine('art',require('express-art-template'));
    
    //处理请求参数
    //挂在参数处理中间件（post)
    app.use(bodyParser.urlencoded({extended:false}));
    //处理json格式的参数
    app.use(bodyParser.json());
    
    
    //启动服务器功能
    //配置路由
    app.use(router);//第二步
    //监听端口
    app.listen(3000,()=>{
        console.log('running...');
    })

> // router.js

// 路由模块
    const express = require('express');
    const router = express.Router();
    const service = require('./service.js');
    
    //路由处理
    router.get('/',service.showIndex);
    
    module.exports = router;

> // service.js

// 业务模块
    
    //加载所有数据
    const data = require('./data.json');
    
    //渲染主页面
    exports.showIndex = (req,res)=>{
        res.render('index',{list:data});
    }

> index.art

<tbody>
         {
       {each list}}
         <tr>
             <td>{
       {$value.id}}</td>
             <td>{
       {$value.name}}</td>
             <td>{
       {$value.author}}</td>
             <td>{
       {$value.category}}</td>
             <td>{
       {$value.desc}}</td>
             <td><a href="#">修改</a>|<a href="#">删除</a></td>
         </tr>
         {
       {/each}}
     </tbody>

运行node index.js，打开localhost:3000就可以看到效果了。

> 目录截图

![目录截图][20190402014612645.png]

## 第四步：样式单独抽取到静态资源里 ##

> 目录

![在这里插入图片描述][20190402185445665.png]

> index.js

![在这里插入图片描述][20190402185516313.png]

> index.art

![在这里插入图片描述][20190402185527382.png]  
添加图书功能：

> index.art 通过href跳转到toAddBook

![在这里插入图片描述][20190402185553527.png]

> router.js service.toAddBook是方法

![在这里插入图片描述][20190402185602320.png]

> service.js

![在这里插入图片描述][20190402185612258.png]

> addBook.art

![在这里插入图片描述][20190402185623742.png]

data.json格式化快捷键Ctrl+K Ctrl+F

初始界面：通过action发起post请求

> addBook.art

![在这里插入图片描述][20190402185638295.png]

> router.js 执行service的addBook方法

![在这里插入图片描述][20190402185645782.png]

> service.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 1]  
解释：  
//第一步，执行方法，获取表单数据req.body  
把info的内容赋值给book  
//第二步，获取当前json数据的最大那个id，赋给新增的数据，所以需要执行自动生成图书编号的函数，把每一个item的id赋给新数组arr，并且返回arr数组的最大位置。  
//第三步，把新增id赋给新的图书，把数据存入内存data里面。  
//第四步，需要进行文件存取操作，引入path和fs模块  
//第五步，fs.writeFile(写入路径，写入内容（把data转换成字符串，因为data是文本文件))

注意：  
//会清除json文件的所有空格  
![在这里插入图片描述][20190402185835587.png]  
//会格式化数据的时候，前面填充四个空格  
![在这里插入图片描述][20190402185846261.png]  
注意：记得重启node服务

## 第五步：修改图书信息（删除请看第十步） ##

分两步实现：查询、修改

> index.art

点击跳转到toEditBook，并且传输id值  
![在这里插入图片描述][20190402215243640.png]

> router.js

跳转到toEditBook  
![在这里插入图片描述][20190402215401535.png]  
执行方法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 2]  
执行完跳转到editBook.art模板里，同时渲染指定id的内容到表单里

以上为修改的第一步，查询渲染

> editBook.art

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 3]

红框内容告诉服务器编辑的id是哪一个，必须指定，否则无效果

执行到`/editBook`路由的post请求

> router.js

![在这里插入图片描述][20190402215951273.png]

> service.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 4]

获取内容的id，找到相同id的内容，新内容替换旧内容，return执行终止操作。然后执行保存文档操作。红框操作部分都是一样的。

## 第六步：数据库连接 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 5]

注：新建表可以选择自动增长的id

> initsql.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 6]

注：生成sql脚本的js，执行node方法

![在这里插入图片描述][20190403093249709.png]  
新建目录，用npm init -y生成package.json，新建Index.js用来连接数据库：

> mydb/index.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 7]

注：connection.query里面的语句执行查询数据,可以通过百度npm>搜索mysql>install找到这些代码，
     cnpm install mysqljs/mysql

## 第七步：数据库的增删改查（测试） ##

> 目录  
> ![在这里插入图片描述][20190403101637992.png]

总共有4个文件，分别是增删改查的js

4个js文件，基础内容都是：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 8]

红框部分就是主要不同的地方：

> insert.js

let sql = 'insert into book set ?'
    
    let data = {
        name:'明朝那些事',
        author:'当年明月',
        category:'文学',
        description:'明朝的历史'
    }

> update.js

let sql = 'update book set name=?,author=?,category=?,description=? where id=?';
    //这里的where是限定只修改一个数据，如果不设置就会更新所有数据
    
    let data =['浪潮','浪潮','浪潮','浪潮',36];
      //操作数据库

> delete.js

let sql = 'delete from book where id=?';
    //这里的where是限定只修改一个数据，如果不设置就会更新所有数据
    let data =[36];//也要数组的符号，这是格式要求

> select.js

let sql = 'select * from book where id = ?';
    //这里的where是限定只修改一个数据，如果不设置就会更新所有数据
    let data =[1];

注：返回的参数都是以results体现。

## 第八步：封装操作数据库的通用API ##

> db.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 9]  
基础内容不变，通过exports暴露出去，方法为base()，同时，数据库操作是异步的，需要使用回调函数返回结果。

> 测试文件dbtest.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 10]  
通过传输参数，执行db.base()方法就可以完美地进行数据库的各项操作了。

## 第九步：登录验证（前端+后端+数据库） ##

> 目录

![在这里插入图片描述][20190403154725601.png]  
新建上图三个文件，package.json用cnpm init -y创建，并安装express,和body-parser模块

> login.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 11]

注：引入db.js数据库通用API

> login.html

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 12]  
在浏览器端打开`localhost:3000/login.html`访问，填写内容后点击提交post请求，打开check路由执行方法会查询数据库并且返回结果。

## 第十步：图书馆管理系统的增删改查（去掉json，更新为数据库动态操作） ##

主要更新了service.js的内容：

> （一）渲染模块

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 13]

> （二）添加图书模块

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 14]

> （三）更新图书模块

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 15]

> （四）删除图书模块

由于前面没有写，所以这里多加一些描述：

> index.art

![在这里插入图片描述][20190403170452206.png]

> router.js

![在这里插入图片描述][20190403170526924.png]

> service.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 16]

注：查询操作体现在渲染界面以及更新操作上，
    另外，所有的.art文件里面的desc全部替换为了description,避免进行数据库操作，“desc”为排序所用。

## 第十一步：后台接口开发 ##

> （一）JSON

> 目录

![在这里插入图片描述][20190403174641718.png]

注：新建文件夹api和文件index.js，package.json等，安装express,mysql模块

![在这里插入图片描述][20190403174733602.png]  
返回数据结果为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 17]

> （二）JSONP（需要传递一个回调函数的名称）

其实是把json数据作为参数传给回调函数

![在这里插入图片描述][20190403175944333.png]

判断是不是函数

![在这里插入图片描述][20190403175918511.png]

> 自定义回调函数参数名称

![在这里插入图片描述][20190403180235648.png]  
![在这里插入图片描述][2019040318033435.png]

> （三）Restful (是从URL的格式来表述的）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 18]  
效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 19]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 20]

## 第十二步：Restful后台接口全面接入图书馆管理系统 ##

其实是json接口和restful接口的混合使用

> 新建文件目录和文件

![在这里插入图片描述][20190403214250772.png]

> index.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 21]

> router.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 22]

> service.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 23]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 24]

没有页面要借助postman工具进行测试

> 添加

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 25]

> 删除

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 26]

> 更新`注意：指定更新的id`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 27]

## 第十三步：前后端分离之前端渲染、增删查改 ##

> **（一）渲染**

> 目录

![在这里插入图片描述][20190404003857221.png]

> index.html

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 28]

> public/js/index.js  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 29]

js文件夹引入三个文件：

![在这里插入图片描述][20190404004152689.png]

以下的增加、更新都采用模态框弹出来显示信息，可参考bootstrap的模态框样式。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 30]

addBook(); //用以重新给添加数据绑定事件。每一次渲染都会触发该函数。
    表单重置分为隐藏模块和非隐藏模块的不同操作。

> （二）增加

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 31]

> （三）更新

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 32]

> （四）删除  
> ![在这里插入图片描述][20190405022454985.png]

注：1.使用同一个弹窗需要解绑click事件，采用unbind('click').click();
        2.渲染函数需要单独拎出来设为initList();
        3.解绑click事件，再次启动会没有效果，所以要单独拎出来，在渲染界面的时候，重新赋予添加数据函数click的方法。
        4.

以上都为public/js/index.js的内容
    以下为index.html的渲染内容和模态框的表单请求

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 33]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 34]

## 第十四步：服务器主动发送请求 ##

> 新建一个index.js文件（测试文件）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 35]

//可替代postman来测试端口

> （一）查询

注：需要先打开node到resful文件夹的index.js服务，才能打开另一个服务请求到数据

> 01jquery.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 36]

> 03queryid.js //根据指定id查询

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 37]

> （二）增加
> 
> 02addBook.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 38]

> （三）更新

> 04editBook.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 39]

注：更新数据是不在url处写入id的

> （四）删除

> 05delete.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 40]

## 第十五步：调用第三方接口获取数据 ##

> 06.js

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 41]

## 第十六步：封装通用第三方api接口 ##

> 新建weather.js

![在这里插入图片描述][20190405142951809.png]

注：封装weather.js，用于查询天气的通用接口，使用exports暴露该方法，方法名为queryWeather，可以在其他地方传递参数调用该API

> 最终封装形式：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 42]

注：port：80为请求第三方接口的默认远端端口号

> 创建07.js测试该通用接口weather.js

![在这里插入图片描述][20190405143939898.png]

[Link 1]: https://www.bilibili.com/video/av40872539/?p=1
[20190402014612645.png]: /images/20220225/9878daf049004ef5898c01c878014172.png
[20190402185445665.png]: /images/20220225/29e543ca8c694a3eb1992e6be2907025.png
[20190402185516313.png]: /images/20220225/48b991a91d324ffba5cbb73ff9aa3ef7.png
[20190402185527382.png]: /images/20220225/c6ae589b7e0844298451c17edea22361.png
[20190402185553527.png]: /images/20220225/e2121c8d430f48df830b5529720459da.png
[20190402185602320.png]: /images/20220225/baaba797557642f1a856582e01a7da22.png
[20190402185612258.png]: /images/20220225/0a7cbb2ea3c945f48d893d6a09cb6fcd.png
[20190402185623742.png]: /images/20220225/f981dd9fd4ea4c46aa5935ce064d1712.png
[20190402185638295.png]: /images/20220225/fa521c3fefa2402db28ac61352953066.png
[20190402185645782.png]: /images/20220225/2c43c1965f154496b42f567a6c08d42c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70]: /images/20220225/fed00f3aeb4b4140adb2a041ac31ac2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 1]: /images/20220225/a68ad66369ea4f589dac219dab08be0d.png
[20190402185835587.png]: /images/20220225/bf5cd7ea566540b4bd95762f0cac8339.png
[20190402185846261.png]: /images/20220225/a71014527ed94d1db47c17b4e897a658.png
[20190402215243640.png]: /images/20220225/a00f9180d2b2448fbb1db3183d8593c1.png
[20190402215401535.png]: /images/20220225/4fd1b41bf9f848029969709013d97275.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 2]: /images/20220225/39fff9a40dcd4f8c8f6d851a12195e66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 3]: /images/20220225/d64efa99363d46ae8d534f2b7be1dd6c.png
[20190402215951273.png]: /images/20220225/81085176e90b48d29ab50551504de687.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 4]: /images/20220225/a5e4225caf0746ca91bfb787adce9316.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 5]: /images/20220225/2e22ceb45a03409d93899acdff8e25b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 6]: /images/20220225/a09caafc16d24659b5de60545b997cf9.png
[20190403093249709.png]: /images/20220225/e22bc98879ad40a3bf0f6d12f6788930.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 7]: /images/20220225/bbae3ac547f4454b9e230d3d3929f7d1.png
[20190403101637992.png]: /images/20220225/5cba20c2e6614989b38f58365bf7fee7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 8]: /images/20220225/027c477a92fa4b47bb941bf631ca8cfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 9]: /images/20220225/b3a4e5daefb84598ad4a9a0927397f45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 10]: /images/20220225/64297c3a9057494d9cca1394c94bd192.png
[20190403154725601.png]: /images/20220225/929ade13a8c44bd082dddab31d4e6289.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 11]: /images/20220225/a91db07bca614743883bc13dfb0b7275.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 12]: /images/20220225/dc89a68ca999463c8f3f8a228d79a7a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 13]: /images/20220225/cd8d825dbe864140850d4ade69c5437e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 14]: /images/20220225/1dd1033225ed4352bb79f56ff0f475cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 15]: /images/20220225/bfb0bb94ab3042c5b4804fea6164c42e.png
[20190403170452206.png]: /images/20220225/95d6636c43e1462aa05279b2ce0f8b13.png
[20190403170526924.png]: /images/20220225/b75431d8169a464684ffdcd7b6f22ebf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 16]: /images/20220225/96cb96f7c8e54ccf860023d163baaf68.png
[20190403174641718.png]: /images/20220225/40d20e0d35b7438cb8b6d5d3bbda3515.png
[20190403174733602.png]: /images/20220225/5310492f05d24bd397bd16f7f79dbf33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 17]: /images/20220225/ccf53f534e414b81ae18a7664b1a2357.png
[20190403175944333.png]: /images/20220225/1f9b2277793b4e0fa58bc764112f8200.png
[20190403175918511.png]: /images/20220225/944350636101406ab97a67c38138e4bc.png
[20190403180235648.png]: /images/20220225/b206f2c01dd04075a8105d7420b02a8d.png
[2019040318033435.png]: /images/20220225/4a7d2351aca94b96b55895f1b7fbb8c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 18]: /images/20220225/4a3cd21f7be34a6499d2c8dfd0af157d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 19]: /images/20220225/53b77e9d47b5481fb7be6412f0b8bc35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 20]: /images/20220225/b17231e1791f4ba2a5267877cb19cfa2.png
[20190403214250772.png]: /images/20220225/b80f4e757d2e4b14a2c261d9339426b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 21]: /images/20220225/7466b62c73ee459e9a0e51f2163f6a32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 22]: /images/20220225/d6fc2e00af5c4e5e992791fbf355dca4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 23]: https://img-blog.csdnimg.cn/20190403214537962.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 24]: /images/20220225/dc222bac1137486f9fe068f35b994050.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 25]: /images/20220225/a91c31cd1fbf46998462170c1600dd7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 26]: /images/20220225/c16b21f0ab284b069e68f8e09d108a54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 27]: /images/20220225/35ad56ced7c747dc98b843e4bb36787c.png
[20190404003857221.png]: /images/20220225/35e60fcae6744ac5a3024c176b9d6460.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 28]: /images/20220225/02d5fcfe651c411a8d1d09c3023a93c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 29]: /images/20220225/3f3b43344c33477aad5d57f7518bd617.png
[20190404004152689.png]: /images/20220225/a496b4a0f14e4c2fb9c2c547cab7af12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 30]: /images/20220225/12c82e1c6b70413aac097ecd6ea5b26e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 31]: /images/20220225/99eb3277a1c8494e8f10b68efa67ade1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 32]: /images/20220225/6313104eba70487db30797ac8aa94ffe.png
[20190405022454985.png]: /images/20220225/83951283ed0f42c895ce585327c8249b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 33]: /images/20220225/ced1a883f24a49ec940bb9abf87c0401.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 34]: /images/20220225/7cf1a23f677a47ffacb67060fbbebf5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 35]: /images/20220225/1089270e523f4391b153608cf77b59f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 36]: /images/20220225/3879c3db936e4baa8600f572c9cdabf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 37]: /images/20220225/44bf62514f104901bb548b9ad15c69b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 38]: /images/20220225/ead47774f99a43ceafc4e18163ab6611.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 39]: /images/20220225/099d5ccb6a904003b8adc70c9d2b6d62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 40]: /images/20220225/382f9de49984464f957f2e3eb25bb82e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 41]: /images/20220225/82237c9fc7c3498bace4965dee27dd24.png
[20190405142951809.png]: /images/20220225/71bdc9ff8bdb42fe894b573351af7da6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70 42]: /images/20220225/b679bc5192c44e5ba912d0e4c5079708.png
[20190405143939898.png]: /images/20220225/e02a689e6231459cb207351e6f5f4158.png