drawio对接国产码云Gitee实现文件保存更新功能

前言

Drawio本身支持github，gitlab，dropbox等云平台，但是这几个局限性太强，国内要么访问不了，要么网速差的要死。我就想能不能让系统支持一下国内的码云gitee，百度网盘等平台。

这里大家可以去体验一下我的网站，基于drawio仿照processOn风格设计的在线画图软件。https://processflow.sharehoo.cn/

文件管理更为方便，基于云端，可以自定义保存到云端服务器，gitee，百度网盘，github，gitlab，或者本地等。随时随地查看，编辑。脱离软件的限制。

 

踩坑过程

Drawio本身属于插件化系统，每个功能都是一个单独的插件，可插拔式的。像github，gitlab都有专门定制的js插件。一开始想着gitee和gitlab差不多，就仿照着gitlab的插件去实现。写下来之后，才发现差别挺大，gitee是针对组织和仓库的维度。

 

而gitlab是基于groups和projects的维度。相比之下，GitHub和gitlab的api文档要更好用一点，个人感觉。Gitee的新建文件和更新文件接口更细化，新建是post类型，更新是PUT类型。这些细节折腾了我大半天去区分。

申请gitee第三方授权

参考链接：

https://blog.csdn.net/weixin_44100826/article/details/106822155

 

自定义GiteeClient.js, GiteeLibrary.js, GiteeFile.js插件

GiteeClient主要是与gitee服务端的交互，创建，获取，更新文件等操作。

GiteeFile是提交的文件格式，每个类型对应一个文件格式，分别对应各自的属性。

GiteeLibrary是自定义的gitee插件，暂时用不到。

后端权限认证获取access_token

前台首页通过gitee授予的client_id和回调接口获取code，然后使用code和client_id后端追加client_secret发送请求获取access_token, access_token是每个接口必备的认证参数，这里很奇葩，access_token是放在body里的，而不是header，不太习惯。

 

这里与github流程基本一致，放一张盗图上来。

页面回调获取并更新用户信息

Api调用

像拉取分支，仓库列表，文件列表自行去gitee官网查吧，这里就不介绍了。

https://gitee.com/api/v5/swagger#/getV5ReposOwnerRepoContents(Path)

 

大坑讲解

接口总是401问题

Github，gitlab都没有指定ajax的content-type编码，偏偏gitee需要指定，我每次用postman调试的好好的，放到代码上调用就401，认证失败。一度怀疑人生。后来仔细对比了postman的header数据和浏览器端的header数据，发现content-type不同。

需要指定application/json，编码方式为utf-8.