温州做网站,最好的网站建设,百度seo排名培训优化,那种网站2021#x1f600;前言 本篇博文是关于Spring Boot(Vue3ElementPlusAxiosMyBatisPlusSpring Boot 前后端分离)【六】#xff0c;希望你能够喜欢 #x1f3e0;个人主页#xff1a;晨犀主页 #x1f9d1;个人简介#xff1a;大家好#xff0c;我是晨犀#xff0c;希望我的文章… 前言 本篇博文是关于Spring Boot(Vue3ElementPlusAxiosMyBatisPlusSpring Boot 前后端分离)【六】希望你能够喜欢 个人主页晨犀主页 个人简介大家好我是晨犀希望我的文章可以帮助到大家您的满意是我的动力 欢迎大家这里是CSDN我总结知识的地方欢迎来到我的博客感谢大家的观看 如果文章有什么需要改进的地方还请大佬不吝赐教 先在此感谢啦 文章目录 Spring Boot(Vue3ElementPlusAxiosMyBatisPlusSpring Boot 前后端分离)【六】实现功能09- 切换数据源为Druid代码实现 实现功能10-带条件查询分页显示列表需求分析/图解思路分析代码实现测试分页条件查询带条件分页查询显示效果 实现功能11-家居表单前端校验需求分析/图解思路分析代码实现完成测试测试页面效果 Spring Boot(Vue3ElementPlusAxiosMyBatisPlusSpring Boot 前后端分离)【六】
实现功能09- 切换数据源为Druid
代码实现
切换数据源为druid 修改pom.xml 和创建配置文件com\nlc\furn\config\DruidDataSourceConfig.java
上面建项目的时候就已经导入了就不用导入了这里只是提醒一下
!-- 引入druid 依赖--
dependencygroupIdcom.alibaba/groupIdartifactIddruid/artifactIdversion1.1.17/version
/dependencyConfiguration
Slf4j
public class DruidDataSourceConfig {//配置/注入DruidDataSourceConfigurationProperties(spring.datasource)Beanpublic DataSource dataSource() {DruidDataSource druidDataSource new DruidDataSource();log.info(数据源{}, druidDataSource.getClass());return druidDataSource;}
}完成测试, 看看数据源是否切换成Druid 实现功能10-带条件查询分页显示列表
需求分析/图解 思路分析
完成后台代码从mapper - service - controller , 并对代码进行测试完成前台代码使用axios 发送http 请求完成带条件查询分页显示
代码实现
修改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, 可以将我们的检索条件封装到QueryWrapperQueryWrapperFurn queryWrapper Wrappers.query();//判断search 是否有内容if (StringUtils.hasText(search)) {queryWrapper.like(name, search);}PageFurn page furnService.page(new Page(pageNum, pageSize), queryWrapper);return Result.success(page);}在数据库/表中增加测试数据, 方便进行条件查询
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 );使用Postman 完成测试http://localhost:10000/furnsBySearchPage?search沙发 修改HomeView.vue , 完成带条件分页查询 !--功能区域--div stylemargin: 10px 0i classel-icon-add-location/iel-button typeprimary clickadd新增/el-button
/div !--搜索区域--div stylemargin: 10px 0el-input v-modelsearch placeholder 请输入关键字 stylewidth: 20%clearable/el-inputel-button typeprimary stylemargin-left: 5px clicklist检索/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//修改totalthis.total res.data.total})}测试分页条件查询
启动项目后台服务springboot-furn 启动项目前台springboot_vue 浏览器输入 http://localhost:10000/
带条件分页查询显示效果 实现功能11-家居表单前端校验
需求分析/图解 说明: 参考element-plus 表单验证 思路分析
完成前台代码使用ElementPlus 的表单rules 验证即可参考ElementPlus 的表单验证文档
代码实现
修改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-modeldialogVisible 表示对话框, 和dialogVisible 变量双向绑定,控制是否显示对话框2. el-form :modelform 表示表单,数据和form 数据变量双向绑定3. el-input v-modelform.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 为200this.$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 falsethis.list()})} else {this.$message({//弹出更新失败信息type: error,message: 验证失败不提交})return false}})}
}修改add()
add() {this.dialogVisible truethis.form {}this.$refs[form].resetFields()//将添加验证提示消息清空
}完成测试
启动项目后台服务springboot-furn 启动项目前台springboot_vue 浏览器输入 http://localhost:10000/
测试页面效果 文章到这里就结束了如果有什么疑问的地方请指出诸大佬们一起来评论区一起讨论 希望能和诸大佬们一起努力今后我们一起观看感谢您的阅读 如果帮助到您不妨3连支持一下创造不易您们的支持是我的动力
