分享一個(gè)用vue2 + node-webkit + koa2 + mongodb開發(fā)的，可以實(shí)時(shí)編輯

LeoHsiun 發(fā)布于2019-08-26 11:38 / 3670人閱讀

摘要：若用戶已登錄，數(shù)據(jù)存儲(chǔ)在遠(yuǎn)程服務(wù)器用戶未登錄時(shí)，數(shù)據(jù)存儲(chǔ)在。開發(fā)服務(wù)端部署服務(wù)端已經(jīng)部署在我自己的服務(wù)器上，不需要你進(jìn)行部署啦。有什么好的建議也可以提哈

記事本

該項(xiàng)目分為兩部分：桌面客戶端(node-webkit) + 服務(wù)端(koa2)。

效果

源碼地址

https://github.com/hu-ke/nw-t...

技術(shù)棧

vue2 + node-webkit + koa2 + mongodb

數(shù)據(jù)存儲(chǔ)

數(shù)據(jù)存儲(chǔ)由用戶登錄狀態(tài)決定。若用戶已登錄，數(shù)據(jù)存儲(chǔ)在遠(yuǎn)程服務(wù)器；用戶未登錄時(shí)，數(shù)據(jù)存儲(chǔ)在localStorage。

項(xiàng)目結(jié)構(gòu)

|-- nw-todo-app
| |-- client                // 客戶端
|   |-- assets              // 各種靜態(tài)資源 
|     |-- css               // 樣式資源
|     |-- images            // 圖片資源
|     |-- js                // js資源
|       |-- data.js         // 定義的數(shù)據(jù)存儲(chǔ)結(jié)構(gòu)
|       |-- fetch.js        // api請(qǐng)求文件
|       |-- index.js        // 業(yè)務(wù)邏輯文件
|       |-- taskManager.js  // 操作任務(wù)的一些方法
|       |-- vue.min.js      // 依賴的vue庫
|   |-- TodoManager.app     // 應(yīng)用文件(可以直接打開)
|   |-- app-screenshot.png  // 效果圖
|   |-- index.html          // 頁面
|   |-- package.json        // 配置文件
|   |-- README.md           // client說明文檔
| |-- server                // 服務(wù)端
|   |-- controllers         // 控制器
|     |-- index.js
|     |-- tasks.js          // 任務(wù)管理
|     |-- users.js          // 用戶管理
|   |-- global              // 全局配置
|   |-- middlewares         // 中間件
|   |-- models
|     |-- tasks.js          // 任務(wù)模型
|     |-- users.js          // 用戶模型
|   |-- test
|     |-- api.test.js       // 接口測(cè)試文件
|   |-- utils
|     |-- index.js          // 工具方法
|   |-- .babelrc            // ES6語法編譯配置
|   |-- .eslintrc           // 代碼規(guī)范
|   |-- package.json        // 項(xiàng)目及工具的依賴配置文件
|   |-- server.js           // 服務(wù)啟動(dòng)入口
|   |-- README.md           // server說明文檔
| |-- README.md             // 說明文檔

客戶端 運(yùn)行

你可以像打開一般Mac應(yīng)用一樣，直接打開TodoManager.app文件運(yùn)行。

開發(fā)

TodoManager.app/Contents/MacOS/node-webkit .

服務(wù)端 部署

服務(wù)端已經(jīng)部署在我自己的服務(wù)器上，不需要你進(jìn)行部署啦。
當(dāng)然如果你希望將服務(wù)端部署在你自己的服務(wù)器上，你需要：

1.安裝mongodb 

2.將client/js/fetch.js中的baseUrl改為你自己的服務(wù)器地址。

3.啟動(dòng)node服務(wù)。

安裝依賴

npm install

啟動(dòng)

npm start

測(cè)試

npm test

功能

[x] 注冊(cè)登錄

[x] 本地/服務(wù)端存儲(chǔ)數(shù)據(jù)

[x] 實(shí)時(shí)編輯

[x] 重命名任務(wù)

[x] 添加/刪除一個(gè)任務(wù)

[x] 改變?nèi)蝿?wù)狀態(tài)

展示 注冊(cè)登錄

編輯

補(bǔ)充說明

本項(xiàng)目實(shí)現(xiàn)的功能比較簡(jiǎn)單。由于我之前沒有寫過node服務(wù)和node-webkit桌面應(yīng)用，所以本項(xiàng)目算是對(duì)這兩者的一次窺探和嘗試吧。項(xiàng)目當(dāng)中若存在的不足之處還望指正。有什么好的建議也可以提哈~