vue-resource向服务器发送请求

通过vue-resource对品牌列表进行增删查改

发送get请求给后台服务器来获取品牌列表

分析：
1.由于已经导入vue-resource包，就可以直接通过this.$http来发起数据请求
2.根据接口API文档，知道获取列表时，应该发起get请求
3.get请求格式：this.$http.get(‘url’).then(function(result){})
4.通过then指定回调函数之后，在回调函数中，可以拿到数据服务器返回的result
5.先判断result.status是否等于0，如果等于0，就成功了，可以把result.body.message赋值给this.list；如果不等于0，可以弹框提醒，获取数据失败

       methods:{
           getAllList(){ 
                this.$http.get('http://www.liulongbin.top:3005/api/getprodlist').then(result=>{
                    // 注意：通过$http获取到的数据，都在result.body中放着
                    var result = result.body
                    if(result.status === 0){
                        //成功
                        this.list = result.message
                    }
                    else{
                        //失败
                        alert('获取数据失败')
                    }
                })
           }
        }

发送post请求给后台服务器完成品牌添加功能

分析：
1.通过查看api接口，发现要发送一个post请求：this.$http.post
2. this.$http.post(参数1,参数2,参数3)
参数1：要请求的url地址
参数2：要提交给服务器的数据，要以对象形式提交给服务器 {name:this.name}
参数3：是一个配置对象，要以哪种表单数据类型提交过去，{emulateJSON:true}，以普通表单格式，将数据提交给服务器 application/x-www-form-urlencoded
3.在post方法中，通过使用.then来设置成功的回调函数，如果想要拿到成功的结果，需要用result.body

methods:{ 
          add(){  
                 .then(result=>{
                     if(result.body.status === 0){
                         //成功
                         // 添加成功后，只需要手动，再调用一下getAllList就能重新发送ajax请求数据刷新品牌列表
                         this.getAllList()
                         //清空name
                         this.name = ''
                     }
                     else{
                         alert('添加失败')
                     }
                 })
            },
            }

发送get请求给服务器删除品牌

分析：根据id来删除品牌列表

methods:{ 
           del(id){  //删除品牌
              this.$http.get('http://www.liulongbin.top:3005/api/delproduct/' + id).then(result=>{
                  if(result.body.status === 0){
                      //删除成功
                      this.getAllList()
                  }
                  else{
                      alert('删除失败')
                  }
              })  
           }
            }

当域名发生改变时，快速修改域名

如果我们通过全局配置了请求的数据接口 根域名，则在每次单独发起http请求时，请求的url路径，应该以相对路径开头，否则不会启用根路径做拼接

        Vue.http.options.root = 'http://www.liulongbin.top:3005/';

      this.$http.get('api/getprodlist').then(result=>{})

全局启用emulateJSON选项

        Vue.http.options.emulateJSON = true;

        this.$http.post('api/addproduct', {name:this.name}, {emulateJSON:true}) .then(result=>{})