資訊專欄INFORMATION COLUMN
摘要：一個簡單的項目，前端由實現(xiàn)，后端由，數(shù)據(jù)庫采用。路由項目啟動項目進(jìn)入項目，安裝依賴安裝客戶端依賴安裝服務(wù)器端依賴啟動項目啟動服務(wù)器啟動客戶端開發(fā)模式瀏覽器訪問完整代碼點我，有用的話給個哦，謝謝
TodoList
一個簡單的vue + nodejs項目，前端由vue實現(xiàn)，后端由nodejs(express)，數(shù)據(jù)庫采用mongodb。
github項目地址
在線效果展示
前端使用vue-cli腳手架， vue+axio
實現(xiàn)的功能
(1) 單條添加todo
(2) 單條刪除todo
(3) 雙擊編輯todo
(4) 單條todo已完成相應(yīng)樣式狀態(tài)改變
(5) 全部todo是已完成相應(yīng)樣式狀態(tài)改變
(6) 清除全部已完成todos
(7) 待辦todos數(shù)量顯示
(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構(gòu)建。
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...
進(jìn)入項目，安裝依賴
// 安裝客戶端依賴 cd client npm install // 安裝服務(wù)器端依賴 cd server npm install
啟動項目
啟動服務(wù)器：npm start 啟動客戶端：npm run dev(開發(fā)模式) 瀏覽器訪問 [http://localhost:8080](http://localhost:8080)
完整代碼點我， 有用的話給個star哦，謝謝??！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/19488.html
摘要：我們都知道，現(xiàn)在的前端開發(fā)的最火的三大框架之一，它極大地方便了我們的前端工作者的工作，這是筆者整理的一份用寫的一個的整個過程。 我們都知道，現(xiàn)在Vuejs的前端開發(fā)的最火的三大框架之一，它極大地方便了我們的前端工作者的工作，這是筆者整理的一份用vue寫的一個todolist的整個過程。 1.新建一個文件夾，配置環(huán)境變量 安裝的命令行有： npm init -y npm i -S tod...
摘要：如何實現(xiàn)一個查看在線在中我們放置了一些事件處理方法，我們可以在事件綁定中直接應(yīng)用，不會依賴于任何的屬性。例如計算屬性依賴于屬性，只要屬性發(fā)生變化，我們的也會發(fā)生變化，從而篩選出我們需要的數(shù)據(jù)。 熟悉 Vue 的都知道 方法methods、計算屬性computed、觀察者watcher 在 Vue 中有著非常重要的作用，有些時候我們實現(xiàn)一個功能的時候可以使用它們中任何一個都是可以的，但是...
摘要：其實這里還是有漏洞的，坐等高手指出來微笑臉后臺沒有用生成一個完整的架構(gòu)。來自不同視圖的行為需要變更同一狀態(tài)。 最近對vue很感興趣，趁閑暇時間，模仿了wunderlist里面的部分功能，編寫了前后端分離的基于vue技術(shù)棧和express的todolist小項目。寫這篇博文來總結(jié)思考下。項目所在github,可以自行參考克隆。 本人博客 總體概覽 整個項目最終做成的樣子如下： showI...
摘要：微信開發(fā)工具僅用于調(diào)試。下面可以配置一個微信小程序的參數(shù)，文件就是我們要編輯的頁面了。補充一下，調(diào)用之后獲取了經(jīng)緯度之后，還可以玩玩微信的組件。試著用微信寫一個組件。 下周公司要搞黑客馬拉松了，組里可能會做個小程序。然后看到了mpvue感覺還不錯，于是就打算試試水。用vue寫小程序聽上去美滋滋。那么先開始吧！ 全局安裝 vue-cli $ npm install --global vu...
閱讀 1600·2021-11-16 11:44
閱讀 7498·2021-09-22 15:00
閱讀 4533·2021-09-02 10:20
閱讀 1962·2021-08-27 16:20
閱讀 2402·2019-08-26 14:00
閱讀 2916·2019-08-26 11:44
閱讀 1648·2019-08-23 18:33
閱讀 1880·2019-08-22 17:28
