vue中怎么請求后端數據？下面本篇文章給大家介紹一下vue 請求后臺數據。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

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

查看請求,數據已返回,未解決.

提交表單

姓名：

v-model="user.username">

密碼：

v-model="user.password">

value="提交">

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

});

}

},

提交restful接口出現跨域請求的問題

查閱資料得知，

當contentType設置為三個常用的格式以外的格式，如“application/json”時，會先發送一個試探的OPTIONS類型的請求給服務端。在這時，單純的在業務接口response添加Access-Control-Allow-Origin 由于還沒有走到所以不會起作用。

解決方案:

在服務端增加一個攔截器

用于處理所有請求并加上允許跨域的頭public class CommonInterceptor implements HandlerInterceptor {

private List excludedUrls;

public List getExcludedUrls() {

return excludedUrls;

}

public void setExcludedUrls(List 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

更多web前端知識，請查閱 HTML中文網 ！！

總結

以上是生活随笔為你收集整理的vue打开后端html文件,vue中怎么请求后端数据？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。