TodoList：適合初學者的vue+node小專案

摘要： TodoList 一個簡單的vue + nodejs 專案，前端由vue實現，後端由nodejs(express) ，資料庫採用mongodb 。 github:https://github.com/xiechengbo/netea...

TodoList

一個簡單的vue + nodejs 專案，前端由vue實現，後端由nodejs(express) ，資料庫採用mongodb 。

• github:https://github.com/xiechengbo/netease_todos
• 線上效果展示:http://www.chengbo.xyz

前端

1. 使用vue-cli腳手架， vue+axio
2. 實現的功能

   (1) 單條新增todo

   (2) 單條刪除todo

   (3) 雙擊編輯todo

   (4) 單條todo已完成相應樣式狀態改變

   (5) 全部todo是已完成相應樣式狀態改變

   (6) 清除全部已完成todos

   (7) 待辦todos數量顯示

   (8) 所有todos，已完成todos，未完成todos篩選

3. 介面展示

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

完整程式碼點我 ， 記得點贊哦！！