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

目录

效果图：

客户端

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 

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

效果图：

客户端

view/userManage/index.vue

<!--userManage-->
<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() {