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

@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.mfbz.cn/a/63392.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

第八次作业

第八次作业

1、什么是数据认证&#xff0c;有什么作用&#xff0c;有哪些实现的技术手段&#xff1f; 数据认证的官方回答&#xff1a;数字认证证书它是以数字证书为核心的加密技术可以对网络上传输的信息进行加密和解密、数字签名和签名验证&#xff0c;确保网上传递信息的安全性、完整性…
阅读更多...
Squeeze-and-Excitation Networks阅读笔记一

Squeeze-and-Excitation Networks阅读笔记一

文章目录 Abstract1 INTRODUCTION Abstract 卷积算子&#xff08;convolution operator&#xff09;是卷积神经网络&#xff08;cnn&#xff09;的核心组成部分&#xff0c;它使网络能够通过融合每层局部接受域内的空间和通道信息来构建信息特征。广泛的先前研究已经调查了这种…
阅读更多...
CSS调色网有哪些

CSS调色网有哪些

本文章转载于湖南五车教育&#xff0c;仅用于学习和讨论&#xff0c;如有侵权请联系 1、https://webgradients.com/ Wbgradients 是一个在线调整渐变色的网站 &#xff0c;可以根据你想要的调整效果&#xff0c;同时支持复制 CSS 代码&#xff0c;可以更好的与开发对接。 Wbg…
阅读更多...
今天开始学习如何正式调查

今天开始学习如何正式调查

本节要讲解三个内容 样本容量 调查方式 调查问卷的回收 在正式调查之前需要确定样本容量 就说要准备调查多少人确定好样本容量之后又要考虑设计的调查问卷 是以什么样的方式发出去 问卷的回收又要注意什么问题 要讲的主要内容 先看样本容量 样本容量确定的基本原…
阅读更多...
IO（JavaEE初阶系列8）

IO（JavaEE初阶系列8）

目录 前言&#xff1a; 1.文件 1.1认识文件 1.2结构和目录 1.3文件路径 1.4文本文件vs二进制文件 2.文件系统的操作 2.1Java中操作文件 2.2File概述 2.2.1构造File对象 2.2.2File中的一些方法 3.文件内容的操作 3.1字节流 3.1.1InPutStream的使用方法 3.1.2OutPu…
阅读更多...
UEditorPlus v3.3.0 图片上传压缩重构，UI优化，升级基础组件

UEditorPlus v3.3.0 图片上传压缩重构，UI优化，升级基础组件

UEditor是由百度开发的所见即所得的开源富文本编辑器&#xff0c;基于MIT开源协议&#xff0c;该富文本编辑器帮助不少网站开发者解决富文本编辑器的难点。 UEditorPlus 是有 ModStart 团队基于 UEditor 二次开发的富文本编辑器&#xff0c;主要做了样式的定制&#xff0c;更符…
阅读更多...
Unity 实现字幕打字效果

Unity 实现字幕打字效果

Text文本打字效果&#xff0c;TextMeshPro可以对应参考&#xff0c;差距不大&#xff0c;改改参数名就能用。改脚本原本被我集成到其他的程序集中&#xff0c;现在已经分离。 效果 实现功能 1.能够设置每行能够容纳的字数和允许的冗余 2.打字效果 3.每行打完上移 4.开头进入&…
阅读更多...
Markdown系列之Flowchat流程图

Markdown系列之Flowchat流程图

一.欢迎来到我的酒馆 介绍Markdown的Flowchart流程图语法。 目录 一.欢迎来到我的酒馆二.什么是Flowchart三.更进一步 二.什么是Flowchart 2.1 Flowchart是一款基于javascript的工具&#xff0c;使用它可以用代码创建简单的流程图。具体信息可以查看flowchart官网&#xff1a;…
阅读更多...
栈和队列的实现

栈和队列的实现

Lei宝啊&#xff1a;个人主页&#xff08;也许有你想看的&#xff09; 愿所有美好不期而遇 前言 &#xff1a; 栈和队列的实现与链表的实现很相似&#xff0c;新瓶装旧酒&#xff0c;没什么新东西。 可以参考这篇文章&#xff1a; -------------------------无头单向不循环…
阅读更多...
微信小程序开发【从0到1~入门篇】2023.08

微信小程序开发【从0到1~入门篇】2023.08

一个小程序主体部分由三个文件组成&#xff0c;必须放在项目的根目录&#xff0c;如下&#xff1a; 文件必须作用app.js是小程序逻辑app.json是小程序公告配置app.wxss否小程序公告样式表 3. 小程序项目结构 一个小程序页面由四个文件组成&#xff0c;分别是&#xff1a; 文…
阅读更多...
并查集维护额外信息，算法思路类似前缀和，结构类似扑克接龙

并查集维护额外信息，算法思路类似前缀和，结构类似扑克接龙

一、链接 240. 食物链 二、题目 动物王国中有三类动物 A,B,CA,B,C&#xff0c;这三类动物的食物链构成了有趣的环形。 AA 吃 BB&#xff0c;BB 吃 CC&#xff0c;CC 吃 AA。 现有 NN 个动物&#xff0c;以 1∼N1∼N 编号。 每个动物都是 A,B,CA,B,C 中的一种&#xff0c;…
阅读更多...
Nginx使用proxy_cache指令设置反向代理缓存静态资源

Nginx使用proxy_cache指令设置反向代理缓存静态资源

场景 CentOS7中解压tar包的方式安装Nginx&#xff1a; CentOS7中解压tar包的方式安装Nginx_centos7 tar文件 怎么load_霸道流氓气质的博客-CSDN博客 参考上面流程实现搭建Nginx的基础上&#xff0c;实现静态资源的缓存设置。 注意上面安装时的目录是在/opt/nginx目录下&…
阅读更多...
数组的学习

数组的学习

数组学习 文章目录 数组来由数组的使用数组的内存图变量声明和args参数说明声明分配空间值的省略写法数组的length属性数列输出求和判断购物金额结算Arrays的sort和toString方法Arrays的equals和fill和copyOf和binarySearch方法字符数组顺序和逆序输出 数组来由 录入30个学生…
阅读更多...
Linux（进程）

Linux（进程）

Linux&#xff08;进程&#xff09; 1. 冯诺依曼结构体系2 . 操作系统&#xff08;OS&#xff09;3.进程task_ struct内容分类查看进程查看PID以及PPIDfork()Linux操作系统进程的状态僵尸进程孤儿进程进程优先级其他概念 1. 冯诺依曼结构体系 冯诺依曼结构也称普林斯顿结构&am…
阅读更多...
FastAPI 构建 API 高性能的 web 框架（一）

FastAPI 构建 API 高性能的 web 框架（一）

如果要部署一些大模型一般langchainfastapi&#xff0c;或者fastchat&#xff0c; 先大概了解一下fastapi,本篇主要就是贴几个实际例子。 官方文档地址&#xff1a; https://fastapi.tiangolo.com/zh/ 1 案例1:复旦MOSS大模型fastapi接口服务 来源&#xff1a;大语言模型工程…
阅读更多...
云计算——ACA学习 云计算概述

云计算——ACA学习 云计算概述

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​ 目录 写在前面 上章回顾 本章简介 本章目标 一.云计算产生背景 1.信息时代的重点变革…
阅读更多...
shell中的函数

shell中的函数

整理思维导图 写一个函数&#xff0c;获取用户的uid和gid并使用变量接收 #!/bin/bashfunction get() {userwhoamiuidid -u $usergidid -g $userecho "该用户的uid为$uid"echo "该用户的gid为$gid"} get整理冒泡排序、选择排序和快速排序的代码 冒泡排序 #…
阅读更多...
【Hystrix技术指南】（1）基本使用和配置说明

【Hystrix技术指南】（1）基本使用和配置说明

这世间许多事物皆因相信而存在&#xff0c;所以人们亲手捏出了泥菩萨&#xff0c;却选择坚定的去信仰它。 分布式系统的规模和复杂度不断增加&#xff0c;随着而来的是对分布式系统可用性的要求越来越高。在各种高可用设计模式中&#xff0c;【熔断、隔离、降级、限流】是经常被…
阅读更多...
阿里云平台注册及基础使用

阿里云平台注册及基础使用

首先进入阿里云官网&#xff1a; 阿里云-计算&#xff0c;为了无法计算的价值 点击右上角“登录/注册”&#xff0c;如果没有阿里云账号则需要注册。 注册界面&#xff1a; 注册完成后需要开通物联网平台公共实例&#xff1a; 注册成功后的登录&#xff1a; 同样点击右上角的…
阅读更多...
Self-Attention、transformer代码、word2vec理论(skip-gram、CNOW)、近似训练 （第十三次组会）

Self-Attention、transformer代码、word2vec理论(skip-gram、CNOW)、近似训练 （第十三次组会）

@[TOC](Self-Attention、transformer代码、word2vec理论(skip-gram、CNOW)、近似训练 （第十三次组会）) Self-Attention相关 Transformer代码
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站