资讯专栏INFORMATION COLUMN

分享一个用vue2 + node-webkit + koa2 + mongodb开发的,可以实时编辑

LeoHsiun / 3524人阅读

摘要:若用户已登录,数据存储在远程服务器用户未登录时,数据存储在。开发服务端部署服务端已经部署在我自己的服务器上,不需要你进行部署啦。有什么好的建议也可以提哈

记事本

该项目分为两部分:桌面客户端(node-webkit) + 服务端(koa2)。

效果

源码地址

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

技术栈

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://www.ucloud.cn/yun/107275.html

相关文章

  • vue2全家桶+koa2+mongodb搭建一个简单伪全栈博客

    摘要:本来不想推的,看到上有个项目很简单,都有,推推看咯。虽然这个项目很简单,但是还蛮有趣,用来入门和以及再好不过了。 本来不想推的,看到github上有个项目很简单,都有300 star,推推看咯。虽然这个项目很简单,但是还蛮有趣,用来入门vue2和nodejs以及mongodb再好不过了。 等这几天把公司手头的事情忙完,再把vuex的部分强化下。 基于vue2/vuex/vue-rout...

    bitkylin 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0
  • 2017年3月份前端资源分享

    平日学习接触过的网站积累,以每月的形式发布。2017年以前看这个网址:http://www.kancloud.cn/jsfron... 03月份前端资源分享 1. Javascript 175453545 Redux compose and middleware 源码分析 深入 Promise(二)——进击的 Promise Effective JavaScript leeheys blog -...

    ermaoL 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<