vue+express+mongodb+node.js+element-ui实现表格里的整行数据删除

实现一个社区团购的团长的信息展示和删除

deleteItem(scope.row._id)是单击后触发的函数

src/views/chief.vue

<template>    <div class="body">  <el-table :data="tableData" border style="width: 100%">    <el-table-column prop="_id" label="id"></el-table-column>    <el-table-column prop="addr" label="地址"></el-table-column>    <el-table-column prop="nickName" label="昵称"></el-table-column>    <el-table-column prop="email" label="邮箱"></el-table-column>    <el-table-column prop="phone" label="手机"></el-table-column>    <el-table-column prop="account" label="账号"></el-table-column>    <el-table-column prop="money" label="已赚佣金"></el-table-column>    <el-table-column  label="操作">     <template slot-scope="scope">        <el-popconfirm title="确定删除吗？" @confirm="deleteItem(scope.row._id)">  <el-button slot="reference">删除</el-button></el-popconfirm>     </template></el-table-column>  </el-table>   <el-pagination   class="pag"      @size-change="handleSizeChange"      @current-change="handleCurrentChange"      :current-page="page"      :page-sizes="[5, 10, 15, 20]"      :page-size="size"      layout="total, sizes, prev, pager, next, jumper"      :total="400">    </el-pagination>    </div></template><script>    export default {        data() {      return {        tableData: [],        page:1,        size:5,        total:0,      }    },    created(){      this.getTableData();    },    methods: {      async getTableData(){      const params = {        type:1,        page:this.page,        size:this.size      };      const {data:{result,total}} = await this.$http.post("/admin/getchief",params);      this.tableData = result;      this.total = total;      },      handleSizeChange(val) {        this.size=val;        this.getTableData();        console.log(`每页 ${val} 条`);      },      handleCurrentChange(val) {        this.page = val;        this.getTableData();        console.log(`当前页: ${val}`);      },      async deleteItem(_id){        const params = {          _id        };        const { data } = await this.$http.post("/admin/deletechief",params);        if(data === "success"){          this.$message.success("删除成功");          this.getTableData();        }else{          this.$message.error("删除失败");        }      }    },    }</script><style lang="less" scoped>.body{    padding:20px;    background-color: #fff;    border-radius: 20px;    width:100%;    max-width: 100%;    box-sizing: border-box;    .pag{      margin-top: 20px;    }}</style>

src/main.js

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

后端：

index.js

const express = require('express');const app = express();const { myInfo1,Admin,chiefInfo1,merchantInfo1,orderInfo1,shopinfo,assess } = require('./db');const multer = require('multer');const { v4 } = require('uuid');const axios = require('axios'); app.use(express.urlencoded({ extended:true}));app.use(express.json());//跨域问题，3001和8080app.all("*",(req,res,next)=>{    res.setHeader('Access-Control-Allow-Origin', '*');    res.setHeader("Access-Control-Allow-Headers",'*');    next();})

//团长app.post("/admin/getchief",async(req,res)=>{    const {type,page,size} = req.body;    try{        const result = await chiefInfo1.find({        type    }).skip((page - 1)*size).limit(size);//分页    const total = await chiefInfo1.find({        type    }).countDocuments();    res.send({        result,        total    })    } catch(error){    res.send('error');    }})//删除团长数据app.post("/admin/deletechief",async(req,res)=>{    const{ _id } = req.body;    try {        await chiefInfo1.findByIdAndRemove(_id);        res.send("success");    }catch(error){        res.send("error");    }})
app.listen(3001,()=>{    console.log('搭建后端');})

db.js

const mongoose = require('mongoose');//连接mongodbmongoose.connect("mongodb://localhost:27017/loseMg").then(()=>{    console.log("连接数据库成功")}).catch((err)=>{    console.log("数据库连接失败",err);})
//团长信息表const chiefInfo = new mongoose.Schema({    addr:{        type:String    },    avataraUrl:{//头像        type:String    },    email:{        type:String    },    nickName:{        type:String    },    phone:{        type:String    },    password:{        type:String    },    account:{        type:String    },    money:{        type:Number    }})

const chiefInfo1 = mongoose.model('chiefInfo',chiefInfo);
module.exports = {
    chiefInfo1,
}

效果