当前位置 > it书童 > vue > 正文

vue 构建 todo 项目系列 2

vue it书童 2019-10-14 17:01:03 0赞 0踩 341阅读 0评论

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/articles/348/vue-builds-todo-project-series-2
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录