TodoList：適合初學者的vue+node小項目

TodoList

---

一個簡單的 vue + nodejs項目，前端由vue實現，後端由 nodejs(express)，數據庫採用 mongodb。

• github項目地址
• 在線效果展現

前端

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);
             ....

項目啓動

• clone 項目

git clone https://github.com/chengbo199...

• 進入項目，安裝依賴

// 安裝客戶端依賴
cd client
npm install

// 安裝服務器端依賴
cd server
npm install

• 啓動項目

啓動服務器：npm start
 啓動客戶端：npm run dev(開發模式)
 瀏覽器訪問 [http://localhost:8080](http://localhost:8080)

完整代碼點我， 有用的話給個star哦，謝謝！！