vue学习笔记（四）---- 品牌管理案例

一、导入相关包

<script src="../lib/vue2.6.10.min.js"></script>
    <script src="../lib/axios-v0.17.1.js"></script>

二、设置容器

<div id="app">
</div>

三、 测试数据能否接收成功

Vue.prototype.$http = axios
    var vm = new Vue({
        el: '#app',
        data: {
        list:[]
        //所有品牌的数组
        },
        //让页面一加载进来就能获取get请求的数据
        created(){
          this.getList()
        },
        methods:{
            async getList(){
                //const result = await this.$http.get('http://api.cms.liulongbin.top/api/getprodlist')
               // console.log(result)
               //返回的result中有我们想要的对象--data
               //直接拿到我们想要的data对象
               const {data}= await this.$http.get('http://api.cms.liulongbin.top/api/getprodlist')
                console.log(data)
            }
        }
    })

四、 将拿到的data中的数据放入list列表中

判断是否请求成功，请求的message信息中有是否请求成功的标识数据status=0

async getList(){
  const {data} = await this.$http.get('http://api.cms.liulongbin.top/api/getprodlist')
   // console.log(data)
   // if(data.status == 0){
    //     this.list = data.message
     // }
    // 简写成：
   if (data.status === 0) this.list = data.message
 }

五、 引入bootstrap样式文件并创建页面渲染数据

<table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>CTime</th>
            <th>操作</th>
        </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>
                <a href="#" @click.prevent="del(item.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>

来吧展示：

六、 实现添加功能

1. 创建添加区域

<div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加新品牌</h3>
        </div>
        <div class="panel-body form-inline">
            <div class="form-group">
                <label>品牌名称：</label>
                <input type="text" class="form-control">
            </div>
            <div class="form-group">
                <input type="button" value="添加" class="btn btn-primary">
            </div>
        </div>
    </div>

2. 为添加的input文本框绑定添加事件

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

3. 在data中定义name和要添加的内容做双向数据绑定

<label>品牌名称：</label>
<input type="text" class="form-control" v-model="name">

el: '#app',
        data: {
            list: [],
            name:''
        }

4. 创建添加方法

async add(){
// trim()去掉空格
   if(this.name.trim().length <=0) return alert('品牌列表不能为空')
    const {data} = await this.$http.post('http://api.cms.liulongbin.top/api/addproduct',{name:this.name.trim()})
 // 如果添加成功，则重新调用获取了列表的方法
   if(status == 0) this.getList()
   this.name=''
 }

来吧展示：

七、实现删除功能

1. 在a标签中绑定删除方法并阻止a链接跳转

<td>
    <a href="#" @click.prevent="del(item.id)">删除</a>
</td>

2. 创建删除方法del()

async del(id) { // 根据Id删除品牌
    const { data } = await this.$http.get('http://api.cms.liulongbin.top/api/delproduct/' + id)
   // 当删除OK，重新刷新列表
     if (data.status === 0) this.getList()
 }

八、配置axios的请求路径

方式一：

axios.defaults.baseURL = 'http://api.cms.liulongbin.top';

方式二：

// 注意：   axios.create() 方法，调用的返回值，是一个新的 axios 实例，在 调用 create 函数的时候，可以初始化一些默认配置项，比如，请求的 baseURL 地址
Vue.prototype.$http = axios.create({
    baseURL: 'http://api.cms.liulongbin.top'
})

然后把请求的路径更换一下即可
比如：

async getList(){
   const {data} = await this.$http.get('/api/getprodlist')    
   if (data.status === 0) this.list = data.message
},
.......