Vue插件之vue-resource

109 阅读 0 评论 72 点赞

我是靠谱客的博主开朗魔镜，这篇文章主要介绍Vue插件之vue-resource，现在分享给大家，希望可以做个参考。

简介

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方式

复制代码

1
2
3
4
5
6
7
8
9
this.$http.get('url',{
    param1:value1,  
    param2:value2  
}).then(function(response){  
    // response.data中获取ResponseData实体
},function(error){  
    // 发生错误
});

post方式

复制代码

1
2
3
4
5
6
7
8
9
10
11
this.$http.post('url',{  
    param1:value1,  
    param2:value2  
},{  
    emulateJSON:true  
}).then(function(response){  
    // response.data中获取ResponseData实体
},function(response){  
    // 发生错误
});

步骤：

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

示例：普通请求

服务器端代码：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@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);

第三步：页面

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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 + ")");
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@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);

第三步：页面

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>