IDEA2019开发Spring Boot整合Mybatis实现用户登录

最新推荐文章于 2024-07-15 14:10:56 发布

Tango糖果π

最新推荐文章于 2024-07-15 14:10:56 发布

阅读量1k

点赞数

分类专栏： Spring boot

本文链接：https://blog.csdn.net/mahaokun/article/details/103519518

版权

Spring boot 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在上一讲中，我们学习了在IDEA2019下，开发Spring Boot整合Mybatis的实现，掌握了增删改查的方法和原理，本讲我们将结合实例，实现用户的登录功能。

先看看登录界面和效果

login.html代码如下

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/layui/css/layui.css" type="text/css" rel="stylesheet" media="all" />
    <link href="/css/login.css" type="text/css" rel="stylesheet" media="all" />
    <title>登录</title>
</head>

<body>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">

    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>用户登录</h2>
            <p>后台管理系统</p>
        </div>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
                <input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                <input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="LAY-user-login-submit">登 入</button>
            </div>
            <div class="layui-trans layui-form-item layadmin-user-login-other">
                <label>社交账号登入</label>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>

                <a lay-href="/user/reg" class="layadmin-user-jump-change layadmin-link">注册帐号</a>
            </div>
        </div>
    </div>

    <div class="layui-trans layadmin-user-login-footer">
    </div>
</div>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/js/user.js"></script>

</body>
</html>

login使用的user.js代码如下

(function($){

    layui.use('form', function(){
        var form = layui.form
        ,layer = layui.layer;
        //
        form.on('submit(LAY-user-login-submit)', function(data){
            // alert(data.field.username);
            console.log(JSON.stringify(data.field))
            ///
            $.ajax({
                url:'http://localhost:8080/user/getUserByLogin',
                type:'post',
                data:JSON.stringify(data.field),
                contentType: "application/json;charset=UTF-8",
                dataType:'json',
                success:function(data){
                    console.log(data);
                    if(data.msg == "ok"){
                        layer.msg('登录成功！', {
                            // icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            // window.location.href = "/";
                        });

                    }else{
                        layer.msg('用户名或密码错误！');
                    }
                },
                error:function (data) {
                }
            });
            ///
        });
    });

})(jQuery);

以上是登录前台的界面效果和代码，下面我们来看看srping boot后台部分。

在上一讲中的实例中，我们对UserMapper.java进行获取登录用户数据接口，加入

public User getUserByLogin(String username,String password);

这里面返回类型为User类，因为我们不准备通过地址栏的参数进行值得传递，这样就把用户名和密码暴露在了外面，用User类的对象进行封装。

然后对应在UserMapper.xml文件中加入

<select id="getUserByLogin" resultType="com.sjzeis.entity.User">
    select * from users where username=#{username} and password=#{password};
</select>

resultType和parameterType区别：
           resultType ： 主要针对于从数据库中提取相应的数据出来，如select
           parameterType：主要针对于将信息存入到数据库中，如：insert、Update、delete

接着，我们在UserSrevice.java中加入

public User getUserByLogin(String username,String password){
    return userMapper.getUserByLogin(username,password);
}

最后在UserController.java中加入

@RequestMapping("/getUserByLogin")
@ResponseBody
public Result getUserByLogin(@RequestBody User user){
    User rUser = userService.getUserByLogin(user.getUsername(),user.getPassword());
    if(rUser != null){
        return Result.Ok("ok",rUser);
    }else{
        return Result.Error("erro",rUser);
    }
}

注意：参数中加入@RequestBody ，主要用来接收前端传递给后端的json字符串中的数据，GET方式无请求体，所以使用@RequestBody接收数据时，前端不能使用GET方式提交数据，而是用POST方式进行提交。在后端的同一个接收方法里，@RequestBody与@RequestParam()可以同时使用，@RequestBody最多只能有一个，而@RequestParam()可以有多个。

在UserController中，我们根据逻辑需求进行了重新设计，得到的数据准备以下面的格式输出

{"status":"10000","msg":"ok","data":{"userid":1,"username":"admin","password":"123"}}

这就需要我们设计一个Result类，实现数据格式的封装，所以，在UserController中的返回类没有写User，而是改成了Result类，其代码如下

package com.sjzeis.entity;

public class Result {
    // 正确返回代码
    private static final String SUCCESS_CODE = "10000";
    // 错误返回代码
    private static final String ERROR_CODE = "-10000";
    // 状态代码
    private String status;
    // 信息
    private String msg;
    // 内容
    private Object data;

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

    public Result(){}

    public Result(String status, String msg, Object data){
        this.status = status;
        this.msg = msg;
        this.data = data;
    }

    public static Result Ok(Object data){
        return Ok("ok",data);
    }

    public static Result Ok(String msg, Object data){
        return new Result(SUCCESS_CODE,msg,data);
    }

    public static Result Error(Object data){
        return Error("error", data);
    }

    public static Result Error(String msg, Object data){
        return new Result(ERROR_CODE, msg, data);
    }
}

Result类的目的就是为了把返回结果以自定义的json格式输出，所以在 UserController中getUserByLogin()方法中，我们先用

User rUser = userService.getUserByLogin(user.getUsername(),user.getPassword());

获取根据前台传递的用户名和密码得到的User，如果User为空（null）,就说明没有符合条件的用户名和密码，否则用户存在。把判断的结果通过Result类返回给前台，代码如下

if(rUser != null){
    return Result.Ok("ok",rUser);
}else{
    return Result.Error("erro",rUser);
}

这样，我们就能得到上述的返回结果了。

最后前台user.js根据返回结果做出选择，完成登录。

Tango糖果π

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
IDEA2019开发Spring Boot整合Mybatis实现用户登录

在上一讲中，我们学习了在IDEA2019下，开发Spring Boot整合Mybatis的实现，掌握了增删改查的方法和原理，本讲我们将结合实例，实现用户的登录功能。先看看登录界面和效果login.html代码如下<!DOCTYPE html><html><head> <meta http-equiv="Content-...
复制链接

扫一扫

专栏目录