前端HTML代码:
vue写在
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Login Front Interface</title>
</head>
<link rel="stylesheet" type="text/css" href="easy.css"/>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="send">获取</button>
</div>
<script src="../source/Vue.js"></script>
<script src="../source/axios.min.js"></script>
<script src="../source/qs.min.js"></script>
<script src="arrive.js"></script>
</body>
</html>
var app = new Vue({
el: '#app',
data: {
message: 'okay'
},
methods: {
send: function () {
var _this = this;
axios({
method: 'post',
url: "http://localhost:8080/Sun_war_exploded/findAll",
data: Qs.stringify({
message: _this.message
}),
// responseType: 'json'
}).then (function (response) {
console.log(response.data);
_this.message = response.data;
}).catch (function (error) {
console.log(error.data);
_this.message = error.data;
});
}
},
computed: {
}
});
SSM后端controller代码:
package controller;
import dao.UserDao;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import pojo.User;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.Writer;
import java.util.List;
@CrossOrigin
@Controller
public class UserController { // http://localhost:8080/Sun/src/main/java/controller/UserController/select
@RequestMapping(value = "/findAll", method = RequestMethod.POST)
@ResponseBody
public User findAll() {
List<User> list = userDao.selectAllUser();
// for (User user: list) {
//
// System.out.println(user.getId() + user.getUserName() + user.getPassword());
//
// }
// return JSONUtils.toJSONString(list);
return list.get(0);
}
}
结果展示
后端Tomcat启动后的主界面:
前端反馈结果:
小结:
前端:
前端的问题在于跨域请求,使用axios.js可以解决大部分问题,在一些情况下可能会用到Qs库,重要的是请求后端接口的url必须要正确。
后端:
不同IDE的启动URL不尽相同;
Eclipse中的URL为:
http://localhost:8080/
url + 项目名/ + @RequestMapping注解的value值。
如:
IDEA中的URL为:
Tomcat启动后的项目主路径 + @RequestMapping注解的value值。
如: