vue对表单的增删改查（包含图片）

港控/mmm° 2021-07-25 22:05 536阅读 0赞

**目录**

效果图：

客户端

views/userManage/index.vue

views/userManage/userManageDialog

utils/alioss.js

utils/index.js

utils/request.js

router.js

main.js

vue.config.js

服务端

models/User.js

routes/user.js

db.js

app.js

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

gitee地址：[https://gitee.com/LiDaJiang/git\_vue2\_koa2\_mongoose\_zsgc\_alioss/tree/master][https_gitee.com_LiDaJiang_git_vue2_koa2_mongoose_zsgc_alioss_tree_master]

# 效果图： #

![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 1][] #

# 客户端 #

![20210505132550705.png][]

## views/userManage/index.vue ##

<template>
      <div class="userManage">
        <el-card>
          <div style="margin-bottom: 10px">
            <el-input
              v-model="searchName"
              clearable
              placeholder="输入用户名称搜索"
              style="width: 200px; margin-right: 10px"
            />
            <el-button
              sizi="mini"
              type="success"
              icon="el-icon-search"
              @click="searchUser(searchName)"
            >搜索</el-button>
            <el-button
              sizi="mini"
              type="warning"
              icon="el-icon-refresh-left"
              @click="searchName = ''"
            >重置</el-button>
            <el-button sizi="mini" @click="handleAdd()" type="primary" icon="el-icon-plus">新增</el-button>
            <el-button @click="getUserList()" sizi="mini" icon="el-icon-refresh" style="float: right">刷新</el-button>
          </div>
          <el-table :data="tableData" border v-loading="isLoading">
            <el-table-column label="用户名" prop="username" align="center" width="150px"></el-table-column>
            <el-table-column label="密码" prop="password" align="center"></el-table-column>
            <el-table-column label="图片" align="center">
              <template slot-scope="scope">
                <div
                  style="
                    display: flex;
                    justify-content: space-around;
                    flex-flow: row wrap;
                  "
                >
                  <el-image
                    style="width: 50px; height: 50px"
                    v-for="(item, index) in scope.row.imgurl"
                    :key="index"
                    :src="item"
                    :preview-src-list="scope.row.imgurl"
                  ></el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="showEditDialog(scope.row)">
                  <i class="el-icon-edit" /> 编辑
                </el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
                  <i class="el-icon-delete" /> 删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <UserManageDialog :dialog="dialog" :formData="formData" @addUser="addUser" @editUser="editUser"></UserManageDialog>
      </div>
    </template>
     
    <script>
    import UserManageDialog from "./userManageDialog.vue";
    import client_alioss from "@/utils/alioss.js";
    import { deleteUrls, arrayDifference } from "@/utils/index.js";
    import {
      addUser,
      getUserList,
      editUser,
      deleteUser,
      searchUser
    } from "@/api/userManage/index";
    export default {
      name: "userManage",
      components: { UserManageDialog },
      data() {
        return {
          searchName: "",
          isLoading: false,
          dialog: {
            show: false,
            title: ""
          },
          formData: {},
          tableData: [
            {
              _id: "",
              username: "admin",
              password: "123",
              imgurl: []
            }
          ],
          currentImgs: []
        };
      },
      props: {},
      created() {},
      mounted() {
        this.getUserList();
      },
      computed: {},
      methods: {
        //获取用户列表
        async getUserList() {
          this.isLoading = true;
          let { data } = await getUserList();
          this.tableData = data.data;
          this.isLoading = false;
        },
    
        //打开新增用户窗口
        handleAdd() {
          this.dialog = {
            show: true,
            title: "新增用户",
            option: "add"
          };
          this.formData = {
            username: "",
            password: "",
            imgurl: []
          };
        },
        //打开编辑用户窗口
        showEditDialog(row) {
          this.currentImgs = row.imgurl;
    
          this.dialog = {
            show: true,
            title: "编辑用户",
            option: "edit"
          };
          this.formData = {
            _id: row._id,
            username: row.username,
            password: row.password,
            imgurl: row.imgurl
          };
        },
        //新增用户
        async addUser(fileList) {
          if (fileList.length !== 0) {
            for (const item of fileList) {
              let { raw, name } = item;
              let newFileName = name.split(".")[0] + "." + name.split(".")[1];
    
              let {
                res: { requestUrls }
              } = await client_alioss.multipartUpload(newFileName, raw); //这里不要写成item.row了！！！
               let { origin, pathname } = new URL(requestUrls[0]);
               this.formData.imgurl.push(origin + decodeURIComponent(pathname));
            }
          }
          await addUser(this.formData);
          this.dialog.show = false;
          this.$notify({
            title: "成功",
            message: "新增用户成功！",
            type: "success"
          });
          this.getUserList();
        },
        //编辑用户
        async editUser(fileList) {
          let arr_uploaded = []; //已经上传的图片url
          let arr_filter = []; //已存在的图片url。不用删除
    
          if (fileList.length !== 0) {
            for (const item of fileList) {
              let { raw, name, url } = item;
              let newFileName = name.split(".")[0] + "." + name.split(".")[1];
    
              //上传选择的本地图片
              if (raw) {
                let {
                  res: { requestUrls }
                } = await client_alioss.multipartUpload(newFileName, raw);
                 let { origin, pathname } = new URL(requestUrls[0]);
                arr_uploaded.push(origin + decodeURIComponent(pathname));
              }
              if (this.currentImgs.includes(url)) {
                arr_filter.push(url);
              }
            }
          }
    
          this.formData.imgurl = [...arr_uploaded, ...arr_filter];
    
          await editUser(this.formData, this.formData._id); //更新数据库，尤其是图片url
    
          deleteUrls(arrayDifference(this.currentImgs, arr_filter), client_alioss);
    
          this.dialog.show = false;
          this.$notify({
            title: "成功",
            message: "编辑用户成功！",
            type: "success"
          });
          this.getUserList();
        },
        //删除用户
        handleDelete({ _id }) {
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(async () => {
              this.$message({
                type: "success",
                message: "删除成功!",
                showClose: true
              });
              let {
                data: { imgurl }
              } = await deleteUser(_id);
    
              deleteUrls(imgurl, client_alioss);
    
              this.getUserList();
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
                showClose: true
              });
            });
        },
        //根据用户名查询
        async searchUser(searchName) {
          this.isLoading = true;
          let { data } = await searchUser({
            searchName
          });
          this.tableData = data.data;
          this.isLoading = false;
        }
      },
      watch: {}
    };
    </script>
     
    <style lang="scss" scoped>
    .userManage {
    }
    </style>

## views/userManage/userManageDialog ##

<template>
      <div class="userManageDialog">
        <el-dialog :title="dialog.title" width="45%" :visible.sync="dialog.show">
          <el-form ref="ref_form_userManage" :model="formData" :rules="rules" label-width="100px">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="formData.username" autocomplete="off" style="width: 90%"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="formData.password" autocomplete="off" style="width: 90%"></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="imgurl">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :file-list="_fileList"
                :on-change="handleChange"
                :on-remove="handleRemove"
                multiple
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialog.show = false">取 消</el-button>
            <el-button
              v-if="dialog.option == 'add'"
              @click="addUser('ref_form_userManage')"
              type="primary"
            >确 定</el-button>
            <el-button
              v-if="dialog.option == 'edit'"
              @click="editUser('ref_form_userManage')"
              type="primary"
            >确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
     
    <script>
    export default {
      name: "userManageDialog",
      components: {},
      props: ["dialog", "formData"],
      data() {
        return {
          fileList: [],
          rules: {
            username: [
              { required: true, message: "请输入用户名称", trigger: "blur" }
            ]
          }
        };
      },
      created() {},
      mounted() {},
      computed: {
        _fileList() {
          const arr = [];
          //一定要this.formData.imgurl判断一下，否则要报错
          //这个计算属性里面注意千万不要console.log()，因为是计算属性
          if (this.formData.imgurl) {
            for (const item of this.formData.imgurl) {
              arr.push({ url: item });
            }
          }
          this.fileList = [...arr]; //这行代码很重要！！
          return arr;
        }
      },
      methods: {
        handleChange(file, fileList) {
          this.fileList = [...fileList];
        },
        handleRemove(file, fileList) {
          this.fileList = [...fileList];
        },
        addUser(formName) {
          this.$refs[formName].validate(valid => {
            if (valid) {
              this.$emit("addUser", [...this.fileList]);
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },
        editUser(formName) {
          this.$refs[formName].validate(valid => {
            if (valid) {
              this.$emit("editUser", [...this.fileList]);
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        }
      },
      watch: {}
    };
    </script>
    <style lang="scss" scoped>
    .userManageDialog {
      /*去除upload组件过渡效果*/
      ::v-deep .el-upload-list__item {
        transition: none !important;
      }
    }
    </style>

## utils/alioss.js ##

const OSS = require("ali-oss");
    let client = new OSS({
        region: "oss-cn-chengdu",//这里改成自己的
        accessKeyId: "xxx",//这里改成自己的
        accessKeySecret: "xxx",//这里改成自己的
        bucket: "bucket-lijiang-test",//这里改成自己的
    
    });
    
    export default client;

## utils/index.js ##

//通过img和video的url组成的数组来删除服务器中的img,video
    export async function deleteUrls(arr_deleteUrl = [], client_alioss = {}) {
        if (arr_deleteUrl.length == 0) {
            return
        }
        let arr_pathname = [];
        for (const item of arr_deleteUrl) {
            let { pathname } = new URL(item);//new URL()解决大图片加载失败问题。因为大图片的url中含有uploadid，导致url不能直接预览
            //decodeURIComponent函数解决中文乱码
            arr_pathname.push(decodeURIComponent(pathname));
        }
        if (arr_pathname.length !== 0) {
            await client_alioss.deleteMulti(arr_pathname);
        }
    }
    
    // 两个数组取差集，返回arrA中有，而arrB中没有的。
    // 如arrA = ["a", "b", "c", "d"];arrB = ["a", "b", "e"];则返回["c","d"]
    export function arrayDifference(arrA, arrB) {
        return arrA.filter(item => !arrB.includes(item))
    }

## utils/request.js ##

import axios from 'axios'
    
    const service = axios.create({
        timeout: 5000
    })
    
    service.interceptors.request.use(
        config => {
            return config
        },
        error => {
            return Promise.reject(error)
        }
    )
    
    service.interceptors.response.use(
        response => {
            return response
        },
        error => {
            return Promise.reject(error)
        }
    )
    
    export default service

## router.js ##

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    const routes = [{
      path: '/',
      name: 'home',
      component: () => import("@/views/home.vue"),
      redirect: "/userManage",
      children: [{
        path: '/userManage',
        name: 'userManage',
        component: () => import("@/views/userManage/index")
      }]
    }]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

## main.js ##

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)
    
    import UUID from "vue-uuid";
    Vue.use(UUID);
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

## vue.config.js ##

module.exports = {
        lintOnSave: false, //取消eslint
        devServer: {
            proxy: {
                '/api': {
                    target: 'http://localhost:3000', //设置开发环境服务域名和端口号 别忘了加http
                    changeOrigin: true, //這裡true表示实现跨域
                    pathRewrite: {
                        '^/api': ''//使用时，如：axios.get('/api/login')
                    }
                }
            }
        }
    }

# 服务端 #

![20210505132508673.png][]

## models/User.js ##

const mongoose = require('../db.js')
    let UserSchema = mongoose.Schema({
        // 用户名
        username: {
            type: String,
            required: true,
            unique: true
        },
        // 密码
        password: String,
        //图片地址
        imgurl: {
            type: Array,
            default: () => []
        },
        date: {
            type: Date,
            default: Date.now
        }
    })
    
    // 创建模型对象
    // 第二个对象指定约束对象实例，第三个对象指定数据库中的表名。有了第三个参数后，第一个参数随便写
    module.exports = mongoose.model('User', UserSchema, "user")

## routes/user.js ##

## db.js ##

//db.js
    let mongoose = require('mongoose')
    mongoose.set('useCreateIndex', true)
    mongoose.set('useNewUrlParser', true)
    mongoose.set('useUnifiedTopology', true)
    
    const DB_NAME = 'test_alioss' //数据库名，自己更换
    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;

## app.js ##

const Koa = require('koa')
    const app = new Koa()
    const views = require('koa-views')
    const json = require('koa-json')
    const onerror = require('koa-onerror')
    const bodyparser = require('koa-bodyparser')
    const logger = require('koa-logger')
    
    const index = require('./routes/index')
    const users = require('./routes/users')
    
    const user = require('./routes/user')
    
    
    onerror(app)
    
    // middlewares
    app.use(bodyparser({
      enableTypes: ['json', 'form', 'text']
    }))
    app.use(json())
    app.use(logger())
    app.use(require('koa-static')(__dirname + '/public'))
    
    app.use(views(__dirname + '/views', {
      extension: 'ejs'
    }))
    
    // logger
    app.use(async (ctx, next) => {
      const start = new Date()
      await next()
      const ms = new Date() - start
      console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
    })
    
    // routes
    app.use(index.routes(), index.allowedMethods())
    app.use(users.routes(), users.allowedMethods())
    
    app.use(user.routes(), user.allowedMethods())
    
    
    // error-handling
    app.on('error', (err, ctx) => {
      console.error('server error', err, ctx)
    });
    
    module.exports = app

[https_gitee.com_LiDaJiang_git_vue2_koa2_mongoose_zsgc_alioss_tree_master]: https://gitee.com/LiDaJiang/git_vue2_koa2_mongoose_zsgc_alioss/tree/master
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/12db71b007b243f5ae5179012055067b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/c7f5970888034b3587ace264368aff74.png
[20210505132550705.png]: /images/20210725/ab6ef164ce7040cda118bb7cc7dc9620.png
[20210505132508673.png]: /images/20210725/75712f4e76414fe0a8d32df09b443e88.png