Vue之resource的使用

Vue之resource的使用

在进行此篇的观看之前，您需要具备的条件
1 了解ajax的使用，
2 初级vue知识
3 vue生命周期

正文之前
一：介绍相关的内容

1http协议分为两种：http 不加密协议; https 加密协议
2主机分为ip或域名
以上是介绍接口传递网址的介绍

二：

1.用post方法操作接口要注意请求头的类型，请求头分为三种
（1）application/x-www-form-urlencoded
（2）application/json
（3）multipart/form-data
2.post方法默认的是application/json
3如果是application/x-www-form-urlencoded 类型则要进行设置，下面有怎么设置的介绍。

正文

resource的引入

现在网上不好找这个resource的链接了。这里注意的是先引入vue再引入resource。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入的先后顺序 -->
    <script src="./lib/vue-resource-1.3.4.js"></script>

代码演示

resource里操作接口要在生命周期的create函数里进行，因为这个函数里在生命周期中是用来传递数据和接口的。
具体使用代码的操作如下

    <script>
        const vm = new Vue({
            el: '',
            data: {

            },
            methods: {
            },
            created() {
            	this.$http.get('http://(地址传参)).then(res => {
                    console.log(res);
                })
                this.$http.post('http://（地址）', {传递的参数
                }, { emulateJSON: true }).then(res => {
                    console.log(res);
                })
                }
        })
    </script>

三.补充说明：

{ emulateJSON: true }

1.这里就是对请求头类型是application/x-www-form-urlencoded的设置
2.this.$http.就是使用接口的前置代码

四：总结
相比用ajax传递操作接口，vue里有更为便捷的方式。就是引入resouce，然后直接使用this.$http进行调用。