分享一个基于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桌面应用,所以本项目算是对这两者的一次窥探和尝试吧。项目当中若存在的不足之处还望指正。有什么好的建议也可以提哈~

转载于:https://juejin.im/post/5a795c09f265da4e9a493d23

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值