谷粒学院——Day05【后台系统前端项目创建、讲师管理模块前端开发】

清疚 2023-09-27 12:32 79阅读 0赞

## 后台系统前端项目创建 ##

### 一、vue-element-admin ###

1.  **简介**  
    `vue-element-admin` 是基于 `element-ui` 的一套后台管理系统集成方案。  
    功能：[https://panjiachen.github.io/vue-element-admin-site/zh/guide/\#功能][https_panjiachen.github.io_vue-element-admin-site_zh_guide]  
    GitHub地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
    项目在线预览：[https://panjiachen.gitee.io/vue-element-admin][https_panjiachen.gitee.io_vue-element-admin]
2.  **安装**
    
        # 解压压缩包
        # 进入目录
        cd vue-element-admin-master
        
        # 安装依赖
        npm install
        
        # 启动。执行后，浏览器自动弹出并访问http://localhost:9527/
        npm run dev

### 二、vue-admin-template ###

1.  **简介**  
    `vueAdmin-template` 是基于 `vue-element-admin` 的一套后台管理系统**基础模板（最少精简版）**，可作为模板进行二次开发。  
    GitHub地址：[https://github.com/PanJiaChen/vue-admin-template][https_github.com_PanJiaChen_vue-admin-template]  
    **建议：** 你可以在 `vue-admin-template` 的基础上进行二次开发，把 `vue-element-admin` 当做工具箱，想要什么功能或者组件就去 `vue-element-admin` 那里复制过来。
2.  **安装**
    
        # 解压压缩包
        # 进入目录
        cd vue-admin-template-master
        
        # 安装依赖
        npm install
        
        # 启动。执行后，浏览器自动弹出并访问http://localhost:9528/
        npm run dev
3.  **项目启动**  
    ![在这里插入图片描述][205f17db0db54ee4bd822de97f980870.png]  
    ![在这里插入图片描述][3140e76b25de42b7892ca2d923e8ad7c.png]

**以上即完成了后台系统前端项目的环境搭建。**

### 三、项目的创建和基本配置 ###

#### 1. 创建项目 ####

将 `vue-admin-template-master` 重命名为 `guli-admin`。

#### 2. 修改项目信息 ####

在 `package.json` 中进行修改：

{
        "name": "guli-admin",
        ......
        "description": "谷粒学院后台管理系统",
        "author": "Helen <55317332@qq.com>",
        ......
    }

#### 3. 如果需要修改端口号 ####

在 `config/index.js` 中修改：

port: 9528

#### 4. 项目的目录结构 ####

. 
    ├── build // 构建脚本
    ├── config // 全局配置 
    ├── node_modules // 项目依赖模块
    ├── src //项目源代码
    ├── static // 静态资源
    └── package.jspon // 项目信息和依赖配置

src 
    ├── api // 各种接口 
    ├── assets // 图片等资源 
    ├── components // 各种公共组件，非公共组件在各自view下维护 
    ├── icons //svg icon 
    ├── router // 路由表 
    ├── store // 存储 
    ├── styles // 各种样式 
    ├── utils // 公共工具，非公共工具，在各自view下维护 
    ├── views // 各种layout
    ├── App.vue //***项目顶层组件*** 
    ├── main.js //***项目入口文件***
    └── permission.js //认证入口

#### 5. 不使用Eslint语法检查 ####

在 `config/index.js` 中修改：

useEslint: false

#### 6. 运行项目 ####

npm run dev

### 四、登录页修改 ###

在 `src/views/login/index.vue`（登录组件）中进行修改：

// 第4行
    <h3 class="title">谷粒学院后台管理系统</h3>
    
    // 第28行
    
    <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
        登录
    </el-button>

### 五、页面零星修改 ###

#### 1. 标题 ####

在 `index.html`（项目的html入口）中进行修改：

<title>谷粒学院后台管理系统</title>

修改后热部署功能，浏览器自动刷新。

#### 2. 国际化设置 ####

打开 `src/main.js`（项目的js入口），第7行，修改语言为 zh-CN，使用中文语言环境，例如：日期时间组件。

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

#### 3. icon ####

复制 `favicon.ico` 到根目录。

#### 4. 导航栏文字 ####

`src/views/layout/components`（当前项目的布局组件）  
`src/views/layout/components/Navbar.vue`

// 第13行
    <el-dropdown-item>
        首页
    </el-dropdown-item>
    
    // 第17行
    <span style="display:block;" @click="logout">退出</span>

## 后台系统登录功能改造 ##

![在这里插入图片描述][741786d7a2ab429e9170186d2195a4dd.png]  
![在这里插入图片描述][359a055a8c5e4bbf851c0e46fa26558e.png]  
在 `config/dev.env.js` 中对登录地址进行修改：  
![在这里插入图片描述][6d98d184c13041b2a96d0b2280fb3dc0.png]  
  
进行登录调用了两个方法， `login` 登录操作方法 和 `info` 登录之后获取用户信息的方法。所以，创建接口两个方法实现登录。

*  (1) `login` 方法： 返回 `token` 值。
 *  (2) `info`方法： 返回 `roles`、`name`、`avatar` 值。

在 `controller` 包下创建 `EduLoginController` 类，代码如下：

@RestController
    @RequestMapping("/eduService/user")
    public class EduLoginController {
    
        // login
        @PostMapping("/login")
        public R login() {
            return  R.ok().data("token", "admin");
        }
    
        // info
        @GetMapping("/info")
        public R info() {
            return R.ok().data("roles","[admin]").data("name","admin").data("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
        }
    
    }

修改前端地址，`api/login.js` 修改为上面的接口路径:  
![在这里插入图片描述][b7338706dc5c41f78018d6be0594c94a.png]  
重启前端服务器，开启后端服务器进行测试：  
此时会出现**跨域**的问题。

> 什么是跨域问题：  
> 通过一个地址去访问另外一个地址，这个过程中如果有三个地方任何不一样，即 访问协议、ip地址、端口号。

**解决方案：**  
在 `EduLoginController`类上添加 `@CrossOrigin` 注解

@RestController
    @CrossOrigin //解决跨域问题
    @RequestMapping("/eduService/user")
    public class EduLoginController {
    
        // login
        @PostMapping("/login")
        public R login() {
            return  R.ok().data("token", "admin");
        }
    
        // info
        @GetMapping("/info")
        public R info() {
            return R.ok().data("roles","[admin]").data("name","admin").data("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
        }
    
    }

重启前后端服务器进行测试：  
![在这里插入图片描述][7f9b9c4c9694446b869b4e72de095e70.png]  
  
**现象：** 每次请求都是发送两次。  
![在这里插入图片描述][5b0ee5ca5f7545c5b124f286c92b7290.png]  
他第一次请求发送的请求方式是：`OPTIONS`，他测试服务器是否连通，不会获取数据.

第二次请求发送的请求方式是 `get / post`，就会是发送数据，获取数据。

## 前端框架开发过程 ##

![在这里插入图片描述][cde82de8fce348498ba0c8647b97f62d.png]  
![在这里插入图片描述][acc934b653684a849d72ab53587c5cff.png]  
![在这里插入图片描述][8d77a379322e47cca56f4580155a9d9f.png]

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

## 讲师管理模块前端开发 ##

### 1. 添加路由 ###

在 `src/router/index.js` 中，复制一份 `example` 代码块并进行修改：

{
        // 地址输入
        path: '/teacher',
        component: Layout,
        // redirect: 重定向地址
        redirect: '/example/table',
        name: '讲师管理',
        // title：显示标签  icon：显示图标
        meta: { title: '讲师管理', icon: 'example' },
        children: [
          {
            path: 'table',
            name: '讲师列表',
            component: () => import('@/views/edu/teacher/list'),
            meta: { title: '讲师列表', icon: 'table' }
          },
          {
            path: 'save',
            name: '添加讲师',
            component: () => import('@/views/edu/teacher/save'),
            meta: { title: '添加讲师', icon: 'tree' }
          }
        ]
      },

添加路由后，可以在后台系统的前端页面左侧栏看到：  
![在这里插入图片描述][8ebb1142fe6f4def9db5fe9397331213.png]

### 2. 创建路由对应的组件 ###

创建 `src/views/edu/teacher` 文件夹存放组件，并建立讲师列表和添加讲师对应的组件 `list.vue` 和 `save.vue`，将对应的路由设置为对应的组件页面。  
![在这里插入图片描述][27bb3d2bb80e48efb1cdc6950cc50c51.png]

### 3. 定义访问的接口地址 ###

创建 `src/api/edu/teachere.js`，用来定义访问的接口地址：

import request from '@/utils/request' // 引入已经封装好的axios 和 拦截器
    
    export default {
    
        // 1. 讲师列表（条件查询分页）
        // page：当前页  limit：每页记录数  teacherQuery：条件对象
        getTeacherListPage(page,limit,teacherQuery) {
            return request({
            //    url: '/eduservice/edu-teacher/pageTeacherCondition/'+page+'/'+limit,
                url: `/eduservice/edu-teacher/pageTeacherCondition/${page}/${limit}`,
                method: 'post',
                // teacherQuery条件对象，如果后端使用RequestBody获取数据
                // data表示把对象转换成json对象进行传递到接口里
                data:teacherQuery
              })
        }
    }

### 4. 组件页面调用定义接口方法 ###

在讲师列表 `list.vue` 页面调用定义的接口方法，得到接口返回数据：

<template>
      <div class="app-container">
        讲师列表
      </div>
    </template>
    
    <script>
    // 引入要调用的方法，teacher.js文件
    import teacher from '@/api/edu/teacher.js'
    
    export default {
        // 写核心代码位置
        // data: {
        // },
        data() { //定义变量和初始值
            return {
              list:null,//查询之后接口返回集合
              page:1,//当前页
              limit:10,//每页记录数
              total:0,//总记录数
              teacherQuery:{} //条件封装对象
            }
        },
        created() { //页面渲染之前执行，一般调用methods定义的方法
            // 调用
            this.getList()
        },
        methods: { // 创建具体的方法，调用teacher.js定义的方法
            // 讲师列表的方法
            getList() {
                teacher
                    .getTeacherListPage(this.page,this.limit,this.teacherQuery)
                    .then(response => {
                    // response接口返回的数据
                    // console.log(response)
                        this.list = response.data.rows
                        console.log(this.list)
                        this.total = response.data.total
                        console.log(this.total)
                    }) //请求成功
                    .catch(error => {
                        console.log(error)
                    }) //请求失败
            }
        }
    }
    
    </script>

### 5. 测试 ###

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

### 6. 使用element-ui快速构建页面 ###

在 `list.vue` 中添加构建页面的代码：

<el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="数据加载中"
          border
          fit
          highlight-current-row>
    
          <el-table-column
            label="序号"
            width="70"
            align="center">
            <template slot-scope="scope">
              {
       { (page - 1) * limit + scope.$index + 1 }}
            </template>
          </el-table-column>
    
          <el-table-column prop="name" label="名称" width="80" />
    
          <el-table-column label="头衔" width="80">
            <template slot-scope="scope">
              {
       { scope.row.level===1?'高级讲师':'首席讲师' }}
            </template>
          </el-table-column>
    
          <el-table-column prop="intro" label="资历" />
    
          <el-table-column prop="gmtCreate" label="添加时间" width="160"/>
    
          <el-table-column prop="sort" label="排序" width="60" />
          
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <router-link :to="'/edu/teacher/edit/'+scope.row.id">
                <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
              </router-link>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

**重新热部署后的页面如下：**  
![在这里插入图片描述][53b56992572c41b081f172d1cea6432b.png]

### 7. 分页功能 ###

在 `list.vue` 中添加分页组件：

<el-pagination
         :current-page="page"
         :page-size="limit"
         :total="total"
         style="padding: 30px 0; text-align: center;"
         layout="total, prev, pager, next, jumper"
         @current-change="getList"
       />

对 `getList` 分页方法进行修改：  
![在这里插入图片描述][63c5b4eba0f1437b9e035c7017a667e4.png]  
![在这里插入图片描述][e79eaf7fba4a4d1f84a56da2d4bbe35a.png]

### 8. 讲师条件查询 ###

**添加顶部的查询表单：**  
**注意：**  
`element-ui` 的 `date-picker` 组件默认绑定的时间值是默认世界标准时间，和中国时间差8小时。  
`设置 value-format="yyyy-MM-dd HH:mm:ss" 改变绑定的值`

<el-form :inline="true" class="demo-form-inline">
          <el-form-item>
           <el-input v-model="teacherQuery.name" placeholder="讲师名"/>
          </el-form-item>
    
          <el-form-item>
            <el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
              <el-option :value="1" label="高级讲师"/>
              <el-option :value="2" label="首席讲师"/>
            </el-select>
          </el-form-item>
    
          <el-form-item label="添加时间">
            <el-date-picker
              v-model="teacherQuery.begin"
              type="datetime"
              placeholder="选择开始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="teacherQuery.end"
              type="datetime"
              placeholder="选择截止时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
            />
          </el-form-item>
    
          <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
          <el-button type="default" @click="resetData()">清空</el-button>
        </el-form>

**添加清空方法`resetData()`:**

methods: { // 创建具体的方法，调用teacher.js定义的方法
            // 讲师列表的方法
            getList(page =1) {
                this.page = page
                teacher
                    .getTeacherListPage(this.page,this.limit,this.teacherQuery)
                    .then(response => {
                    // response接口返回的数据
                    // console.log(response)
                        this.list = response.data.rows
                        console.log(this.list)
                        this.total = response.data.total
                        console.log(this.total)
                    }) //请求成功
                    .catch(error => {
                        console.log(error)
                    }) //请求失败
            },
            resetData() { // 清空的方法
              // 表单输入项数据清空
              this.teacherQuery = {}
              // 查询所有讲师数据
              this.getList()
            }
        }

![在这里插入图片描述][b7285f97e282432aab152c6cc31d2a7d.png]  
![在这里插入图片描述][43475d16bf50441da1d43260d3edefc4.png]

### 9. 讲师删除 ###

1.  **定义api**  
    在 `src/api/teacher/teacher.js` 中添加删除讲师的 `api`：
    
        // 删除讲师
            deleteTeacherId(id) {
                return request({
                    url: `/eduservice/edu-teacher/deleteTeacherById/${id}`,
                    method: 'delete'
                })
            }
2.  **定义methods**  
    在 `src/views/edu/teacher/list.vue` 中使用 `MessageBox` 弹框组件：
    
        //删除讲师的方法
                removeDataById(id) {
                    this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {  //点击确定，执行then方法
                        //调用删除的方法
                        teacher.deleteTeacherId(id)
                            .then(response =>{//删除成功
                            //提示信息
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            //回到列表页面
                            this.getList()
                        })
                    }) //点击取消，执行catch方法
                }
3.  **测试**  
    ![在这里插入图片描述][b7e5c3152805410dab27ab826cdce9ab.png_pic_center]  
    ![在这里插入图片描述][0d41bce7b4d24617a2bafab2f0459b45.png_pic_center]

### 10. 讲师添加 ###

1.  **定义api**  
    在 `src/api/edu/teacher.js` 中新增添加讲师的 `api`：
    
        // 添加讲师
            addTeacher(teacher) {
               return request({
                url: `/eduservice/edu-teacher/addTeacher`,
                method: `post`,
                data: teacher
               })
            }
2.  **初始化组件**  
    `src/views/edu/teacher/save.vue`：  
    **html:**
    
        <template>
          <div class="app-container">
            讲师添加
             <el-form label-width="120px">
              <el-form-item label="讲师名称">
                <el-input v-model="teacher.name"/>
              </el-form-item>
              <el-form-item label="讲师排序">
                <el-input-number v-model="teacher.sort" controls-position="right" min="0"/>
              </el-form-item>
              <el-form-item label="讲师头衔">
                <el-select v-model="teacher.level" clearable placeholder="请选择">
                  <el-option :value="1" label="高级讲师"/>
                  <el-option :value="2" label="首席讲师"/>
                </el-select>
              </el-form-item>
              <el-form-item label="讲师资历">
                <el-input v-model="teacher.career"/>
              </el-form-item>
              <el-form-item label="讲师简介">
                <el-input v-model="teacher.intro" :rows="10" type="textarea"/>
              </el-form-item>
        
              
        
              <el-form-item>
                <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
              </el-form-item>
            </el-form>
        
          </div>
        </template>
    
    **js:**
    
        <script>
        import teacherApi from '@/api/edu/teacher.js'
        export default {
            data() {
                return {
                    teacher: {
                        name: '',
                        sort: 0,
                        level: 1,
                        creer: '',
                        intro: '',
                        avatar: ''
                    },
                    saveBtnDisabled: false // 保存按钮是否禁用
                }
            },
            created() {
        
            }, 
            methods: {
                saveOrUpdate() {
                    // 添加
                    this.saveTeacher()
                },
        
                // 添加讲师的方法
                 saveTeacher() {
                    teacherApi.addTeacher(this.teacher)
                    .then(response => {//添加成功
                        //提示信息
                        this.$message({
                            message: "添加讲师记录成功",
                            type: "success",
                        });
                        //回到讲师列表, 路由跳转
                        this.$router.push({path: '/teacher/table'})
                    });
                 }
            }
        }
        </script>
3.  **排序**  
    在 `eduservice/service/impl/EduTeacherServiceImpl` 让添加进去的数据按时间进行排序：
    
        // 排序
         wrapper.orderByDesc("gmt_create");
4.  **测试**
    
    ![在这里插入图片描述][7dc60f57018f4e7480c1609ed7e7b0cb.png]  
    ![在这里插入图片描述][bbcae95b3c924423aee2248e6f6c00d7.png]  
    ![在这里插入图片描述][bd9340d2f4ca4db692d17f9d95e66913.png]

### 11. 讲师信息回显 ###

在 `src/router/index.js` 中添加一个隐藏路由：

{
            path: 'edit/:id',
            name: 'EduTeacherEdit',
            component: () => import('@/views/edu/teacher/save'),
            meta: { title: '编辑讲师', noCache: true },
            hidden: true
        }

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

通过router-link 的:to去’/teacher/edit/【:id携带id】'也就是上面这个路由，然后路由转换到save.vue组件上  
![在这里插入图片描述][c4892716ea0049e7bdbc9e785be0d396.png]

**在添加讲师页面实现数据回显：**

在 `src/api/edu/teacher.js` 中 添加根据 `id` 查询讲师的`api`:

//根据id查询讲师
        getTeacherInfo(id){
            return request({
                url: `/eduservice/edu-teacher/getTeacher/${id}`,
                method: `get`
        })

`src/edu/teacher/save.vue`:

// 根据讲师id查询的方法,实现数据的回显
            getInfoById(id){
                teacherApi.getTeacherInfo(id)
                    .then(response =>{
                        this.teacher = response.data.teacher
                })
            }

在 `src/edu/teacher/save.vue` 中 `created()` 数据渲染前进行判断请求中是否有 `id` 值:

created() {//在页面渲染之前
            //判断路径中是否有id值
            if(this.$route.params && this.$route.params.id){
                //从路径中获取id值
                const id = this.$route.params.id
                //调用根据id查询的方法
                this.getInfoById(id)
            }
        }

**测试：**  
![在这里插入图片描述][85b46ccd15bb4a43b26a8f1d8f62f7ac.png]  
![在这里插入图片描述][61e5e38b14694ee2a71c8d9439b026a8.png_pic_center]

### 12. 讲师修改 ###

在 `src/api/edu/teacher.js` 中 添加修改讲师的`api`:

// 修改讲师
        updateTeacherInfo(teacher){
            return request({
                url: `/eduservice/edu-teacher/updateTeacher`,
                method: `post`,
                data: teacher
            })
        }

在 `src\views\edu\teacher\save.vue` 中添加修改讲师的方法：

// 修改讲师的方法
            updateTeacher() {
                teacherApi.updateTeacherInfo(this.teacher)
                    .then(response => {
                        //提示信息
                        this.$message({
                            message: "修改讲师记录成功",
                            type: "success",
                     });
                    //回到讲师列表 路由跳转
                    this.$router.push({ path: "/teacher/table" });
                })
            }

将修改和添加操作和在一起：

saveOrUpdate() {
                // 判断修改还是添加操作
                // 根据teacher对象是否有id值来判断
                if (!this.teacher.id) {
                    // 添加
                this.saveTeacher()
                } else {
                    // 修改
                    this.updateTeacher()
                }
            },

**测试：**  
![在这里插入图片描述][9712b686f7b645c0991483e5a81b30ad.png]

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

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

### 13. 存在问题 ###

**遇到问题描述如下：**  
第一次点击修改，会进行数据回显，在此基础上去点击添加讲师，进入到表单页面，但是表单还是显示刚才修改回显的数据，正确效果应该是表单数据清空。

**解决方案：**

> 通过使用监听器监听

将原本 `created()` 里面的发按法封装到 `init()` 中，在 `created()` 中调用，并通过监听器监听路由变化就执行 `init()` 判断路径是否有id值，有就获取id值，没有就清空数据。

...
    init() {
        //判断路径中是否有id值
        if (this.$route.params && this.$route.params.id) {
            //从路径中获取id值
            const id = this.$route.params.id;
            //调用根据id查询的方法
            this.getInfoById(id);
        }else{
            this.teacher = {};
        }
    },
    },
        created() {
            //在页面渲染之前
            this.init()
        },
            watch: {
                $route(to, from) {
                    //路由变化方式，当路由发送变化，方法就执行
                    console.log("watch $route");
                    this.init()
                },
            }

**创作不易，如果有帮助到你，请给文章点个赞和收藏，让更多的人看到！！！**  
**关注博主不迷路，内容持续更新中。**

[https_panjiachen.github.io_vue-element-admin-site_zh_guide]: https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD
[https_github.com_PanJiaChen_vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[https_panjiachen.gitee.io_vue-element-admin]: https://panjiachen.gitee.io/vue-element-admin
[https_github.com_PanJiaChen_vue-admin-template]: https://github.com/PanJiaChen/vue-admin-template
[205f17db0db54ee4bd822de97f980870.png]: https://img-blog.csdnimg.cn/205f17db0db54ee4bd822de97f980870.png
[3140e76b25de42b7892ca2d923e8ad7c.png]: https://img-blog.csdnimg.cn/3140e76b25de42b7892ca2d923e8ad7c.png
[741786d7a2ab429e9170186d2195a4dd.png]: https://img-blog.csdnimg.cn/741786d7a2ab429e9170186d2195a4dd.png
[359a055a8c5e4bbf851c0e46fa26558e.png]: https://img-blog.csdnimg.cn/359a055a8c5e4bbf851c0e46fa26558e.png
[6d98d184c13041b2a96d0b2280fb3dc0.png]: https://img-blog.csdnimg.cn/6d98d184c13041b2a96d0b2280fb3dc0.png
[b7338706dc5c41f78018d6be0594c94a.png]: https://img-blog.csdnimg.cn/b7338706dc5c41f78018d6be0594c94a.png
[7f9b9c4c9694446b869b4e72de095e70.png]: https://img-blog.csdnimg.cn/7f9b9c4c9694446b869b4e72de095e70.png
[5b0ee5ca5f7545c5b124f286c92b7290.png]: https://img-blog.csdnimg.cn/5b0ee5ca5f7545c5b124f286c92b7290.png
[cde82de8fce348498ba0c8647b97f62d.png]: https://img-blog.csdnimg.cn/cde82de8fce348498ba0c8647b97f62d.png
[acc934b653684a849d72ab53587c5cff.png]: https://img-blog.csdnimg.cn/acc934b653684a849d72ab53587c5cff.png
[8d77a379322e47cca56f4580155a9d9f.png]: https://img-blog.csdnimg.cn/8d77a379322e47cca56f4580155a9d9f.png
[98fe3d1bb2384450b300333cf025660f.png]: https://img-blog.csdnimg.cn/98fe3d1bb2384450b300333cf025660f.png
[8ebb1142fe6f4def9db5fe9397331213.png]: https://img-blog.csdnimg.cn/8ebb1142fe6f4def9db5fe9397331213.png
[27bb3d2bb80e48efb1cdc6950cc50c51.png]: https://img-blog.csdnimg.cn/27bb3d2bb80e48efb1cdc6950cc50c51.png
[f5b19e6da54f43959ded953c25cc06e5.png]: https://img-blog.csdnimg.cn/f5b19e6da54f43959ded953c25cc06e5.png
[fa92b8b800744d569b9d23bb10270a2b.png]: https://img-blog.csdnimg.cn/fa92b8b800744d569b9d23bb10270a2b.png
[53b56992572c41b081f172d1cea6432b.png]: https://img-blog.csdnimg.cn/53b56992572c41b081f172d1cea6432b.png
[63c5b4eba0f1437b9e035c7017a667e4.png]: https://img-blog.csdnimg.cn/63c5b4eba0f1437b9e035c7017a667e4.png
[e79eaf7fba4a4d1f84a56da2d4bbe35a.png]: https://img-blog.csdnimg.cn/e79eaf7fba4a4d1f84a56da2d4bbe35a.png
[b7285f97e282432aab152c6cc31d2a7d.png]: https://img-blog.csdnimg.cn/b7285f97e282432aab152c6cc31d2a7d.png
[43475d16bf50441da1d43260d3edefc4.png]: https://img-blog.csdnimg.cn/43475d16bf50441da1d43260d3edefc4.png
[b7e5c3152805410dab27ab826cdce9ab.png_pic_center]: https://img-blog.csdnimg.cn/b7e5c3152805410dab27ab826cdce9ab.png#pic_center
[0d41bce7b4d24617a2bafab2f0459b45.png_pic_center]: https://img-blog.csdnimg.cn/0d41bce7b4d24617a2bafab2f0459b45.png#pic_center
[7dc60f57018f4e7480c1609ed7e7b0cb.png]: https://img-blog.csdnimg.cn/7dc60f57018f4e7480c1609ed7e7b0cb.png
[bbcae95b3c924423aee2248e6f6c00d7.png]: https://img-blog.csdnimg.cn/bbcae95b3c924423aee2248e6f6c00d7.png
[bd9340d2f4ca4db692d17f9d95e66913.png]: https://img-blog.csdnimg.cn/bd9340d2f4ca4db692d17f9d95e66913.png
[64ff41158009463d8da6e6cfb8d06396.png]: https://img-blog.csdnimg.cn/64ff41158009463d8da6e6cfb8d06396.png
[c4892716ea0049e7bdbc9e785be0d396.png]: https://img-blog.csdnimg.cn/c4892716ea0049e7bdbc9e785be0d396.png
[85b46ccd15bb4a43b26a8f1d8f62f7ac.png]: https://img-blog.csdnimg.cn/85b46ccd15bb4a43b26a8f1d8f62f7ac.png
[61e5e38b14694ee2a71c8d9439b026a8.png_pic_center]: https://img-blog.csdnimg.cn/61e5e38b14694ee2a71c8d9439b026a8.png#pic_center
[9712b686f7b645c0991483e5a81b30ad.png]: https://img-blog.csdnimg.cn/9712b686f7b645c0991483e5a81b30ad.png
[ed20544d9a244046a41cf205dba80f04.png]: https://img-blog.csdnimg.cn/ed20544d9a244046a41cf205dba80f04.png
[32b70d9ad3e7465ead4bc5f25437cd98.png]: https://img-blog.csdnimg.cn/32b70d9ad3e7465ead4bc5f25437cd98.png