vue——28-vue-resource改造品牌结构

引入文件：bootstrap.css / vue.js / vue-resource.js

<div id="app">

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
        </div>
        <div class="panel-body form-inline">
            <label>
                Name:
                <input type="text" v-model="name" :name="name" class="form-control">
            </label>

            <input type="button" value="添加" @click="add" class="btn btn-primary">
        </div>
    </div>

    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>ctime</td>
            <td>operation</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>
            <td>
                <button class="btn btn-primary" @click.prevent="del(item.id)" >删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    window.onload = function () {
        {
            //如果我们通过全局配置了，请求的数据接口根域名，则，在每次单独发起 http 请求的时候，
            // 请求的 url 路径，应该以相对路径开头，前面不能带 / ，否则不会启用根路径做拼接
            Vue.http.options.root='get.php';

            //全局启用 emulateJSON 选项（之后post中的{emulateJSON: true}可以删除了）
            // Vue.http.options.emulateJSON=true;

            let vm = new Vue({
                el: '#app',
                data: {
                    list: [],
                    name: ''
                },
                methods: {
                    getAllList() {
                        //获取所有列表
                        //1.由于导入 vue-resource，所有通过 this.$http发起数据请求
                        //2.根据接口 api文档，知道，获取列表的时候，应该发起一个get请求
                        //3.this.$http.get('url').then(fn)
                        //4.当通过 then 指定回调函数之后，在回调函数中可以拿到数据服务器返回的结果
                        //5.判断请求是否成功，再赋值给list

                        this.$http.post('').then(result => {
                            this.list=[];
                            if (result.status >= 200 && result.status < 300 || result.status === 304) {
                                let res = result.body;
                                console.log(res);
                                for (key in res) {
                                    this.list.push(res[key]);
                                }
                            } else {
                                alert('失败');
                            }
                        })
                    },
                    add() {
                        //添加品牌列表到后台服务器
                        //分析：
                        //1.查看数据 api 接口，要发送一个 post 请求，this.$http.post
                        //2.this.$http.post() 中接收三个参数：
                        // 2.1 第一个参数：要请求的url地址
                        // 2.2 第二个参数：要提交给服务器的数据，要以对象形式提交给服务器{ name:this.name }
                        // 2.3 第三个参数：是一个配置对象，要以哪种表单数据类型提交过去，{ emulateJSON:true }，以普通表单格式，将数据提交给服务器 application/x-www-form-urlencoded
                        //3.在 post 方法中，使用 .then 来设置成功的回调函数，如果想要拿到成功的结果，需要 result.body

                        this.$http.post('', { name: this.name }, {emulateJSON: true}).then(result => {
                    if (result.status >= 200 && result.status < 300 || result.status === 304) {
                        //添加完成后 只用手动再调用 getAllList 就能刷新品牌列表了
                        this.getAllList();
                        this.name = '';//清空
                    } else {
                        alert('失败');
                    }
                })
            },
                    del(id){
                        //删除品牌
                        this.$http.get(''+id).then(result=>{
                            if(result.body.status===0){
                                //删除成功
                                this.getAllList();
                            }else{
                                alert('删除失败！')
                            }
                        })
                    }
                },
                created() {
                    //当vm实例的 data和 methods初始化完毕后，vm实例会自动执行 created这个生命周期函数
                    this.getAllList();
                }
            })
        }
    }
</script>