一、环境搭建

项目搭建可以参考上篇博客：

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);}
}

5.常见问题以及解决方案

6.总结