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
}
});
}
网友评论