前端基础-重构TodoList案例

  • 2020 年 3 月 26 日
  • 筆記

第8章 重构TodoList案例

8.1 启动API接口及数据

db.json:

{    "list_data": [      {        "id": 1,        "title": "吃饭",        "stat": true      },      {        "id": 2,        "title": "睡觉",        "stat": false      },      {        "id": 3,        "title": "打豆豆",        "stat": true      }    ]  }

启动服务： json-server --watch db.json

8.2 获取全部任务

el: '#todoapp',  data: {      // list_data:list_data,      list_data:[]// es6属性简写  },    // 当vue实例获取到 el:'#todoapp' 自动调用执行 mounted 方法  mounted:function(){      let url = 'http://localhost:3000/list_data';      axios.get(url).then((backdata)=>{          // console.log(backdata.data);          this.list_data = backdata.data;      })  },

8.3 添加任务

……  methods: {      // 添加任务事件处理器      // addTodo:function(){}      // 简写形式      addTodo(ev) {          // 获取当前触发事件的元素          var inputs = ev.target;          // 获取value值，去除空白后判断，如果为空，则不添加任务          if (inputs.value.trim() == '') {              return;          }          // 组装任务数据          var todo_data = {              // 通过服务器添加数据时，不需要id值              // id: this.list_data.length + 1 + 1,              title: inputs.value,              stat: false          };          let url = 'http://localhost:3000/list_data';          // 将数据提交保存到服务器          axios.post(url,todo_data).then((back_data)=>{              let {data,status} = back_data;              if(status == 201){                  // console.log(this.list_data);                  // 数据保存成功后，将数据添加到任务列表展示                  this.list_data.push(data);              }          })          // 清空文本框          inputs.value = '';      },        ……

8.4 删除任务

<button @click="removeTodo(key,val.id)" class="destroy"></button>
// 删除操作  removeTodo(key,id) {      let url = 'http://localhost:3000/list_data/'+id;      axios.delete(url).then((back_data)=>{          // 结构对象          let {data,status} = back_data;          // console.log(back_data);          if(status == 200){              this.list_data.splice(key, 1);          }      })  },

8.5 完成任务

<li v-for="(val,key) in list_data" @click="todoDone(key,val.id)" v-bind:class="{completed:val.stat}">
// 完成任务 事件处理器(新添加，原案例中没有)  todoDone(key,id){      let url = 'http://localhost:3000/list_data/'+id;      // 组装数据准备修改服务器数据      setdata = {};      // 注意：事件优先于浏览器渲染执行，获取当前状态      var chestat = this.list_data[key].stat;      // 状态取反      setdata.stat = !chestat;      setdata.title = this.list_data[key].title;      // console.log(setdata);      axios.put(url,setdata).then((backdata)=>{          var {data,status} = backdata;          // 如果服务器修改失败,则重新渲染DOM节点样式，改回原始状态          // 服务器返回状态有误          if(status != 200){              this.list_data[key].stat = chestat;          }          // 如果异步执行失败失败,则重新渲染DOM节点样式，改回原始状态      }).catch((err)=>{          if(err){              this.list_data[key].stat = chestat;          }      })  },

8.6 案例中的Bug

修改：<button @click.stop="removeTodo(key,val.id)" class="destroy"></button>

VirMach 便宜 VPS

QNews

QNews