简介

vue-resource是vue中使用的请求网络数据的插件，这个插件是依赖于vue的，简单说就是用来调接口的。

vue-resource的基本使用方法（使用this.$http发送请求）

• this.$http.get(url, [options])
• this.$http.head(url, [options])
• this.$http.delete(url, [options])
• this.$http.jsonp(url, [options])
• this.$http.post(url, [body], [options])
• this.$http.put(url, [body], [options])
• this.$http.patch(url, [body], [options])

模块示例：

• get方式

this.$http.get('url',{
    param1:value1,  
    param2:value2  
}).then(function(response){  
    // response.data中获取ResponseData实体
},function(error){  
    // 发生错误
});

• post方式

this.$http.post('url',{  
    param1:value1,  
    param2:value2  
},{  
    emulateJSON:true  
}).then(function(response){  
    // response.data中获取ResponseData实体
},function(response){  
    // 发生错误
});

步骤：

1. 安装vue-resource模块：cnpm install vue-resource --save
2. 在main.js中引入vue-resource并通过命令Vue.user()使用该插件
3. 在组件里面通过get()方法使用

示例：普通请求

• 服务器端代码：

@WebServlet(urlPatterns = "/servlet/vue")
public class VueServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json; charset=utf-8");
        response.setHeader("Access-Control-Allow-Origin", "*"); //跨域请求

        PrintWriter out = response.getWriter();

        List<User> userList = new ArrayList<>();
        userList.add(new User(11,"zhangsan",'女'));
        userList.add(new User(22,"lisi",'女'));
        userList.add(new User(33,"wanger",'女'));
        userList.add(new User(44,"mazi",'男'));

        String json = new  Gson().toJson(userList);
        System.out.println("json "+json);
        out.write(json);
    }
}

• 前端代码
  第一步：安装vue-resource模块，代码如下：

cnpm install vue-resource --save

第二步：在main.js中引入vue-resource并通过命令Vue.user()使用该插件

import VueResource from ‘vue-resource’;
Vue.use(VueResource);

第三步：页面

<template>
  <div id="app">
    <button @click="getData()">请求数据</button>
    <ul>
      <li v-for="item in users">{{item}}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'app',
    data(){
      return {
        users:[]
      }
    },
    methods: {
      getData(){
        var url = 'http://127.0.0.1:8088/servlet/vue';
        this.$http.get(url).then(function (response) {
          console.log(response);
          this.users = response.body;
        },function (error) {
          console.log(error);
        });
      }
    },mounted(){ //新新的时候数据就显示出来
      this.getData();
    }
  }
</script>

示例：

• 服务器端代码：

@WebServlet(urlPatterns = "/servlet/vue")
public class VueServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json; charset=utf-8");

        String callback = request.getParameter("callback");
        PrintWriter out = response.getWriter();

        List<User> userList = new ArrayList<>();
        userList.add(new User(11, "zhangsan", '女'));
        userList.add(new User(22, "lisi", '女'));
        userList.add(new User(33, "wanger", '女'));
        userList.add(new User(44, "mazi", '男'));

        String json = new Gson().toJson(userList);
        System.out.println("json " + json);
        out.write(callback + "(" + json + ")");
    }
}

• 前端代码
  第一步：安装vue-resource模块，代码如下：

cnpm install vue-resource --save

第二步：在main.js中引入vue-resource并通过命令Vue.user()使用该插件

import VueResource from ‘vue-resource’;
Vue.use(VueResource);

第三步：页面

<template>
  <div id="app">
    <button @click="getData()">请求数据</button>
    <ul>
      <li v-for="item in users">
        {{item}}
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'app',
    data() {
      return {
        users: []
      }
    },
    methods: {
      getData() {
        var url = 'http://127.0.0.1:8088/servlet/vue';
        this.$http.jsonp(url).then((response) => {   //jsonp请求要求后支持jsonp
          console.log(response);
          this.users = response.body;
        }).catch((error) => {
          console.log(error);
        })
      }
    }, mounted() { //新新的时候数据就显示出来
      this.getData();
    }
  }
</script>