目录
Spring Boot 项目【前后端分离】 之架子搭建
技术栈
实现功能03-创建Spring Boot 后端项目
需求分析/图解
思路分析
代码实现
1. 创建springboot_furn 项目
2. 修改pom.xml , 引入mybatis-plus 等相关依赖
3. 创建application.yml 配置port & 配置DB 连接信息
4. 创建SpringbootApplication.java , 完成测试
实现功能04-添加家居
思路分析
代码实现
2. 创建util/Result.java 该工具类用于返回结果(json 格式)，这个工具类
3. 创建bean/Furn.java
4.创建mapper/FurnMapper.java
5. 创建service/FurnService.java
6. 创建/service/impl/FurnServiceImpl.java
注意
7. 创建furn/controller/FurnController.java
8. Postman 完成测试, 查看furn 表是否添加了数据, 自己完成测试即可.
9.安装axios， 用于发送Ajax 请求给后台
10.点击添加按钮， 可以出现添加家居的对话框, 修改views\HomeView.vue
11. 完成测试: 看看点击新增按钮，能否正常的弹窗添加家居的对话框(含有表单)
12创建工具文件src\utils\request.js ,用于创建axios request 对象
14. 修改HomeView.vue , 在methods 编写save 方法, 并测试会出现跨域问题
14. 修改springboot_vue\vue.config.js 解决跨域问题,
修改Home.vue, 使用跨域请求, 并完成测试, 查看数据库，是否有新数据添加成功
提醒, 这里容易出现的问题
启动项目前后端程序
注意事项和细节
实现功能05-显示家居信息
需求分析/图解
思路分析
代码实现
修改controller/FurnController.java ,
Postman 完成测试
修改HomeView.vue , 编写list 方法
完成测试，看看是否可以显示家居列表信息.编辑
修改src\utils\request.js 增加response 拦截器， 统一处理响应后结果
修改HomeView.vue , 简化返回处理编辑
完成测试 编辑
7 实现功能06-修改家居信息
需求分析/图解
思路分析
代码实现
1. 修改FurnController.java , 处理修改请求, 并使用Postman 完成测试
2. 修改HomeView.vue , 编写handleEdit 方法, 回显数据并测试
修改HomeView.vue , 修改save 方法,
将修改家居信息功能, 回显家居表单数据, 改成从后端-DB 获取
1. 修改FurnController.java , 处理根据id返回对应的furn对象,
修改HomeView.vue , 编写handleEdit 第二种方法, 回显数据并测试
8 实现功能07-删除家居信息
需求分析/图解
思路分析
代码实现
1. 修改FurnController.java , 处理删除请求, 并使用Postman 完成测试
2. 修改HomeView.vue , 编写handleDel 方法, 完成删除并测试
3. 完成测试测试
9 实现功能08-分页显示列表
需求分析/图解
编辑 思路分析
代码实现
创建MybatisPlusConfig.java 配置类，引入mybatis-plus 分页插件
修改FurnController.java 增加分页查询处理
为方便观察SQL, 配置MyBatis-Plus 日志输出, 修改resources\application.yml
使用Postman 进行测试， 看看分页查询是否OK
修改HomeView.vue , 完成分页导航显示、分页请求
增加element-plus 分页控件
完成测试
分页显示效果
实现功能09- 切换数据源为Druid
代码实现
1. 切换数据源为druid 修改pom.xml
2. 完成测试, 看看数据源是否切换成Druid
实现功能10-带条件查询分页显示列表
需求分析/图解编辑 思路分析
代码实现
1. 修改FurnController.java , 增加处理带条件分页查询
2. 在数据库/表中增加测试数据, 方便进行条件查询
3. 使用Postman 完成测试
4. 修改HomeView.vue , 完成带条件分页查询
测试分页条件查询
实现功能11-添加家居表单前端校验
说明: 参考element-plus 表单验证
思路分析
代码实现
修改HomeView.vue , 增加表单验证处理代码
测试
修改Homeview.vue 当表单验证不通过时，不提交表单
完成测试
实现功能12-添加家居表单后端校验
需求分析/图解
2. 后端校验-需求分析, 当后端校验没有通过，会出现灰色框提示, 后台不真正入库数据
思路分析
代码实现
1. 修改pom.xml 引入hibernate-validator jar 文件
2. 修改Furn.java , 使用hibernate-validator
3. 修改FurnController.java , 对save 方法进行完善
4. 修改HomeView.vue , 显示服务器校验返回的提示信息
完成测试: 添加家居表单后端校验
测试页面效果
LambdaQueryWrapper -使用说明
模拟实现
Spring Boot 项目【前后端分离】 之后端实现
技术栈
- 使用了前后端分离，前端的主体框架Vue3＋后端的基础框架Spring-Boot
1.前端技术栈∶vue3＋Axios＋ElementPlus.
2.后端技术栈∶SpringBoot＋MyBatis Plus
3.数据库-Mysql
4.项目依赖管理-Maven
5.分页-MyBatis Plus 分页插件
6.切换数据源DruidDataSources
7.在LambdaQueryWrapper 引出知识点lambda 方法引用的类名∶∶实例方法
8.项日前端我们使用到request 和response 拦截器，并且我们解决了跨域问题
实现功能03-创建Spring Boot 后端项目
需求分析/图解
● 项目前后端分离情况如图, 分成两个子项目(前端和后端)
思路分析
代码实现
1. 创建springboot_furn 项目
2. 修改pom.xml , 引入mybatis-plus 等相关依赖
<!--导入springboot父工程-规定写法--> <parent> <artifactId>spring-boot-starter-parent</artifactId> <groupId>org.springframework.boot</groupId> <version>2.5.3</version> </parent> <dependencies> <!--引入web starter--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!--引入mysql驱动: 这里使用版本仲裁 8.0.26--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> </dependency> <!--引入配置处理器 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-configuration-processor</artifactId> </dependency> <!--引入lombok--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> <!--引入test starter--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> </dependency> <!--引入druid依赖--> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.1.17</version> </dependency> <!--引入mybatis-plus starter--> <!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-boot-starter --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.4.3</version> </dependency> 讯享网
3. 创建application.yml 配置port & 配置DB 连接信息
讯享网server: port: 9090 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver username: root password: 自己的密码 url: jdbc:mysql://localhost:3306/springboot_vue?useSSL=true&useUnicode=true&characterEncoding=UTF-8 mybatis-plus:
4. 创建SpringbootApplication.java , 完成测试
(说明: 如果有自动生成的主启动程序，删除即可, 使用我们自己的.)
@MapperScan(basePackages = {"com.wyxedu.furn.mapper"}) @SpringBootApplication public class Application { public static void main(String[] args) { SpringApplication.run(Application.class,args); } }
实现功能04-添加家居
思路分析
1. 完成后台代码从mapper -> service -> controller , 并对每层代码进行测试, 到controller这一层，使用Postman 发送http 请求完成测试
2. 完成前台代码, 使用axios 发送json 数据给后台, 实现添加家居信息
代码实现
1. 创建数据库和表
讯享网-- 创建springboot_vue DROP DATABASE IF EXISTS springboot_vue; CREATE DATABASE springboot_vue; USE springboot_vue; -- 创建家居表 CREATE TABLE furn( `id` INT(11) PRIMARY KEY AUTO_INCREMENT, id `name` VARCHAR(64) NOT NULL, 家居名 `maker` VARCHAR(64) NOT NULL, 厂商 `price` DECIMAL(11,2) NOT NULL, 价格 `sales` INT(11) NOT NULL, 销量 `stock` INT(11) NOT NULL 库存 ); -- 初始化家居数据 INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock`) VALUES(NULL , '北欧风格小桌子' , '熊猫家居' , 180 , 666 , 7); INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock`) VALUES(NULL , '简约风格小椅子' , '熊猫家居' , 180 , 666 , 7 ); INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` ) VALUES(NULL , '典雅风格小台灯' , '蚂蚁家居' , 180 , 666 , 7 ); INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` ) VALUES(NULL , '温馨风格盆景架' , '蚂蚁家居' , 180 , 666 , 7 ); SELECT * FROM furn;
2. 创建util/Result.java 该工具类用于返回结果(json 格式)，这个工具类
在网上也可找到，直接拿来使用, SSM 项目也用过类似的工具类
public class Result<T> { private String code; //状态码 private String msg; //对状态说明 private T data; // 返回时，携带的数据, 为了扩展性好，使用泛型 public String getCode() { return code; } public void setCode(String code) { this.code = code; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public T getData() { return data; } public void setData(T data) { this.data = data; } //无参构造器 public Result() { } //带参构造器-指定返回的data public Result(T data) { this.data = data; } //编写方法-返回需要的Result对象-表示成功的Result public static Result success() { Result result = new Result<>(); result.setCode("200"); result.setMsg("success"); return result; } //编写方法-返回需要的Result对象-表示成功的Result,同时可以携带数据 //如果需要在static方法使用泛型，需要在 static <T> public static <T> Result<T> success(T data) { Result<T> result = new Result<>(data); result.setCode("200"); result.setMsg("success"); return result; } //编写方法-返回需要的Result对象-表示失败的Result public static Result error(String code, String msg) { Result result = new Result<>(); result.setCode(code); result.setMsg(msg); return result; } //编写方法-返回需要的Result对象-表示失败的Result,同时可以携带数据 public static <T> Result<T> error(String code, String msg, T data) { Result<T> result = new Result<>(data); result.setCode(code); result.setMsg(msg); return result; } }3. 创建bean/Furn.java
这样我们添加数据的时候不需要指定id 注意这里设置了主键自增长
数据库这个字段也必须是自增长和主键
讯享网@Data @TableName("furn") public class Furn { //这里我们使用@TableId： 表主键标识 //当我们在 private Integer id 上标识了@TableId //说明id 对应的就是表的id字段，而且是主键 //type = IdType.AUTO 主键类型是自增长 @TableId(type = IdType.AUTO) private Integer id; private String name; private String maker; private Double price; private Integer sales; private Integer stock; }
4.创建mapper/FurnMapper.java
/ * 如果是mybatis-plus 我们Mapper接口可以通过extends 接口BaseMapper * , 扩展功能 */ //@Mapper因为主函数已经配置了扫描这个包的类和子包的类 public interface FurnMapper extends BaseMapper<Furn> { //如果你有其它的方法，可以再该接口声明 //并在对应的Mapper.xml进行配置实现 }5. 创建service/FurnService.java
讯享网public interface FurnService extends IService<Furn> { //如果有其它的需求，可以在该接口声明方法，然后再对应的实现类进行实现 //在前面我们讲解springboot 整合 mybatis-plus讲过 }
6. 创建/service/impl/FurnServiceImpl.java
@Service public class FurnServiceImpl extends ServiceImpl<FurnMapper, Furn> implements FurnService { } 注意
如果这个上面的为什么要继承这个接口和为什么要继承这个类 这个我的博客spring -boot整合mybits-plus中已经非常详细的介绍了 可以去看一下然后在继续观看 链接
7. 创建furn/controller/FurnController.java
说明
1. 我们的前端如果是以json格式来发送添加信息furn，
那么我们需要使用@RequestBody, 才能将数据封装到对应的bean,
同时保证http的请求头的content-type是对应
2. 如果前端是以表单形式提交了，则不需要使用@RequestBody, 才会进行对象参数封装, 同时保证http的请求头的 content-type是对应
讯享网@RestController public class FurnController { @Autowired FurnService furnService; @PostMapping("/save") public Result<?> save(@RequestBody Furn furn) { furnService.save(furn); return Result.success(); } }
8. Postman 完成测试, 查看furn 表是否添加了数据, 自己完成测试即可.
9.安装axios， 用于发送Ajax 请求给后台
npm i axios -S
这里输入命令 如果已经安装过的就可以不需要安装
10.点击添加按钮， 可以出现添加家居的对话框, 修改views\HomeView.vue
说明el-dialog 从Dialog 对话框获取, 表单代码从Form 表单获取，组合一下并调整一下即可
<!-- 添加家居的弹窗 说明: 1. el-dialog ：v-model="dialogVisible" 表示对话框, 和dialogVisible 变量双向 绑定,控制是否显示对话框 2. el-form :model="form" 表示表单,数据和form 数据变量双向绑定 3. el-input v-model="form.name" 表示表单的input 空间，名字为name 需要和 后台Javabean 属性一致 --> <el-dialog title="提示" v-model="dialogVisible" width="30%"> <el-form :model="form" label-width="120px"> <el-form-item label="家居名"> <el-input v-model="form.name" style="width: 80%"></el-input> </el-form-item> <el-form-item label="厂商"> <el-input v-model="form.maker" style="width: 80%"></el-input> </el-form-item> <el-form-item label="价格"> <el-input v-model="form.price" style="width: 80%"></el-input> </el-form-item> <el-form-item label="销量"> <el-input v-model="form.sales" style="width: 80%"></el-input> </el-form-item> <el-form-item label="库存"> <el-input v-model="form.stock" style="width: 80%"></el-input> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="save">确定</el-button> </span> </template> </el-dialog> </div> </template> //增加数据, 一定要, 否则你会发现,在后面弹出的表单不能输入数据 data() { return { form: {}, //增加方法 methods: { add() { this.dialogVisible = true this.form = {} } } //增加点击新增的按钮事件 <div style="margin: 10px 0"> <el-button type="primary" @click="add">新增</el-button> <el-button>其它</el-button> </div>11. 完成测试: 看看点击新增按钮，能否正常的弹窗添加家居的对话框(含有表单)
12创建工具文件src\utils\request.js ,用于创建axios request 对象
讯享网// 引入axios 包 // 重要提示：如果在启动前端项目，提示找不到axios , 把光标放在import axios from 'axios' 的'axios', 会有一个修复提示, 导入axios, 小伙伴点击, 导入即可正常使用 import axios from 'axios' // 通过axios 创建对象 const request = axios.create({ timeout: 5000 }) // request 拦截器 // 1. 可以对请求做一些处理 // 2. 比如统一加token，Content-Type 等 request.interceptors.request.use(config => { config.headers['Content-Type'] = 'application/json;charset=utf-8'; return config }, error => { return Promise.reject(error) }); //导出 export default request
14. 修改HomeView.vue , 在methods 编写save 方法, 并测试会出现跨域问题
<script> // 引入request 组件 import request from "@/utils/request"; //methods 增加方法. save() { // =======说明====... request.post("http://localhost:10001/save", this.form).then(res => { console.log(res) this.dialogVisible = false }) } </script>
14. 修改springboot_vue\vue.config.js 解决跨域问题,
因为修改了配置文件, npm serve 需要重启, 否则不能识别
讯享网const {defineConfig} = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true }) module.exports = { devServer: { port: 10000, // 启动端口 //解读如果我们请的地址 /api/save => 代理到 http://localhost:8080/ssm/save proxy: { //设置代理，必须填 '/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字，名字可以自己定 target: 'http://localhost:8080/ssm', //代理的目标地址, 就是/api 代替 http://localhost:10001/ changeOrigin: true, //是否设置同源，输入是的, 浏览器就允许跨域 pathRewrite: { //路径重写 '/api': '' //选择忽略拦截器里面的单词 } } } } }
修改Home.vue, 使用跨域请求, 并完成测试, 查看数据库，是否有新数据添加成功
1. 将form 表单提交给/api/save 的接口
2. /api/save 等价http∶//locaLhost∶10001/save
3. 如果成功，就进入then 方法
4.res 就是返回的信息
5.查看mysql 看看数据是否保存
request.post("/api/save", this.form).then(res => { console.log(res) this.dialogVisible = false }) }提醒, 这里容易出现的问题
1) 一定要确定request.post("/api/save") 被代理后的url , 是项目后台服务对应提供的API接口url , 否则报404
2) 当跨域执行时请求，浏览器还是提示http://localhost:5927/api/xxx , 所以不要认为是api没有替换你的配置.
启动项目前后端程序
使用跨域请求, 并完成测试, 查看数据库，是否有新数据添加成功
注意事项和细节
1. Postman 测试时, 要指定content-type ,否则会报错415
2. 如果需要将提交的json 数据, 封装到对应的Javabean, 需要配置@RequestBody , 否则会报错500
3. 如果需要返回json 数据, 需要在方法上, 配置@ResponseBody , 否则会报错404
实现功能05-显示家居信息
需求分析/图解
思路分析
代码实现
修改controller/FurnController.java ,
增加获取所有家居信息[说明：分页功能后面再完成]
讯享网 @RequestMapping("/furns") public Result listFurns() { List<Furn> furns = furnService.list(); return Result.success(furns); }
Postman 完成测试
修改HomeView.vue , 编写list 方法
//修改一下el-table <el-table : data="tableData" stripe style="width: 100%"> <el-table-column prop="id" label="ID" sortable > </el-table-column> <el-table-column prop="name" label="家居名" > </el-table-column> <el-table-column prop="maker" label="厂家"> </el-table-column> <el-table-column prop="price" label="价格"> </el-table-column> <el-table-column prop="sales" label="销量"> </el-table-column> <el-table-column prop="stock" label="库存"> </el-table-column> <el-table-column fixed="right" label="操作" width="100"> <template #default="scope"> <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button> <el-button type="text">删除</el-button> </template> </el-table-column> </el - table > //修改一下tableData: [] data() { return { form: {}, dialogVisible: false, search: '', tableData: [] } } //在created() 调用list() 完成页面数据获取 created() { this.list() } //编写list() method list() { //请求显示家居列表-带检索 request.get("/api/furns").then(res => { //绑定tableData, 显示在表格 this.tableData = res.data.extend.furnsList }) } //在save() 调用后，调用list() 刷新页面 save() { // =======说明====... request.post("/api/save", this.form).then(res => { console.log(res) this.dialogVisible = false this.list() }) }完成测试，看看是否可以显示家居列表信息.
修改src\utils\request.js 增加response 拦截器， 统一处理响应后结果
讯享网//引入axios import axios from "axios"; //通过axios创建对象-request对象,用于发送请求到后端 const request = axios.create({ timeout: 5000 }) //request拦截器的处理 //1. 可以对请求做统一的处理 //2. 比如统一的加入token, Content-Type等 request.interceptors.request.use(config => { config.headers['Content-Type'] = 'application/json;charset=utf-8' return config }, error => { return Promise.reject(error) }) //response拦截器 //可以在调用接口响应后，统一的处理返回结果 request.interceptors.response.use( response => { let res = response.data //如果返回的是文件,就返回 if (response.config.responseType === 'blob') { return res } //如果是string, 就转成json对象 if (typeof res === 'string') { //如果res 不为null, 就进行转换成json对象 res = res ? JSON.parse(res) : res } return res; }, error => { console.log("err", error) return Promise.reject(error); } ) //导出request对象, 在其它文件就可以使用 export default request
修改HomeView.vue , 简化返回处理
完成测试
7 实现功能06-修改家居信息
需求分析/图解
思路分析
1. 完成后台代码从mapper -> service -> controller , 并对代码进行测试
2. 完成前台代码, 回显家居信息[方式1: 直接将点击的表格当前行的数据进行回显, 方式
2.2.1根据当前行的id(家居id), 到db 查询对应的数据，进行回显]，再使用axios 发送http 请求，更新数据, 将数据绑定显示
代码实现
1. 修改FurnController.java , 处理修改请求, 并使用Postman 完成测试
/ * 说明 * 1. @PutMapping 我们使用Rest风格,因为这里是修改的请求,使用put请求 * 2. @RequestBody : 表示前端/客户端 发送的数据是以json格式来发送 */ @PutMapping("/update") public Result update(@RequestBody Furn furn) { //这个updateById是mybatis-plus提供 furnService.updateById(furn); return Result.success(); } 
2. 修改HomeView.vue , 编写handleEdit 方法, 回显数据并测试
讯享网handleEdit(row) { //说明 //1. JSON.stringify(row) 将row 转成json 字符串 //2. JSON.parse(xx) 将字符串转成json 对象 //3. 为什么这样做? 其实JSON.parse(JSON.stringify(row)) 就是对row 进行了深拷贝 //4. 这样表格中的行数据和弹出框的数据就是独立的了 this.form = JSON.parse(JSON.stringify(row)) this.dialogVisible = true } //触发handleEdit 方法 <el-button size="mini" @click="handleEdit(scope.row)" type="primary">编辑</el-button>
修改HomeView.vue , 修改save 方法,
处理修改请求, 说明更新成功的消息框, 不需要做额外处理, 直接使用this.$message 即可
save() { //增加处理修改逻辑 if (this.form.id) { request.put("/api/update", this.form).then(res => { if (res.code === 200) {//如果code 为200 this.$message({ //弹出更新成功的消息框 type: "success", message: "更新成功" }) } else { this.$message({//弹出更新失败信息 type: "error", message: res.msg }) } this.list() //刷新列表 this.dialogVisible = false }) } else {//添加 //=======说明====== //1. 将form 表单提交给/api/save 的接口 //2. /api/save 等价http://localhost:10001/save //3. 如果成功，就进入then 方法 //4. res 就是返回的信息 //5. 查看Mysql 看看数据是否保存 request.post("/api/save", this.form).then(res => { this.dialogVisible = false this.list() }) } }
将修改家居信息功能, 回显家居表单数据, 改成从后端-DB 获取
1. 修改FurnController.java , 处理根据id返回对应的furn对象,
并使用Postman 完成测试
讯享网 //增加方法[接口],根据id,返回对应的家居信息 //如何设计? 依然使用url占位符+@PathVariable @GetMapping("/find/{id}") public Result findById(@PathVariable Integer id) { Furn furn = furnService.getById(id); log.info("furn={}", furn); return Result.success(furn);//返回成功的信息-携带查询到furn信息 }
修改HomeView.vue , 编写handleEdit 第二种方法, 回显数据并测试
request.get("/api/find/" + row.id).then(res => { if (res.code === "200") {//查询成功 //取出数据绑定this.form this.form = res.data } else { this.$message({ type: "error", message: res.msg //小伙伴也可以 res.msg来提示 }) } }) this.dialogVisible = true //显示对话框 }注意在ssm中我们是res.extend.furn
是因为我们在ssm项目中定义的返回类中的数据集合是extend所以用extend
但是我们这个项目中返回数据的类的数据名字是 data就是一个自定义泛型放什么类型就是什么
所以我们这里是用res.data就好了
这里为什么没有frun是我们传数据的类型是介绍frun 所以mybits-plus就自动封装了
上面ssm的是一个集合然后多了一个数据类型是obiect 然后放进去的是frun
所以还要在提取一层数据
8 实现功能07-删除家居信息
需求分析/图解
思路分析
代码实现
1. 修改FurnController.java , 处理删除请求, 并使用Postman 完成测试
使用url占位符+@PathVariable 配合使用 => springmvc的博客有详细介绍 链接
讯享网 //处理删除 //使用url占位符+@PathVariable 配合使用 => springmvc的博客有详细介绍 //使用rest 风格 ->del方式 @DeleteMapping("/del/{id}") public Result del(@PathVariable Integer id) { //说明removeById 是Mybatis-Plus提供 furnService.removeById(id); return Result.success(); }
2. 修改HomeView.vue , 编写handleDel 方法, 完成删除并测试
//处理删除方法 handleDel(id) { request.delete("/api/del/" + id).then(res => { if (res.code === 200) { this.$message({ type: "success", message: "删除成功" }) } else { this.$message({ type: "error", message: res.msg }) } this.list() // 刷新列表 }) } //响应删除点击 <template #default="scope"> <el-button size="mini" @click="handleEdit(scope.row)" type="primary">编辑</el-button> <!--增加popcomfirm 控件，确认删除-- > <el-popconfirm title="确定删除吗？" @confirm="handleDel(scope.row.id)" > <template #reference> <el-button size="small" type="danger">删除</el-button> </template> </el-popconfirm> </template >3. 完成测试测试
9 实现功能08-分页显示列表
需求分析/图解
思路分析
思路分析1. 后台使用MyBatis-plus 分页插件完成查询
2. 修改FurnController , 增加处理分页显示代码
3. 完成前台代码，加入分页导航，并将分页请求和后台接口结合
代码实现
创建MybatisPlusConfig.java 配置类，引入mybatis-plus 分页插件
讯享网@Configuration public class MybatisPlusConfig { / * 梳理 * 1、注入MybatisPlusInterceptor 对象/bean * 2. 在MybatisPlusInterceptor bean 加入分页插件 PaginationInnerInterceptor */ @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); //这里分页需要指定数据库类型,因为不同的DB,分页SQL语句不同 interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }
修改FurnController.java 增加分页查询处理
/ * @param pageNum 显示第几页 ,默认1 * @param pageSize 每页显示几条记录 , 默认5 * @return */ //分页查询的接口/方法 @GetMapping("/furnsByPage") public Result listFurnsByPage(@RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "5") Integer pageSize) { //这里通过page方法，返回Page对象, 对象中就封装了分页数据 Page<Furn> page = furnService.page(new Page<>(pageNum, pageSize)); //这里我们注意观察，返回的page数据结构是如何的?这样你才能指定在前端如何绑定返回的数据 return Result.success(page); }为方便观察SQL, 配置MyBatis-Plus 日志输出, 修改resources\application.yml
讯享网mybatis-plus: configuration: #这里我们配置输出底层的sql,方便我们观察sql log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
使用Postman 进行测试， 看看分页查询是否OK
浏览器http://localhost:10000/furnsByPage
-------看后端sql--------
==> Preparing: SELECT COUNT(*) FROM furn
==> Parameters:
<== Columns: COUNT(*)
<== Row: 5
<== Total: 1
==> Preparing: SELECT id,name,maker,price,sales,stock FROM furn LIMIT ?
==> Parameters: 3(Long)
<== Columns: id, name, maker, price, sales, stock<== Row: 1, 北欧风格小桌子, 熊猫家居, 180.00, 666, 7
<== Row: 2, 简约风格小椅子, 熊猫家居, 180.00, 666, 7
<== Row: 3, 典雅风格小台灯, 蚂蚁家居, 180.00, 666, 7
<== Total: 3
修改HomeView.vue , 完成分页导航显示、分页请求
增加element-plus 分页控件
//增加element-plus 分页控件 <div style="margin: 10px 0"> <el-pagination @size-change="handlePageSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div > </div > </template > //增加分页初始化数据 data() { return { currentPage: 1, pageSize: 5, total: 10, //修改list(), 换成分页请求数据 list() { //请求显示家居列表-不带检索 request.get("/api/furnsByPage", { params: { pageNum: this.currentPage, pageSize: this.pageSize } }).then(res => { //绑定tableData, 显示在表格 this.tableData = res.extend.pageInfo.list this.total = res.extend.pageInfo.total }) } //增加方法, 处理记录的变化, 这两个方法是和分页控件绑定的. //处理每页显示多少条记录变化 handlePageSizeChange(pageSize) { this.pageSize = pageSize this.list() } , //处理当前页变化, 比如点击分页连接,或者go to 第几页 handleCurrentChange(pageNum) { this.currentPage = pageNum this.list() }完成测试
启动项目后台服务furns_ssm
启动项目前台ssm_vue
浏览器： http://localhost:10000/
分页显示效果
● 测试分页显示效果, 浏览器: http://localhost:10000/
实现功能09- 切换数据源为Druid
代码实现
1. 切换数据源为druid 修改pom.xml
创建配置文件config\DruidDataSourceConfig.java
提醒: 为什么我们配置/注入指定的数据源, 就替换了默认的数据源
再springboot 切换数据源时的博客有，讲过底层机制 链接
讯享网@Configuration @Slf4j public class DruidDataSourceConfig { //配置/注入DruidDataSource @ConfigurationProperties("spring.datasource") @Bean public DataSource dataSource() { DruidDataSource druidDataSource = new DruidDataSource(); log.info("数据源={}", druidDataSource.getClass()); return druidDataSource; } }
这个最上面建项目的时候就已经导入了这里只是提醒一下和单独拿处理这个的作用
<!--引入druid依赖--> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.1.17</version> </dependency>2. 完成测试, 看看数据源是否切换成Druid
实现功能10-带条件查询分页显示列表
需求分析/图解 思路分析
思路分析代码实现
1. 修改FurnController.java , 增加处理带条件分页查询
讯享网 / * @param pageNum 显示第几页 * @param pageSize 每页显示几条记录 * @param search 检索条件: 家居名 , 默认是“”, 表示不带条件检索，正常分页 * @return */ @GetMapping("/furnsBySearchPage") public Result listFurnsByConditionPage( @RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "5") Integer pageSize, @RequestParam(defaultValue = "") String search) { //先创建QueryWrapper, 可以将我们的检索条件封装到QueryWrapper QueryWrapper<Furn> queryWrapper = Wrappers.query(); //判断search 是否有内容 if (StringUtils.hasText(search)) { queryWrapper.like("name", search); } Page<Furn> page = furnService.page(new Page<>(pageNum, pageSize), queryWrapper); return Result.success(page); }
2. 在数据库/表中增加测试数据, 方便进行条件查询
INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` ) VALUES(NULL , '简约沙发1' , '蚂蚁家居' , 180 , 666 , 7 ); INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` ) VALUES(NULL , '简约沙发2' , '蚂蚁家居' , 180 , 666 , 7 ); INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` ) VALUES(NULL , '简约沙发3' , '蚂蚁家居' , 180 , 666 , 7 ); INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` ) VALUES(NULL , '简约沙发4' , '蚂蚁家居' , 180 , 666 , 7 ); INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` ) VALUES(NULL , '简约沙发5' , '蚂蚁家居' , 180 , 666 , 7 ); INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` ) VALUES(NULL , '简约沙发6' , '蚂蚁家居' , 180 , 666 , 7 ); INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` ) VALUES(NULL , '简约沙发7' , '蚂蚁家居' , 180 , 666 , 7 ); INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` ) VALUES(NULL , '简约沙发8' , '蚂蚁家居' , 180 , 666 , 7 ); 3. 使用Postman 完成测试
http://localhost:10000/furnsBySearchPage?search=沙发
4. 修改HomeView.vue , 完成带条件分页查询
讯享网< !--功能区域--> <div style="margin: 10px 0"> <i class="el-icon-add-location"></i> <el-button type="primary" @click="add">新增</el-button> </div> < !--搜索区域--> <div style="margin: 10px 0"> <el-input v-model="search" placeholder=" 请输入关键字" style="width: 20%" clearable></el-input> <el-button type="primary" style="margin-left: 5px" @click="list">检索</el-button> </div>
===========在数据池，增加search 变量=====
==========修改list 方法，请求带条件分页的API 接口===
list() {//显示家居信息, // request.get("/api/furns").then(res => { // console.log("res=", res) // //将返回的数据和tableData绑定 // this.tableData = res.data // }) //分页查询 + 带条件 request.get("/api/furnsBySearchPage2", { params: { pageNum: this.currentPage, pageSize: this.pageSize, search: this.search } }).then(res => { // console.log("res=", res) //将返回的数据和tableData绑定 this.tableData = res.data.records //修改total this.total = res.data.total }) }测试分页条件查询
启动项目后台服务springboot-furn
启动项目前台springboot_vue
浏览器： http://localhost:9875/
实现功能11-添加家居表单前端校验
说明: 参考element-plus 表单验证
思路分析
代码实现
修改HomeView.vue , 增加表单验证处理代码
==========增加对表单各个字段的校验规则=========
讯享网tableData: [], rules: { name: [ { required: true, message: '请输入称家居名', trigger: 'blur' } ], maker: [ { required: true, message: '请输入称制造商', trigger: 'blur' } ], price: [ { required: true, message: '请输入价格', trigger: 'blur' }, { pattern: /^(([1-9]\d*)|(0))(\.\d+)?$/, message: '请输入数字', trigger: 'blur' } ], sales: [ { required: true, message: '请输入销量', trigger: 'blur' }, { pattern: /^(([1-9]\d*)|(0))$/, message: '请输入数字', trigger: 'blur' } ], stock: [ { required: true, message: '请输入库存', trigger: 'blur' }, { pattern: /^(([1-9]\d*)|(0))$/, message: '请输入数字', trigger: 'blur' } ] }
==========指定将创建的规则应用到form 表单, 注意名称要对应=========
添加家居的弹窗
说明:
1. el-dialog ：v-model="dialogVisible" 表示对话框, 和dialogVisible 变量双向绑定,控制是否显示对话框
2. el-form :model="form" 表示表单,数据和form 数据变量双向绑定
3. el-input v-model="form.name" 表示表单的input 空间， 名字为name 需要和后台Javabean 属性一致
测试
就可以看到验证规则生效了【是光标离开输出框时，出现校验效果，因为是trigger:'blur' 事件】, 但是用户提交还是能成.
修改Homeview.vue 当表单验证不通过时，不提交表单
========修改save()===========
save() { //增加处理修改逻辑 if (this.form.id) { request.put("/api/update", this.form).then(res => { if (res.code === 200) {//如果code 为200 this.$message({ //弹出更新成功的消息框 type: "success", message: "更新成功" }) } else { this.$message({//弹出更新失败信息 type: "error", message: res.msg }) } this.list() //刷新列表 this.dialogVisible = false }) } else {//添加 //表单数据校验是否 this.$refs['form'].validate((valid) => { if (valid) { //=======说明====== //1. 将form 表单提交给/api/save 的接口 //2. /api/save 等价http://localhost:10001/save //3. 如果成功，就进入then 方法 //4. res 就是返回的信息 //5. 查看Mysql 看看数据是否保存 request.post("/api/save", this.form).then(res => { this.dialogVisible = false this.list() }) } else { this.$message({//弹出更新失败信息 type: "error", message: "验证失败，不提交" }) return false } }) } }===========修改add()============
讯享网add() { this.dialogVisible = true this.form = {} this.$refs['form'].resetFields()//将添加验证提示消息，清空 }
完成测试
实现功能12-添加家居表单后端校验
需求分析/图解
1. 为什么前端校验了，后端还需要校验?-看使用Postman 添加数据, 破前端校验机制.
2. 后端校验-需求分析, 当后端校验没有通过，会出现灰色框提示, 后台不真正入库数据
思路分析
代码实现
1. 修改pom.xml 引入hibernate-validator jar 文件
<!-- JSR303 数据校验支持 引入hibernate-validator--> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-validator</artifactId> <version>6.1.0.Final</version> </dependency>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/47426.html