vue2+node（koa2）+mongodb（mongoose）前后端访问

- 日理万妓 2021-09-07 06:14 537阅读 0赞

**目录**

一、服务端-koa2

1、koa-generator搭建koa2项目

2、封装mongoose连接池

新建路由

注册路由

二、客户端-Vue2

封装axios.js

解决跨域

前端访问-增删改查

三、数据库-mongoose

四、综合示例（增删改查、多条件模糊查询、批量删除、图片的上传、回显、删除）

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

参考：

[https://blog.csdn.net/qq\_40323256/article/details/103558128][https_blog.csdn.net_qq_40323256_article_details_103558128]

[https://blog.csdn.net/qq\_40323256/article/details/115487710][https_blog.csdn.net_qq_40323256_article_details_115487710]

【

注意：对于路由传值

前端发送：request(\{url: \`/api/user/delete/**$\{id\}**\`,method: 'delete' \})，

后台接受：router.delete('/user/delete/**:id**', (ctx, next) => \{ let \{ id \} = **ctx.params**\}）

】

# 一、服务端-koa2 #

## 1、koa-generator搭建koa2项目 ##

首先使用koa脚手架搭建好基础的框架，具体步骤，见：[https://blog.csdn.net/qq\_40323256/article/details/109256624][https_blog.csdn.net_qq_40323256_article_details_109256624]

## 2、封装mongoose连接池 ##

安装mongoose包

cnpm i -S mongoose

在根目录下新建db.js

![20201024164541444.png][]

//db.js
    let mongoose = require('mongoose')
    mongoose.set('useCreateIndex', true)
    mongoose.set('useNewUrlParser', true)
    mongoose.set('useUnifiedTopology', true)
    
    const DB_NAME = 'testdb'//数据库名，自己更换
    const DB_URL = 'localhost:27017'
    mongoose.connect(`mongodb://${DB_URL}/${DB_NAME}`)
    mongoose.connection.on('open', err => {
        if (err) {
            console.log(err)
            return
        }
        console.log("数据库连接成功！")
    })
    module.exports = mongoose;

## 新建路由 ##

![20210304150513249.png][]

在server文件夹下新建model文件夹，里面存放所有的model，比如model下的user.js，其内容如下：

const mongoose = require('../db.js')
    let UserSchema = mongoose.Schema({
        // 账号
        username: {
            type: String,
            required: true,
            unique: true
        },
        // 密码
        password: String,
    })
    
    // 创建模型对象
    // 第一个参数与集合对应，第二个对象指定约束对象实例
    module.exports = mongoose.model('User', UserSchema, "user")

在routes文件夹中创建user.js

routes/user.js内容如下：

const router = require('koa-router')()
    const UserModel = require('../model/user.js')
    
    router.prefix('/user')
    
    //查找所有用户
    router.get('/find', async(ctx, next) => {
        let result = await UserModel.find({})
        if (result) {
            console.log("成功了：", result)
            ctx.body = { message: "成功！" }
        } else {
            ctx.body = { message: "失败le " }
        }
    })
    
    //添加用户
    router.post('/add', async(ctx, next) => {
        let { username, password } = ctx.request.body
    
        const result = await UserModel.create({
            username: username,
            password: password
        })
    
        if (result) {
            console.log("成功了：", result)
            ctx.body = { message: "成功！" }
        } else {
            ctx.body = { message: "失败le " }
            console.log("失败了")
        }
    })
    
    //更新用户
    router.post('/update', async(ctx, next) => {
        let { username, password } = ctx.request.body
    
        let result = await UserModel.updateOne({ username: username }, { password: password })
        if (result) {
            console.log("成功了：", result)
            ctx.body = { message: "成功！" }
        } else {
            ctx.body = { message: "失败le " }
            console.log("失败了")
        }
    })
    
    //删除用户
    router.post('/delete', async(ctx, next) => {
        let { username } = ctx.request.body
        let result = await UserModel.deleteOne({ username: username })
    
        if (result) {
            console.log("成功了：", result)
            ctx.body = { message: "成功！" }
        } else {
            ctx.body = { message: "失败le " }
            console.log("失败了")
        }
    })
    
    
    module.exports = router

（**注意：在后端打印ctx后虽然找不到request，更没有body，但是可以直接使用ctx.request!!!。通过ctx.request.****body****获取post请求参数（请求对象放在data属性中），ctx.request.****query****获取get请求参数（请求对象要放在params属性中，其和url并列），ctx.****params****获取动态路由上的参数，ctx.request.****headers****获取里面的token**）

**（注意：koa中一定一定要用****await****的方式获取异步请求数据！！！！！！！！！****千万不要用回调的方式****给前端发送数据，否则前端获取不到数据！！会报404的错误！这是它和express一个很大的区别点，因为express除了可以用await，还可以用回调的方式给前端发送数据）**

## 注册路由 ##

在app.js中将routes/user.js给注册进来

![20210304150559744.png][]![20210304150613325.png][]

此外,koa中提示：

const server = require('http').Server(app.callback());
    let port = "xxxx"//自定义
    server.listen(process.env.PORT || port, () => {
      console.log(`监听地址: http://127.0.0.1:${port}`);
    })

# 二、客户端-Vue2 #

（可以直接拉取基础版的过来：[https://gitee.com/LiDaJiang/vue\_base][https_gitee.com_LiDaJiang_vue_base]）

## 封装axios.js ##

![20201024165216317.png][]

axios.js内容如下：

import axios from 'axios'
    import qs from 'qs'
    
    axios.defaults.timeout = 5000
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'
    
    //请求拦截器
    axios.interceptors.request.use(
        config => {
            return config
        },
        error => {
            return Promise.reject(error)
        }
    )
    //响应拦截器即异常处理
    axios.interceptors.response.use(response => {
        return response
    }, err => {
        return Promise.resolve(err.response)
    })
    
    export default {
        get(url, params = {}) {
            return new Promise((resolve, reject) => {
                axios.get(url, {
                    params: params
                }).then(res => {
                    resolve(res)
                }).catch(err => {
                    reject(err)
                })
            })
        },
    
        post(url, params = {}) {
            return new Promise((resolve, reject) => {
                axios.post(url, qs.stringify(params))
                    .then(response => {
                        resolve(response)
                    }).catch(err => {
                        reject(err)
                    })
            })
        }
    }

main.js中注册为全局

//全局注册axios
    import http from '@/api/axios.js'
    Vue.prototype.$axios = http

## 解决开发环境跨域 ##

在根目录新建vue.config.js

// vue.config.js
    module.exports = {
        lintOnSave: false, //取消eslint
        devServer: {
            proxy: {
                '/api': {
                    target: 'http://localhost:3000', //设置开发环境服务域名和端口号 别忘了加http
                    //target: process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'http://120.76.197.111:7000',
     //上线改为 http://公网ip：线上端口。阿里云记得开放端口
                    changeOrigin: true, //這裡true表示实现跨域
                    pathRewrite: {
                        '^/api': ''
                    }
                }
            }
        }
    }

（注意：koa中解决线上跨域最好装**koa2-cors**，不要直接装cors，不然可能会报错。）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

## 前端访问-增删改查 ##

<template>
      <div class="main">
         <el-button @click="selectAllUsers()">selectAllUsers</el-button>
         <el-button @click="addUsers()">addUsers</el-button>
         <el-button @click="updateUsers()">updateUsers</el-button>
         <el-button @click="deleteUsers()">deleteUsers</el-button>
      </div>
    </template>
    
    <script>
    export default {
      components: {},
      data() {
        return {};
      },
      props: {},
      created() {},
      mounted() {},
      computed: {},
      methods: {
        //查询所有用户
        async selectAllUsers() {
          let data = await this.$axios.get("/api/user/find");
          console.log("data", data);
        },
        //添加用户
        async addUsers() {
          let obj = {
            username: "王五1assdd",
            password: "5551asdf"
          };
          let data = await this.$axios.post("/api/user/add",obj);
          console.log("data", data);
        },
        //修改用户
        async updateUsers() {
          let obj = {
            username: "zhangsan",
            password: 55555555
          };
          let data = await this.$axios.post("/api/user/update", obj);
          console.log("data", data);
        },
        //删除用户
        async deleteUsers() {
          let obj = {
            username: 'zhangsan'
          };
          let data = await this.$axios.post("/api/user/delete", obj);
          console.log("data", data);
        }
      }
    };
    </script>
    
    <style lang="scss" scoped>
    .main {
      height: 100%;
      color: red;
    }
    </style>

# 三、数据库-mongoose #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

# 四、综合示例 #

## 1、图片上传到本地服务器 ##

gitee地址：[https://gitee.com/LiDaJiang/vue2\_koa2\_mongoose][https_gitee.com_LiDaJiang_vue2_koa2_mongoose]

效果图：

![20210312220921603.gif][]

前端：main.vue:

<template>
      <div style="padding: 10px;">
        <el-card>
          <div>
            用户名：
            <el-input
              placeholder="请输入用户名"
              v-model="formdata_userSearch.username"
              style="width:180px;margin-right:10px"
              size="mini"
              clearable
            ></el-input>密码：
            <el-input
              placeholder="请输入密码"
              v-model="formdata_userSearch.password"
              style="width:180px;margin-right:10px"
              size="mini"
              clearable
            ></el-input>
            <el-button type="primary" @click="selectAllUsers()" size="mini">
              <i class="el-icon-search" /> 搜索
            </el-button>
            <el-button plain size="mini" @click="resetSearch()">
              <i class="el-icon-refresh" /> 重置
            </el-button>
          </div>
    
          <div style="margin:10px 0">
            <el-button @click="openUserAdd()" size="mini" plain>
              <i class="el-icon-plus" /> 新增
            </el-button>
            <el-button @click="deleteMultiUser()" size="mini" type="danger" plain>
              <i class="el-icon-delete" /> 删除
            </el-button>
          </div>
          
          <el-table
            :data="tableData.slice((pageInfo.currentPage-1)*pageInfo.pageSize,pageInfo.currentPage*pageInfo.pageSize)"
            style="width: 100%;margin-top:10px"
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="_id" prop="_id"></el-table-column>
            <el-table-column label="用户名" prop="username" align="center"></el-table-column>
            <el-table-column label="密码" prop="password" align="center"></el-table-column>
            <el-table-column label="头像" prop="imgpath" align="center" width="85">
              <template slot-scope="scope">
                <el-avatar :src="scope.row.imgpath"></el-avatar>
              </template>
            </el-table-column>
    
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
                  <i class="el-icon-edit" /> 编辑
                </el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
                  <i class="el-icon-delete" /> 删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.currentPage"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.pageTotal"
          ></el-pagination>
        </el-card>
    
        
        <el-dialog title="添加用户" :visible.sync="dialogFormVisible_userAdd">
          <el-form :rules="rules" ref="ref_userAdd" :model="formdata_userAdd" label-width="80px">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="formdata_userAdd.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="formdata_userAdd.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="头像">
              <el-upload
                ref="ref_upload_add"
                list-type="picture"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove"
                :auto-upload="true"
                action="/api/user/uploadimg"
                :limit="1"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传1张jpg/png格式图片，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancelUserAdd()">取 消</el-button>
            <el-button type="primary" @click="addUsers()">确 定</el-button>
          </div>
        </el-dialog>
    
        
        <el-dialog title="编辑用户" :visible.sync="dialogFormVisible_userEdit">
          <el-row :gutter="20">
            <el-col :span="13">
              <el-card style="height:400px">
                <el-form ref="ref_userEdit" :model="formdata_userEdit" label-width="80px">
                  <el-form-item label="用户名" prop="username">
                    <el-input v-model="formdata_userEdit.username" autocomplete="off" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="password">
                    <el-input v-model="formdata_userEdit.password" autocomplete="off" clearable></el-input>
                  </el-form-item>
                </el-form>
                <div style="text-align:right">
                  <el-button @click="dialogFormVisible_userEdit=false">关闭窗口</el-button>
                  <el-button type="primary" @click="editUser()">确 定</el-button>
                </div>
              </el-card>
            </el-col>
            <el-col :span="11">
              <el-card>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="formdata_userEdit.imgpath"
                  fit="fill"
                ></el-image>
    
                <el-upload
                  ref="upload_edit"
                  list-type="picture"
                  :on-success="handleAvatarSuccess_userEdit"
                  :auto-upload="false"
                  action="/api/user/uploadimg"
                  :limit="1"
                >
                  <el-button size="small" type="primary">更换图像</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传1张jpg/png格式图片，且不超过500kb</div>
                </el-upload>
                <el-button size="small" plain type="primary" @click="editAvatar()">上传服务器</el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-dialog>
      </div>
    </template>
    
    <script>
    export default {
      components: {},
      data() {
        return {
          //查询用户信息
          formdata_userSearch: {
            username: "",
            password: ""
          },
          //新增用户表单
          formdata_userAdd: {
            username: "",
            password: "",
            imgpath: ""
          },
          //新增用户规则
          rules: {
            username: [
              { required: true, message: "请输入用户名", trigger: "blur" },
              { min: 3, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" }
            ]
          },
          //编辑用户表单
          formdata_userEdit: {
            username: "",
            password: "",
            imgpath: ""
          },
          //分页
          pageInfo: {
            currentPage: 1,
            pageSize: 5,
            pageTotal: 20
          },
          //用户列表
          tableData: [
            {
              _id: "",
              username: "张三",
              password: "333",
              imgpath:
                "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            }
          ],
          //是否打开新增用户窗口
          dialogFormVisible_userAdd: false,
          //是否打开编辑用户窗口
          dialogFormVisible_userEdit: false,
          //用户列表多选
          multipleSelection: []
        };
      },
      props: {},
      created() {
        this.selectAllUsers();
      },
      mounted() {},
      computed: {},
      methods: {
        //每页列表数量
        handleSizeChange(val) {
          this.pageInfo.pageSize = val;
        },
        //当前页
        handleCurrentChange(val) {
          this.pageInfo.currentPage = val;
        },
        //查询所有用户(可条件查询)
        async selectAllUsers() {
          let obj = {
            username: this.formdata_userSearch.username,
            password: this.formdata_userSearch.password
          };
          let { data } = await this.$axios.post("/api/user/find", obj);
    
          this.tableData = data.res;
          this.pageInfo.pageTotal = this.tableData.length;
        },
        //重置查询
        async resetSearch() {
          let obj = {
            username: "",
            password: ""
          };
          let { data } = await this.$axios.post("/api/user/find", obj);
          this.tableData = data.res;
          this.formdata_userSearch = {
            username: "",
            password: ""
          };
        },
        //打开添加用户窗口
        openUserAdd() {
          this.dialogFormVisible_userAdd = true;
          this.formdata_userAdd = {
            username: "",
            password: "",
            imgpath: ""
          };
        },
        //添加用户
        addUsers() {
          this.$refs["ref_userAdd"].validate(async valid => {
            if (valid) {
              await this.$axios.post("/api/user/add", this.formdata_userAdd);
              this.$refs.ref_upload_add.clearFiles();
              this.$refs.ref_userAdd.resetFields();
              this.dialogFormVisible_userAdd = false;
              this.selectAllUsers();
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },
        //添加用户时上传头像成功的回调
        async handleAvatarSuccess(res, file) {
          let { imgpath } = res;
          this.formdata_userAdd.imgpath = "http://localhost:3000" + imgpath;
        },
        //添加用户窗口中文件列表移除图片时的钩子
        async handleRemove(file, fileList) {
          let imgpath = this.formdata_userAdd.imgpath;
          let res = await this.$axios.get(`/api/user/removeImg/${imgpath}`);
        },
        //取消添加用户
        cancelUserAdd() {
          this.dialogFormVisible_userAdd = false;
          let imgpath = this.formdata_userAdd.imgpath;
          if (imgpath) {
            this.$axios.get(`/api/user/removeImg/${imgpath}`);
          }
        },
        //打开编辑用户窗口
        handleEdit(index, row) {
          this.dialogFormVisible_userEdit = true;
          let { username, password, imgpath } = row;
          this.formdata_userEdit = {
            username: username,
            password: password,
            imgpath: imgpath
          };
        },
        //编辑窗口提交图片
        async editAvatar() {
          let imgpath = this.formdata_userEdit.imgpath;
          if (imgpath) {
            await this.$axios.get(`/api/user/removeImg/${imgpath}`);
          }
          this.$refs.upload_edit.submit();
        },
        //编辑用户
        async editUser() {
          await this.$axios.post("/api/user/edit", this.formdata_userEdit);
          this.$message.success("编辑成功！");
          this.selectAllUsers();
        },
        //编辑用户窗口中图片上传成功的回调
        async handleAvatarSuccess_userEdit(res, file, fileList) {
          var imgpath = "http://localhost:3000" + res.imgpath;
          let username = this.formdata_userEdit.username;
          await this.$axios.post("/api/user/editAvatar", { username, imgpath });
          this.formdata_userEdit.imgpath = imgpath;
          this.$refs.upload_edit.clearFiles();
          this.selectAllUsers();
        },
        //删除单个用户
        async handleDelete(index, row) {
          await this.$axios.get(`/api/user/delete/${row._id}`);
          this.selectAllUsers();
        },
        //用户列表多选
        async handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        //批量删除用户
        async deleteMultiUser() {
          for (let item of this.multipleSelection) {
            await this.$axios.get(`/api/user/delete/${item._id}`);
          }
          this.selectAllUsers();
        }
      }
    };
    </script>

后端：

server/routes/user.js:

server/model/user.js:

const mongoose = require('../db.js')
    let UserSchema = mongoose.Schema({
        // 账号
        username: {
            type: String,
            required: true,
            unique: true
        },
        // 密码
        password: String,
        imgpath: String
    })
    
    // 创建模型对象
    // 第一个参数与集合对应，第二个对象指定约束对象实例
    module.exports = mongoose.model('User', UserSchema, "user")

## 2、图片上传到阿里云oss ##

参考：[https://blog.csdn.net/qq\_40323256/article/details/115736466][https_blog.csdn.net_qq_40323256_article_details_115736466]

优化：

1、多条件模糊查询时，可用get传参代替post传参

![20210712174249203.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5][]

2、批量删除 推荐用**$in**的方式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/badab57a608449d998552553372df1d2.png
[https_blog.csdn.net_qq_40323256_article_details_103558128]: https://blog.csdn.net/qq_40323256/article/details/103558128
[https_blog.csdn.net_qq_40323256_article_details_115487710]: https://blog.csdn.net/qq_40323256/article/details/115487710
[https_blog.csdn.net_qq_40323256_article_details_109256624]: https://blog.csdn.net/qq_40323256/article/details/109256624
[20201024164541444.png]: /images/20210725/ede0956db79b478fb1eec1b8b405d8ea.png
[20210304150513249.png]: /images/20210725/1429ad7f88134cff8d852765d8043bbd.png
[20210304150559744.png]: https://img-blog.csdnimg.cn/20210304150559744.png
[20210304150613325.png]: /images/20210725/84da966fc5df4ee9b2868a89cba416db.png
[https_gitee.com_LiDaJiang_vue_base]: https://gitee.com/LiDaJiang/vue_base
[20201024165216317.png]: /images/20210725/0c74266df8034d14869b23d981615d51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/03b7b01d860840a991855217ae55ed1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/81944e1b4a01467690fffd2966bd7f22.png
[https_gitee.com_LiDaJiang_vue2_koa2_mongoose]: https://gitee.com/LiDaJiang/vue2_koa2_mongoose
[20210312220921603.gif]: /images/20210725/70aa7dfcbb34482882daac24a33ac7d0.png
[https_blog.csdn.net_qq_40323256_article_details_115736466]: https://blog.csdn.net/qq_40323256/article/details/115736466
[20210712174249203.png]: /images/20210725/0d03351e77554ebda5202f7c4c122c80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/8e3a00b2ab3e4f8cb93e408fa1f9e2ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210712174342377.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5]: /images/20210725/d9632ab6369d420b9ebb4e3756d31251.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6]: /images/20210725/7c7e9fa28a094ae99788d0fd6addcfe6.png