Element UI框架学习篇(三)
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 当输入的用户名不存在时
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 数据…...
尚硅谷的尚融宝项目
先建立一个Maven springboot项目 进来先把src删掉，因为是一个父项目，我们删掉src之后，pom里配置的东西，也能给别的模块使用。 改一下springboot的版本号码 加入依赖和依赖管理： <properties><java.versi…...
12 Day：内存管理
前言：今天我们要完成我们操作系统的内存管理，以及一些数据结构和小组件的实现，在此之前大家需要了解我们前几天一些重要文件的内存地址存放在哪，以便我们更好的去编写内存管理模块 一，实现ASSERT断言 不知道大家有没有…...
linux基本功系列之lsof命令实战
文章目录前言一. lsof命令介绍二. 语法格式及常用选项三. 参考案例3.1 显示系统打开的文件3.2 查找某个文件相关的进程3.3 列出某个用户打开的文件信息3.4 列出某个程序进程所打开的文件信息3.5 查看某个进程号打开的文件3.6 列出所有的网络连接3.7 列出谁在使用某个端口3.8 恢…...
基础篇：02-SpringCloud概述
1.SpringCloud诞生 基于前面章节，我们深知微服务已成为当前开发的主流技术栈，但是如dubbo、zookeeper、nacos、rocketmq、rabbitmq、springboot、redis、es这般众多技术都只解决了一个或一类问题，微服务并没有一个统一的解决方案。开发人员或…...
【软件测试】软件测试工作上95%会遇到的问题，你遇到多少？
目录：导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结（尾部小惊喜）前言 1、测试负责人要进行…...
4.5.4 LinkedList
文章目录1.特点2.常用方法3.练习:LinkedList测试1.特点 链表,两端效率高,底层就是链表实现的 List接口的实现类，底层的数据结构为链表，内存空间是不连续的 元素有下标，有序允许存放重复的元素在数据量较大的情况下，查询慢&am…...
Python之FileNotFoundError: [Errno 2] No such file or directory问题处理
错误信息：FileNotFoundError: [Errno 2] No such file or directory: ../AutoFrame/temp/report.xlsx相对于当前文件夹的路径，其实就是你写的py文件所在的文件夹路径！python在对文件的操作时，需要特别注意文件地址的书写。文件的路…...
C语言中耳熟能详的printf与scanf
没有什么比时间更有说服力了，因为时间无需通知我们就可以改变一切了。---余华《活着》大家好，今天给大家分享的是C语言中的scanf与printf函数，一提起这两个函数，大家可能觉得这不就是打印和输入嘛？有什么可以说的&…...
【数据结构】复杂度讲解
目录 时间复杂度与空间复杂度：： 1.算法效率 2.时间复杂度 3.空间复杂度 4.常见时间复杂度以及复杂度OJ练习 时间复杂度与空间复杂度：： 什么是数据结构? 数据结构中是计算机存储,组织数据的方式,指相互之间存在一种或多种特定关…...
JAVA-线程池技术
目录 概念 什么是线程？ 什么是线程池？ 线程池出现背景 线程池原理图 JAVA提供线程池 线程池参数 如果本篇博客对您有一定的帮助，大家记得留言点赞收藏哦。 概念 什么是线程？ 是操作系统能够进行运算调度的最小单位。&am…...
【C++】从0到1入门C++编程学习笔记 - 提高编程篇：STL常用算法（算术生成算法）
文章目录一、accumulate二、fill学习目标： 掌握常用的算术生成算法 注意： 算术生成算法属于小型算法，使用时包含的头文件为 #include <numeric> 算法简介： accumulate // 计算容器元素累计总和 fill // 向容器中添加元…...
【C++】static成员
💙作者：阿润菜菜 📖专栏：C 目录 概念 特性 出个题 概念 声明为static的类成员称为类的静态成员，用static修饰的成员变量，称之为静态成员变量； 用static修饰的成员函数，称之为静态…...
Python Scrapy 爬虫简单教程
1. Scrapy install 准备知识 pip 包管理Python 安装XpathCssWindows安装 Scrapy $>- pip install scrapy Linux安装 Scrapy $>- apt-get install python-scrapy 2. Scrapy 项目创建 在开始爬取之前，必须创建一个新的Scrapy项目。进入自定义的项目目录中&am…...
【DOCKER】容器概念基础
文章目录1.容器1.概念2.特点3.与虚拟机的对比2.docker1.概念2.命名空间3.核心概念3.命令1.镜像命令2.仓库命令1.容器 1.概念 1.不同的运行环境，底层架构是不同的，这就会导致测试环境运行好好的应用，到了生产环境就会出现bug（就像…...
第九层（16）：STL终章——常用集合算法
文章目录前情回顾常用集合算法set_intersectionset_unionset_difference最后一座石碑倒下，爬塔结束一点废话🎉welcome🎉 ✒️博主介绍：一名大一的智能制造专业学生，在学习C/C的路上会越走越远，后面不定期更…...
一起学习用Verilog在FPGA上实现CNN----(六)SoftMax层设计
1 SoftMax层设计 1.1 softmax SoftMax函数的作用是输入归一化，计算各种类的概率，即计算0-9数字的概率，SoftMax层的原理图如图所示，输入和输出均为32位宽的10个分类，即32x10320 本项目softmax实现逻辑为： …...
pixhawk2.4.8-APM固件-MP地面站配置过程记录
目录一、硬件准备二、APM固件、MP地面站下载三、地面站配置1 刷固件2 机架选择3 加速度计校准4 指南针校准5 遥控器校准6 飞行模式7 紧急断电&无头模式8 基础参数设置9 电流计校准10 电调校准11 起飞前检查（每一项都非常重要）12 飞行经验四、遇到的问…...
【unity细节】关于资源商店(Package Maneger)无法下载资源问题的解决
👨💻个人主页：元宇宙-秩沅 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 秩沅 原创 收录于专栏：unity细节和bug ⭐关于资源商店为何下载不了的问题⭐ 文章目录⭐关于资源商店为何下载不了的问题…...
[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...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...
渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet： https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
JVM垃圾回收机制全解析
Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
高危文件识别的常用算法：原理、应用与企业场景
高危文件识别的常用算法：原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件，如包含恶意代码、敏感数据或欺诈内容的文档，在企业协同办公环境中（如Teams、Google Workspace）尤为重要。结合大模型技术&…...
微信小程序云开发平台MySQL的连接方式
注：微信小程序云开发平台指的是腾讯云开发 先给结论：微信小程序云开发平台的MySQL，无法通过获取数据库连接信息的方式进行连接，连接只能通过云开发的SDK连接，具体要参考官方文档： 为什么？ 因为…...
是否存在路径（FIFOBB算法）
题目描述 一个具有 n 个顶点e条边的无向图，该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序，确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数，分别表示n 和 e 的值（1…...