【SpringMvc】从零开始学SpringMvc之实现用户登录

2018-11-12 本文已影响0人欢子3824

前言

大家好，在前2篇中，我们实现了SpringMvc的配置和数据库连接，这一篇我们来用html/ajax实现一个简单的登录功能。

准备

这里我们用到了Bootstrap(一个html/css前端框架)、JavaScript、AJAX，最好对这些有一定的了解，不太了解也没关系，本文也只是用到了一些最基本的。

1.在WEB-INF文件夹下，创建html文件夹，在html文件夹创建login.html和index.html文件
2.在login.html 的head标签中引入bootstrap

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

在html中，最外层是<html>标签，<head>标签中，可以引用一些js和css 等配置，<body>标签中放的是网页的内容

<html>
    <head></head>
    <body></body>
</html>

3.在body标签中加入以下代码

<div class="login_div">

            <div class="input-group">
                <span class="input-group-addon">*</span>
                <input class="input_box" id="username" type="text" placeholder="请输入用户名" aria-describedby="basic-addon1">
            </div>

            <div class="input-group">
                <span class="input-group-addon">*</span>
                <input class="input_box" id="password" type="text" placeholder="请输入密码" style="-webkit-text-security:disc" aria-describedby="basic-addon1">
            </div>

            <div class="input-group">
                <button type="button" class="btn btn-default navbar-btn" onclick="login()">登录</button>
            </div>

        </div>

其中，div是相当于容器，其中可以存放其他元素；input 为输入框，button 为按钮；onclick="login()"为点击时，执行login()方法

4.在head标签中加入如下代码

<style type="text/css">
            input {
                padding: 10px;
            }
            
            .login_div {
                margin: 15%;
                width: auto;
                height: 100%;
            }
            
            .input-group {
                margin: auto;
                margin-top: 20px;
                width: 300px;
            }
            
            .input_box {
                margin: auto;
                width: 100%;
            }
            
            .btn_div {
                margin: auto;
                width: 100%;
            }
            
            .btn {
                margin: auto;
                width: 100%;
            }
            
            body {
                background-image: url(img/login_bj.jpg);
                background-repeat: no-repeat;
                background-size: cover;
            }
        </style>

其中，“.”是class 选择器，用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示；

5.在后台代码中，创建IndexController，其中Controller和RequestMapping注解我们之前已经详细说过了

@Controller
@RequestMapping("")
public class IndexController extends BaseController {

    @RequestMapping("/index")
    public String hello() {
        return "index";
    }

    @RequestMapping("")
    public String index() {
        return "login";
    }

}

运行项目，然后在浏览器中输入http://localhost:8080/SpringMvc/，效果如下图

image.png

6.在UserController中添加login方法，需要注意的是，一般我们不会在数据库中存储用户的明文密码，这里存储的是md5 加密后的密码。需要修改添加用户时，也为存储md5加密后的密码

    @ResponseBody
    @RequestMapping("/login")
    public BaseModel login(String username, String password) {
        if (TextUtils.isEmpty(username) || TextUtils.isEmpty(password)) {
            return makeModel(ERROR_CODE, "用户名和密码不能为空");
        } else {
            UserModel userModel = userdao.getUserByName(username);
            if (userModel == null) {
                return makeModel(ERROR_CODE, "用户不存在");
            }
            if (userModel.getPassword().equals(MD5Util.encode(password))) {
                return makeModel(SUCC_CODE, MSG_SUCC, userModel);
            } else {
                return makeModel(ERROR_CODE, "用户名或者密码不正确");
            }

        }
    }

MD5Util

    /**
     * md5加密的方法
     * 
     * @param text
     * @return
     */
    public static String encode(String text) {
        try {
            MessageDigest digest = MessageDigest.getInstance("MD5");
            byte[] result = digest.digest(text.getBytes());
            StringBuilder sb = new StringBuilder();
            for (byte b : result) {
                int number = b & 0xff;
                String hex = Integer.toHexString(number);
                if (hex.length() == 1) {
                    sb.append("0");
                }
                sb.append(hex);
            }
            return sb.toString();
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
            return "";
        }
    }

7.到这里，后台的代码已经完成，我们在WEB-INF文件夹下，创建js文件夹，创建login.js文件，在其中添加如下代码

function login() {
    var username = $('#username').val();
    var password = $('#password').val();
    if(username.length <= 0) {
        alert("用户名不能为空")
        return;
    }
    if(password.length <= 0) {
        alert("密码不能为空")
        return;
    }

    var url = "http://localhost:8080/SpringMvc/user/login?username=" + username + "&password=" + password;
    $.get(url, function(data) {
        if(data.code == 1) {
            window.location.href = "index.html";
        } else {
            alert(data.msg)
        }
    });
}

其中，第一行为ajax 语法，意思是取得id为username的元素的值；$.get(url, function(data) {}；为发起一个get 请求，第1个参数为请求地址，第2个参数为请求成功后的回调；请求成功后，跳转到index.html页面。

8.最后，在login.html 的head标签中引用login.js

<script type="text/javascript" src="js/login.js"></script>

【SpringMvc】从零开始学SpringMvc之实现用户登录

前言

准备

看到这里，还不快来试试？

最后献上源码Github

你的认可，是我坚持更新博客的动力，如果觉得有用，就请点个赞，谢谢

猜你喜欢

热点阅读