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

文章目录

  • 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

@Overridepublic 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 为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()//将添加验证提示消息,清空
}

完成测试

启动项目后台服务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")@ResponseBodypublic 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);//返回成功msgreturn 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 为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 => {if (res.code === 200) {this.dialogVisible = falsethis.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 = truethis.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.rhkb.cn/news/79275.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于Godot游戏引擎制作流水灯

先上核心代码 游戏节点 流水灯的通途可以是 1. 装饰 2. 音乐类多媒体程序&#xff08;如FL中TB-303的步进灯&#xff09; FL Studio Transistor Bass

基于Kubernetes环境的高扩展机器学习部署利器——KServe

随着ChatGPT的发布&#xff0c;人们越来越难以回避利用机器学习的相关技术。从消息应用程序上的文本预测到智能门铃上的面部识别&#xff0c;机器学习&#xff08;ML&#xff09;几乎可以在我们今天使用的每一项技术中找到。 如何将机器学习技术交付给消费者是企业在开发过程中…

【独立后台】快递小程序便宜寄快递系统小程序 对接易达

快递代发项目简介&#xff1a; 顾名思义就是帮发快递。原本产业链是客户-快递之间的联系&#xff0c;现在变成了客户-我们-快递&#xff0c;简单来说就是我们把客户聚集到一起团购到了更优惠的价格。很简单就是赚一个差价&#xff0c; 单子多就能和各个快递合作的平台&#x…

【Yolov5+Deepsort】训练自己的数据集(1)| 目标检测追踪 | 轨迹绘制

&#x1f4e2;前言&#xff1a;本篇是关于如何使用YoloV5Deepsort训练自己的数据集&#xff0c;从而实现目标检测与目标追踪&#xff0c;并绘制出物体的运动轨迹。本章讲解的为第一个内容&#xff1a;简单介绍YoloV5Deepsort中所用到的目标检测&#xff0c;追踪及sort&Depp…

基于Spring Boot的在线视频教育培训网站设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的在线视频教育培训网站设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java sp…

Python IDE

Python IDE 本文为大家推荐几款款不错的 Python IDE&#xff08;集成开发环境&#xff09;&#xff0c;比较推荐 PyCharm&#xff0c;当然你可以根据自己的喜好来选择适合自己的 Python IDE。 PyCharm PyCharm 是由 JetBrains 打造的一款 Python IDE。 PyCharm 具备一般 Pyt…

Android优化篇|网络预连接

作者&#xff1a;苍耳叔叔 一个示例 前后分别去请求同一个域名下的接口&#xff0c;通过 Charles 抓包&#xff0c;可以看到 Timing 下面的时间&#xff1a; 第二次请求时&#xff0c;DNS、Connect 和 TLS Handshake 部分都是 -&#xff0c;说明没有这部分的耗时&#xff0c;…

一个.NET开发的Web版Redis管理工具

今天给大家推荐一款web 版的Redis可视化工具WebRedisManager&#xff0c;即可以作为单机的web 版的Redis可视化工具来使用&#xff0c;也可以挂在服务器上多人管理使用的web 版的Redis可视化工具。 WebRedisManager基于SAEA.Socket通信框架中的SAEA.RedisSocket、SAEA.WebApi两…

BS框架说明

B/S架构 1.B/S框架&#xff0c;意思是前端&#xff08;Browser 浏览器&#xff0c;小程序、app、自己写的&#xff09;和服务器端&#xff08;Server&#xff09;组成的系统的框架结构 2.B/S框架&#xff0c;也可理解为web架构&#xff0c;包含前端、后端、数据库三大组成部分…

实际工作中通过python+go-cqhttp+selenium实现自动检测维护升级并发送QQ通知消息(程序内测)

说明&#xff1a;该篇博客是博主一字一码编写的&#xff0c;实属不易&#xff0c;请尊重原创&#xff0c;谢谢大家&#xff01; 首先&#xff0c;今年比较忙没有多余时间去实操创作分享文章给大家&#xff0c;那就给大家分享下博主在实际工作中的一点点内容吧&#xff0c;就当交…

数据结构基础

目录 1、线性表 1.1、数组 1.2、链表 1.3、栈 1.4、队列 2、散列表 3、树 3.1、二叉树 3.1.1、存储原理 3.1.2、红黑树 a、平衡二叉树和红黑树 b、红黑树特征 c、左旋 d、右旋 e、颜色反转 3.1.3、二叉堆 3.1.4、二叉树的遍历 a、深度优先遍历 b、广度优先遍…

洛谷 P3375 【模板】KMP 字符串匹配

题目描述 给出两个字符串 s1​ 和 s2​&#xff0c;若 s1​ 的区间 [l,r] 子串与 s2​ 完全相同&#xff0c;则称 s2​ 在 s1​ 中出现了&#xff0c;其出现位置为 l。 现在请你求出 s2​ 在 s1​ 中所有出现的位置。 定义一个字符串 s 的 border 为 s 的一个非 s 本身的子串…

4 三组例子,用OpenCV玩转图像-AI-python

读取&#xff0c;缩放&#xff0c;旋转&#xff0c;写入图像 首先导入包&#xff0c;为了显示导入matplotlib/为了在matplotlib显示 导入CV2/查看版本 导入图片/查看图片类型 图片数组 数组大小 对于opencv通道顺序蓝色B、绿色G、红色R matplotlib通道顺序为 红色R、绿色G、蓝…

无涯教程-Perl - delete函数

描述 此函数从哈希中删除指定的键和关联的值,或从数组中删除指定的元素。该操作适用于单个元素或切片。 语法 以下是此函数的简单语法- delete LIST返回值 如果键不存在,并且与已删除的哈希键或数组索引关联的值,则此函数返回undef。 Perl 中的 delete函数 - 无涯教程网无…

机器学习---概述(二)

文章目录 1.模型评估1.1 分类模型评估1.2 回归模型评估 2. 拟合2.1 欠拟合2.2 过拟合2.3 适当拟合总结&#xff1a; 3.深度学习3.1层次&#xff08;Layers&#xff09;&#xff1a;3.2 神经元&#xff08;Neurons&#xff09;&#xff1a;3.3 总结 1.模型评估 模型评估是机器学…

【Python】Locust持续优化:InfluxDB与Grafana实现数据持久化与可视化分析

目录 前言 influxDB 安装运行InfluxDB 用Python 上报数据到influxdb ocust 数据写入到 influx Locust的生命周期 上报数据 优化升级 配置Grafana 总结 资料获取方法 前言 在进行性能测试时&#xff0c;我们需要对测试结果进行监控和分析&#xff0c;以便于及时发现问…

项目实战 — 消息队列(4){消息持久化}

目录 一、消息存储格式设计 &#x1f345; 1、queue_data.txt&#xff1a;保存消息的内容 &#x1f345; 2、queue_stat.txt&#xff1a;保存消息的统计信息 二、消息序列化 三、自定义异常类 四、创建MessageFileManger类 &#x1f345; 1、约定消息文件所在的目录和文件名…

迅为全国产龙芯3A5000电脑运行统信UOS、银河麒麟、loongnix系统

iTOP-3A5000开发板采用全国产龙芯3A5000处理器&#xff0c;基于龙芯自主指令系统 (LoongArch) 的LA464微结构&#xff0c;并进一步提升频率&#xff0c;降低功耗&#xff0c;优化性能。在与龙芯3A4000处理器保持引脚兼容的基础上&#xff0c;频率提升至2.5GHZ&#xff0c;功耗降…

谷粒商城第九天-解决商品品牌问题以及前后端使用检验框架检验参数

目录 一、总述 二、商品分类问题 三、前端检验 四、后端检验 五、总结 一、总述 在完成完商品分类的时候&#xff0c;后来测试的时候还是发现了一些问题&#xff0c;现在将其进行解决&#xff0c;问题如下&#xff1a; 1. 取消显示的时候&#xff0c;如果取消了显示&…

九度OJ → 题目1368:二叉树中和为某一值的路径 ← DFS

【题目来源】 由于九度OJ&#xff08;http://ac.jobdu.com/&#xff09;已经永久关闭&#xff0c;故无法在其上进行在线提交代码。 幸运的是&#xff0c;在AcWing上有此题目“二叉树中和为某一值的路径”&#xff0c;但描述有些不同。可详见&#xff1a;https://www.acwing.com…