分享一個基於vue2 + node-webkit + koa2 + mongodb開發的，能夠實時編輯保存的桌面記事本。

該項目分爲兩部分：桌面客戶端(node-webkit) + 服務端(koa2)。

效果

源碼地址

github.com/hu-ke/nw-to…

技術棧

vue2 + node-webkit + koa2 + mongodb

數據存儲

數據存儲由用戶登陸狀態決定。若用戶已登陸，數據存儲在遠程服務器；用戶未登陸時，數據存儲在localStorage。

項目結構

|-- nw-todo-app
| |-- client                // 客戶端
|   |-- assets              // 各類靜態資源 
|     |-- css               // 樣式資源
|     |-- images            // 圖片資源
|     |-- js                // js資源
|       |-- data.js         // 定義的數據存儲結構
|       |-- fetch.js        // api請求文件
|       |-- index.js        // 業務邏輯文件
|       |-- taskManager.js  // 操做任務的一些方法
|       |-- vue.min.js      // 依賴的vue庫
|   |-- TodoManager.app     // 應用文件(能夠直接打開)
|   |-- app-screenshot.png  // 效果圖
|   |-- index.html          // 頁面
|   |-- package.json        // 配置文件
|   |-- README.md           // client說明文檔
| |-- server                // 服務端
|   |-- controllers         // 控制器
|     |-- index.js
|     |-- tasks.js          // 任務管理
|     |-- users.js          // 用戶管理
|   |-- global              // 全局配置
|   |-- middlewares         // 中間件
|   |-- models
|     |-- tasks.js          // 任務模型
|     |-- users.js          // 用戶模型
|   |-- test
|     |-- api.test.js       // 接口測試文件
|   |-- utils
|     |-- index.js          // 工具方法
|   |-- .babelrc            // ES6語法編譯配置
|   |-- .eslintrc           // 代碼規範
|   |-- package.json        // 項目及工具的依賴配置文件
|   |-- server.js           // 服務啓動入口
|   |-- README.md           // server說明文檔
| |-- README.md             // 說明文檔
複製代碼

客戶端

運行

你能夠像打開通常Mac應用同樣，直接打開TodoManager.app文件運行。

開發

TodoManager.app/Contents/MacOS/node-webkit .
複製代碼

服務端

部署

服務端已經部署在我本身的服務器上，不須要你進行部署啦。 固然若是你但願將服務端部署在你本身的服務器上，你須要：

1.安裝mongodb
2.將client/js/fetch.js中的baseUrl改成你本身的服務器地址。
3.啓動node服務。

安裝依賴

npm install
複製代碼

啓動

npm start
複製代碼

測試

npm test
複製代碼

功能

• [x] 註冊登陸
• [x] 本地/服務端存儲數據
• [x] 實時編輯
• [x] 重命名任務
• [x] 添加/刪除一個任務
• [x] 改變任務狀態

展現

註冊登陸

編輯

補充說明

本項目實現的功能比較簡單。因爲我以前沒有寫過node服務和node-webkit桌面應用，因此本項目算是對這二者的一次窺探和嘗試吧。項目當中若存在的不足之處還望指正。有什麼好的建議也能夠提哈~