用 Django + Electron + Vue 写一个桌面文档客户端
对于 Pythoner 来说,能用 Python 生态内的库写程序,就坚决不用其他语言的库。
但是很多时候,Python 的触手处之不及的地方,我们还是得用其他语言的东西来实现想法和完成功能。
最近,州的先生发现一个很苦恼的问题,就是在浏览器上用 MrDoc 写文档的步骤太繁琐了。
因为 MrDoc 只提供了 Web 端,所以只能:
- 1、打开浏览器
- 2、访问 MrDoc 的网站
- 3、再进行文档的创建
- 4、最后才开始写文档。
我就在想,能不能简化一下这个步骤。
当然可以,开发一个桌面客户端就能够实现简化写文档这件事的步骤。
有了想法之后,就是技术选型了。
虽然州的先生对 Python 和 PyQt5 比较熟悉,但是设计中的桌面文档客户端需要涉及到编辑器和 Markdown 文档的渲染,这在 PyQt5 中还真不太好处理。
经过一番调研,最终选择了如下的技术栈来开发这个桌面客户端:
- Electron:跨平台桌面应用开发框架
- Vue:JavaScript 框架
- ElementUI:Vue 的 UI 框架
- Electron-store:Electron 数据存取
在这里没有看到我们的 Django 呀,其实我们的后端接口是通过 MrDoc 的用户Token API 提供的,所以Django默认是包含在内了。
API 接口
MrDoc 的用户 token 接口目前包含了如下内容:
- 获取文集列表
- 获取文集的文档列表
- 获取文档详情
- 新建文集
- 新建文档
- 更新文档
- 上传图片
基于这些个接口,构建我们的桌面客户端绰绰有余了。
创建项目
在这里,我们使用 Vue脚手架 vue-cli 来搭建我们的桌面客户端。
首先安装vue-cli:
npm install @vue/cli -g
然后使用 vue-cli 创建项目
vue create mrdoc-desktop
根据实际情况,选择需要的配置。
在上述过程完成后,进入到项目的目录内(在这里是./mrdoc-desktop)
通过安装 electron-builder 将 Electron 集成到项目中:
vue add electron-builder
在安装完 electron-builder 依赖和选择 Electron 的版本后,我们的项目就创建完成了。
项目结构
因为使用了 electron-builder,所以在项目创建完成之后,就已经存在一个最基础的 Electron 应用了。
其中:
- background.js 是 Electron 的核心文件,有关 Electron 主进程的操作都在这个文件内进行处理。
- main.js 是 Vue 的入口文件;
- App.vue 是 Vue 的根组件;
- /router 文件夹存放的是我们定义的路由文件;
- /pages 文件夹存放的是我们的页面组件;
项目运行
在命令行终端界面,输入如下命令即可运行项目:
npm run electron:serve
两个页面
在这个桌面客户端程序中,一共有两个页面:
- 首页
- 配置页
其中,首页用于显示文集列表、文档列表和进行文档的编辑。
配置页,则用于配置 MrDoc 服务的相关信息:
首页到配置页的跳转通过 Electron 的菜单进行:
项目源码
目前这个项目还在紧锣密鼓的开发中,并且代码已经开源在了 Gitee 平台,地址为:https://gitee.com/zmister/mrdoc-desktop
欢迎大家提意见、反馈问题、提交PR完善功能。
MrDoc 官网:
https://mrdoc.pro
开源版源码地址:
https://gitee.com/zmister/MrDoc
https://github.com/zmister2016/MrDoc
Linux一键部署脚本:
https://gitee.com/jonnyan404/oh-my-mrdoc
Windows图形界面部署面板:
https://gitee.com/debj031634/win-django
相关文章
- 金融服务领域的大数据:即时分析
- 影响大数据、机器学习和人工智能未来发展的8个因素
- 从0开始构建一个属于你自己的PHP框架
- 如何将Hadoop集成到工作流程中?这6个优秀实践必看
- SEO公司使用大数据优化其模型的5种方法
- 关于Web Workers你需要了解的七件事
- 深入理解HTTPS原理、过程与实践
- 增强分析:数据和分析的未来
- PHP协程实现过程详解
- AI专家:大数据知识图谱——实战经验总结
- 关于PHP的错误机制总结
- 利用数据分析量化协同过滤算法的两大常见难题
- 怎么做大数据工作流调度系统?大厂架构师一语点破!
- 2019大数据处理必备的十大工具,从Linux到架构师必修
- OpenCV中的KMeans算法介绍与应用
- 教大家如果搭建一套phpstorm+wamp+xdebug调试PHP的环境
- CentOS下三种PHP拓展安装方法
- Go语言HTTP Server源码分析
- Go语言HTTP Server源码分析
- 2017年4月编程语言排行榜:Hack首次进入前五十