2022-07-13 vue项目-通用后台管理系统(十一) 用户数据的删除——新建后台删除用户接口，前台“删除”按钮绑定点击事件并实现逻辑功能,项目完整代码,req的常用属性

1.添加一个删除用户的接口./api/deleteuser

        /****deleteusers接口:删除前台提交的用户信息****/
        app.get('/api/deleteuser', (req, res) => {
          const { id, query, pagenum, pagesize } = req.query;
          if (userlist) {
              for (var i = 0; i < userlist.length; i++) {
                  if (userlist[i].id == id)
                      userlist.splice(i, 1)
              }
          }                    
          var total = userlist.length;                 
          newDataList = userlist.slice((parseInt(pagenum) - 1) * pagesize, pagenum * pagesize); 
          res.json({
              'status': 'ok',
              'total': total,
              'data': newDataList
          });
      });

2.给卡片区的"删除"按钮绑定点击事件

<el-button type="info" size="mini" @click="deleteUser(scope.row.id)">删除</el-button>

3.实现绑定的点击事件deleteUser

   // 函数deleteUser:点击"删除"按钮,删除用户数据    
    async deleteUser(id) {
      var idInt = 'id'
      var idVal = id
      this.queryinfo[idInt] = idVal
      //console.log(this.queryinfo)
      var res = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => {
        return err
      });
      //console.log(res)
      if (res != 'confirm') return this.$message.info('删除用户已取消')
      const resData = await this.$http.get('/api/deleteuser', {
        params: this.queryinfo
      });
      this.getuserlist();
      this.$message.info('删除用户成功');
      this.userList = resData.data.data;
      this.total = resData.data.total;
    },

4.效果

添加用户:

修改用户:

删除用户:

5.完整代码

Users.vue

<template>
  <div class="users">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-d-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 1.搜索框 -->
      <!-- row属性:gutter表示栅格间隔 -->
      <el-row :gutter="20">
        <!-- col属性:span表示栅格占据的列数 -->
        <el-col :span="8">
          <!-- 搜索框绑定点击事件search:绑在它的子标签放大镜插槽上 -->
          <!-- clearable属性:清空按钮是否出现 -->
          <el-input v-model="queryinfo.query" :clearable="true" placeholder="请输入内容">
            <!-- 注意这个el-button标签是写在el-input标签内部的子标签 -->
            <!-- 如此它才能绑定input的slot的相关属性值 -->
            <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="showAddUserDialog">添加用户</el-button>
        </el-col>
      </el-row>
      <!-- 2.用户列表渲染 -->
      <el-table :data="userlist" style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          width="80px"
        ></el-table-column>
        <el-table-column
          label="用户名"
          prop="UserName"
          width="100px"
        ></el-table-column>
        <el-table-column
          label="手机"
          prop="Mobile"
          width="120px"
        ></el-table-column>
        <el-table-column
          label="邮箱"
          prop="Email"
          width="200px"
        ></el-table-column>
        <!-- 状态:在状态栏中添加开启/关闭图标按钮 -->
        <el-table-column label="状态" prop="MgState" width="100">
          <!-- 使用到了作用域插槽 -->
          <template slot-scope="dfdf">
            <el-switch
              v-model="dfdf.row.MgState"
              active-color="#13ce66"
              @change="userState(dfdf.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <!-- 添加和删除按钮 -->
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="updateUserDialog(scope.row)">添加</el-button>
            <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 3.分页效果 -->
      <!-- 注意layoutde 形参顺序会影响页面布局的先后 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.pagenum"
        :page-size="queryinfo.pagesize"
        :page-sizes="[3, 5, 10]"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
   <!-- 对话框:添加用户信息  -->
    <el-dialog title="添加用户信息" :visible.sync="adduserdialogVisible" width="50%">
      <!-- 添加如下表单样式 -->
      <el-form ref="addFormRef" :rules="addFormRules" :model="addForm" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
          <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
          <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
          <el-form-item label="电话" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddUserDialog" type="warning">取消</el-button>
        <el-button @click="addUserEnter" type="primary">确定</el-button>
      </span>
    </el-dialog>
    <!-- 对话框:修改用户信息 -->
    <el-dialog
      title="修改用户信息"
      :visible.sync="updateUserDialogVisible"
      width="40%"
      @close="updateDialogClosed"
    >
    <!-- 插入"修改用户"对话框中的表单数据:用户名,密码,邮箱,电话 -->
      <el-form 
        ref="updateFormRef"
        :rules="addFormRules"
        :model="updateForm"
        lable-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="updateForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="updateForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="updateForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="updateForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!-- "修改用户"对话框的两个按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateUserEnter">确定</el-button>
        <el-button @click="updateUserDialogVisible=false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      total: 0,
      userlist: [],
      queryinfo: { query: "", pagenum: 1, pagesize: 3 },
      adduserdialogVisible:false,
      updateUserDialogVisible: false,
      // 添加用户需要的数据结构
      addForm:{
        username:"",
        password:"",
        email:"",
        mobile:""
      },
      // 修改用户需要的数据结构
      updateForm:{
        username:"",
        password:"",
        email:"",
        mobile:""      
      },
      addFormRules:{
        //required:必填,message:信息提示,trigger:鼠标失去焦点时触发
        username:[
          {required:true,message:"请输入用户名",trigger:"blur"},
          {min:3,max:10,message:"长度在3到10个字符",trigger:"blur"}
        ],
        password:[
          {required:true,message:"请输入密码",trigger:"blur"},
          {min:6,max:15,message:"长度在6到15个字符",trigger:"blur"}
        ],
        email:[
          {required:true,message:"请输入密码",trigger:"blur"},
          {pattern:/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,message:"请输入正确的邮箱格式",trigger:"blur"}
        ],
       mobile:[
          {required:true,message:"请输入手机号",trigger:"blur"},
          {pattern:/^1[3456789]\d{9}$/,message:"请输入正确的邮箱格式",trigger:"blur"}
        ],
      }
    };
  },
  methods: {
    // 函数getuselist:获取用户列表,在钩子函数created中调用
    async getuserlist() {
      const res = await this.$http.get("./api/users", {
        params: this.queryinfo,
      });
      //先看看res的结构,根据结构下的参数来获取userlist和total
      console.log("usetlist_slice_res:", res);
      this.userlist = res.data.data; //后台数据赋给变量userlist
      this.total = res.data.total; //后台数据赋给变量total
    },
    // 函数userState:改变用户状态时触发,形参:userinfo
    async userState(userinfo) {
      console.log("userinfo:", userinfo);
      const res = await this.$http("./api/userupdate", { params: userinfo });
      console.log("res", res);
      if (res.data.code != 200) {
        this.$message("请求失败!");
        return;
      }
      //console.log("newstate", res.data.newState);
      if (res.data.newState == "true") {
        this.$message.success("现在是正常状态");
        return;
      } else {
        this.$message("处于封禁状态!");
      }
    },
    // 函数search:点击搜索图标时触发的事件
    async search() {
      const res = await this.$http.get("/api/search", {
        params: this.queryinfo,
      });
      this.userlist = res.data.data;
    },
    // 函数handleSizeChange:X条/页
    handleSizeChange(newsize) {
      this.queryinfo.pagesize = newsize;
      this.getuserlist();
    },
    // 函数handleCurrentChange:当前在X页
    handleCurrentChange(newpage) {
      this.queryinfo.pagenum = newpage;
      this.getuserlist();
    },
    // 函数currentQueryInfo:输出当前queryinfo的值
    currentqueryinfo() {
      console.log("输出当前queryinfo的值", this.queryinfo);
    },
    // 函数showAddUserDialog:点击显示或隐藏对话框
    showAddUserDialog(){
      this.adduserdialogVisible=!this.adduserdialogVisible;
    },
    // 函数addUserEnter:"添加用户"对话框中的"确定"按钮,提交用户添加的信息
    addUserEnter() {
      console.log("enter");
      //往addForm添加一些属性
      this.addForm.pagenum =this.queryinfo.pagenum;
      this.addForm.pagesize = this.queryinfo.pagesize;
      this.$refs.addFormRef.validate(async (valid) => {
        if (valid) {
          const res = await this.$http.get("/api/addusers", {
            params: this.addForm,
          });
          this.userList = res.data.data;
          this.total = res.data.total;
          this.adduserdialogVisible = false;
        }
      });
    },
    // 函数updateUserDialog:点击卡片区"添加"按钮,添加用户数据(弹出"添加用户"对话框修改用户数据)
    updateUserDialog(userInfo) {
      this.updateUserDialogVisible = true
      this.updateForm.id = userInfo.id
      this.updateForm.username = userInfo.UserName
      this.updateForm.password = userInfo.Password
      this.updateForm.email = userInfo.Email
      this.updateForm.mobile = userInfo.Mobile
      //console.log(this.updateForm)
      //console.log(this.userInfo)
    },
   // 函数deleteUser:点击卡片区"删除"按钮,删除用户数据    
    async deleteUser(id) {
      var idInt = 'id'
      var idVal = id
      this.queryinfo[idInt] = idVal
      console.log("输出删除用户的queryinfo的值",this.queryinfo);
      var res = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => {
        return err
      });
      //console.log(res)
      if (res != 'confirm') return this.$message.info('删除用户已取消')
      const resData = await this.$http.get('/api/deleteuser', {
        params: this.queryinfo
      });
      this.getuserlist();//刷新用户列表
      this.$message.info('删除用户成功');
      // 用户列表userlist和信息条数total的值更新
      this.userList = resData.data.data;
      this.total = resData.data.total;
    },
   // 函数updateDialogClosed:监听"修改用户"对话框关闭事件
    updateDialogClosed() {
      this.$refs.updateFormRef.resetFields()
    },
    // 函数updateUserEnter:"修改用户"对话框中,点击"确定"按钮时触发
    updateUserEnter() {
      console.log('确定修改按钮')  
      this.$refs.updateFormRef.validate(async (valid)=>{
          console.log(' 修改的valid校验 valid',valid)
               this.updateForm.pagenum = this.queryinfo.pagenum;
          this.updateForm.pagesize = this.queryinfo.pagesize;
          const res = await this.$http.get('/api/updateuser',{
            params:this.updateForm
          });
          console.log('res修改成功返回主页数据',res)
          this.userlist = res.data.data 
          this.total = res.data.total 
          this.updateUserDialogVisible = false 
      });
    }
  },
  created() {
    this.getuserlist();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
/**面包屑**/
.el-breadcrumb {
  font-size: 12px;
}
/**卡片**/
.el-card {
  margin-top: 15px;
  // height: 100px;
  box-shadow: 0 1px 1px #353333;
}
.el-table {
  width: 100% !important;
}
</style>

vue.config.js

module.exports = {
    lintOnSave: false,//不小心把这句话删掉了,结果马上遇到了ESlint格式问题,记得保留
  	configureWebpack: {
    devServer: {
      /*****mock编写的接口(模拟后台返回的接口数据)*****/
      before(app) {
        /*全部用户列表:userlist对象*/
        var userlist = [{
          "id": 10,
          "UserName": "zs1",
          "Password": "123456",
          "CreateTime": "0001/1/1 星期一 0:00:00",
          "RoleName": "",
          "Mobile": "18888888888",
          "Email": "405328555@qq.com",
          "MgState": false
        }, {
          "id": 9,
          "UserName": "zs2",
          "Password": "123456",
          "CreateTime": "0001/1/1 星期一 0:00:00",
          "RoleName": "",
          "Mobile": "18888888888",
          "Email": "405328555@qq.com",
          "MgState": true
        }, {
          "id": 8,
          "UserName": "zs3",
          "Password": "123456",
          "CreateTime": "0001/1/1 星期一 0:00:00",
          "RoleName": "",
          "Mobile": "18888888888",
          "Email": "405328555@qq.com",
          "MgState": true
        }, {
          "id": 7,
          "UserName": "zs4",
          "Password": "555555",
          "CreateTime": "0001/1/1 星期一 0:00:00",
          "RoleName": "",
          "Mobile": "13312311231",
          "Email": "405328555@qq.com",
          "MgState": true
        }, {
          "id": 6,
          "UserName": "zs5",
          "Password": "333333",
          "CreateTime": "0001/1/1 星期一 0:00:00",
          "RoleName": "",
          "Mobile": "13388888888",
          "Email": "405328555@qq.com",
          "MgState": true
        }, {
          "id": 5,
          "UserName": "zs6",
          "Password": "222222",
          "CreateTime": "0001/1/1 星期一 0:00:00",
          "RoleName": "",
          "Mobile": "13845644564",
          "Email": "405328555@qq.com",
          "MgState": true
        }, {
          "id": 4,
          "UserName": "zs7",
          "Password": "123456",
          "CreateTime": "0001/1/1 星期一 0:00:00",
          "RoleName": "",
          "Mobile": "13845644564",
          "Email": "405328555@qq.com",
          "MgState": true
        }, {
          "id": 3,
          "UserName": "zs8",
          "Password": "",
          "CreateTime": "0001/1/1 星期一 0:00:00",
          "RoleName": "",
          "Mobile": "13812341235",
          "Email": "88888888@qq.com",
          "MgState": true
        }, {
          "id": 2,
          "UserName": "zs9",
          "Password": "",
          "CreateTime": "0001/1/1 星期一 0:00:00",
          "RoleName": "",
          "Mobile": "13812341888",
          "Email": "27888888@qq.com",
          "MgState": true
        }, {
          "id": 1,
          "UserName": "zs10",
          "Password": "123456",
          "CreateTime": "0001/1/1 星期一 0:00:00",
          "RoleName": "超级管理员",
          "Mobile": "13602221234",
          "Email": "123456@qq.com",
          "MgState": true
        }];

        /****users接口:获取卡片区用户数据****/
        app.get('/api/users', (req, res) => {
          //用解构赋值去接get请求传递过来的参数(req.query)
          const { query, pagenum, pagesize } = req.query
          var total = userlist.length;
          //改成slice的是userlist第一页的内容
          // var newdatalist = userlist.slice(pagenum * pagesize, (parseInt(pagenum) + 1) * pagesize);
          var newdatalist = userlist.slice(parseInt(pagenum - 1) * pagesize, pagenum * pagesize);
          res.json({
            'status': 'ok',
            'total': total,
            'data': newdatalist//做好的分页数据
          });
        });

        /****menu接口:获取侧边栏菜单数据****/
        app.get('/api/menu', (req, res) => {
          res.json({
            "status": "ok",
            "data": [{
              "id": 1,
              "name": "用户管理",
              "child": [{
                "id": 6,
                "name": "用户列表",
                "path": "/home/users"
              }]
            }, {
              "id": 2,
              "name": "员工管理",
              "child": [{
                "id": 7,
                "name": "员工列表",
                "path": "/home/rote"
              },]
            }, {
              "id": 3,
              "name": "商品管理",
              "child": [{
                "id": 8,
                "name": "商品列表",
                "path": "/home/product"
              }, {
                "id": 9,
                "name": "分类参数",
                "path": "/home/userss"
              }, {
                "id": 10,
                "name": "商品分类",
                "path": "/home/producttype"
              }]
            }, {
              "id": 4,
              "name": "订单管理",
              "child": []
            }, {
              "id": 5,
              "name": "数据统计",
              "child": []
            }]
          })
        })

        /****userupdate接口:点击改变用户状态按钮****/
        // 点击改变用户状态按钮 接口
        app.get('/api/userupdate',(req,res)=>{
          var {id,MgState} = req.query 
          var user = userlist.filter(u=>u.id==id)
          // 这个user是数据库找到的哪一项 
          user.MgState = MgState
          res.json ({
              "code":"200",
              "newState":user.MgState
          });
        });

        /****login接口:模拟一个登录接口,实现登录守卫****/
        const tokenStr = "dhclass";
        app.get("/api/login", (req, res) => {
          const { username, password } = req.query;
          // 这里模拟数据库
          if (
            (username == "admin" && password == "123456") ||
            (username == "admin2" && password == "123456")
          ) {
            res.json({
              code: 1,
              message: "登录成功",
              token: tokenStr + "username" + username,
            });
          } else {
            res.json({
              code: 0,
              message: "登录失败",
            })
          }
        });

        /****addusers接口:添加前台提交的用户信息****/
        app.get('/api/addusers', (req, res) => {
            const {username,password,email,mobile,pagenum,pagesize} = req.query;
            var id = userlist[0].id;
            var adduser= {
                "id": id + 1,
                "UserName": username,
                "Password": password,
                "CreateTime": "0001/1/1 星期一 0:00:00",
                "RoleName": "",
                "Mobile": mobile,
                "Email": email,
                "MgState": true
            };
            userlist.unshift(adduser);       
            total = userlist.length;
            var newDataList = []        
                newDataList = userlist.slice((parseInt(pagenum) - 1) * pagesize, pagenum * pagesize);
           //向前端反馈的数据
            res.json({
                'total': total,
                'data': newDataList
            });
        });
        /****updateusers接口:修改前台提交的用户信息****/
        app.get('/api/updateuser', (req, res) => {
            const { id, username, password, email, mobile,pagenum, pagesize } = req.query
            if (userlist) {
                userlist.filter(u => u.id == id).forEach(element => {
                    element.UserName = username
                    element.Email = email
                    element.Mobile = mobile
                })
            }
            var total = userlist.length
            if (pagenum == 0) {
                newDataList = userlist.slice(pagenum * pagesize, (parseInt(pagenum) + 1) * pagesize)
            } else
                newDataList = userlist.slice((parseInt(pagenum) - 1) * pagesize, pagenum * pagesize)

            res.json({
                'status': 'ok',
                'total': total,
                'data': newDataList
            })
        });
        /****deleteusers接口:删除前台提交的用户信息****/
        app.get('/api/deleteuser', (req, res) => {
          const { id, query, pagenum, pagesize } = req.query;
          if (userlist) {
              for (var i = 0; i < userlist.length; i++) {
                  if (userlist[i].id == id)  userlist.splice(i, 1);
               }                    
              var total = userlist.length;                 
              newDataList = userlist.slice((parseInt(pagenum) - 1) * pagesize, pagenum * pagesize); 
              res.json({
                  'status': 'ok',
                  'total': total,
                  'data': newDataList
              });
            }
         });
      }
    }
  }
}

6.知识点

req的属性
Express 是一个基于 Node.js 的 Web 应用框架，在处理 HTTP 请求时，它会将 HTTP 请求封装成一个对象，并传递给路由处理函数。这个对象就是 req 对象，它表示 HTTP 请求，包含了请求的所有信息。

req 对象有以下几个常用属性：

params：路由参数，表示在路由路径中定义的占位符参数。
query：查询参数，表示请求 URL 中的查询字符串参数。
body：请求体，表示 POST 请求的数据。
headers：请求头，表示请求的头信息。
method：请求方法，表示请求使用的 HTTP 方法，例如 GET、POST 等。

此外，req 对象还有很多其他属性，比如：

app：应用实例，表示当前的 Express 应用。
baseUrl：基础 URL，表示当前路由的基础 URL。
fresh：表示请求是否是新鲜的，即客户端缓存是否有效。
hostname：主机名，表示请求的主机名。
ip：客户端 IP 地址。
originalUrl：原始 URL，表示请求的完整 URL。
path：路径名，表示请求的路径名。
protocol：协议，表示请求使用的协议，例如 HTTP、HTTPS 等。