用 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