当前位置：首页 > news >正文

Element UI框架学习篇(三)

news 文章来源：https://blog.csdn.net/SSS4362/article/details/128963708 2025/4/3 12:10:49

Element UI框架学习篇(三)

实现简单登录功能(不含记住密码)

1 准备工作

1.1 在zlz包下创建dto包,并创建userDTO类(传输对象)

package com.zlz.dto;import lombok.Data;/*
DTO 数据传输对象 用户表的传输对象 调用控制器传参使用
VO 控制器返回的视图对象 与页面对应
PO 数据库持久对象 与数据库表对应*/
@Data
public class UsersDTO {//后台需要什么参数就写什么,不更数据库一样(隐藏数据库细节)private String yhm;private String pwd;private String jzw;
}

1.2 在util包下新建一个统一json返回格式的类Results

package com.zlz.util;import lombok.Data;/*** 统一json格式返回类*/
@Data
public class Results {private int code;//自定义状态码private String msg;//消息private Object data;//数据//无参构造一定要有public Results(){}public Results(int code, String msg) {this.code = code;this.msg = msg;}public Results(int code, String msg, Object data) {this.code = code;this.msg = msg;this.data = data;}public static Results ok(){//200是自定义的状态码return  new Results(200, "success");}public static Results ok(int code,String msg){//200是自定义的状态码return  new Results(code,msg);}//只传数据的public static Results ok(Object data){//200是自定义的状态码return  new Results(200,"success",data);}public static Results error(String msg){//500是自定义的状态码return  new Results(500,msg);}
}

1.3 在SysUserController类里面添加如下方法

@RequestMapping("ajaxlogin")
@ResponseBody
public Results ajaxlogin(@RequestBody UsersDTO user){Subject subject = SecurityUtils.getSubject();UsernamePasswordToken token=new UsernamePasswordToken(user.getYhm(),user.getPwd());try {subject.login(token);SysUser user1 = sysUserMapper.findUser(user.getYhm());return Results.ok(user1);}catch (UnknownAccountException exception){return Results.error("用户名不存在");}catch (LockedAccountException exception){return Results.error("账号已被锁定");}catch (Exception exception){return Results.error("密码错误");}
}

1.4 使用apipost软件测试后台地址是否能正常访问

1.4.1 注意点

测试时要在body-->raw里面输入json数据,因为是用requestBody去接收的
传入的参数的key必须和@RequestBody对应的实体类里面的参数保持一致,不然就传递不过去

1.4.2 当输入的用户名不存在时

052888888888888888.+-

1.4.3 当输入的用户名存在,但密码错误时

在这里插入图片描述

1.4.4 当输入的用户被锁定时

在这里插入图片描述

1.4.4 当输入的用户名和密码都完全正确时

在这里插入图片描述

2 实现登录界面的消息提示

2.1 登录界面login01.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="../elementUI/elementUI.min.css"><!-- 先导vue.js再导入elementUI --><script src="../js/vue.js"></script><script src="../js/axios.min.js"></script><script src="../elementUI/elementUI.min.js"></script><title>Document</title><style>#app{width: 300px;border-radius: 10px; /*圆角边框*/box-shadow: 0 0 3px gray; /*盒子阴影*/padding: 20px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}</style>
</head>
<body><div id="app"><h3 style="text-align: center;">用户登录</h3><!-- label-width为 el-form-item标签中中的label属性所占据宽度 --><!-- 这个user时和vue实例中的user是一一对应的 --><el-form :model="users" label-width="70px"><el-form-item label="用户名"><el-input v-model="users.yhm"></el-input></el-form-item><el-form-item label="密码"><!-- show-password显示明文密码 --><el-input v-model="users.pwd" show-password></el-input></el-form-item><el-form-item><!-- 函数先写 --><!-- style里面写width宽度 --><el-button @click="login" type="primary" style="width:240px">登录</el-button></el-form-item></el-form></div><script src="../js/login01.js"></script>
</body>
</html>

2.2 登录成功时跳转的主页代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="../js/vue.js"></script><title>Document</title>
</head>
<body><h3>主页</h3><div id="app"><div v-if="users!=null">已登录你的用户名{{users.username}}</div><div v-else>未登录</div></div><script>new Vue({el:"#app",data:{users:null,},//页面一加载时,就会获取sessoin域中的内容,并把其在页面上显示出来mounted(){var str=sessionStorage.getItem("users");// 把json字符串转成Json对象this.users=JSON.parse(str);}})</script>
</body>
</html>

2.3 异步提交的逻辑代码login01.js

new Vue({el:"#app",data:{users:{// 页面需要什么 就写什么 要和dto对应yhm:null,pwd:null},},methods:{// 钩子函数自己运行的 生命周期自己运行的//.then正确回调login(){axios.post("http://127.0.0.1:8080/users/ajaxlogin",this.users).then(jg=>{var code=jg.data.code;if(code==500){//固定用法this.$message.error(jg.data.msg);}else{this.$message.success('登录成功');//存储用户在session里面console.log(jg);//data是Results对象,接收的是实体类user,所以取出可以用username//将对象转换成json类型的字符串var userJson=JSON.stringify(jg.data.data);//前台要json对象才行sessionStorage.setItem('users',userJson);setTimeout(function(){location="主页.html";},2000)}}).catch(jg=>{//服务器报错了这里this.$message.error("服务器错误:"+jg)})// alert测试是否进入方法}}
})

2.4 在SysUserController类上加上@CrossJoin注解,解决跨域问题

在这里插入图片描述

2.5 测试

2.5.1 当初次进入登录界面时

在这里插入图片描述

2.5.2 当用户名不存在时候

在这里插入图片描述

2.5.3 当用户名存在但密码错误时

在这里插入图片描述

2.5.4 当用户名被锁定时

在这里插入图片描述

2.5.5 当用户名和密码完全正确时

a 登录前

在这里插入图片描述

b 点击登录按钮时

在这里插入图片描述

c 点击登录按钮2秒钟后

在这里插入图片描述

3 实现登录页面的格式验证(非空验证加特定格式验证)

3.1 实现非空验证的思路

①在表单元素el-form表单上加上:rules="自定义规则名"
②在vue实例中的data里面自定义规则名（以json数组的格式）
如 自定义规则名
自定义规则名:{// 表单绑定对象要一样的表单绑定对象的属性名:[//验证规则 使用{}抱起来,下面这句话的意思是在失去焦点的时候进行非空验证,并给出提示信息——请输入用户名{required: true,message:"请输入用户名",trigger:"blur"}],
}
③ 在表单需要进行验证的字段上面加上prop="表单绑定对象的属性名"
<el-form-item label="密码" prop="pwd">

3.2 实现特定格式验证的思路

①在表单元素el-form表单上加上:rules="自定义规则名"
②在vue实例中的data里面自定义规则名（以json数组的格式）
如 自定义规则名
自定义规则名:{// 表单绑定对象要一样的表单绑定对象的属性名:[//验证规则 使用{}抱起来,下面这句话的意思是在失去焦点的时候字段长度验证,如果输入的密码不在2-10位之间,就会给出提示文字{min: 2,max:10,message:"密码长度必须在2-10位",trigger:"blur"}],
}
③ 在表单需要进行验证的字段上面加上prop="表单绑定对象的属性名"
<el-form-item label="密码" prop="pwd">

3.3 登录界面login02.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="../elementUI/elementUI.min.css"><!-- 先导vue.js再导入elementUI --><script src="../js/vue.js"></script><script src="../js/axios.min.js"></script><script src="../elementUI/elementUI.min.js"></script><title>Document</title><style>#app{width: 300px;border-radius: 10px; /*圆角边框*/box-shadow: 0 0 3px gray; /*盒子阴影*/padding: 20px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}</style>
</head>
<body><div id="app"><h3 style="text-align: center;">用户登录</h3><!-- label-width中午所占据宽度 --><!-- usersYz与js中验证 --><el-form :model="users" :rules="usersYz"  ref="myform" label-width="70px"><el-form-item label="用户名" prop="yhm"><el-input v-model="users.yhm"></el-input></el-form-item><el-form-item label="密码" prop="pwd"><!-- show-password显示明文密码 --><el-input v-model="users.pwd" show-password></el-input></el-form-item><el-form-item><!-- 函数先写 --><!-- style里面写width宽度 --><el-button @click="login" type="primary" style="width:240px">登录</el-button></el-form-item></el-form></div><script src="../js/login02.js"></script>
</body>
</html>

3.4 异步提交逻辑代码login02.js

new Vue({el:"#app",data:{users:{// 页面需要什么 就写什么 要和dto对应yhm:null,pwd:null},usersYz:{// 表单绑定对象要一样的yhm:[{required: true,message:"请输入用户名",trigger:"blur"}],pwd:[{required: true,message:"请输入密码",trigger:"blur"},{min: 2,max:10,message:"密码长度必须在2-10位",trigger:"blur"}]}},methods:{// 钩子函数自己运行的 生命周期自己运行的//.then正确回调login(){//保证表单提交的时候有作用 this.$refs['myform'].validatethis.$refs['myform'].validate((v) => {if(v){axios.post("http://127.0.0.1:8080/users/ajaxlogin",this.users).then(jg=>{var code=jg.data.code;if(code==500){//固定用法this.$message.error(jg.data.msg);}else{this.$message.success('登录成功');//存储用户在session里面console.log(jg);//data是Results对象,接收的是实体类user,所以取出可以用username//将对象转换成json类型的字符串var userJson=JSON.stringify(jg.data.data);//前台要json对象才行sessionStorage.setItem('users',userJson);setTimeout(function(){location="主页.html";},2)}}).catch(jg=>{//服务器报错了这里this.$message.error("服务器错误:"+jg)})}})// alert测试是否进入方法}}
})

3.5 测试

3.5.1 提交表单时,当用户填写的字段存在空值时

在这里插入图片描述

3.5.2 提交表单时,当用户填写的字段不符合自定义格式要求时

在这里插入图片描述

Element UI框架学习篇(三)

Element UI框架学习篇(三) 实现简单登录功能(不含记住密码) 1 准备工作 1.1 在zlz包下创建dto包,并创建userDTO类(传输对象) package com.zlz.dto;import lombok.Data;/* DTO 数据传输对象用户表的传输对象调用控制器传参使用 VO 控制器返回的视图对象与页面对应 PO 数据…...

编程日记 2023/2/11 1:22:18

尚硅谷的尚融宝项目

先建立一个Maven springboot项目进来先把src删掉，因为是一个父项目，我们删掉src之后，pom里配置的东西，也能给别的模块使用。改一下springboot的版本号码加入依赖和依赖管理： <properties><java.versi…...

编程日记 2023/2/11 1:21:11

12 Day：内存管理

前言：今天我们要完成我们操作系统的内存管理，以及一些数据结构和小组件的实现，在此之前大家需要了解我们前几天一些重要文件的内存地址存放在哪，以便我们更好的去编写内存管理模块一，实现ASSERT断言不知道大家有没有…...

编程日记 2023/2/11 1:20:03

linux基本功系列之lsof命令实战

文章目录前言一. lsof命令介绍二. 语法格式及常用选项三. 参考案例3.1 显示系统打开的文件3.2 查找某个文件相关的进程3.3 列出某个用户打开的文件信息3.4 列出某个程序进程所打开的文件信息3.5 查看某个进程号打开的文件3.6 列出所有的网络连接3.7 列出谁在使用某个端口3.8 恢…...

编程日记 2023/2/11 1:18:56

基础篇：02-SpringCloud概述

1.SpringCloud诞生基于前面章节，我们深知微服务已成为当前开发的主流技术栈，但是如dubbo、zookeeper、nacos、rocketmq、rabbitmq、springboot、redis、es这般众多技术都只解决了一个或一类问题，微服务并没有一个统一的解决方案。开发人员或…...

编程日记 2023/2/11 1:17:49

【软件测试】软件测试工作上95%会遇到的问题，你遇到多少？

目录：导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结（尾部小惊喜）前言 1、测试负责人要进行…...

编程日记 2023/2/11 1:16:40

4.5.4 LinkedList

文章目录1.特点2.常用方法3.练习:LinkedList测试1.特点链表,两端效率高,底层就是链表实现的 List接口的实现类，底层的数据结构为链表，内存空间是不连续的元素有下标，有序允许存放重复的元素在数据量较大的情况下，查询慢&am…...

编程日记 2023/2/11 1:15:33

Python之FileNotFoundError: [Errno 2] No such file or directory问题处理

错误信息：FileNotFoundError: [Errno 2] No such file or directory: ../AutoFrame/temp/report.xlsx相对于当前文件夹的路径，其实就是你写的py文件所在的文件夹路径！python在对文件的操作时，需要特别注意文件地址的书写。文件的路…...

编程日记 2023/2/11 1:14:27

C语言中耳熟能详的printf与scanf

没有什么比时间更有说服力了，因为时间无需通知我们就可以改变一切了。---余华《活着》大家好，今天给大家分享的是C语言中的scanf与printf函数，一提起这两个函数，大家可能觉得这不就是打印和输入嘛？有什么可以说的&…...

编程日记 2023/2/11 1:13:18

【数据结构】复杂度讲解

目录时间复杂度与空间复杂度：： 1.算法效率 2.时间复杂度 3.空间复杂度 4.常见时间复杂度以及复杂度OJ练习时间复杂度与空间复杂度：： 什么是数据结构? 数据结构中是计算机存储,组织数据的方式,指相互之间存在一种或多种特定关…...

编程日记 2023/2/11 1:12:12

JAVA-线程池技术

目录概念什么是线程？ 什么是线程池？ 线程池出现背景线程池原理图 JAVA提供线程池线程池参数如果本篇博客对您有一定的帮助，大家记得留言点赞收藏哦。概念什么是线程？ 是操作系统能够进行运算调度的最小单位。&am…...

编程日记 2023/2/11 1:11:06

【C++】从0到1入门C++编程学习笔记 - 提高编程篇：STL常用算法（算术生成算法）

文章目录一、accumulate二、fill学习目标： 掌握常用的算术生成算法注意： 算术生成算法属于小型算法，使用时包含的头文件为 #include <numeric> 算法简介： accumulate // 计算容器元素累计总和 fill // 向容器中添加元…...

编程日记 2023/2/11 1:10:00

【C++】static成员

💙作者：阿润菜菜 📖专栏：C 目录概念特性出个题概念声明为static的类成员称为类的静态成员，用static修饰的成员变量，称之为静态成员变量； 用static修饰的成员函数，称之为静态…...

编程日记 2023/2/11 1:08:52

Python Scrapy 爬虫简单教程

1. Scrapy install 准备知识 pip 包管理Python 安装XpathCssWindows安装 Scrapy $>- pip install scrapy Linux安装 Scrapy $>- apt-get install python-scrapy 2. Scrapy 项目创建在开始爬取之前，必须创建一个新的Scrapy项目。进入自定义的项目目录中&am…...

编程日记 2023/2/11 1:07:46

【DOCKER】容器概念基础

文章目录1.容器1.概念2.特点3.与虚拟机的对比2.docker1.概念2.命名空间3.核心概念3.命令1.镜像命令2.仓库命令1.容器 1.概念 1.不同的运行环境，底层架构是不同的，这就会导致测试环境运行好好的应用，到了生产环境就会出现bug（就像…...

编程日记 2023/2/11 1:06:40

第九层（16）：STL终章——常用集合算法

文章目录前情回顾常用集合算法set_intersectionset_unionset_difference最后一座石碑倒下，爬塔结束一点废话🎉welcome🎉 ✒️博主介绍：一名大一的智能制造专业学生，在学习C/C的路上会越走越远，后面不定期更…...

编程日记 2023/2/11 1:05:30

一起学习用Verilog在FPGA上实现CNN----(六)SoftMax层设计

1 SoftMax层设计 1.1 softmax SoftMax函数的作用是输入归一化，计算各种类的概率，即计算0-9数字的概率，SoftMax层的原理图如图所示，输入和输出均为32位宽的10个分类，即32x10320 本项目softmax实现逻辑为： …...

编程日记 2023/2/11 1:04:18

pixhawk2.4.8-APM固件-MP地面站配置过程记录

目录一、硬件准备二、APM固件、MP地面站下载三、地面站配置1 刷固件2 机架选择3 加速度计校准4 指南针校准5 遥控器校准6 飞行模式7 紧急断电&无头模式8 基础参数设置9 电流计校准10 电调校准11 起飞前检查（每一项都非常重要）12 飞行经验四、遇到的问…...

编程日记 2023/2/11 1:03:09

【unity细节】关于资源商店(Package Maneger)无法下载资源问题的解决

👨‍💻个人主页：元宇宙-秩沅 hallo 欢迎点赞👍 收藏⭐ 留言📝 加关注✅! 本文由秩沅原创收录于专栏：unity细节和bug ⭐关于资源商店为何下载不了的问题⭐ 文章目录⭐关于资源商店为何下载不了的问题…...

编程日记 2023/2/11 1:02:02

[Arxiv 2022] A Novel Plug-in Module for Fine-Grained Visual Classification

Contents MethodPlug-in ModuleLoss functionExperimentsReferencesMethod Plug-in Module Backbone：为了帮助模型抽取出不同尺度的特征，作者在 backbone 里加入了 FPNWeakly Supervised Selector：假设 backbone 的 i i...

编程日记 2023/2/11 1:00:56

RocketMQ Broker消息处理流程及部分源码解析

🍊 Java学习：Java从入门到精通总结 🍊 深入浅出RocketMQ设计思想：深入浅出RocketMQ设计思想 🍊 绝对不一样的职场干货：大厂最佳实践经验指南 📆 最近更新：2023年2月10日 &#x…...

编程日记 2023/2/11 0:59:49

Java面试题：Java集合框架

文章目录一、Java集合框架二、Java集合特性三、各集合类的使用ArrayListLinkedListHashSetHashSet源码解析对源码进行总结HashSet可同步HashSet的使用HashMap四、Iterator迭代器五、遍历集合元素的若干方式参考文章：Hash详解参考文章：深入浅出学Java——…...

编程日记 2023/2/11 0:58:43

时间之间的比较与计算相差年、月、日、小时、分钟、毫秒、纳秒以及判断闰年--LocalDateTime

如何把String/Date转成LocalDateTime参考String、Date与LocalDate、LocalTime、LocalDateTime之间互转 String、Date、LocalDateTime、Calendar与时间戳之间互相转化参考String、Date、LocalDateTime、Calendar与时间戳之间互相转化比较方法介绍 isBefore(ChronoLocalDateT…...

编程日记 2023/2/11 0:57:35

PyTorch学习笔记：nn.L1Loss——L1损失

PyTorch学习笔记：nn.L1Loss——L1损失 torch.nn.L1Loss(size_averageNone, reduceNone, reductionmean)功能：创建一个绝对值误差损失函数，即L1损失： l(x,y)L{l1,…,lN}T,ln∣xn−yn∣l(x,y)L\{l_1,\dots,l_N\}^T,l_n|x_n-y_n| l(…...

编程日记 2023/2/11 0:55:22

Java程序设计-ssm企业财务管理系统设计与实现

摘要系统设计系统实现开发环境：摘要对于企业集来说,财务管理的地位很重要。随着计算机和网络在企业中的广泛应用，企业发展速度在不断加快，在这种市场竞争冲击下企业财务管理系统必须优先发展，这样才能保证在竞争中处于优势地位。…...

编程日记 2023/2/11 0:54:15

疑难杂症篇(二十一)--Ubuntu18.04安装usb-cam过程出现的问题

对Ubuntu18.04{\rm Ubuntu 18.04}Ubuntu18.04环境下的ROS{\rm ROS}ROS的melodic{\rm melodic}melodic版本安装usb−cam{\rm usb-cam}usb−cam过程出现的两个常见问题提出解决方案。 1.问题1：usb-cam功能包编译时出现"未定义的引用"的问题问题描述&#…...

编程日记 2023/2/11 0:53:03

npm-npm i XX --save 和--save-dev

之前使用npm i XX --save 和--save-dev 没太在意，就想记录一下，查到一篇比较全的(链接：NPM install -save 和 -save-dev 傻傻分不清)，直接看好了，哈哈~ # 安装模块到项目目录下 npm install moduleName # -g 的意思是…...

编程日记 2023/2/11 0:51:56

可重构或可调谐微波滤波器技术

电子可重构，或者说电调微波滤波器由于其在改善现在及未来微波系统容量中不断提高的重要性而正吸引着人们越来越多的关注来对其进行研究和开发。例如，崭露头脚的超宽带（UWB）技术要求使用很宽的无线电频谱。然而，作为资源…...

编程日记 2023/2/11 0:50:49

医院智能化解决方案-门（急）诊、医技、智能化项目解决方案

编程日记 2023/2/11 0:49:42

判断元素是否在可视区域

前言在日常开发中，我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值（例如 100 px），从而实现一些常用的功能，例如： 图片的懒加载列表的无限滚动计算广告元素的曝光情况可点击链接的预加…...

编程日记 2023/2/11 0:48:35

Element UI框架学习篇(三)

实现简单登录功能(不含记住密码)

1 准备工作

1.1 在zlz包下创建dto包,并创建userDTO类(传输对象)

1.2 在util包下新建一个统一json返回格式的类Results

1.3 在SysUserController类里面添加如下方法

1.4 使用apipost软件测试后台地址是否能正常访问

1.4.1 注意点

1.4.2 当输入的用户名不存在时

1.4.3 当输入的用户名存在,但密码错误时

1.4.4 当输入的用户被锁定时

1.4.4 当输入的用户名和密码都完全正确时

2 实现登录界面的消息提示

2.1 登录界面login01.html

2.2 登录成功时跳转的主页代码

2.3 异步提交的逻辑代码login01.js

2.4 在SysUserController类上加上@CrossJoin注解,解决跨域问题

2.5 测试

2.5.1 当初次进入登录界面时

2.5.2 当用户名不存在时候

2.5.3 当用户名存在但密码错误时

2.5.4 当用户名被锁定时

2.5.5 当用户名和密码完全正确时

a 登录前

b 点击登录按钮时

c 点击登录按钮2秒钟后

3 实现登录页面的格式验证(非空验证加特定格式验证)

3.1 实现非空验证的思路

3.2 实现特定格式验证的思路

3.3 登录界面login02.html

3.4 异步提交逻辑代码login02.js

3.5 测试

3.5.1 提交表单时,当用户填写的字段存在空值时

3.5.2 提交表单时,当用户填写的字段不符合自定义格式要求时

相关文章：