Element UI框架学习篇(三)

最新推荐文章于 2024-05-30 20:12:00 发布

SSS4362

最新推荐文章于 2024-05-30 20:12:00 发布

阅读量1.2k

点赞数 2

分类专栏： ElementUI学习篇文章标签： elementui Vue2 简单的登录页面—不含记住密码

本文链接：https://blog.csdn.net/SSS4362/article/details/128963708

版权

ElementUI学习篇专栏收录该内容

7 篇文章 7 订阅

订阅专栏

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测试是否进入方法
            
        }
    }
})