vue 请求后台数据

需要引用vue-resource

安装请参考https://github.com/pagekit/vue-resource官方文档

在入口函数中加入

import VueResource from vue-resource

Vue.use(VueResource);

在package.json文件中加入

 "dependencies": {

 "vue": "^2.2.6",

 "vue-resource":"^1.2.1"

 },

请求如下

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");

 },

注意

1.在请求接口数据时,涉及到跨域请求
出现下面错误:
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.

解决办法:在接口中设置

response.setHeader("Access-Control-Allow-Origin", "*");

2.使用jsonp请求
但是出现如下错误
Uncaught SyntaxError: Unexpected token
查看请求,数据已返回,未解决.

 div id="app-7" 

 form @submit.prevent="submit" 

 div 

 input type="text"

 v-model="user.username" 

 /div 


 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

 },

提交restful接口出现跨域请求的问题
查阅资料得知，
当contentType设置为三个常用的格式以外的格式，如“application/json”时，会先发送一个试探的OPTIONS类型的请求给服务端。在这时，单纯的在业务接口response添加Access-Control-Allow-Origin 由于还没有走到所以不会起作用。

解决方案:
在服务端增加一个拦截器
用于处理所有请求并加上允许跨域的头

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无法像在jsp提交表单一样处理数据必须加上@RequestBody,可以直接json转换object,但是对与没有bean的表单数据,建议转换为map对象,类似@RequestBody Map map

vue数据页面渲染完成以后操作DOM 在使用Vue框架的时候，有时候需要在Vue在页面数据渲染完成之后调用方法，不然获取不到准确的数据，特别是在获取列表的高度的时候，由于数据没有加载完，获取不到准确的高度。 nextTick：在下次 DOM 更新循环结束之后执行延迟回调。