前言
大家好，在前2篇中，我們實現(xiàn)了SpringMvc的配置和數(shù)據(jù)庫連接，這一篇我們來用html/ajax實現(xiàn)一個簡單的登錄功能。
- 【SpringMvc】從零開始學(xué)SpringMvc之初始化(一)
- 【SpringMvc】從零開始學(xué)SpringMvc之?dāng)?shù)據(jù)庫(二)
- 【SpringMvc】從零開始學(xué)SpringMvc之實現(xiàn)用戶登錄(三)
- 【SpringMvc】從零開始學(xué)SpringMvc之實現(xiàn)用戶管理(四)
- 【SpringMvc】從零開始學(xué)SpringMvc之文件上傳（五）
準(zhǔn)備
這里我們用到了Bootstrap(一個html/css前端框架)、JavaScript、AJAX，最好對這些有一定的了解，不太了解也沒關(guān)系，本文也只是用到了一些最基本的。
- 1.在
WEB-INF文件夾下，創(chuàng)建html文件夾，在html文件夾創(chuàng)建login.html和index.html文件 - 2.在
login.html的head標(biāo)簽中引入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" >
在html中，最外層是<html>標(biāo)簽，<head>標(biāo)簽中，可以引用一些js和css 等配置，<body>標(biāo)簽中放的是網(wǎng)頁的內(nèi)容
<html>
<head></head>
<body></body>
</html>
- 3.在
body標(biāo)簽中加入以下代碼
<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是相當(dāng)于容器，其中可以存放其他元素；input 為輸入框，button 為按鈕；onclick="login()"為點擊時，執(zhí)行l(wèi)ogin()方法
- 4.在head標(biāo)簽中加入如下代碼
<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.在后臺代碼中，創(chuàng)建
IndexController，其中Controller和RequestMapping注解我們之前已經(jīng)詳細(xì)說過了
@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方法，需要注意的是，一般我們不會在數(shù)據(jù)庫中存儲用戶的明文密碼，這里存儲的是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.到這里，后臺的代碼已經(jīng)完成，我們在
WEB-INF文件夾下，創(chuàng)建js文件夾，創(chuàng)建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) {}；為發(fā)起一個get 請求，第1個參數(shù)為請求地址，第2個參數(shù)為請求成功后的回調(diào)；請求成功后，跳轉(zhuǎn)到index.html頁面。
- 8.最后，在login.html 的head標(biāo)簽中引用login.js
<script type="text/javascript" src="js/login.js"></script>
