Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【六】

晨犀2023-08-29 16:51

😀前言

本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【六】，希望你能够喜欢

🏠个人主页：晨犀主页

🧑个人简介：大家好，我是晨犀，希望我的文章可以帮助到大家，您的满意是我的动力😉😉

💕欢迎大家：这里是CSDN，我总结知识的地方，欢迎来到我的博客，感谢大家的观看🥰

如果文章有什么需要改进的地方还请大佬不吝赐教 先在此感谢啦😊

文章目录

Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【六】

实现功能09- 切换数据源为Druid

代码实现

  1. 切换数据源为druid ， 修改pom.xml 和创建配置文件com\nlc\furn\config\DruidDataSourceConfig.java

上面建项目的时候就已经导入了就不用导入了，这里只是提醒一下

xml 复制代码 
<!-- 引入druid 依赖-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid</artifactId>
    <version>1.1.17</version>
</dependency>
java 复制代码 
@Configuration
@Slf4j
public class DruidDataSourceConfig {
 
    //配置/注入DruidDataSource
 
    @ConfigurationProperties("spring.datasource")
    @Bean
    public DataSource dataSource() {
        DruidDataSource druidDataSource = new DruidDataSource();
        log.info("数据源={}", druidDataSource.getClass());
        return druidDataSource;
    }
}
  1. 完成测试, 看看数据源是否切换成Druid

实现功能10-带条件查询分页显示列表

需求分析/图解

思路分析

  1. 完成后台代码从mapper -> service -> controller , 并对代码进行测试
  2. 完成前台代码，使用axios 发送http 请求，完成带条件查询分页显示

代码实现

  1. 修改FurnController.java , 增加处理带条件分页查询
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);
    }
  1. 在数据库/表中增加测试数据, 方便进行条件查询
sql 复制代码 
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 );
  1. 使用Postman 完成测试http://localhost:10000/furnsBySearchPage?search=沙发
  1. 修改HomeView.vue , 完成带条件分页查询
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 接口===

vue 复制代码 
    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:10000/

带条件分页查询显示效果

实现功能11-家居表单前端校验

需求分析/图解

说明: 参考element-plus 表单验证

思路分析

  1. 完成前台代码，使用ElementPlus 的表单rules 验证即可
  2. 参考ElementPlus 的表单验证文档

代码实现

  1. 修改HomeView.vue , 增加表单验证处理代码

==增加对表单各个字段的校验规则=

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 属性一致
-->
  1. 测试，就可以看到验证规则生效了【是光标离开输出框时，出现校验效果，因为是trigger:'blur' 事件】, 但是用户提交还是能成.
  1. 修改HomeView.vue 当表单验证不通过时，给出提示信息, 不提交表单

修改save()===

vue 复制代码 
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()==

vue 复制代码 
add() {
    this.dialogVisible = true
    this.form = {}
    this.$refs['form'].resetFields()//将添加验证提示消息，清空
}

完成测试

启动项目后台服务springboot-furn

启动项目前台springboot_vue

浏览器输入： http://localhost:10000/

测试页面效果

文章到这里就结束了，如果有什么疑问的地方请指出，诸大佬们一起来评论区一起讨论😁

希望能和诸大佬们一起努力，今后我们一起观看感谢您的阅读🍻

如果帮助到您不妨3连支持一下，创造不易您们的支持是我的动力🤞

相关推荐
hai405877 分钟前
Spring Boot中的响应与分层解耦架构
spring boot·后端·架构
陈大爷（有低保）26 分钟前
UDP Socket聊天室（Java）
java·网络协议·udp
kinlon.liu40 分钟前
零信任安全架构--持续验证
java·安全·安全架构·mfa·持续验证
王哲晓1 小时前
Linux通过yum安装Docker
java·linux·docker
java6666688881 小时前
如何在Java中实现高效的对象映射：Dozer与MapStruct的比较与优化
java·开发语言
Violet永存1 小时前
源码分析：LinkedList
java·开发语言
执键行天涯1 小时前
【经验帖】JAVA中同方法，两次调用Mybatis，一次更新，一次查询，同一事务，第一次修改对第二次的可见性如何
java·数据库·mybatis
Adolf_19931 小时前
Flask-JWT-Extended登录验证, 不用自定义
后端·python·flask
Jarlen1 小时前
将本地离线Jar包上传到Maven远程私库上，供项目编译使用
java·maven·jar
蓑 羽1 小时前
力扣438 找到字符串中所有字母异位词 Java版本
java·算法·leetcode
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04苍穹外卖面试总结05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07Coze扣子平台完整体验和实践（附国内和国际版对比）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10借助 LocatorJS ，快速定位本地代码