健身房預約系統SSM+Mybatis-plus實現（二、增刪改查的具體實現）

文章目錄

一、環境搭建
二、用戶管理頁面（純展示無事件操作）
- 0.三步走
- 1.查詢表單
- - （1）書寫頁面代碼：
  - （2）對應的js部分創建對象數據模型的綁定部分：
  - （3）引入需要的庫/依賴：
  - （4）效果展示
- 2.顯示增刪改查的按鈕
- - （1）書寫頁面代碼：
  - （2）不需要創建對象的原因
  - （3）引入需要的庫/依賴：
  - （4）效果展示
- 3.會員信息的數據表格展示
- - （1）書寫頁面代碼：
  - （2）對應的js部分創建對象數據模型的綁定部分：
  - （3）引入需要的庫/依賴：
  - （4）效果展示
- 4.分頁條展示
- - （1）書寫頁面代碼：
  - （2）對應的js部分創建對象數據模型的綁定部分：
  - （3）引入需要的庫/依賴：
  - （4）效果展示
三、前端發送請求+事件操作+后端響應
- 1.頁面加載的時候實現數據展示和分頁效果
- 2.重置功能：
- 3.查詢會員（完成條件查詢）
- 4.刪除功能
- 5.新增功能
- 6.修改功能
四、增刪改查的全部代碼+前后端響應思路
- 1.全部代碼
- 2.前后端分離項目的響應思路
- - 1.前端發送請求
  - 2.后端接收請求
  - 3.后端做出響應
  - 4.前端處理響應
  - 5.常見問題以及解決方案
  - 6.總結

一、環境搭建

項目搭建可以參考上篇博客：

https://blog.csdn.net/m0_72900498/article/details/150282255?spm=1001.2014.3001.5501

二、用戶管理頁面（純展示無事件操作）

想要實現的大致效果：
在這里插入圖片描述

即整個三面html是四個部分：查詢條件的表單，創建修改刪除查詢等按鈕、用于顯示成員信息的表格、分頁條。

先寫出大體的區域框架結構。

在這里插入圖片描述

Element-plus：
https://element-plus.org/zh-CN/component/table.html

0.三步走

三步驟：寫網頁（復制粘貼自己改造）、創建對象（根據具體情況分析）、引入相關庫/依賴（網站上面都提供了）自己按照需要修改即可
在這里插入圖片描述
根據需要選擇自己需要的樣式即可，然后下面還有需要引入的庫，一定要引入進去，不然無法生效

在這里插入圖片描述
是否需要創建對象，創建對象的格式網站也已經在對應的地方提供：比如：

1.查詢表單

Element-plus：
https://element-plus.org/zh-CN/component/form.html

在這里插入圖片描述
想作為查詢條件的是：ID、手機號、姓名、年齡、性別、地址、出生日期范圍

（1）書寫頁面代碼：

<!-- 查詢條件區域：想作為查詢條件的是：ID、姓名、手機號、性別、年齡、地址 、出生日期范圍--><div class="page-container"><!--行內樣式、雙向綁定數據模型formInline.prop:和后端字段綁定--><el-form :inline="true" :model="formInline" ><el-form-item label="ID" prop="id"><el-input v-model="formInline.id" placeholder="請輸入客戶ID" style="width: 130px" clearable/></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="formInline.name" placeholder="請輸入客戶姓名" style="width: 160px" clearable/></el-form-item><el-form-item label="電話" prop="phone"><el-input v-model="formInline.phone" placeholder="請輸入客戶電話" clearable/></el-form-item><el-form-item label="性別"  prop="sex"  style="width: 120px"><el-selectv-model="formInline.sex"clearable><el-option label="不限" value="不限"  /><el-option label="男" value="男" /><el-option label="女" value="女" /></el-select></el-form-item><el-form-item label="年齡" prop="age"><el-input v-model="formInline.age" placeholder="請輸入客戶年齡" clearable/></el-form-item><el-form-item label="地址" prop="address"><el-input v-model="formInline.address" placeholder="請輸入客戶地址" clearable/></el-form-item><el-form-item label="出生日期"><el-date-pickerv-model="formInline.birthdayRange"type="daterange"start-placeholder="起始日期"end-placeholder="終止日期"/></el-form-item></el-form></div>

（2）對應的js部分創建對象數據模型的綁定部分：

// 查詢表單對象：雙向綁定數據：瀏覽器輸入（視圖 ）-數據模型:
//因為這個表單是接收數據的，所以我們創建對象的時候就要定義變量并且完成初始化操作。
let formInline = ref({id:null,name:null,phone:null,sex:null,age:null,address:null,birthdayRange:[]
})

（3）引入需要的庫/依賴：

import { ref, onMounted } from 'vue'
import api from "@/utils/api.js";

上述部分目前的全部代碼：

<template><!-- 查詢條件區域：想作為查詢條件的是：ID、姓名、手機號、性別、年齡、地址 、出生日期范圍--><div class="page-container"><!--行內樣式、雙向綁定數據模型formInline.prop:和后端字段綁定--><el-form :inline="true" :model="formInline" ><el-form-item label="ID" prop="id"><el-input v-model="formInline.id" placeholder="請輸入客戶ID" style="width: 130px" clearable/></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="formInline.name" placeholder="請輸入客戶姓名" style="width: 160px" clearable/></el-form-item><el-form-item label="電話" prop="phone"><el-input v-model="formInline.phone" placeholder="請輸入客戶電話" clearable/></el-form-item><el-form-item label="性別"  prop="sex"  style="width: 120px"><el-selectv-model="formInline.sex"clearable><el-option label="不限" value="不限"  /><el-option label="男" value="男" /><el-option label="女" value="女" /></el-select></el-form-item><el-form-item label="年齡" prop="age"><el-input v-model="formInline.age" placeholder="請輸入客戶年齡" clearable/></el-form-item><el-form-item label="地址" prop="address"><el-input v-model="formInline.address" placeholder="請輸入客戶地址" clearable/></el-form-item><el-form-item label="出生日期"><el-date-pickerv-model="formInline.birthdayRange"type="daterange"start-placeholder="起始日期"end-placeholder="終止日期"/></el-form-item></el-form></div><!-- 按鈕區--><div></div><!--  表格展示成員數據--><div></div><!--  分頁條：--><div></div>
</template><!--CSS樣式-->
<style></style><!--JS事件操作部分 ：-->
<<script setup>
import { ref, onMounted } from 'vue'
import api from "@/utils/api.js";// 查詢表單對象：雙向綁定數據：瀏覽器輸入（視圖 ）-數據模型:
//因為這個表單是接收數據的，所以我們創建對象的時候就要定義變量并且完成初始化操作。
let formInline = ref({id:null,name:null,phone:null,sex:null,age:null,address:null,birthdayRange:[]
})onMounted(async () => {let resp = await api({url: "members",//http://localhost:3000/api/后面實際解析的時候是http://localhost:8080/api/v1/membersmethod: "get",params: {page: 1,limit: 10}});console.log(resp);
});
</script>

（4）效果展示

在這里插入圖片描述

2.顯示增刪改查的按鈕

https://element-plus.org/zh-CN/component/button.html

（1）書寫頁面代碼：

<!-- 按鈕區--><div><div class="mb-4"><el-button type="primary" round>增加會員</el-button><el-button type="success" round>修改會員</el-button><el-button type="info" round>查詢會員</el-button><el-button type="danger" round>刪除會員</el-button></div></div>

（2）不需要創建對象的原因

不需要再跟上面的表單一樣去創建對象，原因
在這里插入圖片描述

（3）引入需要的庫/依賴：

無

（4）效果展示

在這里插入圖片描述

3.會員信息的數據表格展示

https://element-plus.org/zh-CN/component/table.html

（1）書寫頁面代碼：

<!-- 3.表格展示成員數據--><div><el-table:data="tableData"style="width: 100%"class="data-grid"borderhighlight-current-rowshow-header:header-cell-style="{background: '#E6A23C',color: 'white',fontWeight: 'bold',stripe}"><el-table-column type="selection" width="160" align="center" fixed/><el-table-column fixed prop="id" label="會員ID" width="160"/><el-table-column fixed prop="name" label="姓名" width="130"/><el-table-column prop="phone" label="電話" width="150"/><el-table-column prop="age" label="年齡" width="120"/><el-table-column prop="createTime" label="注冊時間" width="180"/><el-table-column prop="address" label="地址" width="250"/><el-table-column prop="sex" label="性別" width="120"/><el-table-column prop="remark" label="備注" width="260"/><el-table-column prop="birthday" label="出生日期" min-width="180"/></el-table></div>

并添加CSS樣式：

<!--CSS樣式-->
<style>
.data-grid {margin-top: 6px;
}
</style>

（2）對應的js部分創建對象數據模型的綁定部分：

//3.數據顯示表格對象 ：
const tableData = ref()

（3）引入需要的庫/依賴：

import { ref } from 'vue'

（4）效果展示

在這里插入圖片描述

4.分頁條展示

https://element-plus.org/zh-CN/component/pagination.html

（1）書寫頁面代碼：

  <!-- 4.分頁條--><div class="pagination"><el-paginationv-model:current-page="memberPi.pageNo"v-model:page-size="memberPi.pageSize":page-sizes="[1,5,10,15,20]"layout="total, sizes, prev, pager, next, jumper":total="memberPi.total"class="member-pi"background@current-change="handlePageChange"@size-change="handleSizeChange"/></div>

（2）對應的js部分創建對象數據模型的綁定部分：

//4.分頁條對象 ：里面的數據是默認值
let memberPi = reactive({//reactive也是一個響應式對象 這個訪問的時候不用.valuepageNo: 1,pageSize: 10,total: 0
});

（3）引入需要的庫/依賴：

import { ref } from 'vue'
import { reactive } from 'vue' // 必須導入 reactive

（4）效果展示

在這里插入圖片描述

至此，基本的頁面展示部分已經做完了。整體效果：
在這里插入圖片描述

然后剩下的就是從數據庫查詢數據響應給前端了。

三、前端發送請求+事件操作+后端響應

1.頁面加載的時候實現數據展示和分頁效果

具體實現：

（1）首先給 查詢會員按鈕 添加事件：也就是添加查詢方法

在這里插入圖片描述

<!-- 2.按鈕區--><div><div class="mb-4"><el-button type="primary" round>增加會員</el-button><el-button type="success" round>修改會員</el-button><el-button type="info" round @click="select()">查詢會員</el-button><el-button type="danger" round>刪除會員</el-button></div></div>

（2）自定義查詢方法： 當組件掛載完畢之后觸發:這樣一打開頁面就有數據

//當組件掛載完畢之后觸發:這樣一打開頁面就有數據
onMounted(async () => {select();
});

具體的select()方法以及分頁查詢的實現：

// 查詢方法
async function select(pageNo = 1, pageSize = 10) {let params = toRaw(formInline.value);if(params.birthdayRange) {params.birthdayFrom = params.birthdayRange[0];params.birthdayTo = params.birthdayRange[1];delete params.birthdayRange;}console.log(params);try {const resp = await api({url: "/members",method: "get",params: {pageNo,pageSize,...params}});tableData.value = resp.data.records;memberPi.pageNo = resp.data.current;memberPi.pageSize = resp.data.size;memberPi.total = resp.data.total;} catch (error) {console.error("查詢失敗:", error);}
}

// 分頁變化處理
const handlePageChange = (currentPage) => {memberPi.pageNo = currentPage;select(currentPage, memberPi.pageSize);
};const handleSizeChange = (pageSize) => {memberPi.pageSize = pageSize;select(1, pageSize);
};

實現效果：
在這里插入圖片描述

上述效果的匯總代碼

<template><!-- 1.查詢條件區域：想作為查詢條件的是：ID、姓名、手機號、性別、年齡、地址 、出生日期范圍--><div class="page-container"><!--行內樣式、雙向綁定數據模型formInline.prop:和后端字段綁定--><el-form :inline="true" :model="formInline"><el-form-item label="ID" prop="id"><el-input v-model="formInline.id" placeholder="請輸入客戶ID" style="width: 130px" clearable/></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="formInline.name" placeholder="請輸入客戶姓名" style="width: 160px" clearable/></el-form-item><el-form-item label="電話" prop="phone"><el-input v-model="formInline.phone" placeholder="請輸入客戶電話" clearable/></el-form-item><el-form-item label="性別" prop="sex" style="width: 160px"><el-select v-model="formInline.sex" clearable><el-option label="不限" value="不限"/><el-option label="男" value="男"/><el-option label="女" value="女"/></el-select></el-form-item><el-form-item label="年齡" prop="age"><el-input v-model="formInline.age" placeholder="請輸入客戶年齡" clearable/></el-form-item><el-form-item label="地址" prop="address"><el-input v-model="formInline.address" placeholder="請輸入客戶地址" clearable/></el-form-item><el-form-item label="出生日期"><el-date-pickerv-model="formInline.birthdayRange"type="daterange"start-placeholder="起始日期"end-placeholder="終止日期"/></el-form-item></el-form></div><!-- 2.按鈕區--><div><div class="mb-4"><el-button type="primary" round>增加會員</el-button><el-button type="success" round>修改會員</el-button><el-button type="info" round @click="select()">查詢會員</el-button><el-button type="danger" round>刪除會員</el-button></div></div><!-- 3.表格展示成員數據--><div><el-table:data="tableData"style="width: 100%"class="data-grid"borderhighlight-current-rowshow-header:header-cell-style="{background: '#E6A23C',color: 'white',fontWeight: 'bold',stripe}"><el-table-column type="selection" width="160" align="center" fixed/><el-table-column fixed prop="id" label="會員ID" width="160"/><el-table-column fixed prop="name" label="姓名" width="130"/><el-table-column prop="phone" label="電話" width="150"/><el-table-column prop="age" label="年齡" width="120"/><el-table-column prop="createTime" label="注冊時間" width="180"/><el-table-column prop="address" label="地址" width="250"/><el-table-column prop="sex" label="性別" width="120"/><el-table-column prop="remark" label="備注" width="260"/><el-table-column prop="birthday" label="出生日期" min-width="180"/></el-table></div><!-- 4.分頁條--><div class="pagination"><el-paginationv-model:current-page="memberPi.pageNo"v-model:page-size="memberPi.pageSize":page-sizes="[1,5,10,15,20]"layout="total, sizes, prev, pager, next, jumper":total="memberPi.total"class="member-pi"background@current-change="handlePageChange"@size-change="handleSizeChange"/></div>
</template><script setup>
import { reactive, ref, onMounted, toRaw } from 'vue'
import api from "@/utils/api.js";const size = ref('default');
const disabled = ref(false);// 查詢表單對象
let formInline = ref({id: null,name: null,phone: null,sex: null,age: null,address: null,birthdayRange: []
});// 表格數據對象：響應式對象
let tableData = ref([]);// 分頁配置
let memberPi = reactive({pageNo: 1,pageSize: 10,total: 0
});// 查詢方法
async function select(pageNo = 1, pageSize = 15) {let params = toRaw(formInline.value);if(params.birthdayRange) {params.birthdayFrom = params.birthdayRange[0];params.birthdayTo = params.birthdayRange[1];delete params.birthdayRange;}console.log(params);try {const resp = await api({url: "/members",method: "get",params: {pageNo,pageSize,...params}});tableData.value = resp.data.records;memberPi.pageNo = resp.data.current;memberPi.pageSize = resp.data.size;memberPi.total = resp.data.total;} catch (error) {console.error("查詢失敗:", error);}
}// 分頁變化處理
const handlePageChange = (currentPage) => {memberPi.pageNo = currentPage;select(currentPage, memberPi.pageSize);
};const handleSizeChange = (pageSize) => {memberPi.pageSize = pageSize;select(1, pageSize);
};// 組件掛載時加載數據
onMounted(() => {select();
});
</script><style>
.data-grid {margin-top: 6px;
}.pagination {margin-top: 20px;display: flex;justify-content: center;
}
</style>

2.重置功能：

(1）添加重置按鈕并綁定事件

  <!-- 2.按鈕區--><div><div class="mb-4"><el-button type="primary" round>增加會員</el-button><el-button type="success" round>修改會員</el-button><el-button type="info" round @click="select()">查詢會員</el-button><el-button type="primary" round @click="reset">重置</el-button><el-button type="danger" round>刪除會員</el-button></div></div>

關于上面綁定事件，綁定方法加不加（）的區別：

簡單理解就是需要傳遞參數加（）；
不需要傳遞參數不加（）

//重置按鈕：重置表單操作：將表單的值設為空即可
function reset() {formInline.value = {id: null,name: null,phone: null,sex: null,age: null,address: null,birthdayRange: []};
}

3.查詢會員（完成條件查詢）

邏輯是：當我們點擊查詢會員按鈕的時候，能夠通過不同的非空查詢條件查詢出來對應的會員信息。

首先前端傳遞的都是字符串，先將日期格式進行轉換：
在表單的出生日期部分添加：

value-format="YYYY-MM-DD"

我們在頁面加載部分顯示會員信息數據部分已經給出了具體的實現

實現效果：

在這里插入圖片描述
這部分重點是前端傳遞參數，后端正確的接收到，更多問題其實是出現在了后端，后端響應部分的代碼：
https://blog.csdn.net/m0_72900498/article/details/150282255?spm=1001.2014.3001.5501

4.刪除功能

（1）給表格添加ref創建實例：

// 聲明表格引用
const tableRef = ref()

添加到表格里面：屬性部分：

ref="tableRef"

引入依賴：

import { ElMessage, ElMessageBox } from 'element-plus' // 必須添加

（2）給刪除按鈕綁定事件（方法）

//刪除會員按鈕：實現只選中一行數據
function remove() {let rows = tableRef.value.getSelectionRows();//通過實例獲取選中的表格的是哪一行 if (rows.length === 0) {ElMessage.warning("請選中您要刪除的行");//設置提示信息} else {ElMessageBox.confirm("是否確認刪除選中的行?", "警告", {confirmButtonText: "確定",cancelButtonText: "取消",type: "warning"}).then(() => {//執行操作let ids = rows.map(it => it.id);//獲取選中的刪除IdremoveByIds(ids);//校驗只選中一行成功之后，調用removeByIds方法真正刪除,并傳遞要刪除的會員的Id值}).catch(() => {//捕獲之后 });}
}

async function removeByIds(ids) {let resp = await api({url: "/members",method: "delete",data: ids});if (resp.success) {ElMessage.success("刪除操作成功，共刪除" + resp.data + "條");select(); // 刷新表格} else {ElMessage.error("刪除失敗，請稍候再試或聯系管理員");}
}

點擊選中行事件：


function tblRowClick(row) {if (!row || !tableRef.value) returntableRef.value.toggleRowSelection(row)
}

效果：
在這里插入圖片描述
具體的刪除操作去數據庫中查 :

servcie層方法

package com.study.service;import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.study.model.Member;
import com.study.model.search.MemberSearchBean;
import java.util.List;public interface MemberService {//查詢全部客戶Page<Member> findAll(Page<Member> page, MemberSearchBean msb);//刪除操作：批量刪除（多個--傳集合：是客戶Id也就是整型），返回受影響的行數int delete(List<Integer> ids);
}

package com.study.service;import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.study.model.Member;
import com.study.model.search.MemberSearchBean;
import java.util.List;public interface MemberService {//查詢全部客戶Page<Member> findAll(Page<Member> page, MemberSearchBean msb);//刪除操作：批量刪除（多個--傳集合：是客戶Id也就是整型），返回受影響的行數int delete(List<Integer> ids);
}

根據Id刪除mybatis-plus底層已經提供了，直接調方法就行，所以不用寫mapper層了

Controller層：

package com.study.controller;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.study.model.Member;
import com.study.model.search.MemberSearchBean;
import com.study.service.MemberService;
import com.study.util.JsonResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;import java.util.List;@RestController
@RequestMapping("api/v1/members" )//接收前端的請求,路徑與前端發送請求的路徑一致
public class MemberController {private MemberService memberService;@Autowired//依賴注入：創建對象：public void setMemberService(MemberService memberService) {this.memberService = memberService;}//查詢全部客戶：@GetMappingpublic ResponseEntity<JsonResult<?>> findAll(@RequestParam(defaultValue = "1") Integer pageNo,@RequestParam(defaultValue = "15") Integer pageSize,MemberSearchBean msb){Page<Member> page = new Page<>(pageNo,pageSize);Page<Member> all = memberService.findAll(page, msb);return ResponseEntity.ok(JsonResult.success(all));}@DeleteMapping//刪除操作public ResponseEntity<JsonResult<?>> delete(@RequestBody Integer[] ids){int count = memberService.delete(List.of(ids));if(count==0){return ResponseEntity.ok(JsonResult.fail("刪除會員失敗"));}else {return ResponseEntity.ok(JsonResult.success(count));}}
}

Service層：

package com.study.service;import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.study.model.Member;
import com.study.model.search.MemberSearchBean;
import java.util.List;public interface MemberService {//查詢全部客戶Page<Member> findAll(Page<Member> page, MemberSearchBean msb);//刪除操作：批量刪除（多個--傳集合：是客戶Id也就是整型），返回受影響的行數int delete(List<Integer> ids);
}

package com.study.service.impl;import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.study.mapper.MemberMapper;
import com.study.model.Member;
import com.study.model.search.MemberSearchBean;
import com.study.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;@Service//控制反轉：創建對象
public class MemberServiceImpl implements MemberService {@Autowiredprivate MemberMapper memberMapper;@Overridepublic Page<Member> findAll(Page<Member> page, MemberSearchBean msb) {return memberMapper.findAll(page,msb);}@Overridepublic int delete(List<Integer> ids) {return memberMapper.deleteByIds(ids);//注意選對方法}}

在這里插入圖片描述
效果：

5.新增功能

（1）點擊新增按鈕出現彈窗：也就是對話框
按照官網給的就行：

https://element-plus.org/zh-CN/component/dialog.html
在這里插入圖片描述

都有，根據需要改就行了。

 <!--  5-增加會員：--><div><el-dialog v-model="dialogVisible" title="新增會員信息" width="500" draggable><el-form-item label="ID" prop="id" v-if="false"><el-input v-model="formInline2.id" placeholder="請輸入ID" style="width: 130px" clearable/></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="formInline2.name" placeholder="請輸入客戶姓名" style="width: 160px" clearable/></el-form-item><el-form-item label="電話" prop="phone"><el-input v-model="formInline2.phone" placeholder="請輸入客戶電話" clearable/></el-form-item><el-form-item label="年齡" prop="age"><el-input v-model="formInline2.age" placeholder="請輸入客戶年齡" clearable/></el-form-item><el-form-item label="注冊時間"><el-date-pickerv-model="formInline2.createTime"type="date"placeholder="注冊日期"value-format="YYYY-MM-DD"/></el-form-item><el-form-item label="地址" prop="address"><el-input v-model="formInline2.address" placeholder="請輸入客戶地址" clearable/></el-form-item><el-form-item label="性別" prop="sex" style="width: 160px"><el-select v-model="formInline2.sex" clearable><el-option label="男" value="男"/><el-option label="女" value="女"/></el-select></el-form-item><el-form-item label="備注" prop="remark" :rows="4"><el-input v-model="formInline2.remark"width="260px" placeholder="請輸入客戶信息備注" clearable/></el-form-item><el-form-item label="出生日期"><el-date-pickerv-model="formInline2.birthday"type="date"placeholder="出生日期"value-format="YYYY-MM-DD"/></el-form-item><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="submitAdd">確定</el-button></div></template></el-dialog></div>

在這里插入圖片描述

這個彈窗成功顯示了，且能夠正常填寫數據，接下來就是給確定和取消按鈕添加事件，當點擊確定按鈕的時候提交后臺。

但是要先添加輸入信息是否合法的校驗：暫時不做，后面再完善

相關事件：

// 對話框控制
const dialogVisible = ref(false)

// 新增會員表單數據
let formInline2 = ref({id: null,name: null,phone: null,sex: null,age: null,address: null,birthday:null,createTime: null,remark: null
});

后端完成響應。

6.修改功能

// 對話框控制：修改頁面
const dialogVisible2 = ref(false)

<el-dialog v-model="dialogVisible2" title="修改會員信息" width="500" draggable><el-form :model="formInline3"><el-form-item label="ID" prop="id" v-if="false"><el-input v-model="formInline3.id" placeholder="請輸入ID" style="width: 130px" clearable/></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="formInline3.name" placeholder="請輸入客戶姓名" style="width: 160px" clearable/></el-form-item><el-form-item label="電話" prop="phone"><el-input v-model="formInline3.phone" placeholder="請輸入客戶電話" clearable/></el-form-item><el-form-item label="年齡" prop="age"><el-input v-model="formInline3.age" placeholder="請輸入客戶年齡" clearable/></el-form-item><el-form-item label="注冊時間"><el-date-pickerv-model="formInline3.createTime"type="date"placeholder="注冊日期"value-format="YYYY-MM-DD"/></el-form-item><el-form-item label="地址" prop="address"><el-input v-model="formInline3.address" placeholder="請輸入客戶地址" clearable/></el-form-item><el-form-item label="性別" prop="sex" style="width: 160px"><el-select v-model="formInline3.sex" clearable><el-option label="男" value="男"/><el-option label="女" value="女"/></el-select></el-form-item><el-form-item label="備注" prop="remark" :rows="4"><el-input v-model="formInline3.remark"width="260px" placeholder="請輸入客戶信息備注" clearable/></el-form-item><el-form-item label="出生日期"><el-date-pickerv-model="formInline3.birthday"type="date"placeholder="出生日期"value-format="YYYY-MM-DD"/></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogVisible2 = false">取消</el-button><el-button type="primary" @click="submitEdit">確定</el-button></div></template></el-dialog></div>

// 修改會員表單數據
let formInline3 = ref({id: null,name: null,phone: null,sex: null,age: null,address: null,birthday:null,createTime: null,remark: null
});

在這里插入圖片描述

后端完成響應即可

四、增刪改查的全部代碼+前后端響應思路

1.全部代碼

<template><!-- 1.查詢條件區域：想作為查詢條件的是：ID、姓名、手機號、性別、年齡、地址 、出生日期范圍--><div class="page-container"><!--行內樣式、雙向綁定數據模型formInline.prop:和后端字段綁定--><el-form :inline="true" :model="formInline"><el-form-item label="ID" prop="id"><el-input v-model="formInline.id" placeholder="請輸入ID" style="width: 130px" clearable/></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="formInline.name" placeholder="請輸入客戶姓名" style="width: 160px" clearable/></el-form-item><el-form-item label="電話" prop="phone"><el-input v-model="formInline.phone" placeholder="請輸入客戶電話" clearable/></el-form-item><el-form-item label="性別" prop="sex" style="width: 160px"><el-select v-model="formInline.sex" clearable><el-option label="不限" value="不限"/><el-option label="男" value="男"/><el-option label="女" value="女"/></el-select></el-form-item><el-form-item label="年齡" prop="age"><el-input v-model="formInline.age" placeholder="請輸入客戶年齡" clearable/></el-form-item><el-form-item label="地址" prop="address"><el-input v-model="formInline.address" placeholder="請輸入客戶地址" clearable/></el-form-item><el-form-item label="出生日期"><el-date-pickerv-model="formInline.birthdayRange"type="daterange"start-placeholder="起始日期"end-placeholder="終止日期"value-format="YYYY-MM-DD"/></el-form-item></el-form></div><!-- 2.按鈕區--><div><div class="mb-4"><el-button type="primary" round @click="openAddDialog">增加會員</el-button><el-button type="success" round  @click="edit">修改會員</el-button><el-button type="info" round @click="select()">查詢會員</el-button><el-button type="primary" round @click="reset">重置</el-button><el-button type="danger" round @click="remove">刪除會員</el-button></div></div><!-- 3.表格展示成員數據--><div><el-table ref="tableRef" :data="tableData" style="width: 100%" class="data-grid"@row-click="tblRowClick()"  stripeborder highlight-current-row show-header :header-cell-style="{background: '#5da6e6',color: 'white',fontWeight: 'bold',}"><el-table-column type="selection" width="160" align="center" fixed height="160" name="custom-selection-col" /><el-table-column fixed prop="id" label="會員ID" width="160" height="230px"/><el-table-column fixed prop="name" label="姓名" width="130"/><el-table-column prop="phone" label="電話" width="150"/><el-table-column prop="age" label="年齡" width="120"/><el-table-column prop="createTime" label="注冊時間" width="180"/><el-table-column prop="address" label="地址" width="250"/><el-table-column prop="sex" label="性別" width="120"/><el-table-column prop="remark" label="備注" width="260"/><el-table-column prop="birthday" label="出生日期" min-width="180"/></el-table></div><!-- 4.分頁條--><div class="pagination"><el-paginationv-model:current-page="memberPi.pageNo"v-model:page-size="memberPi.pageSize":page-sizes="[1,5,10,15,20]"layout="total, sizes, prev, pager, next, jumper":total="memberPi.total"class="member-pi"background@current-change="handlePageChange"@size-change="handleSizeChange"/></div><!--  5-增加會員：--><div><el-dialog v-model="dialogVisible" title="新增會員信息" width="500" draggable><el-form-item label="ID" prop="id" v-if="false"><el-input v-model="formInline2.id" placeholder="請輸入ID" style="width: 130px" clearable/></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="formInline2.name" placeholder="請輸入客戶姓名" style="width: 160px" clearable/></el-form-item><el-form-item label="電話" prop="phone"><el-input v-model="formInline2.phone" placeholder="請輸入客戶電話" clearable/></el-form-item><el-form-item label="年齡" prop="age"><el-input v-model="formInline2.age" placeholder="請輸入客戶年齡" clearable/></el-form-item><el-form-item label="注冊時間"><el-date-pickerv-model="formInline2.createTime"type="date"placeholder="注冊日期"value-format="YYYY-MM-DD"/></el-form-item><el-form-item label="地址" prop="address"><el-input v-model="formInline2.address" placeholder="請輸入客戶地址" clearable/></el-form-item><el-form-item label="性別" prop="sex" style="width: 160px"><el-select v-model="formInline2.sex" clearable><el-option label="男" value="男"/><el-option label="女" value="女"/></el-select></el-form-item><el-form-item label="備注" prop="remark" :rows="4"><el-input v-model="formInline2.remark"width="260px" placeholder="請輸入客戶信息備注" clearable/></el-form-item><el-form-item label="出生日期"><el-date-pickerv-model="formInline2.birthday"type="date"placeholder="出生日期"value-format="YYYY-MM-DD"/></el-form-item><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="submitAdd">確定</el-button></div></template></el-dialog></div><!--  6-修改會員：--><div><el-dialog v-model="dialogVisible2" title="修改會員信息" width="500" draggable><el-form :model="formInline3"><el-form-item label="ID" prop="id" v-if="false"><el-input v-model="formInline3.id" placeholder="請輸入ID" style="width: 130px" clearable/></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="formInline3.name" placeholder="請輸入客戶姓名" style="width: 160px" clearable/></el-form-item><el-form-item label="電話" prop="phone"><el-input v-model="formInline3.phone" placeholder="請輸入客戶電話" clearable/></el-form-item><el-form-item label="年齡" prop="age"><el-input v-model="formInline3.age" placeholder="請輸入客戶年齡" clearable/></el-form-item><el-form-item label="注冊時間"><el-date-pickerv-model="formInline3.createTime"type="date"placeholder="注冊日期"value-format="YYYY-MM-DD"/></el-form-item><el-form-item label="地址" prop="address"><el-input v-model="formInline3.address" placeholder="請輸入客戶地址" clearable/></el-form-item><el-form-item label="性別" prop="sex" style="width: 160px"><el-select v-model="formInline3.sex" clearable><el-option label="男" value="男"/><el-option label="女" value="女"/></el-select></el-form-item><el-form-item label="備注" prop="remark" :rows="4"><el-input v-model="formInline3.remark"width="260px" placeholder="請輸入客戶信息備注" clearable/></el-form-item><el-form-item label="出生日期"><el-date-pickerv-model="formInline3.birthday"type="date"placeholder="出生日期"value-format="YYYY-MM-DD"/></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogVisible2 = false">取消</el-button><el-button type="primary" @click="submitEdit">確定</el-button></div></template></el-dialog></div>
</template><script setup>
import { reactive, ref, onMounted, toRaw } from 'vue'
import api from "@/utils/api.js";
import { ElMessage, ElMessageBox } from 'element-plus'const size = ref('default');
const disabled = ref(false);// 對話框控制：新增頁面
const dialogVisible = ref(false)
// 對話框控制：修改頁面
const dialogVisible2 = ref(false)// 查詢表單對象
let formInline = ref({id: null,name: null,phone: null,sex: null,age: null,address: null,birthdayRange: []
});// 表格數據對象
let tableData = ref([]);// 分頁配置
let memberPi = reactive({pageNo: 1,pageSize: 15,total: 0
});// 新增會員表單數據
let formInline2 = ref({id: null,name: null,phone: null,sex: null,age: null,address: null,birthday:null,createTime: null,remark: null
});// 修改會員表單數據
let formInline3 = ref({id: null,name: null,phone: null,sex: null,age: null,address: null,birthday:null,createTime: null,remark: null
});// 查詢會員方法
async function select(pageNo = 1, pageSize = 15) {let params = toRaw(formInline.value);if(params.birthdayRange) {params.birthdayFrom = params.birthdayRange[0];params.birthdayTo = params.birthdayRange[1];delete params.birthdayRange;}try {const resp = await api({url: "/members",method: "get",params: {pageNo,pageSize,...params}});tableData.value = resp.data.records;memberPi.pageNo = resp.data.current;memberPi.pageSize = resp.data.size;memberPi.total = resp.data.total;} catch (error) {console.error("查詢失敗:", error);}
}// 分頁變化處理
const handlePageChange = (currentPage) => {memberPi.pageNo = currentPage;select(currentPage, memberPi.pageSize);
};const handleSizeChange = (pageSize) => {memberPi.pageSize = pageSize;select(1, pageSize);
};// 重置表單
function reset() {formInline.value = {id: null,name: null,phone: null,sex: null,age: null,address: null,birthday:null};
}// 表格操作
const tableRef = ref()function tblRowClick(row) {if (!row || !tableRef.value) returntableRef.value.toggleRowSelection(row)
}//刪除會員按鈕：實現只選中一行數據
function remove() {let rows = tableRef.value.getSelectionRows();//通過實例獲取選中的表格的是哪一行if (rows.length === 0) {ElMessage.warning("請選中您要刪除的行");//設置提示信息} else {ElMessageBox.confirm("是否確認刪除選中的行?", "警告", {confirmButtonText: "確定",cancelButtonText: "取消",type: "warning"}).then(() => {//執行操作let ids = rows.map(it => it.id);//獲取選中的刪除IdremoveByIds(ids);//校驗只選中一行成功之后，調用removeByIds方法真正刪除,并傳遞要刪除的會員的Id值}).catch(() => {//捕獲之后});}
}async function removeByIds(ids) {let resp = await api({url: "/members",method: "delete",data: ids});if (resp.success) {ElMessage.success("刪除操作成功，共刪除" + resp.data + "條");select(); // 刷新表格} else {ElMessage.error("刪除失敗，請稍候再試或聯系管理員");}
}// 打開新增對話框
function openAddDialog() {formInline2.value = {id: null,name: null,phone: null,sex: null,age: null,address: null,birthday:null,createTime: null,remark: null}dialogVisible.value = true
}// 提交新增
async function submitAdd() {try {// 處理日期數據const params = {...toRaw(formInline2.value),birthdayFrom: formInline2.value.birthdayRange?.[0],birthdayTo: formInline2.value.birthdayRange?.[1]}delete params.birthdayRangeconst resp = await api({url: "/members",method: "post",data: params})if (resp.success) {ElMessage.success("新增會員成功")dialogVisible.value = falseselect() // 刷新表格}} catch (error) {console.error("新增失敗:", error)ElMessage.error("新增失敗，請稍候再試")}
}
//新增表單對象
let memberFormRef = ref();
let mode = "add";//標志位//修改按鈕
function edit() {let rows = tableRef.value.getSelectionRows();if (rows.length === 0) {ElMessage.warning("請選中您要修改的行");} else if (rows.length > 1) {ElMessage.warning("您一次只能修改一行");} else {// 將選中的行數據填充到表單中formInline3.value = {...rows[0]};dialogVisible2.value = true;}
}//提交修改
async function submitEdit() {try {const resp = await api({url: "/members",method: "put",data: toRaw(formInline3.value)});if (resp.success) {ElMessage.success("修改會員信息成功");dialogVisible2.value = false;select(); // 刷新表格}} catch (error) {console.error("修改失敗:", error);ElMessage.error("修改失敗，請稍候再試");}
}
// 組件掛載時加載數據
onMounted(() => {select();
});
</script><style>
.data-grid {margin-top: 6px;
}.pagination {margin-top: 20px;display: flex;justify-content: center;
}.member-pi {margin-top: 6px;
}</style>

2.前后端分離項目的響應思路

在前后端分離架構中，前端（Vue/React）和后端（Spring Boot）通過 RESTful API 進行交互，主要涉及請求（Request）和響應（Response）的處理。

1.前端發送請求

在這里插入圖片描述
前端四種請求方式舉例：

// GET 請求（帶查詢參數）
await api({url: "/members",method: "get",params: { pageNo: 1, pageSize: 10 }
});// POST 請求（提交 JSON 數據）
await api({url: "/members",method: "post",data: { name: "張三", age: 25 }
});// PUT 請求（修改數據，ID 在 URL 中）
await api({url: `/members/${id}`,method: "put",data: { name: "李四", age: 30 }
});// DELETE 請求（刪除數據）
await api({url: `/members/${id}`,method: "delete"
});

2.后端接收請求

在這里插入圖片描述

@RestController
@RequestMapping("/api/v1/members")
public class MemberController {@GetMappingpublic ResponseEntity<JsonResult<?>> findAll(@RequestParam(defaultValue = "1") int pageNo,@RequestParam(defaultValue = "10") int pageSize) {// 查詢邏輯}@PostMappingpublic ResponseEntity<JsonResult<?>> add(@RequestBody Member member) {// 新增邏輯}@PutMapping("/{id}")public ResponseEntity<JsonResult<?>> edit(@PathVariable Integer id,@RequestBody Member member) {// 修改邏輯}@DeleteMapping("/{id}")public ResponseEntity<JsonResult<?>> delete(@PathVariable Integer id) {// 刪除邏輯}
}

3.后端做出響應

后端返回響應
統一響應格式（推薦）：

{"success": true,"code": 200,"message": "操作成功","data": { ... }  // 業務數據
}

Spring Boot 返回方式：

@GetMapping
public ResponseEntity<JsonResult<?>> findAll() {List<Member> members = memberService.findAll();return ResponseEntity.ok(JsonResult.success(members));
}@PostMapping
public ResponseEntity<JsonResult<?>> add(@RequestBody Member member) {boolean success = memberService.add(member);if (success) {return ResponseEntity.ok(JsonResult.success("新增成功"));} else {return ResponseEntity.ok(JsonResult.fail("新增失敗"));}
}

4.前端處理響應

Axios 攔截器（統一處理錯誤）：

// 響應攔截器（api.js）
axios.interceptors.response.use((response) => {if (response.data.success) {return response.data; // 返回 data 部分} else {ElMessage.error(response.data.message || "操作失敗");return Promise.reject(response.data);}},(error) => {ElMessage.error(error.response?.data?.message || "網絡錯誤");return Promise.reject(error);}
);

javascript

async function loadMembers() {try {const resp = await api.get("/members");tableData.value = resp.data; // 獲取后端返回的 data} catch (error) {console.error("加載失敗:", error);}
}