• 添加、编辑和删除 前后端联调

    一、添加  UI引入

    1. <template>
    2.   <div>
    3.     <el-card class="box-card" style="height: 620px">
    4.       <el-input v-model="query.name" style="width:200px" placeholder="请输入用户姓名" clearable></el-input>
    5.       &nbsp
    6.       &nbsp
    7.       &nbsp
    8.       <el-button type="primary" @click="getUserList">查询</el-button>
    9.       &nbsp
    10.       <el-button type="primary"  @click="handleCreate">新增</el-button>
    11.  
    12.       <el-table
    13.           :data="tableData"
    14.           border
    15.           style="width: 100%">
    16.         <el-table-column
    17.             prop="id"
    18.             label="ID"
    19.             width="180">
    20.         </el-table-column>
    21.         <el-table-column
    22.             prop="name"
    23.             label="姓名"
    24.             width="180">
    25.         </el-table-column>
    26.         <el-table-column
    27.             prop="sex"
    28.             label="性别">
    29.         </el-table-column>
    30.  
    31.         <el-table-column
    32.             prop="phone"
    33.             label="手机号">
    34.         </el-table-column>
    35.  
    36.         <el-table-column
    37.             prop="avatar"
    38.             label="头像">
    39.         </el-table-column>
    40.  
    41.         <el-table-column label="操作">
    42.           <template slot-scope="scope">
    43.             <el-button
    44.                 size="mini"
    45.                 @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    46.             <el-button
    47.                 size="mini"
    48.                 type="danger"
    49.                 @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    50.           </template>
    51.         </el-table-column>
    52.       </el-table>
    53.  
    54.       <el-pagination
    55.           @size-change="handleSizeChange"
    56.           @current-change="handleCurrentChange"
    57.           :current-page="this.query.page"
    58.           :page-sizes="[5, 10, 20, 30]"
    59.           :page-size="this.query.size"
    60.           layout="total, sizes, prev, pager, next, jumper"
    61.           :total="this.total">
    62.       </el-pagination>
    63.     </el-card>
    64.  
    65.  
    66.     <el-dialog title="新增用户" :visible.sync="dialogFormVisible" width="40%" center>
    67.       <el-form :model="form" :rules="rules" ref="foreName">
    68.         <el-form-item label="用户姓名" :label-width="formLabelWidth" prop="name">
    69.           <el-input style="width: 90%" v-model="form.name" autocomplete="off"></el-input>
    70.         </el-form-item>
    71.         <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
    72.           <el-input style="width: 90%" v-model="form.phone" autocomplete="off"></el-input>
    73.         </el-form-item>
    74.         <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
    75.           <el-select style="width: 90%" v-model="form.sex" placeholder="请选择性别">
    76.             <el-option label="男" value="男"></el-option>
    77.             <el-option label="女" value="女"></el-option>
    78.           </el-select>
    79.         </el-form-item>
    80.         <el-form-item label="头像" :label-width="formLabelWidth" prop="avatar">
    81.           <el-input style="width: 90%" v-model="form.avatar" autocomplete="off"></el-input>
    82.         </el-form-item>
    83.       </el-form>
    84.       <div slot="footer" class="dialog-footer">
    85.         <el-button @click="dialogFormVisible = false">取 消</el-button>
    86.         <el-button type="primary"  @click="submitForm">确 定</el-button>
    87.       </div>
    88.     </el-dialog>
    89.  
    90.   </div>
    91.  
    92. </template>
    93.  
    94. <script>
    95.  
    96. export default {
    97.   name: 'HomeView',
    98.   data() {
    99.     return {
    100.       query: {
    101.         page: 1,
    102.         size: 5,
    103.         name: '',
    104.       },
    105.       total:0,
    106.       currentPage4: 4,
    107.       dialogFormVisible: false,
    108.       formLabelWidth:'80px',
    109.       form:{
    110.         name:'',
    111.         sex:'',
    112.         phone:'',
    113.         avatar:''
    114.       },
    115.       rules: {
    116.         name: [
    117.           { required: true, message: '请输入用户姓名', trigger: 'blur' },
    118.           { min: 3, max: 5, message: '长度在 2 到 10 个字符', trigger: 'blur' }
    119.         ],
    120.         sex: [
    121.           { required: true, message: '请选择性别', trigger: 'change' }
    122.         ],
    123.         phone: [
    124.             //手机号格式校验规则
    125.           { required: true, message: '请填写手机号', trigger: 'blur' },
    126.           { 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}$/
    127.             , message: '手机号格式不正确', trigger: 'blur' }
    128.         ],
    129.         avatar: [
    130.           { required: true, message: '请上传头像', trigger: 'change' }
    131.         ]
    132.       },
    133.       tableData: [],
    134.     }
    135.   },
    136.   methods: {
    137.     submitForm(){
    138.       this.$refs.foreName.validate((valid)=>{
    139.         if(valid){
    140.           //校验成功，提交给后端，并关闭输入表单
    141.           console.log('校验成功',this.form);
    142.           this.dialogFormVisible = false;
    143.         }
    144.       })
    145.     },
    146.     handleCreate(){
    147.       this.dialogFormVisible = true;
    148.     },
    149.     handleEdit(index, row) {
    150.       console.log(index, row);
    151.     },
    152.     handleDelete(index, row) {
    153.       console.log(index, row);
    154.     },
    155.     handleSizeChange(val) {
    156.       console.log(`每页 ${val} 条`);
    157.       this.query.size = val;
    158.       this.getUserList()
    159.     },
    160.     handleCurrentChange(val) {
    161.       console.log(`当前页: ${val}`);
    162.       this.query.page = val;
    163.       this.getUserList()
    164.     },
    165.     getUserList(){
    166.       this.axios.get("http://localhost:3333/user/getList",{
    167.         params:{
    168.           name:this.query.name,  //参数让其等于输入框输入的name
    169.           page:this.query.page,
    170.           size:this.query.size
    171.         }
    172.       }).then((resp)=>{
    173.         console.log(resp,'resp');
    174.         this.tableData = resp.data.content.list;
    175.         this.total =  resp.data.content.total;
    176.       });
    177.     }
    178.   },
    179.   created() {//Vue生命周期函数，此处的目的是页面打开，就调用函数，将数据库中的数据显示出来
    180.     this.getUserList();
    181.   }
    182. }
    183. </script>

    二、编辑 UI引入

    1. <template>
    2.   <div>
    3.     <el-card class="box-card" style="height: 620px">
    4.       <el-input v-model="query.name" style="width:200px" placeholder="请输入用户姓名" clearable></el-input>
    5.       &nbsp
    6.       &nbsp
    7.       &nbsp
    8.       <el-button type="primary" @click="getUserList">查询</el-button>
    9.       &nbsp
    10.       <el-button type="primary"  @click="handleCreate">新增</el-button>
    11.  
    12.       <el-table
    13.           :data="tableData"
    14.           border
    15.           style="width: 100%">
    16.         <el-table-column
    17.             prop="id"
    18.             label="ID"
    19.             width="180">
    20.         </el-table-column>
    21.         <el-table-column
    22.             prop="name"
    23.             label="姓名"
    24.             width="180">
    25.         </el-table-column>
    26.         <el-table-column
    27.             prop="sex"
    28.             label="性别">
    29.         </el-table-column>
    30.  
    31.         <el-table-column
    32.             prop="phone"
    33.             label="手机号">
    34.         </el-table-column>
    35.  
    36.         <el-table-column
    37.             prop="avatar"
    38.             label="头像">
    39.         </el-table-column>
    40.  
    41.         <el-table-column label="操作">
    42.           <template slot-scope="scope">
    43.             <el-button
    44.                 size="mini"
    45.                 @click="handleEdit(scope.row)">编辑</el-button>
    46.             <el-button
    47.                 size="mini"
    48.                 type="danger"
    49.                 @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    50.           </template>
    51.         </el-table-column>
    52.       </el-table>
    53.  
    54.       <el-pagination
    55.           @size-change="handleSizeChange"
    56.           @current-change="handleCurrentChange"
    57.           :current-page="this.query.page"
    58.           :page-sizes="[5, 10, 20, 30]"
    59.           :page-size="this.query.size"
    60.           layout="total, sizes, prev, pager, next, jumper"
    61.           :total="this.total">
    62.       </el-pagination>
    63.     </el-card>
    64.  
    65.  
    66.     <el-dialog title="新增用户" :visible.sync="dialogFormVisible" width="40%" center>
    67.       <el-form :model="form" :rules="rules" ref="foreName">
    68.         <el-form-item label="用户姓名" :label-width="formLabelWidth" prop="name">
    69.           <el-input style="width: 90%" v-model="form.name" autocomplete="off"></el-input>
    70.         </el-form-item>
    71.         <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
    72.           <el-input style="width: 90%" v-model="form.phone" autocomplete="off"></el-input>
    73.         </el-form-item>
    74.         <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
    75.           <el-select style="width: 90%" v-model="form.sex" placeholder="请选择性别">
    76.             <el-option label="男" value="男"></el-option>
    77.             <el-option label="女" value="女"></el-option>
    78.           </el-select>
    79.         </el-form-item>
    80.         <el-form-item label="头像" :label-width="formLabelWidth" prop="avatar">
    81.           <el-input style="width: 90%" v-model="form.avatar" autocomplete="off"></el-input>
    82.         </el-form-item>
    83.       </el-form>
    84.       <div slot="footer" class="dialog-footer">
    85.         <el-button @click="dialogFormVisible = false">取 消</el-button>
    86.         <el-button type="primary"  @click="submitForm">确 定</el-button>
    87.       </div>
    88.     </el-dialog>
    89.  
    90.   </div>
    91.  
    92. </template>
    93.  
    94. <script>
    95.  
    96. export default {
    97.   name: 'HomeView',
    98.   data() {
    99.     return {
    100.       query: {
    101.         page: 1,
    102.         size: 5,
    103.         name: '',
    104.       },
    105.       total:0,
    106.       currentPage4: 4,
    107.       dialogFormVisible: false,
    108.       formLabelWidth:'80px',
    109.       form:{
    110.         name:'',
    111.         sex:'',
    112.         phone:'',
    113.         avatar:''
    114.       },
    115.       rules: {
    116.         name: [
    117.           { required: true, message: '请输入用户姓名', trigger: 'blur' },
    118.           { min: 3, max: 5, message: '长度在 2 到 10 个字符', trigger: 'blur' }
    119.         ],
    120.         sex: [
    121.           { required: true, message: '请选择性别', trigger: 'change' }
    122.         ],
    123.         phone: [
    124.             //手机号格式校验规则
    125.           { required: true, message: '请填写手机号', trigger: 'blur' },
    126.           { 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}$/
    127.             , message: '手机号格式不正确', trigger: 'blur' }
    128.         ],
    129.         avatar: [
    130.           { required: true, message: '请上传头像', trigger: 'change' }
    131.         ]
    132.       },
    133.       tableData: [],
    134.     }
    135.   },
    136.   methods: {
    137.     submitForm(){
    138.       this.$refs.foreName.validate((valid)=>{
    139.         if(valid){
    140.           //校验成功，提交给后端，并关闭输入表单，新增和修改都是重新用新数据去覆盖旧数据，都是post请求
    141.           console.log('校验成功',this.form);
    142.           this.dialogFormVisible = false;
    143.         }
    144.       })
    145.     },
    146.     handleCreate(){
    147.       this.form = {};
    148.       this.dialogFormVisible = true;
    149.     },
    150.     handleEdit(row) {
    151.       console.log(row);
    152.       //点击编辑我们发现，row里面是数据，那我们就可以直接把row值赋给form
    153.       //这样就可以达到点击编辑，就会显示出数据的效果
    154.       this.form = row;
    155.       this.dialogFormVisible = true
    156.     },
    157.     handleDelete(index, row) {
    158.       console.log(index, row);
    159.     },
    160.     handleSizeChange(val) {
    161.       console.log(`每页 ${val} 条`);
    162.       this.query.size = val;
    163.       this.getUserList()
    164.     },
    165.     handleCurrentChange(val) {
    166.       console.log(`当前页: ${val}`);
    167.       this.query.page = val;
    168.       this.getUserList()
    169.     },
    170.     getUserList(){
    171.       this.axios.get("http://localhost:3333/user/getList",{
    172.         params:{
    173.           name:this.query.name,  //参数让其等于输入框输入的name
    174.           page:this.query.page,
    175.           size:this.query.size
    176.         }
    177.       }).then((resp)=>{
    178.         console.log(resp,'resp');
    179.         this.tableData = resp.data.content.list;
    180.         this.total =  resp.data.content.total;
    181.       });
    182.     }
    183.   },
    184.   created() {//Vue生命周期函数，此处的目的是页面打开，就调用函数，将数据库中的数据显示出来
    185.     this.getUserList();
    186.   }
    187. }
    188. </script>

    三、submitForm方法

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

    四、删除

    1.后端代码

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

    2.前端

    1.     handleDelete(row) {
    2.       console.log(row);
    3.       let id = row.id;
    4.       this.axios.delete('http://localhost:3333/user/delete/'+ id).then((resp)=>{
    5.         let data = resp.data;//接受后端返回的数据 commonDto里的
    6.         console.log(resp,'resp')
    7.         if(data.success){
    8.           this.getUserList();
    9.           //调用UI的message消息提示组件方法，提示操作成功
    10.           this.$message({
    11.             message: data.message,
    12.             type: 'success'
    13.           });
    14.         }
    15.       })
    16.     },

  • 相关阅读:
    使用CCS软件查看PID曲线
    团队管理之高效开发基础认知
    判断 Mac显卡 mps 是否可以正常运行
    AUTOCAD——中心线绘制、CAD默认线宽是多少？可以修改吗？
    [Zer0pts2020]Can you guess it? basename特性 和preg_match 绕过
    days month 間隔
    内部类杂记
    Cesium加载geoserver发布的arcgis切片 4326坐标系
    Deepstream 6.1.1 以及 Python Binding 安装过程记录
    快解析结合友加畅捷通t1飞跃版
  • 原文地址：https://blog.csdn.net/m0_63732435/article/details/133499215