前言
大家好，在前2篇中，我们实现了SpringMvc的配置和数据库连接，这一篇我们来用html/ajax实现一个简单的登录功能。
- 【SpringMvc】从零开始学SpringMvc之初始化(一)
- 【SpringMvc】从零开始学SpringMvc之数据库(二)
- 【SpringMvc】从零开始学SpringMvc之实现用户登录(三)
- 【SpringMvc】从零开始学SpringMvc之实现用户管理(四)
- 【SpringMvc】从零开始学SpringMvc之文件上传（五）
准备
这里我们用到了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>
