TodoList：适合初学者的vue+node小项目

共计 1488 个字符，预计需要花费 4 分钟才能阅读完成。

TodoList

一个简单的 vue + nodejs 项目，前端由 vue 实现，后端由 nodejs(express)，数据库采用 mongodb。

github: https://github.com/xiechengbo/netease_todos

在线效果展示: http://www.chengbo.xyz

前端

使用 vue-cli 脚手架，vue+axio
实现的功能 (1) 单条添加 todo
(2) 单条删除 todo
(3) 双击编辑 todo
(4) 单条 todo 已完成相应样式状态改变
(5) 全部 todo 是已完成相应样式状态改变
(6) 清除全部已完成 todos
(7) 待办 todos 数量显示
(8) 所有 todos，已完成 todos，未完成 todos 筛选

接口展示

import axios from ‘axios’

const baseUrl =
process.env.NODE_ENV === “development” ?
“https://nei.netease.com/api/apimock/f3e5d93d5eaceda5a624378374ad5cd7”
: “http://148.70.150.147:8080”

export const getAllTask = params => {return axios.get(`${baseUrl}/api/all`, {params: params}) }
export const addTask = params => {return axios.post(`${baseUrl}/api/add`, params).then(res => res.data) }
export const deleteTask = params => {return axios.post(`${baseUrl}/api/deletes`, params).then(res => res.data) }
export const updateTask = params => {return axios.post(`${baseUrl}/api/update`, params).then(res => res.data) }
export const updateManyTask = params => {return axios.post(`${baseUrl}/api/updateMany`, params).then(res => res.data) }
export const deleteCompletedTask = params => {return axios.post(`${baseUrl}/api/deletemany`, params) }

后端

1. 后台由 express + mongoodb 构建。
2. 路由
module.exports = function(app) {
app.get(‘/api/all’, TodoController.getAll);
app.post(‘/api/add’, TodoController.newTodo);
app.post(‘/api/deletes’, TodoController.deleteOne);
app.post(‘/api/deletemany’, TodoController.deleteAllCompleted);
app.post(‘/api/update’, TodoController.updateOne);
app.post(‘/api/updateMany’, TodoController.updateMany);
….
项目启动
$ npm install
// or
$ yarn install
开发环境
$ npm run dev
完整代码点我，记得 star 哦！！