vue 构建 todo 项目系列 2

章鱼喵

发布于 2019-10-16 13:42:11

6360

发布于 2019-10-16 13:42:11

文章被收录于专栏：codingcoding

vue 构建 todo 项目系列 1 只是用模拟的数据，页面一刷新就打回原型，本文将用 json-server 构建一个简易的 api，模拟真实的数据服务器

json-server

# 安装 json-server
$ cnpm install -g json-server

在项目根目录新建 server 目录，并新建 todoDB.json 文件

$ mkdir server
$ touch todoDB.json

将以下内容粘贴到 todoDB.json

{
  "list_data": [
    {
      "id": 1,
      "title": "one",
      "stat": true
    },
    {
      "id": 2,
      "title": "two",
      "stat": false
    },
    {
      "id": 3,
      "title": "three",
      "stat": true
    }
  ]
}

$ cd server
# 启动服务
$ json-server --watch todoDB.json

json-server 服务必须一直保持开启状态

获取数据

index.html 引入 axios，用于发起请求

<script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js"></script>

app.js 删除原来模拟数据，改为由请求接口获得

let app = new Vue({
    el: "#todoapp",
    data: {
        title: 'Todotest',
        list_data: []
    },
    // 生命周期钩子
    mounted: function() {
        axios.get('http://localhost:3000/list_data')
            .then((backdata)=>{
                this.list_data = backdata.data
            })
    },

源码

添加任务

将 app.js 的 addTodo 方法改为：

addTodo(ev) {
    let title = ev.target.value.trim()
    if (title === '') {
        return ;
    }
    let id = this.list_data[this.list_data.length - 1]['id'] + 1
    let stat = false
    let obj_data = {id, title, stat}
    // 将数据写入到 json 文件
    axios.post('http://localhost:3000/list_data', obj_data)
        .then((backdata)=>{
            // 解构返回的数据
            let {data, status} = backdata;
            // 根据 http 状态码判断结果
            if (status === 201) {
                this.list_data.push(data)
            }
        });
    // 重置文本框
    ev.target.value = ''
},

源码

删除任务

删除数据是根据 id 作为惟一标识，因此需要在 index.html 传递 id 参数

<button @click="removeTodo(k, v.id)" class="destroy"></button>

app.js 修改 removeTodo 方法

removeTodo(k, id) {
    axios.delete('http://localhost:3000/list_data/' + id)
        .then((backdata)=>{
            let {data, status} = backdata;
            if (status === 200) {
                this.list_data.splice(k, 1)
            }
        });
},

源码

完成任务

index.html 绑定事件

<input class="toggle" type="checkbox" v-model="v.stat" @click="todoDone(k, v.id)">

app.js 调用接口修改任务状态

// 完成任务
todoDone(k, id){
    let tmp_data = {};
    tmp_data.title = this.list_data[k].title;
    tmp_data.stat = !this.list_data[k].stat;
    axios.put('http://localhost:3000/list_data/' + id, tmp_data)
        .then((backdata)=>{
            let {data, status} = backdata;
            if (status === 200) {
                this.list_data[k].stat = data.stat
            }
        });
}

原文：https://www.itshutong.com/348.html

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.10.15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript