Add, edit and delete front-end and back-end joint debugging

1. Add UI introduction

<template>
  <div>
    <el-card class="box-card" style="height: 620px">
      <el-input v-model="query.name" style="width:200px" placeholder="请输入用户姓名" clearable></el-input>
      &nbsp
      &nbsp
      &nbsp
      <el-button type="primary" @click="getUserList">查询</el-button>
      &nbsp
      <el-button type="primary"  @click="handleCreate">新增</el-button>

      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="id"
            label="ID"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
        </el-table-column>

        <el-table-column
            prop="phone"
            label="手机号">
        </el-table-column>

        <el-table-column
            prop="avatar"
            label="头像">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.query.page"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="this.query.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total">
      </el-pagination>
    </el-card>


    <el-dialog title="新增用户" :visible.sync="dialogFormVisible" width="40%" center>
      <el-form :model="form" :rules="rules" ref="foreName">
        <el-form-item label="用户姓名" :label-width="formLabelWidth" prop="name">
          <el-input style="width: 90%" v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
          <el-input style="width: 90%" v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
          <el-select style="width: 90%" v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像" :label-width="formLabelWidth" prop="avatar">
          <el-input style="width: 90%" v-model="form.avatar" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"  @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>

export default {
  name: 'HomeView',
  data() {
    return {
      query: {
        page: 1,
        size: 5,
        name: '',
      },
      total:0,
      currentPage4: 4,
      dialogFormVisible: false,
      formLabelWidth:'80px',
      form:{
        name:'',
        sex:'',
        phone:'',
        avatar:''
      },
      rules: {
        name: [
          { required: true, message: '请输入用户姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        phone: [
            //手机号格式校验规则
          { required: true, message: '请填写手机号', trigger: 'blur' },
          { pattern:/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
            , message: '手机号格式不正确', trigger: 'blur' }
        ],
        avatar: [
          { required: true, message: '请上传头像', trigger: 'change' }
        ]
      },
      tableData: [],
    }
  },
  methods: {
    submitForm(){
      this.$refs.foreName.validate((valid)=>{
        if(valid){
          //校验成功，提交给后端，并关闭输入表单
          console.log('校验成功',this.form);
          this.dialogFormVisible = false;
        }
      })
    },
    handleCreate(){
      this.dialogFormVisible = true;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.size = val;
      this.getUserList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.page = val;
      this.getUserList()
    },
    getUserList(){
      this.axios.get("http://localhost:3333/user/getList",{
        params:{
          name:this.query.name,  //参数让其等于输入框输入的name
          page:this.query.page,
          size:this.query.size
        }
      }).then((resp)=>{
        console.log(resp,'resp');
        this.tableData = resp.data.content.list;
        this.total =  resp.data.content.total;
      });
    }
  },
  created() {//Vue生命周期函数，此处的目的是页面打开，就调用函数，将数据库中的数据显示出来
    this.getUserList();
  }
}
</script>

2. Introduction of editing UI

<template>
  <div>
    <el-card class="box-card" style="height: 620px">
      <el-input v-model="query.name" style="width:200px" placeholder="请输入用户姓名" clearable></el-input>
      &nbsp
      &nbsp
      &nbsp
      <el-button type="primary" @click="getUserList">查询</el-button>
      &nbsp
      <el-button type="primary"  @click="handleCreate">新增</el-button>

      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="id"
            label="ID"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
        </el-table-column>

        <el-table-column
            prop="phone"
            label="手机号">
        </el-table-column>

        <el-table-column
            prop="avatar"
            label="头像">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.query.page"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="this.query.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total">
      </el-pagination>
    </el-card>


    <el-dialog title="新增用户" :visible.sync="dialogFormVisible" width="40%" center>
      <el-form :model="form" :rules="rules" ref="foreName">
        <el-form-item label="用户姓名" :label-width="formLabelWidth" prop="name">
          <el-input style="width: 90%" v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
          <el-input style="width: 90%" v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
          <el-select style="width: 90%" v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像" :label-width="formLabelWidth" prop="avatar">
          <el-input style="width: 90%" v-model="form.avatar" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"  @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>

export default {
  name: 'HomeView',
  data() {
    return {
      query: {
        page: 1,
        size: 5,
        name: '',
      },
      total:0,
      currentPage4: 4,
      dialogFormVisible: false,
      formLabelWidth:'80px',
      form:{
        name:'',
        sex:'',
        phone:'',
        avatar:''
      },
      rules: {
        name: [
          { required: true, message: '请输入用户姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        phone: [
            //手机号格式校验规则
          { required: true, message: '请填写手机号', trigger: 'blur' },
          { pattern:/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
            , message: '手机号格式不正确', trigger: 'blur' }
        ],
        avatar: [
          { required: true, message: '请上传头像', trigger: 'change' }
        ]
      },
      tableData: [],
    }
  },
  methods: {
    submitForm(){
      this.$refs.foreName.validate((valid)=>{
        if(valid){
          //校验成功，提交给后端，并关闭输入表单，新增和修改都是重新用新数据去覆盖旧数据，都是post请求
          console.log('校验成功',this.form);
          this.dialogFormVisible = false;
        }
      })
    },
    handleCreate(){
      this.form = {};
      this.dialogFormVisible = true;
    },
    handleEdit(row) {
      console.log(row);
      //点击编辑我们发现，row里面是数据，那我们就可以直接把row值赋给form
      //这样就可以达到点击编辑，就会显示出数据的效果
      this.form = row;
      this.dialogFormVisible = true
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.size = val;
      this.getUserList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.page = val;
      this.getUserList()
    },
    getUserList(){
      this.axios.get("http://localhost:3333/user/getList",{
        params:{
          name:this.query.name,  //参数让其等于输入框输入的name
          page:this.query.page,
          size:this.query.size
        }
      }).then((resp)=>{
        console.log(resp,'resp');
        this.tableData = resp.data.content.list;
        this.total =  resp.data.content.total;
      });
    }
  },
  created() {//Vue生命周期函数，此处的目的是页面打开，就调用函数，将数据库中的数据显示出来
    this.getUserList();
  }
}
</script>

3. submitForm method

submitForm(){
      this.$refs.foreName.validate((valid)=>{
        if(valid){
          console.log('校验成功',this.form);
          //校验成功，提交给后端，并关闭输入表单，新增和修改都是重新用新数据去覆盖旧数据，都是post请求
          this.axios.post('http://localhost:3333/user/saveUser',this.form).then((resp)=>{
            let data = resp.data;//接受后端返回的数据 commonDto里的
            console.log(resp,'resp')
            if(data.success){
              //如果后端返回数据成功，关闭对话框，表单数据清空
              this.dialogFormVisible = false;
              this.dialogFormVisible1 = false;
              this.form = {};
              //重置表单校验状态
              this.$refs.foreName.resetFields();
              //调用初始化查询方法，因为新增或者修改了，后端会同步数据库，这时候需要重新调用getUserList方法
              //这样前端就直接显示出我们新增或者修改的用户数据了
              this.getUserList();
              //调用UI的message消息提示组件方法，提示操作成功
              this.$message({
                message: '恭喜你操作成功',
                type: 'success'
              });
            }
          })
          console.log('校验成功',this.form);
          this.dialogFormVisible = false;
        }
      })
    }

4. Delete

1. Backend code

@DeleteMapping("/delete/{id}")
     public CommonDto deleteUser(@PathVariable Long id){
          CommonDto<User> commonDto = new CommonDto<>();
          userService.removeById(id);
          commonDto.setMessage("删除成功");
          return commonDto;
     }

2. Front end

    handleDelete(row) {
      console.log(row);
      let id = row.id;
      this.axios.delete('http://localhost:3333/user/delete/'+ id).then((resp)=>{
        let data = resp.data;//接受后端返回的数据 commonDto里的
        console.log(resp,'resp')
        if(data.success){
          this.getUserList();
          //调用UI的message消息提示组件方法，提示操作成功
          this.$message({
            message: data.message,
            type: 'success'
          });
        }
      })
    },