vue 中怎么請(qǐng)求后臺(tái)數(shù)據(jù)

這篇文章給大家介紹vue 中怎么請(qǐng)求后臺(tái)數(shù)據(jù)，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

在入口函數(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ò)誤:

復(fù)制代碼 代碼如下:

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ù)已返回,未解決.

提交表單

 <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); // 這里才是你的表單數(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)求的問題

查閱資料得知，

當(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<String> excludedUrls;

  public List<String> getExcludedUrls() {
    return excludedUrls;
  }

  public void setExcludedUrls(List<String> 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無法像在jsp提交表單一樣處理數(shù)據(jù)必須加上@RequestBody,可以直接json轉(zhuǎn)換object,但是對(duì)與沒有bean的表單數(shù)據(jù),建議轉(zhuǎn)換為map對(duì)象,類似@RequestBody Map、

關(guān)于vue 中怎么請(qǐng)求后臺(tái)數(shù)據(jù)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。