Element UI框架学习篇(三)

news2025/2/20 21:40:42

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

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/335795.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【一文速通】各种机器学习算法的特点及应用场景

【一文速通】各种机器学习算法的特点及应用场景

近邻 (Nearest Neighbor)KNN算法的核心思想是&#xff0c;如果一个样本在特征空间中的K个最相邻的样本中的大多数属于某一个类别&#xff0c;则该样本也属于这个类别&#xff0c;并具有这个类别上样本的特性。该方法在确定分类决策上只依据最邻近的一个或者几个样本的类别来决定…
阅读更多...
一文讲解Linux 设备模型 kobject，kset

一文讲解Linux 设备模型 kobject，kset

设备驱动模型 面试的时候&#xff0c;有面试官会问&#xff0c;什么是Linux 设备驱动模型&#xff1f;你要怎么回答&#xff1f; 这个问题&#xff0c;突然这么一问&#xff0c;可能你会愣住不知道怎么回答&#xff0c;因为Linux 设备驱动模型是一个比较整体的概念&#xff0…
阅读更多...
使用DDD指导业务设计的总结思考

使用DDD指导业务设计的总结思考

领域驱动设计&#xff08;DDD&#xff09; 是 Eric Evans 提出的一种软件设计方法和思想&#xff0c;主要解决业务系统的设计和建模。DDD 有大量难以理解的概念&#xff0c;尤其是翻译的原因&#xff0c;某些词汇非常生涩&#xff0c;例如&#xff1a;模型、限界上下文、聚合、…
阅读更多...
VHDL语言基础-时序逻辑电路-计数器

VHDL语言基础-时序逻辑电路-计数器

目录 计数器的设计&#xff1a; 计数器的作用&#xff1a; 计数器的实现&#xff1a; 1、用“”函数描述&#xff1a; 用T触发器级联构成的串行进位的二进制加法计数器的仿真波形&#xff1a; 计数器的仿真&#xff1a; 计数器的设计&#xff1a; 计数是一种最简单基本的…
阅读更多...
将.js文件转成vue标签结构的样式

将.js文件转成vue标签结构的样式

例如&#xff1a;下图所示&#xff1a; 依次识别获取.js文件中的tag和props&#xff0c;可以理解为字符串拼接&#xff0c;将整个vue的标签结构看作是一个字符串。 话不多说&#xff0c;先放上完整代码&#xff0c;思路看代码备注。&#xff08;自己实现的时候&#xff0c;可以…
阅读更多...
string的深浅拷贝问题

string的深浅拷贝问题

深浅拷贝问题引入浅拷贝深拷贝总结问题引入 对于一个普通的string类&#xff1a; class String { public:String(const char* str ""){//构造函数if (nullptr str)str "";_str new char[strlen(str) 1];strcpy(_str, str);}~String(){//析构函数if …
阅读更多...
CSGO搬砖项目，23年最适合小白的项目！

CSGO搬砖项目，23年最适合小白的项目！

大家好&#xff0c;我是阿阳 不懂的小伙伴&#xff0c;咱继续听我娓娓道来 steam搬砖主要涉及的是csgo游戏平台装备的一个搬运&#xff0c;比较很好理解&#xff0c;主要就是道具的搬运工&#xff0c;简单来讲就是&#xff0c;从国外steam游戏平台购买装备&#xff0c;再挂到…
阅读更多...
几种实现主题切换的方式

几种实现主题切换的方式

几种实现主题切换的方式 1. 利用 prefers-color-scheme 特性 prefers-color-scheme是CSS 媒体特性【media】用于检测用户是否有将操作系统的主题色设置为亮色【light】或者暗色【dark】。 当前prefers-color-scheme新特性支持各大主流电脑&#xff08;window和IOS系统&#…
阅读更多...
今天面试招了个18K的人，从腾讯出来的果然都有两把刷子···

今天面试招了个18K的人，从腾讯出来的果然都有两把刷子···

公司前段时间缺人&#xff0c;也面了不少测试&#xff0c;前面一开始瞄准的就是中级的水准&#xff0c;也没指望来大牛&#xff0c;提供的薪资在15-20k&#xff0c;面试的人很多&#xff0c;但平均水平很让人失望。看简历很多都是4年工作经验&#xff0c;但面试中&#xff0c;不…
阅读更多...
Jenkins使用(代码拉取-＞编译构建-＞部署上线)

Jenkins使用(代码拉取-＞编译构建-＞部署上线)

Jenkins简介 Jenkins是一个开源项目&#xff0c;提供了一种易于使用的持续集成系统&#xff0c;使开发者从繁杂的集成中解脱出来&#xff0c;专注于更重要的业务逻辑实现上。同时Jenkins能实时监控集成中存在的错误&#xff0c;提供详细的日志文件和提醒功能&#xff0c;还能用…
阅读更多...
HRMS有什么特点？

HRMS有什么特点？

当今企业的发展离不开技术支持&#xff0c;同样&#xff0c;在管理方面也需要与时俱进&#xff0c;进行数字化转型。人力资源技术的运用是企业管理数字换转型的重要表现之一。在企业选择一款HR软件之前&#xff0c;应该先认识到&#xff0c;什么是人力资源管理软件——即HRMS。…
阅读更多...
midjournery AI绘画使用指南

midjournery AI绘画使用指南

midjournery AI绘画使用指南 基于Discord的Midjournery配置&#xff1a; https://www.bilibili.com/video/BV16d4y1A7Zq/?spm_id_from333.337.search-card.all.click&vd_source9c3ca9555620bed64bdee27ae49d37cf 使用原则 使用midjournery绘画的原则是给出对脑海中某个…
阅读更多...
golang rabbitMQ 生产者复用channel以及生产者组分发策略

golang rabbitMQ 生产者复用channel以及生产者组分发策略

引用的是rabbitMQ官方示例的库&#xff1a;github.com/rabbitmq/amqp091-go在网络编程中我们知道tcp连接的创建、交互、销毁等相关操作的"代价"都是很高的&#xff0c;所以就要去实现如何复用这些连接&#xff0c;并要做到高效并可靠。预期效果&#xff1a;项目初始化…
阅读更多...
论如何用python自动下载爱的妹子视频~嘿嘿嘿~

论如何用python自动下载爱的妹子视频~嘿嘿嘿~

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 又到了学Python时刻~ 现在好看的妹子真的太多啦~ 如何一次性把这些好看的视频全保存下来捏&#xff1f; 开发环境: 版 本: python 3.8 编辑器: pycharm 2022.3.2 专业版 requests >>> pip install request…
阅读更多...
【数据结构】复杂度讲解

【数据结构】复杂度讲解

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

面向对象的设计模式

"万丈高楼平地起&#xff0c;7种模式打地基"&#xff0c;模式是一种规范&#xff0c;我们应该站在巨人的肩膀上越看越远&#xff0c;接下来&#xff0c;让我们去仔细了解了解面向对象的7种设计模式7种设计模式设计原则的核心思想&#xff1a;找出应用中可能需要变化之…
阅读更多...
24考研|高等数学的基础概念定理（二）——第二章|导数与微分

24考研|高等数学的基础概念定理（二）——第二章|导数与微分

文章目录一、基础概念定理部分1.1 导数的四则运算法则1.2 反函数的求导法则1.3 复合函数的求导法则1.4 费马引理1.5 罗尔定理1.6 拉格朗日中值定理1.7 导数为零的结论1.8 柯西中值定理1.9 洛必达法则1.10 泰勒中值定理&#xff08;定理1&#xff0c;定理2&#xff09;1.11 导数…
阅读更多...
CRM系统能给企业带来什么？ CRM系统推荐

CRM系统能给企业带来什么？ CRM系统推荐

什么是CRM系统&#xff1f; CRM系统&#xff08;又称客户关系管理系统&#xff09;是一个以客户为核心的管理软件&#xff0c;能有效改善企业与现有客户的关系&#xff0c;且帮助企业寻找新的潜在客户&#xff0c;并赢回以前老客户。 CRM系统能给企业带来什么&#xff1f; C…
阅读更多...
计算机视觉框架OpenMMLab开源学习（五）：目标检测实战

计算机视觉框架OpenMMLab开源学习（五）：目标检测实战

目标检测实战 前言&#xff1a;本篇主要偏向目标检测实战部分&#xff0c;使用MMDetection工具进行代码应用&#xff0c;最后对水果进行检测实战演示&#xff0c;本次环境和代码配置部分省略&#xff0c;具体内容建议参考前一篇文章&#xff1a;计算机视觉框架OpenMMLab开源学…
阅读更多...
基于STM32设计的避障寻迹小车

基于STM32设计的避障寻迹小车

一、前言 1.1 项目背景 根据美国玩具协会在一项研究中&#xff0c;过去几年全球玩具销售增长与GDP的世界平均水平大致相同。但全球玩具市场的内部结构已经占据了巨大的位置变化&#xff1a;传统玩具的市场份额正在下降&#xff0c;高科技电子玩具正在蓬勃发展。全球玩具市场的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023