Vue请求resource

[TOC]

## Vue请求resource

介绍：vue-resource是vue请求服务器的一款插件，vue-resource依赖以vue.js，引用vue-resource.js要在vue.js之后，引用完之后vue-resource.js会往Vue实例中挂载一个$http的属性,点击[vue-resource.js](https://github.com/pagekit/vue-resource)查看说明

+ 配置：[vue-resource配置说明](https://github.com/pagekit/vue-resource/blob/develop/docs/config.md)

+ API：[API使用说明](https://github.com/pagekit/vue-resource/blob/develop/docs/http.md)

### vue-resouce常用请求方式

+ 在vue-resouce中发起get请求后，通过.then设置成功的回调函数，然后通过返回结果中的.body拿到服务器返回的数据

+ 在vue-resource中发起post请求默认是没有表单格式（application/x-www-form-urlencoded），一定要设置emulateJSON:true，通过这个设置将提交的内容设置为普通的表单数据格式，同get一样使用.body拿到服务器返回的数据

+ vue-resource发起请求最早也只能生命周期函数created()中，这个生命周期函数执行前vue刚好初始化完data和methods

### vue-resource全局设置

+ 服务器请求的全局地址设置，Vue.http.options.root = "http://localhost:58347/"，设置了全局根域名地址后，之后发起的每个请求都是一个相对路径，url路径前面不能带'/'

+ 通过设置Vue.http.options.emulateJSON = true 将请求服务器时传递的内容都设置为普通表单格式，全局都设置了emulateJSON:true

```HTML
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.3/vue-resource.js"></script>
</hred>
<div id="app">
    <div class="alert alert-primary">
        <div>
            <h3>三国群英会</h3>
        </div>
        <div class="form-inline">
            <label>名字：<input class="form-control" type="text" v-model="name" /></label>&nbsp;&nbsp;
            <label>性别：<input type="radio" id="man" value="0" v-model="sex"><label for="man">男</label>
                <input type="radio" id="woman" value="1" v-model="sex"><label for="woman">女</label> </label>&nbsp;&nbsp;
            <input type="button" class="btn btn-primary" value="添加" @click="add" />&nbsp;&nbsp;
            <label>搜索名字：<input class="form-control" type="text" v-model="keyword" @keyup.enter="search" /></label>
        </div>
    </div>
    <table class="table table-bordered table-hover table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>名字</th>
                <th>性别</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in persons" :key="item.Id">
                <td>{{item.Id}}</td>
                <td>{{item.Name}}</td>
                <td>{{item.Sex | sexchange}}</td>
                <td>{{item.AddDate | datetimeFormat}}</td>
                <td><a href="#" @click.prevent="del(item.Id)">删除</a></td>
            </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript">
    Vue.http.options.root = "http://localhost:58347/";
    Vue.http.options.emulateJSON = true;
    var vm = new Vue({
        el: "#app",
        data: {
            sex: "0",
            name: "",
            keyword: "",
            persons: []
        },
        methods: {
            add() {
                this.$http.post("api/VueStudy/AddPerson",
                    { Name: this.name, Sex: this.sex }).then(item => {
                        alert(item.body.msg)
                        if (item.body.code == 0) {
                            this.search("")
                            this.sex = 0
                            this.name = "";
                        }
                    })
            },
            del(id) {
                this.$http.post("api/VueStudy/DelPerson?Id=" + id).then(item => {
                        alert(item.body.msg)
                        if (item.body.code == 0) {
                            this.search()
                        }
                    })
            },
            search() {
                this.$http.get("api/VueStudy/GetPersonInfos?keyword=" + this.keyword).then(item => {
                        if (item.body.code == 0) {
                            this.persons = item.body.data
                        } else {
                            alert(item.body.msg)
                        }
                    })
            }

},
        created() {
            this.search()
        },
        filters: {
            sexchange: function (str) {
                return str == 0 ? "男" : "女"
            },
            datetimeFormat: function (str) {
                var date = new Date(str);
                var y = date.getFullYear().toString().padStart(2, "0");
                var m = date.getMonth().toString().padStart(2, "0");
                var d = date.getDay().toString().padStart(2, "0");
                var hh = date.getHours().toString().padStart(2, "0");
                var mm = date.getMinutes().toString().padStart(2, "0");
                var ss = date.getSeconds().toString().padStart(2, "0");
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
            }
        }
    })
</script>
</html>
```