使用SSM和Vue+axios发送POST请求来实现简单的前后端分离,这里实现的是登录功能。
项目目录如下:
其中只介绍前台login.html文件和后端处理UserController.java的代码。
login.html
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<!--引入Vue.min.js-->
<script src="../js/vue.min.js"></script>
<!--引入axios.min.js-->
<script src="../js/axios.min.js"></script>
<title>登录</title>
</head>
<body>
<form id="loginForm">
<table cellspacing="0" cellpadding="0">
<tr align="center">
<th colspan="3" style="text-align: center;">
<h2>登录管理</h2>
</th>
</tr>
<tr>
<td>身份:</td>
<td colspan="2">
<select v-model="identity">
<option value="">请选择身份</option>
<option value="学生">学生</option>
<option value="教师">教师</option>
<option value="管理员">管理员</option>
</select>
</td>
</tr>
<tr>
<td>用户名:</td>
<td colspan="2"><input type="text" v-model="username">
</td>
</tr>
<tr>
<td>密码:</td>
<td colspan="2">
<input type="password" v-model="password">
</td>
</tr>
<tr>
<td>验证码:</td>
<td><input type="text" v-model="verificationCode"></td>
<td><img src="#" id="code"><a href="#">看不清</a></td>
</tr>
<tr align="center">
<td><input type="checkbox" value="rememberMe" name="rememberMe" v-model="rememberMe">记住我
</td>
<td><input type="button" class="btn btn-primary" name="loginButton" value="登录" v-on:click="login()">
</td>
<td><input type="button" class="btn btn-warning" name="resetButton" value="重置" v-on:click="reset()">
</td>
</tr>
<tr align="center">
<td colspan="3">没有账户,立即<a href="#">注册</a></td>
</tr>
</table>
</form>
<script type="text/javascript">
new Vue({
el: "#loginForm",
data: {
identity: "",
username: "",
password: "",
verificationCode: "",
rememberMe: false
},
methods: {
login: function () {
var postdata = JSON.stringify({
identity: this.identity,
username: this.username,
password: this.password,
verificationCode: this.verificationCode
});
console.log(postdata);
axios.post('/user/login', postdata, {headers: {'Content-Type': 'application/json;charset=UTF-8'}}).then(function (res) {
var b = confirm(res.data.msg);
if (b) {
window.location.href = res.data.page;
}
}).catch(function (reason) {
alert(reason);
});
},
reset: function () {
this.identity = "",
this.username = "",
this.password = "",
this.verificationCode = "",
this.rememberMe = false
}
}
});
</script>
</body>
</html>
使用@RequestBody Map<String,String>的方式获取前台传来的JSON数据信息,其UserController.java代码如下:
package controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import pojo.ResultInfo;
import service.UserService;
import java.util.Map;
/**
* 处理用户注册、登录及注销
*
* @author lck100
*/
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/login")
@ResponseBody
public ResultInfo login(@RequestBody Map<String, String> map) {
// 获取用户名
String username = map.get("username");
// 获取密码
String password = map.get("password");
// 判断是否登录成功
if (userService.login(username, password) != null) {
return new ResultInfo(1, "登录成功", "html/success.html");
} else {
return new ResultInfo(0, "用户名或密码错误", "html/login.html");
}
}
}
使用@RequestBody LoginUser user获取前台传来的JSON数据的UserController.java代码如下:
package controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import pojo.LoginUser;
import pojo.ResultInfo;
import service.UserService;
/**
* 处理用户注册、登录及注销
*
* @author lck100
*/
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/login")
@ResponseBody
public ResultInfo login(@RequestBody LoginUser user) {
// 获取用户名
String username = user.getUsername();
// 获取密码
String password = user.getPassword();
// 判断是否登录成功
if (userService.login(username, password) != null) {
return new ResultInfo(1, "登录成功", "html/success.html");
} else {
return new ResultInfo(0, "用户名或密码错误", "html/login.html");
}
}
}
运行效果如下:
如果对完整源码有兴趣。
可搜索微信公众号【Java实例程序】或者扫描下方二维码关注公众号获取更多。
注意:在公众号后台回复【CSDN202001252245】可获取本节源码。