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

Element UI框架学习篇(三)

news 2025/7/1 7:27:29

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

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M：百万（Million） B：十亿（Billion） 1 B 1000 M 1B 1000M 1B1000M 参数存储精度模型参数是固定的，但是一个参数所表示多少字节不一定，需要看这个参数以什么…...

编程新知 2025/6/18 8:29:05

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/6/28 14:31:27

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日来简单学一下子来一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...

编程新知 2025/6/29 11:54:35

使用分级同态加密防御梯度泄漏

抽象联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...

编程新知 2025/6/29 11:36:31

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2025/6/26 11:26:24

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...

编程新知 2025/6/16 21:39:46

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/6/25 23:57:55

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/6/21 5:44:18

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar：依赖注入与仓储模式实践在 C# 的应用开发中，数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护，许多开发者会选择成熟的 ORM（对象关系映射）框架，SqlSugar 就是其中备受…...

编程新知 2025/6/26 7:07:46

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/6/30 16:30:03

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 提交表单时,当用户填写的字段不符合自定义格式要求时

相关文章：