TodoList:適合初學者的vue+node小專案
TodoList
一個簡單的vue + nodejs 專案,前端由vue實現,後端由nodejs(express) ,資料庫採用mongodb 。
前端
- 使用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
完整程式碼點我 , 記得點贊哦!!