vue打开后端html文件,vue中怎么请求后端数据？
vue中怎么請(qǐng)求后端數(shù)據(jù)？下面本篇文章給大家介紹一下vue 請(qǐng)求后臺(tái)數(shù)據(jù)。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。
vue 請(qǐng)求后臺(tái)數(shù)據(jù)
需要引用vue-resource
安裝請(qǐng)參考https://github.com/pagekit/vue-resource官方文檔
在入口函數(shù)中加入import VueResource from 'vue-resource'
Vue.use(VueResource);
在package.json文件中加入"dependencies": {
"vue": "^2.2.6",
"vue-resource":"^1.2.1"
},
請(qǐng)求如下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.在請(qǐng)求接口數(shù)據(jù)時(shí),涉及到跨域請(qǐng)求
出現(xiàn)下面錯(cuò)誤: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.
解決辦法:在接口中設(shè)置response.setHeader("Access-Control-Allow-Origin", "*");
2.使用jsonp請(qǐng)求
但是出現(xiàn)如下錯(cuò)誤Uncaught SyntaxError: Unexpected token
查看請(qǐng)求,數(shù)據(jù)已返回,未解決.
提交表單
姓名：
v-model="user.username">
密碼：
v-model="user.password">
value="提交">
methods: {
submit: function() {
var formData = JSON.stringify(this.user); // 這里才是你的表單數(shù)據(jù)
this.$http.post('http://localhost:8088/post', formData).then((response) => {
// success callback
console.log(response.data);
}, (response) => {
console.log("error");
// error callback
});
}
},
提交restful接口出現(xiàn)跨域請(qǐng)求的問(wèn)題
查閱資料得知，
當(dāng)contentType設(shè)置為三個(gè)常用的格式以外的格式，如“application/json”時(shí)，會(huì)先發(fā)送一個(gè)試探的OPTIONS類型的請(qǐng)求給服務(wù)端。在這時(shí)，單純的在業(yè)務(wù)接口response添加Access-Control-Allow-Origin 由于還沒有走到所以不會(huì)起作用。
解決方案:
在服務(wù)端增加一個(gè)攔截器
用于處理所有請(qǐng)求并加上允許跨域的頭public class CommonInterceptor implements HandlerInterceptor {
private List excludedUrls;
public List getExcludedUrls() {
return excludedUrls;
}
public void setExcludedUrls(List excludedUrls) {
this.excludedUrls = excludedUrls;
}
/**
*
* 在業(yè)務(wù)處理器處理請(qǐng)求之前被調(diào)用 如果返回false
* 從當(dāng)前的攔截器往回執(zhí)行所有攔截器的afterCompletion(),
* 再退出攔截器鏈, 如果返回true 執(zhí)行下一個(gè)攔截器,
* 直到所有的攔截器都執(zhí)行完畢 再執(zhí)行被攔截的Controller
* 然后進(jìn)入攔截器鏈,
* 從最后一個(gè)攔截器往回執(zhí)行所有的postHandle()
* 接著再?gòu)淖詈笠粋€(gè)攔截器往回執(zhí)行所有的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;
}
// 在業(yè)務(wù)處理器處理請(qǐng)求執(zhí)行完成后,生成視圖之前執(zhí)行的動(dòng)作
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
ModelAndView modelAndView) throws Exception {
}
/**
*
* 在DispatcherServlet完全處理完請(qǐng)求后被調(diào)用
* 當(dāng)有攔截器拋出異常時(shí),
* 會(huì)從當(dāng)前攔截器往回執(zhí)行所有的攔截器的afterCompletion()
*
* @param request
*
* @param response
*
* @param handler
*
*/
public void afterCompletion(HttpServletRequest request, HttpServletResponse response,
Object handler, Exception ex) throws Exception {
}
}
spring resultful無(wú)法像在jsp提交表單一樣處理數(shù)據(jù)必須加上@RequestBody,可以直接json轉(zhuǎn)換object,但是對(duì)與沒有bean的表單數(shù)據(jù),建議轉(zhuǎn)換為map對(duì)象,類似@RequestBody Map
更多web前端知識(shí)，請(qǐng)查閱 HTML中文網(wǎng) ！！
總結(jié)
以上是生活随笔為你收集整理的vue打开后端html文件,vue中怎么请求后端数据？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 抖音发布微短剧治理公告，119部违规微短
- 下一篇： 2021高考成绩查询系统 www.lzk