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

lovXin 發布于2019-06-26 17:59 / 1165人閱讀

摘要：一個簡單的項目，前端由實現，后端由，數據庫采用。路由項目啟動項目進入項目，安裝依賴安裝客戶端依賴安裝服務器端依賴啟動項目啟動服務器啟動客戶端開發模式瀏覽器訪問完整代碼點我，有用的話給個哦，謝謝

TodoList

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

github項目地址

在線效果展示

前端

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

項目啟動

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哦，謝謝！！

云服務器 GPU云服務器適合初學者的linux 適合初學者大數據適合初學者 linux適合初學者

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/19488.html

todolist--初學者練習使用vuejs方法

摘要：我們都知道，現在的前端開發的最火的三大框架之一，它極大地方便了我們的前端工作者的工作，這是筆者整理的一份用寫的一個的整個過程。我們都知道，現在Vuejs的前端開發的最火的三大框架之一，它極大地方便了我們的前端工作者的工作，這是筆者整理的一份用vue寫的一個todolist的整個過程。 1.新建一個文件夾，配置環境變量安裝的命令行有： npm init -y npm i -S tod...

NSFish 2019-08-21 17:37 評論0 收藏0
Vue中如何使用方法、計算屬性或觀察者

摘要：如何實現一個查看在線在中我們放置了一些事件處理方法，我們可以在事件綁定中直接應用，不會依賴于任何的屬性。例如計算屬性依賴于屬性，只要屬性發生變化，我們的也會發生變化，從而篩選出我們需要的數據。熟悉 Vue 的都知道方法methods、計算屬性computed、觀察者watcher 在 Vue 中有著非常重要的作用，有些時候我們實現一個功能的時候可以使用它們中任何一個都是可以的，但是...

zhaot 2019-08-23 12:37 評論0 收藏0
應用vue2+vuex+vue-router+webpack2+es6+express+mysql技

摘要：其實這里還是有漏洞的，坐等高手指出來微笑臉后臺沒有用生成一個完整的架構。來自不同視圖的行為需要變更同一狀態。最近對vue很感興趣，趁閑暇時間，模仿了wunderlist里面的部分功能，編寫了前后端分離的基于vue技術棧和express的todolist小項目。寫這篇博文來總結思考下。項目所在github,可以自行參考克隆。本人博客總體概覽整個項目最終做成的樣子如下： showI...

voidking 2019-08-20 16:09 評論0 收藏0
用mpvue寫個玩意兒玩玩

摘要：微信開發工具僅用于調試。下面可以配置一個微信小程序的參數，文件就是我們要編輯的頁面了。補充一下，調用之后獲取了經緯度之后，還可以玩玩微信的組件。試著用微信寫一個組件。下周公司要搞黑客馬拉松了，組里可能會做個小程序。然后看到了mpvue感覺還不錯，于是就打算試試水。用vue寫小程序聽上去美滋滋。那么先開始吧！全局安裝 vue-cli $ npm install --global vu...

lauren_liuling 2019-08-22 16:32 評論0 收藏0