前言
大家好填抬，在前2篇中喧锦，我們實(shí)現(xiàn)了SpringMvc的配置和數(shù)據(jù)庫(kù)連接，這一篇我們來(lái)用html/ajax實(shí)現(xiàn)一個(gè)簡(jiǎn)單的登錄功能衬横。
- 【SpringMvc】從零開(kāi)始學(xué)SpringMvc之初始化(一)
- 【SpringMvc】從零開(kāi)始學(xué)SpringMvc之?dāng)?shù)據(jù)庫(kù)(二)
- 【SpringMvc】從零開(kāi)始學(xué)SpringMvc之實(shí)現(xiàn)用戶登錄(三)
- 【SpringMvc】從零開(kāi)始學(xué)SpringMvc之實(shí)現(xiàn)用戶管理(四)
- 【SpringMvc】從零開(kāi)始學(xué)SpringMvc之文件上傳（五）
準(zhǔn)備
這里我們用到了Bootstrap(一個(gè)html/css前端框架)、JavaScript终蒂、AJAX蜂林，最好對(duì)這些有一定的了解，不太了解也沒(méi)關(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)頁(yè)的內(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="請(qǐng)輸入用戶名" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon">*</span>
<input class="input_box" id="password" type="text" placeholder="請(qǐng)輸入密碼" 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()"為點(diǎn)擊時(shí)渴杆，執(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可以在多個(gè)元素中使用。class 選擇器在HTML中以class屬性表示, 在 CSS 中点寥，類選擇器以一個(gè)點(diǎn)"."號(hào)顯示艾疟；
- 5.在后臺(tái)代碼中，創(chuàng)建
IndexController敢辩，其中Controller和RequestMapping注解我們之前已經(jīng)詳細(xì)說(shuō)過(guò)了
@Controller
@RequestMapping("")
public class IndexController extends BaseController {
@RequestMapping("/index")
public String hello() {
return "index";
}
@RequestMapping("")
public String index() {
return "login";
}
}
運(yùn)行項(xiàng)目蔽莱，然后在瀏覽器中輸入http://localhost:8080/SpringMvc/，效果如下圖
image.png
- 6.在
UserController中添加login方法戚长，需要注意的是盗冷，一般我們不會(huì)在數(shù)據(jù)庫(kù)中存儲(chǔ)用戶的明文密碼，這里存儲(chǔ)的是md5 加密后的密碼同廉。需要修改添加用戶時(shí)仪糖，也為存儲(chǔ)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.到這里，后臺(tái)的代碼已經(jīng)完成迫肖，我們?cè)?code>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 語(yǔ)法，意思是取得id為username的元素的值隅津；$.get(url, function(data) {}诬垂；為發(fā)起一個(gè)get 請(qǐng)求，第1個(gè)參數(shù)為請(qǐng)求地址伦仍，第2個(gè)參數(shù)為請(qǐng)求成功后的回調(diào)结窘；請(qǐng)求成功后，跳轉(zhuǎn)到index.html頁(yè)面充蓝。
- 8.最后隧枫，在login.html 的head標(biāo)簽中引用login.js
<script type="text/javascript" src="js/login.js"></script>
