Need to reference vue-resource
Please refer to https://github.com/pagekit/vue-resource official documentation for installation
Add to the entry function
import VueResource from 'vue-resource'
Vue.use(VueResource);
Add in package.json file
"dependencies": {
"vue": "^2.2.6",
"vue-resource":"^1.2.1"
},
The request is as follows
mounted: function () {
// GET /someUrl
this.$http.get('http://localhost:8088/test').then(response => {
console.log(response.data);
// get body data
// this.someData = response.body;
}, response => {
console.log("error");
});
},
Notice
1. When requesting interface data, the following error occurs when it comes to cross-domain requests: XMLHttpRequest cannot load http://localhost:8088/test . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:8080 ' is therefore not allowed access.
Solution: set in the interface
response.setHeader("Access-Control-Allow-Origin", "*");
2. Using jsonp request but the following error Uncaught SyntaxError: Unexpected token view request, data has been returned, unresolved.
submit Form
<div id="app-7">
<form @submit.prevent="submit">
<div class="field">
姓名：
<input type="text"
v-model="user.username">
</div>
<div class="field">
密码：
<input type="text"
v-model="user.password">
</div>
<input type="submit"
value="提交">
</form>
</div>
methods: {
submit: function() {
var formData = JSON.stringify(this.user); // 这里才是你的表单数据
this.$http.post('http://localhost:8088/post', formData).then((response) => {
// success callback
console.log(response.data);
}, (response) => {
console.log("error");
// error callback
});
}
},
There is a problem of cross-domain requests when submitting a restful interface. According to the information, when the contentType is set to a format other than the three commonly used formats, such as "application/json", a tentative OPTIONS type request will be sent to the server first. At this time, simply adding Access-Control-Allow-Origin to the business interface response will not work because it has not yet arrived.
Solution: Add an interceptor to the server to process all requests and add a header that allows cross-domain
public class CommonInterceptor implements HandlerInterceptor {
private List<String> excludedUrls;
public List<String> getExcludedUrls() {
return excludedUrls;
}
public void setExcludedUrls(List<String> excludedUrls) {
this.excludedUrls = excludedUrls;
}
/**
*
* 在业务处理器处理请求之前被调用 如果返回false
* 从当前的拦截器往回执行所有拦截器的afterCompletion(),
* 再退出拦截器链, 如果返回true 执行下一个拦截器,
* 直到所有的拦截器都执行完毕 再执行被拦截的Controller
* 然后进入拦截器链,
* 从最后一个拦截器往回执行所有的postHandle()
* 接着再从最后一个拦截器往回执行所有的afterCompletion()
*
* @param request
*
* @param response
*/
public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
Object handler) throws Exception {
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept");
return true;
}
// 在业务处理器处理请求执行完成后,生成视图之前执行的动作
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
ModelAndView modelAndView) throws Exception {
}
/**
*
* 在DispatcherServlet完全处理完请求后被调用
* 当有拦截器抛出异常时,
* 会从当前拦截器往回执行所有的拦截器的afterCompletion()
*
* @param request
*
* @param response
*
* @param handler
*
*/
public void afterCompletion(HttpServletRequest request, HttpServletResponse response,
Object handler, Exception ex) throws Exception {
}
}
Spring resultful cannot process data like submitting a form in jsp. You must add @RequestBody, you can directly convert json to object, but for form data without beans, it is recommended to convert it to map object, similar to @RequestBody Map<String, Object> map