2019-06-09vue-resource之品牌管理案例的改造

展示商品列表

<div class="" 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" class="form-control" v-model="name"> </label>
        <input type="button" value="添加" class="btn btn-primary" @click="add">
        <label>请输入搜索的关键字： <input type="text" class="form-control" v-model="keywords"> </label>
      </div>
    </div>
    <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,index) in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td v-text="item.name"></td>
          <td>{{ item.ctime }}</td>
          <td><a href="" @click.prevent="del(item.id)">删除</a></td>
        </tr>
      </tbody>
    </table>
  </div>
......
new Vue({
  el: "#app",
  data: {
    getUrl: "http://www.liulongbin.top:3005/api/getprodlist",
    list:[],
    name:"",
    keywords:"",
  },
  methods: {
   getList(){
      this.$http.get(this.getUrl).then(res => {
        console.log(res.data);
        if(res.data.status === 0){
          //查看api文档，status 为0代表成功，否则则是失败
          this.list = res.data.message;
          console.log(this.list);
        } else {
          //表示获取失败
          alert("获取列表失败！");
        }
      });
    },
    add: function(){
    },
    del(id){
    },
    search(keywords){
      
    },
  },
  created() {
    //应该在created里发起AJAX请求，因为如果让页面挂载完毕后再发请求的话，数据返回需要一定的时间。页面可能显示一些假数据
    this.getList();
  },
});

添加品牌数据

 addUrl: "http://www.liulongbin.top:3005/api/addproduct",
......
    add: function(){
      this.$http.post(this.addUrl,{name: this.name},{emulateJSON: true}).then(res => {
        console.log(res.data);
        this.getList();
      })
    },

添加成功

添加函数代码问题：

没有判断是否添加成功，当添加成功后确实需要调用getList()让页面数据更新，但是，添加失败的话就不需要调用了，我这种写法没有考虑到这种情况。
还有就是要清空一下name，否则页面上输入框里还有name的值.
改为：

 add(){
      this.$http.post(this.addUrl,{name: this.name},{emulateJSON: true}).then(res => {
        console.log(res.data);
        if(res.data.status === 0){
          //表示添加成功
          this.getList();
          this.name = " ";
        } else {
          //表示添加失败
          alert("添加失败！");
        }
      });
    },

删除品牌数据

这里的url为什么不用http://www.liulongbin.top:3005/api/delproduct?id=1而是用http://www.liulongbin.top:3005/api/delproduct/1的形式与接口的设计有关，是后端的事，前端只要会用接口就行了。

 deleteUrl: "http://www.liulongbin.top:3005/api/delproduct/",
......
 del(id){//api文档里给的删除方式为get，需要一个id
      this.$http.get(this.deleteUrl+id).then(res => {
        if(res.data.status === 0){
          this.getList();
        } else {
          alert("删除失败！");
        }
      });
    },

“嗡嗡嗡已被删除”

优化代码

1. 观察上面的代码，每次发起AJXA请求的url都会有一段相同的，代表了后台服务器的地址，如果后台地址变了，那么我们得一个一个得改函数，麻烦。解决方法是我们可以把他们抽取出来，定义成一个变量。

Vue.http.options.root = "http://www.liulongbin.top:3005/"
......
  getUrl: "api/getprodlist",
  addUrl: "api/addproduct",
  deleteUrl: "api/delproduct/",

如果我们通过全局配置了请求的数据接口的根域名，在每次单独发起http请求的时候，请求的url路径应该已相对路径开头，前面不能带“/”，否则就不会启用根域名进行拼接了（getUrl:不能写成"/api/getprodlist",）
最好的优化是单独出一个配置文件写这些配置，哪个页面需要就导入，但现在只有一个页面，就先这样写吧，以后再说。

2.在添加函数里，第三个参数表示配置，删了他可能有问题可能也没有问题，具体看服务器，故我们还是会选择写上。在每个发起post的函数里都写的话太麻烦了，我们也可以全局配置一下。

Vue.http.options.emulateJSON = true;

最后编辑于：2019.06.09 16:48:07