SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--功能实现[五]

news2025/1/10 13:32:09

文章目录

  • SSM--功能实现
    • 实现功能09-带条件查询分页显示列表
      • 需求分析/图解
      • 思路分析
      • 代码实现
      • 测试分页条件查询
        • 带条件分页查询显示效果
    • 实现功能10-添加家居表单前端校验
      • 需求分析/图解
      • 思路分析
      • 代码实现
      • 完成测试
        • 测试页面效果
    • 实现功能11-添加家居表单后端校验
      • 需求分析/图解
      • 思路分析
      • 代码实现
      • 完成测试: 添加家居表单后端校验

SSM–功能实现

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

需求分析/图解

image-20230804211736614

思路分析

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

代码实现

  1. 修改FurnService.java 和FurnServiceImpl.java , 增加条件查询

修改FurnService.java

public List<Furn> findByCondition(String name);

修改FurnServiceImpl.java

@Override
    public List<Furn> findByCondition(String name) {

        FurnExample furnExample = new FurnExample();
        //通过Criteria 对象可以设置查询条件
        FurnExample.Criteria criteria = furnExample.createCriteria();

        //判断name是有具体的内容
        if (StringUtils.hasText(name)) {
            criteria.andNameLike("%" + name + "%");
        }
        //说明:如果name没有传值null ,"", "   ", 依然是查询所有的记录
        return furnMapper.selectByExample(furnExample);
    }
  1. 修改FurnController.java , 处理带条件分页查询
/**
     * 根据家居名进行分页查询-条件
     *
     * @param pageNum
     * @param pageSize
     * @return
     */
    @ResponseBody
    @RequestMapping("/furnsByConditionPage")
    public Msg listFurnsByConditionPage(@RequestParam(defaultValue = "1") Integer pageNum,
                                        @RequestParam(defaultValue = "5") Integer pageSize,
                                        @RequestParam(defaultValue = "") String search) {

        PageHelper.startPage(pageNum, pageSize);
        List<Furn> furnList = furnService.findByCondition(search);

        PageInfo pageInfo = new PageInfo(furnList, pageSize);

        //将pageInfo封装到Msg对象，返回
        return Msg.success().add("pageInfo", pageInfo);
    }
  1. 使用Postman 测试，是否通过

image-20230801191119703

  1. 修改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 变量=

image-20230801191911647

========修改list 方法，请求带条件分页的API 接口=

image-20230801191935450

测试分页条件查询

启动项目后台服务furns_ssm
启动项目前台ssm_vue

带条件分页查询显示效果

测试带条件分页查询显示效果, 浏览器: http://localhost:9875/
image-20230804213412589

实现功能10-添加家居表单前端校验

需求分析/图解

image-20230801192143823

image-20230801192246701

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

image-20230801192307768

思路分析

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

代码实现

  1. 修改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 属性一致

–>

img

  1. 测试，就可以看到验证规则生效了【是光标离开输出框时，出现校验效果，因为是trigger:‘blur’ 事件】, 但是用户提交还是能成.

image-20230801192758192

  1. 修改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()//将添加验证提示消息，清空
}

完成测试

启动项目后台服务furns_ssm
启动项目前台ssm_vue

测试页面效果

测试当表单验证不通过，不提交表单. 浏览器: http://localhost:9875/

image-20230801193028265

image-20230801193041644

实现功能11-添加家居表单后端校验

需求分析/图解

  1. 为什么前端校验了，后端还需要校验?-使用Postman 添加数据, 破前端校验机制

image-20230801193142521

image-20230801193249325

  1. 后端校验-需求分析, 当后端校验没有通过，会出现灰色框提示, 后台不真正入库数据

image-20230801193309157

思路分析

  1. 后台使用JSR303 数据校验，引入hibernate-validator.jar ,学SpringMVC 讲过
  2. 前台使用ElementPlus 进行数据绑定,并显示错误信息

代码实现

  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>
  1. 修改Furn.java , 使用hibernate-validator
public class Furn {
    private Integer id;

    @NotEmpty(message = "请输入家居名")
    private String name;

    @NotEmpty(message = "请输入制造厂商")
    private String maker;

    @NotNull(message = "请输入数字")
    @Range(min = 0, message = "价格不能小于0")
    private BigDecimal price;

    @NotNull(message = "请输入数字")
    @Range(min = 0, message = "销量不能小于0")
    private Integer sales;

    @NotNull(message = "请输入数字")
    @Range(min = 0, message = "库存不能小于0")
    private Integer stock;

}

3.修改FurnController.java , 对save 方法进行完善

 @PostMapping("/save")
    @ResponseBody
    public Msg save(@Validated @RequestBody Furn furn, Errors errors) {

        Map<String, Object> map = new HashMap<>();

        List<FieldError> fieldErrors = errors.getFieldErrors();
        for (FieldError fieldError : fieldErrors) {
            map.put(fieldError.getField(), fieldError.getDefaultMessage());
        }

        if (map.isEmpty()) {//说明后端校验通过,因为没有发现校验错误
            furnService.save(furn);
            //返回成功msg
            return Msg.success();
        } else {
            //校验失败，把校验错误信息封装到Msg对象，并返回
            return Msg.fail().add("errorMsg", map);
        }

    }
  1. 修改HomeView.vue , 显示服务器校验返回的提示信息
    ===在数据池，增加显示错误信息变量
data() {
    return {
    //存放错误信息
    serverValidErrors: {},

====修改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 => {
                    if (res.code === 200) {
                        this.dialogVisible = false
                        this.list()
                    } else if (res.code === 400) {
                        this.serverValidErrors.name = res.extend.errorMsg.name;
                        this.serverValidErrors.sales = res.extend.errorMsg.sales;
                        this.serverValidErrors.price = res.extend.errorMsg.price;
                        this.serverValidErrors.maker = res.extend.errorMsg.maker;
                        this.serverValidErrors.stock = res.extend.errorMsg.stock;
                    }
                })
            } else {
                this.$message({//弹出更新失败信息
                    type: "error",
                    message: "验证失败，不提交"
                })
                return false
            }
        })
    }
}

==修改add()方法，清空错误信息=

add() {
    this.dialogVisible = true
    this.form = {}
    this.$refs['form'].resetFields()//将上传验证消息，清空
    this.serverValidErrors = {}
    },

修改对话框，显示后台返回的校验错误信息

<!--添加家居的弹窗
说明:
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" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="家居名" prop="name">
            <el-input v-model="form.name" style="width: 60%"></el-input>
            {{ serverValidErrors.name }}
        </el-form-item>
        <el-form-item label="厂商" prop="maker">
            <el-input v-model="form.maker" style="width: 60%"></el-input>
            {{ serverValidErrors.maker }}
        </el-form-item>
        <el-form-item label="价格" prop="price">
            <el-input v-model="form.price" style="width: 60%"></el-input>
            {{ serverValidErrors.price }}
        </el-form-item>
        <el-form-item label="销量" prop="sales">
            <el-input v-model="form.sales" style="width: 60%"></el-input>
            {{ serverValidErrors.sales }}
        </el-form-item>
        <el-form-item label="库存" prop="stock">
            <el-input v-model="form.stock" style="width: 60%"></el-input>
            {{ serverValidErrors.stock }}
        </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>

完成测试: 添加家居表单后端校验

启动项目后台服务furns_ssm
使用Postman 进行测试
1、通过Postman 发出添加请求

image-20230801200949687

2、这时, 后台返回添加失败的提示信息

image-20230801201027171

启动项目前台ssm_vue
浏览器： http://localhost:9875/
测试页面效果
● 添加家居表单后端校验, 浏览器: http://localhost:9875/

image-20230801201121837

image-20230801201138896

测试完毕后, 记得恢复valid 的正确写法。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/841893.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【HTML】＜input＞

【HTML】＜input＞

分类 text password number button reset submit hidden radio checkbox file image color range tel email&#xff08;火狐有校验&#xff0c;360浏览器无校验。&#xff09; url datetime&#xff08;火狐、360浏览器不支持&#xff09; search date、month、week、time、da…
阅读更多...
计算机网络-三种交换方式

计算机网络-三种交换方式

计算机网络-三种交换方式 电路交换(Circuit Switching) 电话交换机接通电话线的方式称为电路交换从通信资源分配的角度来看&#xff0c;交换(Switching)就是按照某种方式动态的分配传输线路的资源 电话交换机 为了解决电话之间通信两两之间连线过多&#xff0c;所以产生了电话…
阅读更多...
【Docker】docker镜像+nginx部署vue项目:

【Docker】docker镜像+nginx部署vue项目:

文章目录 一、文档&#xff1a;二、打包vue项目&#xff1a;三、配置nginx&#xff1a;四、配置Dockerfile&#xff1a;五、构建镜像&#xff1a;六、运行容器&#xff1a;七、最终效果&#xff1a; 一、文档&#xff1a; 【1】菜鸟教程&#xff1a;https://www.runoob.com/do…
阅读更多...
windows下以指定用户访问SMB服务器进行读写

windows下以指定用户访问SMB服务器进行读写

一 概述 最近遇到一个问题&#xff0c;linux 的 smb服务器开启匿名访问&#xff0c;windows访问linux文件夹不需要用户名密码就可以进去使用&#xff0c;但是存在一个问题&#xff0c;ssh连接到linux 后修改的文件&#xff0c;在windows已smb方式下打开某个文件修改 是没有权限…
阅读更多...
HTML5 Canvas和Svg：哪个简单且好用？

HTML5 Canvas和Svg：哪个简单且好用？

HTML5 Canvas 和 SVG 都是基于标准的 HTML5 技术&#xff0c;可用于创建令人惊叹的图形和视觉体验。 首先&#xff0c;让我们花几句话介绍HTML5 Canvas和SVG。 什么是Canvas? Canvas&#xff08;通过 标签使用&#xff09;是一个 HTML 元素&#xff0c;用于在用户计算机屏幕…
阅读更多...
Vue3+SpringBoot快速开发模板

Vue3+SpringBoot快速开发模板

起因&#xff1a;个人开发过程经常会使用到Vue3SpringBoot技术栈来开发项目&#xff0c;每次在项目初始化时都需要涉及一些重复的整理工作&#xff0c;于是结合一些个人觉得不错的前后端模板进行整合&#xff0c;打通一些大多数项目都需要的实现的基础功能&#xff0c;以便于快…
阅读更多...
探讨|使用或不使用机器学习

探讨|使用或不使用机器学习

动动发财的小手&#xff0c;点个赞吧&#xff01; 机器学习擅长解决某些复杂问题&#xff0c;通常涉及特征和结果之间的困难关系&#xff0c;这些关系不能轻易地硬编码为启发式或 if-else 语句。然而&#xff0c;在决定 ML 是否是当前给定问题的良好解决方案时&#xff0c;有一…
阅读更多...
opencv基础-38 形态学操作-闭运算（先膨胀，后腐蚀）cv2.morphologyEx(img, cv2.MORPH_CLOSE, kernel)

opencv基础-38 形态学操作-闭运算（先膨胀，后腐蚀）cv2.morphologyEx(img, cv2.MORPH_CLOSE, kernel)

闭运算是先膨胀、后腐蚀的运算&#xff0c;它有助于关闭前景物体内部的小孔&#xff0c;或去除物体上的小黑点&#xff0c;还可以将不同的前景图像进行连接。 例如&#xff0c;在图 8-17 中&#xff0c;通过先膨胀后腐蚀的闭运算去除了原始图像内部的小孔&#xff08;内部闭合的…
阅读更多...
PCIe枚举源码分析

PCIe枚举源码分析

枚举的过程也就是RC的系统软件通过配置空间访问来确定以及扫描整个总线拓扑的过程。 PCIe的拓扑结构如下&#xff1a; • Root Complex是树的根&#xff0c;它一般实现了一个主桥设备(host bridge), 一条内部PCIe总线(BUS 0)&#xff0c;以及通过若干个PCI bridge扩展出一些r…
阅读更多...
性能测试监控指标及分析调优指南

性能测试监控指标及分析调优指南

目录 一、哪些因素会成为系统的瓶颈 二、哪些指标做为衡量系统的性能 三、性能测试注意的问题 四、定位性能问题的时候&#xff0c;可以使用自下而上的策略分析排查 五、优化性能问题的时候&#xff0c;可以使用自上而下的策略进行优化 一、哪些因素会成为系统的瓶颈 CPU&…
阅读更多...
Vercel 部署的项目发现APIkeys过期了怎么办

Vercel 部署的项目发现APIkeys过期了怎么办

好不容易部署的Vercel&#xff0c;发现APIkeys过期了显示&#xff0c;查了查资料发现只要更新下新的apikeys&#xff0c;然后再重新部署下就好了。 重新设置APIkeys 1.1. 进去 Vercel 项目内部控制台&#xff0c;点击顶部的 Settings 按钮&#xff1b; 1.2 点击环境变量Enviorn…
阅读更多...
K8S系列文章之 开源的堡垒机 jumpserver

K8S系列文章之 开源的堡垒机 jumpserver

一、jumpserver作为一款开源的堡垒机&#xff0c;不管是企业还是个人&#xff0c;我觉得都是比较合适的&#xff0c;而且使用也比较简单。 二、这里记录一下安装和使用过程。 1、安装&#xff0c;直接docker不是就行 version: 3 services:xbd-mysql:image: mysql:8.0.19restart…
阅读更多...
Spring Data JPA源码

Spring Data JPA源码

导读: 什么是Spring Data JPA? 要解释这个问题,我们先将Spring Data JPA拆成两个部分&#xff0c;即Sping Data和JPA。 从这两个部分来解释。 Spring Data是什么? 摘自: https://spring.io/projects/spring-data Spring Data’s mission is to provide a familiar and cons…
阅读更多...
Nginx可视化NginxWebUI

Nginx可视化NginxWebUI

Nginx可视化Web Github:https://github.com/cym1102/nginxWebUI 支持window、linux 安装方式支持docker、window直接运行 jar包cmd运行&#xff1a;port可自行替换 java -jar -Dfile.encodingUTF-8 D:/软件/Nginx-Ui/nginxWebUI-3.6.3.jar --server.port8380 --project.hom…
阅读更多...
nvm下载安装配置

nvm下载安装配置

一、作用 nvm是node版本管理的工具&#xff0c;具有管理、下载、切换node版本等能力。经常不同项目需要依赖不同版本的node&#xff0c;此时nvm就能有效的解决node版本切换的问题。 二、nvm下载安装配置 &#xff08;1&#xff09;安装包地址 https://github.com/coreybutl…
阅读更多...
Net强大混淆和代码保护 LogicNP Crypto Obfuscator

Net强大混淆和代码保护 LogicNP Crypto Obfuscator

.Net 的强大混淆和代码保护确实有效&#xff01; .Net 汇编代码保护和混淆 自动异常报告 优化和性能改进 更小和简化的部署 您希望您的混淆器... 使用高级混淆技术确保对您的代码和知识产权提供最佳保护。使用智能规则和自动排除 避免常见混淆问题。 拥有简单的用户…
阅读更多...
P2824 [HEOI2016/TJOI2016] 排序

P2824 [HEOI2016/TJOI2016] 排序

题目 思路 直接模拟排序肯定会TLE&#xff0c;所以我们想一种离线的方法&#xff1a;01排序 利用二分答案check一下d&#xff0c;设序列中大于等于d的数为1&#xff0c;小于d的数为0 完成后再进行排序&#xff1a;这样升序排列就是将0放前面1放后面&#xff0c;降序排列则相反…
阅读更多...
Linux下C/C++的gdb工具与Python的pdb工具常见用法之对比

Linux下C/C++的gdb工具与Python的pdb工具常见用法之对比

1、gdb和pdb分别是什么&#xff1f; 1.1、gdb GDB&#xff08;GNU Debugger&#xff09;是一个功能强大的命令行调试工具&#xff0c;由GNU项目开发&#xff0c;用于调试C、C等编程语言的程序。它在多个操作系统中都可以使用&#xff0c;包括Linux、MacOS和Windows&#xff0…
阅读更多...
C#与C/C++交互（1）——需要了解的基础知识

C#与C/C++交互（1）——需要了解的基础知识

【前言】 C#中用于实现调用C/C的方案是P/Invoke&#xff08;Platform Invoke&#xff09;&#xff0c;让托管代码可以调用库中的函数。类似的功能&#xff0c;JAVA中叫JNI&#xff0c;Python中叫Ctypes。 常见的代码用法如下&#xff1a; [DllImport("Test.dll", E…
阅读更多...
关于游戏的笔记

关于游戏的笔记

关于搭建秦时明月2一键端&#xff0c;并且开启秘境神秘商人东海寻仙幻化 1.该游戏下主要的目录 gm端 服务框架 服务端 2.修改对应的文件 C:\qs\Q2Server\server\conf_common\ManagerAddress.xmlC:\qs\Q2Server\server\conf_manager\GateServer.xml修改ip 3.启动gm startup…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023