Vue中对表单的增删改查（不含图片）

清疚 2021-07-26 02:58 498阅读 0赞

**目录**

效果图：

客户端

view/userManage/index.vue

view/userManage/userManageDialog.vue

api/userManage/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][https_gitee.com_LiDaJiang_git_vue2_koa2_mongoose_zsgc]

新增窗口和编辑窗口共用一个组件

# 效果图： #

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

# 客户端 #

![20210505134741595.png][]

## view/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">
                <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 {
      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"
            }
          ]
        };
      },
      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.dialog = {
            show: true,
            title: "编辑用户",
            option: "edit"
          };
          this.formData = {
            _id: row._id,
            username: row.username,
            password: row.password
          };
        },
        //新增用户
        async addUser() {
          await addUser(this.formData);
          this.dialog.show = false;
          this.$notify({
            title: "成功",
            message: "新增用户成功！",
            type: "success"
          });
          this.getUserList();
        },
        //编辑用户
        async editUser() {
          await editUser(this.formData, this.formData._id);
          this.dialog.show = false;
          this.$notify({
            title: "成功",
            message: "编辑用户成功！",
            type: "success"
          });
          this.getUserList();
        },
        //删除用户
        handleDelete(row) {
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(async () => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              await deleteUser(row._id);
              this.getUserList();
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除"
              });
            });
        },
        //根据用户名查询
        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>

## view/userManage/userManageDialog.vue ##

<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>
          <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 {
          rules: {
            username: [
              { required: true, message: "请输入用户名称", trigger: "blur" }
            ]
          }
        };
      },
      created() {},
      mounted() {},
      computed: {},
      methods: {
        addUser(formName) {
          this.$refs[formName].validate(valid => {
            if (valid) {
              this.$emit("addUser");
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },
        editUser(formName) {
          this.$refs[formName].validate(valid => {
            if (valid) {
              this.$emit("editUser");
            } 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>

## api/userManage/index.js ##

import request from '@/utils/request'
    //  获取用户列表
    export function getUserList() {
        return request({
            url: '/api/userManage/list',
            method: 'get'
        })
    }
    
    //  新增用户
    export function addUser(data) {
        return request({
            url: '/api/userManage/add',
            method: 'post',
            data
        })
    }
    
    //  编辑用户
    export function editUser(data, _id) {
        return request({
            url: `/api/userManage/edit/${_id}`,
            method: 'post',
            data
        })
    }
    
    //  删除用户
    export function deleteUser(_id) {
        return request({
            url: `/api/userManage/delete/${_id}`,
            method: 'get'
        })
    }
    
    //  根据关键字查询
    export function searchUser(data) {
        return request({
            url: `/api/userManage/search`,
            method: 'post',
            data
        })
    }

## 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)
    
    
    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')
                    }
                }
            }
        }
    }

# 服务端 #

![20210505134812675.png][]

## Models/User.js ##

const mongoose = require('../db.js')
    let UserSchema = mongoose.Schema({
        // 用户名
        username: {
            type: String,
            required: true,
            unique: true
        },
        // 密码
        password: String,
        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]: https://gitee.com/LiDaJiang/git_vue2_koa2_mongoose_zsgc
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/11edf369c8cd4a34863d9d22c10d7bd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/d11ecd29ef7f40b4bb20c19df9f6643e.png
[20210505134741595.png]: /images/20210725/c770207bf1f04473b5eb9030335899ec.png
[20210505134812675.png]: /images/20210725/854c9bae19554bdd8dccf8658ae906ac.png