Node+Vue3+mysql+ant design实现前后端分离——表格的添加、修改和删除

在上一篇文章中，我们分享了如何运用NodeJS、Vue、MySQL以及其他技术来实现后台管理系统中的表格查询功能。今天，我们将继续探讨另外三个重要的功能实现原则。这些原则在构建后台管理系统时至关重要，同时还有导入和导出这两种功能也必不可少。关于导入和导出功能，我们会在下一次更新中详细介绍。下文中与上一篇文章重复的部分就不再进行详述，不懂的同学可以先看看上篇文章哦。

一、MySQL建表

首先，利用Navicat软件，在项目文件夹内创建"user_list"表格，并添置相关字段。此举便于nodejs连接数据库时提供特定需要的信息。如下图所示：

为了后续便于前端更好的联调数据，这里建议在创建完表后，添加一条相应的数据。

二、nodejs模拟数据并连接数据库

初始表格数据及增删改操作，本节和上篇文章一样可用NodeJS进行模拟，无需额外在服务器端的 routes 目录创建新文件夹。为保持一致性，相关代码将与上篇文章所述查询数据置于同一文件内。数据库的连接与之前方法也相同，仅需进行一次配置。

var express = require('express');
var router = express.Router();
//连接数据库
var connection=require('../db/sql.js');
 
//用户表格接口
router.get('/api/user/getUserList', (req, res) => {
  const sqlStr = 'select * from user_list';
  connection.query(sqlStr, (error, results) => {
      if (error) return res.json({
          code: 404,
          message: '数据不存在',
          affextedRows: 0
      })
      res.json({
          code: 200,
          message: results,
          affextedRows: results.affextedRows
      })
  })
})
 
//条件查找--请查看上篇文章
 
//添加用户信息
router.post('/api/user/addUserList', (req, res) => {
  // console.log(req,'是')
  const username = req.body.username;
  const userPwd = req.body.userPwd;
  const phone = req.body.phone;
  const imgUrl=req.body.imgUrl||'https://img0.baidu.com/it/u=1307225259,750358157&fm=253&fmt=auto?w=500&h=500';
  const nickName=req.body.nickName;
  const sqlStr = "insert into user_list(username,userPwd,phone,imgUrl,nickName) values('" + username + "','" + userPwd + "','" + phone + "','" + imgUrl + "','" + nickName + "')";
  connection.query(sqlStr,(err, results) => {
      if (err) return res.json({
          code: 404,
          message: err,
          affectedRows: 0
      });
      res.json({
          code: 200,
          message: '添加成功',
          affectedRows: results.affectedRows
      });
  })
});
 
//修改用户信息
router.post('/api/user/updateUserList', (req, res) => {
  // console.log(req.body,'是')
  const id = req.body.id;
  const username = req.body.username;
  const userPwd = req.body.userPwd;
  const phone = req.body.phone;
  const imgUrl=req.body.imgUrl||'https://img0.baidu.com/it/u=1307225259,750358157&fm=253&fmt=auto?w=500&h=500';
  const nickName=req.body.nickName;
  const sqlStr = "update user_list set username='" + username + "',userPwd='" + userPwd + "',phone='" + phone + "',imgUrl='" + imgUrl + "',nickName='" + nickName + "'where id=" + id
  connection.query(sqlStr,(err, results) => {
      if (err) return res.json({
          code: 404,
          message: err,
          affectedRows: 0
      });
      res.json({
          code: 200,
          message: '修改成功',
          affectedRows: results.affectedRows
      });
  })
});
 
//删除用户信息
router.get('/api/user/deleteUserList/', (req, res) => {
  const id = req.query.id;
  // console.log(req.query,'shuju ')
  // console.log(name,'name')
  const sqlStr = "delete from user_list where id=? ";
  connection.query(sqlStr, id,(err, results) => {
      if (err){
        console.log(err,'错误信息提示：')
        return res.json({
          code: 404,
          message: err,
          affextedRows: 0
        });
      }
      res.json({
          code: 200,
          message: '删除成功',
          affextedRows: results.affextedRows
      });
  })
})
module.exports = router;

三、前端界面开发

在上述操作都完成后，接下来就是前端界面的开发以及数据联调了。

（1）表格的添加和修改前端思想使用了ant design组件中的模态框以及表单，利用其表单的双向绑定来实现添加和修改数据，具体代码如下：

<template>
  <div class="user-tab">
    <!-- 新增用户 -->
    <div class="tab-add-btn" @click="handleAddUser">
      <i class="iconfont icon-jiahaotianjia"></i>
      <span>新增用户</span>
    </div>
    <!-- 表格 -->
    <div class="tab-body">
      <a-table
        :columns="columns"
        bordered
        :data-source="dataSource"
        :pagination="pagination"
        :loading="tableLoading"
        rowKey="id"
        :scroll="{ y: 'calc(100vh - 380px - 10px)', x: 200 }"
      >
        <template #index="{ index }">
            {
  { index + 1 }}
        </template>
        <template #picture="{ record }">
          <img style="width: 100px; heigth: 100px" :src="record.picture" />
        </template>
        <template #action="{ record }">
          <a href="javascript:void(0)" @click="editGroup(record)">修改</a>
          &nbsp;&nbsp;
          <a href="javascript:void(0)" @click="removeGroup(record)">删除</a>
        </template>
      </a-table>
    </div>
    <!-- 弹窗 -->
    <div class="tab-modal">
      <a-modal v-model:visible="visible" :footer="null" ok-text="确认"
      cancel-text="取消">
        <a-tabs>
          <a-tab-pane key="1" :tab="submitDialogText === '1' ? '新增用户' : submitDialogText === '2' ? '修改信息' : ''">
            <a-form
              :label="{ span: 12, offset: 24 }"
              layout="horizontal"
              :rules="rules"
              :model="submitForm"
              style="padding: 15px 0 0 60px"
            >
              <a-row>
                <a-col :span="20">
                  <a-form-item ref="adminName" label="用户账号" name="adminName">
                    <a-input v-model:value="submitForm.adminName" placeholder="请输入账号" />
                  </a-form-item>
                </a-col>
                <a-col :span="20">
                  <a-form-item ref="adminPwd" label="用户密码" name="adminPwd">
                    <a-input v-model:value="submitForm.adminPwd" placeholder="请