需要引用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.在請求接口數據時,涉及到跨域請求
出現下面錯誤:
解決辦法:在接口中設置
response.setHeader("Access-Control-Allow-Origin", "*");2.使用jsonp請求
但是出現如下錯誤
Uncaught SyntaxError: Unexpected token
查看請求,數據已返回,未解決.
提交表單
<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 }); } },提交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、
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
