spring boot+iview 前后端分离架构之菜单管理菜单的增删改的实现（十五）

谁借莪１个温暖的怀抱￠ 2021-12-21 10:19 246阅读 0赞

### spring boot 与 iview 前后端分离架构之菜单管理菜单的增删改的实现（十五） ###

*  公众号
 *  菜单管理
 *   *  菜单管理之增加菜单
     *  菜单管理之修改菜单
     *  菜单管理之删除菜单

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg16】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

# 菜单管理 #

通过上一章我们已经完成了整个菜单管理的布局和展示了，本章我们将主要内容为如何实现对左侧菜单栏的增删改查。

## 菜单管理之增加菜单 ##

首先我们需要在tree目录底下创建一个addTree.vue增加菜单的代码文件，代码如下：

<template>
      <Modal v-model="show" title="增加菜单" @on-ok="ok" :loading="loading" :mask-closable="false">
        <Form ref="treeForm" :model="treeForm" :rules="treeFormRule">
          <FormItem label="父菜单名称">
            <Input type="text" v-model="treeForm.parentTreeName" disabled/>
          </FormItem>
          <FormItem label="菜单名称" prop="treeName">
            <Input type="text" :maxlength=50 v-model="treeForm.treeName" placeholder="请输入菜单名称"/>
          </FormItem>
          <FormItem label="菜单编码" prop="treeCode">
            <Input type="text" :maxlength=50 v-model="treeForm.treeCode" placeholder="请输入菜单编码"/>
          </FormItem>
          <FormItem label="菜单权限">
            <Input type="textarea" :rows="4" :maxlength=1000 v-model="treeForm.powerPath" placeholder="请输入菜单权限"/>
          </FormItem>
        </Form>
      </Modal>
    </template>
    <script>
      import {checkTreeCode, addTree} from "../../../api/sys/tree/tree.api"
    
    
      export default {
        name: "addTree",
        props: {
          value: {
            type: Boolean,
            default: false
          },
          parentTreeId: {
            type: Number
          },
          parentTreeName: {
            type: String
          }
        },
        data() {
          return {
            show: this.value,
            loading: true,
            treeForm: {
              treeName: '',
              treeCode: '',
              parentTreeId: '',
              parentTreeName: '',
              powerPath: ''
            },
            treeFormRule: {
              treeName: [
                {required: true, message: '菜单名称不能为空！', trigger: 'blur'},
                {type: 'string', max: 50, message: '菜单名称最大长度为50.', trigger: 'blur'}
              ],
              treeCode: [
                {required: true, message: '菜单编码不能为空！', trigger: 'blur'},
                {type: 'string', max: 50, message: '菜单编码最大长度为50.', trigger: 'blur'},
                {
                  validator: this.checkTreeCode({
                    response: 'exist'
                  }), trigger: 'blur'
                }
              ]
            }
          }
        },
        methods: {
          ok() {
            this.$refs['treeForm'].validate((valid) => {
              if (valid) {
                addTree(this.treeForm).then(res => {
                  if (res.code == 200) {
                    this.$Message.success('新增菜单节点成功');
                    // 提交表单数据成功则关闭当前的modal框
                    this.closeModal(false);
                    // 同时调用父页面的刷新页面的方法
                    this.$emit('reloadTree');
                  } else {
                    this.$Message.error( res.msg);
                  }
                })
              } else {
                this.$Message.error('表单验证不通过！');
              }
              setTimeout(() => {
                this.loading = false;
                this.$nextTick(() => {
                  this.loading = true;
                });
              }, 1000);
            });
          },
          checkTreeCode() {
            let _this = this;
            return function (rule, value, callback) {
              let treeCode = value;
              checkTreeCode({treeCode: treeCode}).then(res => {
                if (res.obj.success == 'pass') {
                  callback();
                } else {
                  callback(new Error('菜单节点已经存在'));
                }
              });
            };
          },
          closeModal(val) {
            this.$emit('input', val);
          }
        },
        watch: {
          value(val) {
            this.show = val;
          },
          show(val) {
            //当重新显示增加数据的时候重置整个form表单
            if (val) {
              this.$refs['treeForm'].resetFields();
              this.treeForm.parentTreeId = this.parentTreeId;
              this.treeForm.parentTreeName = this.parentTreeName;
              this.treeForm.powerPath = '';
            } else {// 反之则关闭页面
              this.closeModal(val);
            }
          }
        }
      }
    
    </script>

接着打开我们的treeList.vue页面进行改造，主要的改造位置如下：  
![在这里插入图片描述][20190627230102675.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
![单击我们菜单的时候更新当前选中节点的数据][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]  
改造完成以后的代码如下：

<template>
      <div>
        <Card title="菜单管理">
          <Row>
            <Col span="6">
              <Card style="min-height:300px;height: calc(100vh - 274px);">
                <ButtonGroup>
                  <Button type="success" @click="handleAdd" size="small">增加</Button>
                  <Button type="primary" @click="handleUpdate" size="small">修改</Button>
                  <Button type="error" @click="handleDelete" size="small">删除</Button>
                </ButtonGroup>
                <Tree :data="roleTreeDate" @on-select-change="onSelectChange"></Tree>
              </Card>
            </Col>
            <Col span="17" offset="1">
              <Card :title="parentTreeName">
                <div>
                  <div style="display:inline-block;float:left;">
                    <Button type="success" @click="handleTreeButton">+创建按钮</Button>
                  </div>
                  <div style="display:inline-block;float:right;">
                    <Input v-model="search" suffix="ios-search" placeholder="请输入查询的条件" style="width: auto"
                           :search=true @on-search="handleSearch"/>
                  </div>
                </div>
                <div style="clear: both;"></div>
                <div style="margin-top: 10px;">
                  <Table ref="treeButtonTable" @on-sort-change="onSortChange" :columns="columns" :data="treeButtonData"
                         :height="tableHeight">
                    <template slot-scope="{ row, index }" slot="treeName">
                      <Input type="text" v-model="editTreeName" v-if="editIndex === index"/>
                      <span v-else>{
       { row.treeName }}</span>
                    </template>
    
                    <template slot-scope="{ row, index }" slot="treeCode">
                      <Input type="text" v-model="editTreeCode" v-if="editIndex === index"/>
                      <span v-else>{
       { row.treeCode }}</span>
                    </template>
    
                    <template slot-scope="{ row, index }" slot="treeState">
                      <span v-if="row.treeState=='1'">可用</span>
                      <span v-else>禁用</span>
                    </template>
    
                    <template slot-scope="{ row, index }" slot="action">
                      <div v-if="editIndex === index">
                        <Button size="small" type="success" @click="handleUpdateButton(index)">更新
                        </Button>
                        <Button size="small" type="error" @click="editIndex = -1">取消</Button>
                      </div>
                      <div v-else>
                        <Button type="success" @click="handleEditButton(row, index)" size="small">编辑
                        </Button>
                        <Button type="error" @click="handleDeleteButton(row)" size="small">删除</Button>
                        <Button type="primary" v-if="row.treeState=='1'" @click="handleOperate(row,'2')" size="small">
                          冻结
                        </Button>
                        <Button type="info" v-else @click="handleOperate(row,'1')" size="small">解冻
                        </Button>
                      </div>
                    </template>
                  </Table>
                </div>
                <div style="margin-top: 10px;">
                  <Page show-elevator show-sizer show-total :total="total" :current="current"
                        :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize"/>
                </div>
              </Card>
            </Col>
          </Row>
        </Card>
        <addTree v-model="addTreeShow" :parentTreeId="parentTreeId" :parentTreeName="parentTreeName"
                 v-on:reloadTree="initTree"></addTree>
      </div>
    </template>
    <script>
      import {
        getTreeList,
        queryTreeButtonList,
        deleteButton,
        operateButton,
        deleteTree
      } from "../../../api/sys/tree/tree.api"
      import addTree from './addTree'
    
      export default {
        name: 'treeList',
        components: {
          addTree
        },
        data() {
          return {
            addTreeShow: false,
            roleTreeDate: [],
            hasChildren: false,
            parentTreeName: '顶层节点',
            parentTreeId: 0,
            search: '',
            key: '',
            order: '',
            total: 0,
            current: 1,
            pageSize: 10,
            columns: [
              {
                title: '按钮名称',
                slot: 'treeName',
                key: 'treeName',
                sortable: true
              }, {
    
                title: '按钮编码',
                slot: 'treeCode',
                key: 'treeCode',
                sortable: true
              },
              {
                title: '按钮状态',
                key: 'treeState',
                slot: 'treeState',
                sortable: true
              },
              {
                title: '操作',
                slot: 'action'
              }
            ],
            treeButtonData: [],
            editTreeName: '',
            editTreeCode: '',
            editTreeId: 0,
            editIndex: -1,
            tableHeight: 150
          }
        },
        methods: {
          handleOperate(row, treeState) {
            console.log('操作')
          },
          handleTreeButton() {
            console.log('增加按钮')
          },
          handleDeleteButton(row) {
            console.log('删除按钮')
          },
          handleEditButton(row, index) {
            console.log('编辑按钮')
          },
          handleUpdateButton(index) {
            console.log('更新按钮')
          },
          changePage(current) {
            this.current = current;
            this.handleSearch();
          },
          changePageSize(pageSize) {// 改变每页记录的条数
            this.pageSize = pageSize;
            this.handleSearch();
          },
          onSortChange(sort) {
            if (sort.order == 'normal') {
              this.order = '';
            } else {
              this.key = sort.key;
              this.order = sort.order;
            }
            this.handleSearch();
          },
          handleSearch() {
            console.log('--查询--')
          },
          handleAdd() {
            this.addTreeShow = true;
          },
          handleUpdate() {
            console.log('修改菜单')
          },
          handleDelete() {
            console.log('删除菜单')
          },
          onSelectChange(data) {
    // 如果长度为0说明当前没有任何节点被选中
            if (data.length == 0) {
              this.parentTreeId = 0;
              this.parentTreeName = '顶层节点';
              this.hasChildren = false;
            } else {
              this.parentTreeId = data[0].treeId;
              this.parentTreeName = data[0].title;
              if (data[0].children.length == 0) {
                this.hasChildren = false;
              } else {
                this.hasChildren = true;
              }
            }
          },
          initTree() {
            const _this = this;
            getTreeList({}).then(res => {
              if (res.code == 200) {
                _this.roleTreeDate = res.obj;
              } else {
                this.$Message.error("加载菜单节点失败，请与管理员联系！")
              }
            });
          }
        },
        mounted() {
          // 初始化完成以后加载菜单数据
          this.initTree();
          this.tableHeight = window.innerHeight - this.$refs.treeButtonTable.$el.offsetTop - 335
        }
      }
    </script>

接着我们运行我们的项目，点击增加按钮会弹出增加菜单的框，接着在增加菜单的框中输入相应的数据提交会模拟mock进行数据的提交，同时刷新菜单页面，页面如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]

## 菜单管理之修改菜单 ##

同增加菜单，我们在tree目录底下创建一个updateTree.vue实现更新我们的菜单，代码如下：

<template>
      <Modal v-model="show" title="修改菜单" @on-ok="ok" :loading="loading" :mask-closable="false">
        <Form ref="treeForm" :model="treeForm" :rules="treeFormRule">
          <FormItem label="父菜单名称">
            <Input type="text" v-model="treeForm.parentTreeName" disabled/>
          </FormItem>
          <FormItem label="菜单名称" prop="treeName">
            <Input type="text" :maxlength=50 v-model="treeForm.treeName" placeholder="请输入菜单名称"/>
          </FormItem>
          <FormItem label="菜单编码" prop="treeCode">
            <Input type="text" :maxlength=50 v-model="treeForm.treeCode" placeholder="请输入菜单编码"/>
          </FormItem>
          <FormItem label="菜单权限">
            <Input type="textarea" :rows="4" :maxlength=500 v-model="treeForm.powerPath" placeholder="请输入菜单权限"/>
          </FormItem>
        </Form>
      </Modal>
    </template>
    <script>
      import {checkTreeCode, getTreeByTreeId, updateTree} from "../../../api/sys/tree/tree.api"
    
      export default {
        name: "updateTree",
        props: {
          value: {
            type: Boolean,
            default: false
          },
          treeId: {
            type: Number
          }
        },
        data() {
          return {
            show: this.value,
            loading: true,
            treeForm: {
              treeName: '',
              treeCode: '',
              treeId: '',
              parentTreeName: '',
              powerPath: ''
            },
            treeFormRule: {
              treeName: [
                {required: true, message: '菜单名称不能为空！', trigger: 'blur'},
                {type: 'string', max: 50, message: '菜单名称最大长度为50.', trigger: 'blur'}
              ],
              treeCode: [
                {required: true, message: '菜单编码不能为空！', trigger: 'blur'},
                {type: 'string', max: 50, message: '菜单编码最大长度为50.', trigger: 'blur'},
                {
                  validator: this.checkTreeCode({
                    response: 'exist'
                  }), trigger: 'blur'
                }
              ]
            }
          }
        },
        methods: {
          ok() {
            this.$refs['treeForm'].validate((valid) => {
              if (valid) {
                updateTree(this.treeForm).then(res => {
                  if (res.code == 200) {
                    this.$Message.success('修改菜单成功！');
                    // 提交表单数据成功则关闭当前的modal框
                    this.closeModal(false);
                    // 同时调用父页面的刷新页面的方法
                    this.$emit('reloadTree');
                  } else {
                    this.$Message.error(res.msg);
                  }
                })
              } else {
                this.$Message.error('表单验证不通过');
              }
              setTimeout(() => {
                this.loading = false;
                this.$nextTick(() => {
                  this.loading = true;
                });
              }, 1000);
            });
          },
          checkTreeCode() {
            let _this = this;
            return function (rule, value, callback) {
              let treeCode = value;
              checkTreeCode({treeCode: treeCode, treeId: _this.treeId}).then(res => {
                if (res.obj.success == 'pass') {
                  callback();
                } else {
                  callback(new Error('菜单编码已存在'));
                }
              });
            };
          },
          closeModal(val) {
            this.$emit('input', val);
          }
        },
        watch: {
          value(val) {
            this.show = val;
          },
          show(val) {
            //当重新显示增加数据的时候重置整个form表单
            if (val) {
              this.$refs['treeForm'].resetFields();
              getTreeByTreeId({treeId: this.treeId}).then(res => {
                if (res.code == 200) {
                  this.treeForm = res.obj;
                } else {
                  this.$Message.error(res.msg);
                }
              });
            } else {// 反之则关闭页面
              this.closeModal(val);
            }
          }
        }
      }
    
    </script>

接着同新增菜单的位置进行改造treeList.vue，改造完成以后的代码如下：

<template>
      <div>
        <Card title="菜单管理">
          <Row>
            <Col span="6">
              <Card style="min-height:300px;height: calc(100vh - 274px);">
                <ButtonGroup>
                  <Button type="success" @click="handleAdd" size="small">增加</Button>
                  <Button type="primary" @click="handleUpdate" size="small">修改</Button>
                  <Button type="error" @click="handleDelete" size="small">删除</Button>
                </ButtonGroup>
                <Tree :data="roleTreeDate" @on-select-change="onSelectChange"></Tree>
              </Card>
            </Col>
            <Col span="17" offset="1">
              <Card :title="parentTreeName">
                <div>
                  <div style="display:inline-block;float:left;">
                    <Button type="success" @click="handleTreeButton">+创建按钮</Button>
                  </div>
                  <div style="display:inline-block;float:right;">
                    <Input v-model="search" suffix="ios-search" placeholder="请输入查询的条件" style="width: auto"
                           :search=true @on-search="handleSearch"/>
                  </div>
                </div>
                <div style="clear: both;"></div>
                <div style="margin-top: 10px;">
                  <Table ref="treeButtonTable" @on-sort-change="onSortChange" :columns="columns" :data="treeButtonData"
                         :height="tableHeight">
                    <template slot-scope="{ row, index }" slot="treeName">
                      <Input type="text" v-model="editTreeName" v-if="editIndex === index"/>
                      <span v-else>{
       { row.treeName }}</span>
                    </template>
    
                    <template slot-scope="{ row, index }" slot="treeCode">
                      <Input type="text" v-model="editTreeCode" v-if="editIndex === index"/>
                      <span v-else>{
       { row.treeCode }}</span>
                    </template>
    
                    <template slot-scope="{ row, index }" slot="treeState">
                      <span v-if="row.treeState=='1'">可用</span>
                      <span v-else>禁用</span>
                    </template>
    
                    <template slot-scope="{ row, index }" slot="action">
                      <div v-if="editIndex === index">
                        <Button size="small" type="success" @click="handleUpdateButton(index)">更新
                        </Button>
                        <Button size="small" type="error" @click="editIndex = -1">取消</Button>
                      </div>
                      <div v-else>
                        <Button type="success" @click="handleEditButton(row, index)" size="small">编辑
                        </Button>
                        <Button type="error" @click="handleDeleteButton(row)" size="small">删除</Button>
                        <Button type="primary" v-if="row.treeState=='1'" @click="handleOperate(row,'2')" size="small">
                          冻结
                        </Button>
                        <Button type="info" v-else @click="handleOperate(row,'1')" size="small">解冻
                        </Button>
                      </div>
                    </template>
                  </Table>
                </div>
                <div style="margin-top: 10px;">
                  <Page show-elevator show-sizer show-total :total="total" :current="current"
                        :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize"/>
                </div>
              </Card>
            </Col>
          </Row>
        </Card>
        <addTree v-model="addTreeShow" :parentTreeId="parentTreeId" :parentTreeName="parentTreeName"
                 v-on:reloadTree="initTree"></addTree>
        <updateTree v-model="updateTreeShow" :treeId="parentTreeId" v-on:reloadTree="initTree"></updateTree>
      </div>
    </template>
    <script>
      import {
        getTreeList,
        queryTreeButtonList,
        deleteButton,
        operateButton,
        deleteTree
      } from "../../../api/sys/tree/tree.api"
      import addTree from './addTree'
      import updateTree from './updateTree'
    
      export default {
        name: 'treeList',
        components: {
          addTree,
          updateTree
        },
        data() {
          return {
            addTreeShow: false,
            updateTreeShow: false,
            roleTreeDate: [],
            hasChildren: false,
            parentTreeName: '顶层节点',
            parentTreeId: 0,
            search: '',
            key: '',
            order: '',
            total: 0,
            current: 1,
            pageSize: 10,
            columns: [
              {
                title: '按钮名称',
                slot: 'treeName',
                key: 'treeName',
                sortable: true
              }, {
    
                title: '按钮编码',
                slot: 'treeCode',
                key: 'treeCode',
                sortable: true
              },
              {
                title: '按钮状态',
                key: 'treeState',
                slot: 'treeState',
                sortable: true
              },
              {
                title: '操作',
                slot: 'action'
              }
            ],
            treeButtonData: [],
            editTreeName: '',
            editTreeCode: '',
            editTreeId: 0,
            editIndex: -1,
            tableHeight: 150
          }
        },
        methods: {
          handleOperate(row, treeState) {
            console.log('操作')
          },
          handleTreeButton() {
            console.log('增加按钮')
          },
          handleDeleteButton(row) {
            console.log('删除按钮')
          },
          handleEditButton(row, index) {
            console.log('编辑按钮')
          },
          handleUpdateButton(index) {
            console.log('更新按钮')
          },
          changePage(current) {
            this.current = current;
            this.handleSearch();
          },
          changePageSize(pageSize) {// 改变每页记录的条数
            this.pageSize = pageSize;
            this.handleSearch();
          },
          onSortChange(sort) {
            if (sort.order == 'normal') {
              this.order = '';
            } else {
              this.key = sort.key;
              this.order = sort.order;
            }
            this.handleSearch();
          },
          handleSearch() {
            console.log('--查询--')
          },
          handleAdd() {
            this.addTreeShow = true;
          },
          handleUpdate() {
            if (this.parentTreeId == 0) {
              this.$Message.warning('请选择需要修改的菜单节点');
              return;
            }
            this.updateTreeShow = true
          },
          handleDelete() {
            console.log('删除菜单')
          },
          onSelectChange(data) {
            // 如果长度为0说明当前没有任何节点被选中
            if (data.length == 0) {
              this.parentTreeId = 0;
              this.parentTreeName = '顶层节点';
              this.hasChildren = false;
            } else {
              this.parentTreeId = data[0].treeId;
              this.parentTreeName = data[0].title;
              if (data[0].children.length == 0) {
                this.hasChildren = false;
              } else {
                this.hasChildren = true;
              }
            }
          },
          initTree() {
            const _this = this;
            getTreeList({}).then(res => {
              if (res.code == 200) {
                _this.roleTreeDate = res.obj;
              } else {
                this.$Message.error("加载菜单节点失败，请与管理员联系！")
              }
            });
          }
        },
        mounted() {
          // 初始化完成以后加载菜单数据
          this.initTree();
          this.tableHeight = window.innerHeight - this.$refs.treeButtonTable.$el.offsetTop - 335
        }
      }
    </script>

然后我们运行我们的项目，当我们选择某个菜单的时候点击修改会看到如下的页面，则说明我们的修改菜单已经完成了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]

## 菜单管理之删除菜单 ##

打开我们的treeList.vue页面，然后修改我们的handleDelete方法，修改好以后的方法如下：

handleDelete() {
            if (this.parentTreeId == 0) {
              this.$Message.warning('请选择需要删除的菜单节点');
              return;
            }
            this.$Modal.confirm({
              title: '删除菜单',
              content: '<p>是否删除当前的菜单节点</p>',
              onOk: () => {
                deleteTree({treeId: this.parentTreeId}).then(res => {
                  if (res.code == 200) {
                    this.$Message.success(res.msg);
                    this.parentTreeId = 0;
                    this.parentTreeName = '顶层节点';
                    // 删除数据成功同时刷新grid
                    this.initTree();
                  } else {
                    this.$Message.warning(res.msg);
                  }
                });
              },
              onCancel: () => {
                this.$Message.info('取消了删除');
              }
            });
          }

接着我们再次运行我们的项目，然后选择一个菜单节点，点击删除按钮会看到如下页面则说明我们的删除菜单已经完成了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 4]  
到此处我们就完成了菜单管理的增删改的功能了。  
上一篇文章地址：[spring boot+iview 前后端分离架构之菜单管理首页的实现（十四）][spring boot_iview]  
下一篇文章地址：[spring boot+iview 前后端分离架构之角色管理布局和列表的实现（十六）][spring boot_iview 1]

[20191218155125364.jpg]: /images/20211221/5e3ffed8976a4e629de7d89a40fd87ce.png
[20190627230102675.png]: /images/20211221/26cf06dd305b4e6c8a5586545f9ccde0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20211221/4237457503dc4431a577c6e81a4f78e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20211221/5ad434c4e0bc46f280292cb248d5b0fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]: /images/20211221/32361432a2674285843eb5d331ad0b6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]: /images/20211221/a3cc235b9cc54c64b0d34ce6196109ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 4]: /images/20211221/763f10b820c0424aa821c6f9fbc6af44.png
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/93871593
[spring boot_iview 1]: https://blog.csdn.net/linzhefeng89/article/details/94357386