专栏首页cwl_Java前端基础-重构TodoList案例

前端基础-重构TodoList案例

第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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端基础-TodoList 案例

    产品功能简洁,需求明确,所需知识点丰富;实现基本功能容易,涵盖所学基础知识;而可扩展性强,完善所有功能比较复杂,所需技术众多;在学习中,可以灵活取舍;

    cwl_java
  • 快速学习-以太坊交易的 value 和 data

    cwl_java
  • 快速学习-ElasticJob线程池策略

    cwl_java
  • BUG赏金 | Unicode与WAF—XSS WAF绕过

    通过标题,您可能会知道这是有关使用UNICODE进行 XSS WAF绕过的文章。因此,让我们给你一个关于我正在测试的应用程序的小想法。有一个名为“以后保存” 的...

    Timeline Sec
  • 小程序云开发全套实战教程(最全)

    在学习云开发的时候将自己的学习过程记录下来了,放在了网上,收获了一波好评,今天下午在办公室没有事情,也发现之前有人在博客里面评论,你这个教程还有一半哩,可能是c...

    王小婷
  • 解决Android studio中关于模拟器的/data目录不能显示的问题

    当我们在Android studio中打开Android device monitor时,发现data目录不能打开,如图:

    砸漏
  • SAP最佳业务实践:生产订单拆分-工具生产(236)-2生产订单

    CO01创建工具生产的生产订单 直接创建工具生产的生产订单,无需使用 MRP 计划。 角色生产计划员 后勤 ®生产 ®车间现场控制 ®订单 ®创建 ®含物料 ...

    SAP最佳业务实践
  • 基于 HTML5 Canvas 的 3D WebGL 机房创建

    对于 3D 机房来说,监控已经不是什么难事,不同的人有不同的做法,今天试着用 HT 写了一个基于 HTML5 的机房,发现果然 HT 简单好用。本例是将灯光、雾...

    HT for Web
  • 李飞飞再次霸屏?其实2017媒体最爱的AI科学家还有这5位

    昨天,一条重磅新闻在朋友圈刷屏了! ? 谷歌AI中国中心(Google AI China Center)在北京正式成立,该中心的负责人正是谷歌云人工智能与机器学...

    企鹅号小编
  • SAP最佳业务实践:按库存生产(145)-4分组件的生产订单处理

    分组件的生产订单处理 1、MD04 CO40创建生产订单 日常的物料需求计划运行会为内部生产的零件创建计划订单。到达计划转换日期时,系统将计划订单转换为生产订单...

    SAP最佳业务实践

扫码关注云+社区

领取腾讯云代金券