用k8s私有化部署docsify做开放API平台

文章目录

  • 1、API开放平台
  • 2、实现思路
  • 3、用docsify实现
  • 4、一些坑
    • 坑1：nginx转发实现跳转
    • 坑2：点击跳转不能精准跳
    • 坑3：md文档页内跳转与跨文档跳转
    • 坑4：插件做目录的折叠收起
    • 坑5：统一目录

做完了一个API开放平台的需求，整理下一些实现与踩坑：

1、API开放平台

参照模板：【工行的API开放平台】

https://open.icbc.com.cn/icbc/apip/service_detail.html?service_id=S1000#

API开放平台，用于给第三方系统做接入用，开放的自然也是用于对接的那部分API。主要有两类：

  • 只做个API文档的plus版本，不支持在线调用
  • 可在线进行调试和调用

前者简单，后者得考虑鉴权、限流等问题。

2、实现思路

关于第一类API开放平台

这类API开放平台不需要考虑在线调用，能展示就行，实现方式可考虑：

  • 借助第三方框架docsify：易用，给md，docsify去渲染出前端页面
  • 借助第三方框架vuepress
  • 在自己系统里实现一个API维护页面，前端根据UI的图去定制做页面

关于第三种的具体思路：

在这里插入图片描述

关于API文档内容的维护，可考虑采用上传word文档或者在线富文本框的方式，提到后端，后端转md或其他前端需要的格式后，返回给前端。

在这里插入图片描述

这种实现类似工行的开放平台，优点是灵活，自己爱咋展示咋展示，维护、上下架接口、编辑、删除都可以做成一个前端页面，可以在线操作，不涉及热部署。缺点是开发量不小。

关于第二类API开放平台

第二类API开放平台，需要做在线调用，那调用者的鉴权、限流、防恶意调用等问题需要考虑到。

在这里插入图片描述

实现方式：

  • 采用easyopen框架
//参考文档
https://durcframework.gitee.io/easyopen/#/files/110_%E7%94%9F%E6%88%90%E6%96%87%E6%A1%A3%E9%A1%B5%E9%9D%A2?t=1572484542437
  • 采用SOP框架（涉及Nacos，很适配SpringCloud项目）
//参考文档
https://durcframework.gitee.io/sop/#/files/10041_%E7%BC%96%E5%86%99%E6%96%87%E6%A1%A3?t=1616211903049&id=%e6%9f%a5%e7%9c%8b%e6%96%87%e6%a1%a3https://gitee.com/durcframework/SOP/wikis/%E6%9E%B6%E6%9E%84%E5%9B%BE

在这里插入图片描述

3、用docsify实现

关于docsify的简单入门，看官方文档就行，初始化的目录结构和文档，如果操作npm有坑被卡，其实自己手动创建个目录，复制个index.html就行。这里展示docsify私有化部署到自己系统。k8s资源的yaml文件架子，Service如下，类型用了NodePort，部署完直接访问也可以：

apiVersion: v1
kind: Service
metadata:name: api-open-platform-servicenamespace: your-ns
spec:type: NodePortports:- protocol: TCPport: 3000targetPort: 3000nodePort: 30070selector:app: api-open-platform-deployment

Pod控制器Deployment：

apiVersion: apps/v1
kind: Deployment
metadata:name: api-open-platform-deploymentnamespace: your-ns
spec:replicas: 1selector:matchLabels:app: api-open-platform-deploymenttemplate:metadata:labels:app: api-open-platform-deploymentspec:dnsPolicy: ClusterFirstcontainers:- name: api-open-platform-deploymentimage: your-diy-image:tagports:- containerPort: 3000

Dockerfile，ADD和COPY相关md到工作目录/docs下

FROM node:latestMAINTAINER code-9527@csdnLABEL description="Dockerfile for build Docsify."ENV TZ=Asia/ShanghaiRUN mkdir -p /docsWORKDIR /docsCOPY . /docs///下面这句可选，配置npm代理的
//ARG registry=http://公司镜像仓库/repository/npm-all///RUN npm config set registry $registryRUN npm install -g docsify-cli@latestEXPOSE 3000/tcpENTRYPOINT docsify serve .

当前项目的目录结构如下，对应Dockerfile就是cd到docsify目录下ADD圈起来的文件到容器的/docs下

在这里插入图片描述

这里直接把docsify用到的静态资源（css样式、js插件）都搬到项目里了，不用每次去下载，加快渲染速度。最后，核心的index.html，官方最初版本：

https://docsify.js.org/#/quickstart?id=manual-initialization

调整下，把css和js改为上面的static目录，加一段目录折叠代码（官方的目录插件调半天不能收起和折叠），再加一个basePath方便后面nginx做转发嵌入到自己的系统，实现点击跳转。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="description" content="Description"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="./static/buble.css"><style>/* 添加CSS样式以控制折叠效果 */.sidebar ul.collapsed {display: none;</style>
</head>
<body>
<div id="app"></div>
<script>window.$docsify = {name: '',repo: ''}
</script>
<!-- Docsify v4 -->
<script>window.$docsify = {basePath: '/api-doc/',loadSidebar: true}window.addEventListener('load', () => {const tocHeaders = document.querySelectorAll('.sidebar li');tocHeaders.forEach(header => {const subItems = header.nextElementSibling;if (subItems) {subItems.classList.add('collapsed');}header.addEventListener('click', (e) => {// 获取当前标题对应的下一个UL列表（即二级标题及其子级）if (subItems) {subItems.classList.toggle('collapsed');}});});});
</script>
</script><script src="./static/docsify.min.js"></script>
<script src="./static/docsify-copy-code.min.js"></script>
<script src="./static/docsify-sidebar-collapse.min.js"></script>
</body>
</html>

build镜像后访问IP:30070即可

4、一些坑

坑1：nginx转发实现跳转

最终需要iframe内嵌docsify的页面到自己系统，上面部署的docsiy是http，自己系统https，访问时被浏览器拦了：

The page at https://xxx was loaded over HTTPS,but requested an insecure frame http://xx.
The request has been blocked,the content must be served over HTTPS

想把上面的部署改成https，得再搞个ingress+secret证书，太麻烦，这里用nginx垫一层：

location /api-doc/ {proxy_pass   http://api-open-platform-service:3000/;
}

注意这里location后面监听地址api-doc/，最后面有斜杠和没斜杠的坑。

坑2：点击跳转不能精准跳

部署完，访问时，点击目录跳转，发现跳转有时受上次滚动条位置的影响，跳不准文章开始点，采用锚点精准跳：

//在跳转的目的位置定义锚点
<a id="section1"></a>

//使用锚点
[快速入门](README.md#section1)

加了锚点在页内跳转和跨文档跳转都可以：

[认证服务](auth/auth.md#section1)

坑3：md文档页内跳转与跨文档跳转

- [认证服务](auth/auth.md#section1)- [功能介绍](auth/auth.md#_1-功能介绍)

如上，想跳转到md某一个章节，除了锚点，也可以使用章节段落，这个 #_1-功能介绍 来自渲染后的前端代码：

在这里插入图片描述

坑4：插件做目录的折叠收起

docsify的侧边栏默认是不能折叠，可以加插件docsify-sidebar-collapse来解决：

<script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>
//侧边栏有问题时检查_sidebar.md每行之间不能有空行，以及每个markdown文件必须以#作为标题

想加个 > 来显示收起和展开，可加个css，箭头指示折叠标用：

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css"/>

文件夹指示折叠标用：

 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-folder.min.css" />

坑5：统一目录

使用插件，只能在每个md里生成自己的目录，想用统一的目录（不管切到哪个md，侧边栏目录始终不变），可手写_sidebar.md，然后index.html加这个配置：

在这里插入图片描述

_sidebar.md文件样例：

- [快速入门](README.md#section1)- [平台简介](README.md#_1-平台简介)- [术语介绍](README.md#_2-术语介绍)- [服务列表](README.md#_3-服务列表)- [接入示例](README.md#_4-接入示例)- [认证服务](auth/auth.md#section1)- [功能介绍](auth/auth.md#_1-功能介绍)- [功能概述](auth/auth.md#_11-功能概述)- [应用场景](auth/auth.md#_12-应用场景)- [适用客户](auth/auth.md#_13-适用客户)- [快速接入](auth/auth.md#_2-快速接入)- [准备](auth/auth.md#_21-准备)- [业务流程](auth/auth.md#_22-业务流程)- [API列表](auth/auth.md#_3-API列表)- [接口1](auth/api/接口1.md#section1)- [接口2](auth/api/接口2.md#section1)- [服务2](service/yourService.md#section1)- [功能介绍](service/yourService.md#_1-功能介绍)- [功能概述](service/yourService.md#_11-功能概述)- [应用场景](service/yourService.md#_12-应用场景)- [适用客户](service/yourService.md#_13-适用客户)- [快速接入](service/yourService.md#_2-快速接入)- [准备](service/yourService.md#_21-准备)- [业务流程](service/yourService.md#_22-业务流程)- [API列表](service/yourService.md#_3-API列表)- [接口1](service/api/接口1.md#section1)- [接口2](service/api/接口2.md#section1)

最后，备份下API开放平台一个还不错的API开放平台目录结构：

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/647673.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Higress 开源一周年：新版本，新标准，新工具，新征程

Higress 开源一周年：新版本，新标准，新工具，新征程

作者&#xff1a;Higress 团队 历程回顾 Higress 开源一年时间&#xff0c;一共发布了 18 个 release 版本&#xff0c;收获了 40 多位社区贡献者和 1800 star&#xff0c;上图是这一年过来达成的一些关键的里程碑。 前面半年通过集成开源生态&#xff0c;打磨开源版本稳定性…
阅读更多...
文件操作---C++

文件操作---C++

文件操作目录 1.文本文件1.1写文件1.2读文件1.2.1第一种方式&#xff1a;流输入方式1.2.2第二种方式&#xff1a;getline成员函数1.2.3第三种方式&#xff1a;getline全局函数1.2.4第四种方式&#xff1a;按一个一个字符读取 2.二进制文件2.1写文件2.2读文件 程序运行时产生的数…
阅读更多...
LabVIEW电缆检修系统

LabVIEW电缆检修系统

在电力系统中&#xff0c;合理选择电缆检修策略是保障电网稳定运行的关键。现有的电缆检修策略往往忽视了电缆的技术和经济双重指标&#xff0c;导致检修效率低下和维护成本高昂。为此&#xff0c;开发了一种基于风险评估模型和全寿命周期成本&#xff08;LCC&#xff09;的电缆…
阅读更多...
【论文笔记】Learning Deconvolution Network for Semantic Segmentation

【论文笔记】Learning Deconvolution Network for Semantic Segmentation

重要说明&#xff1a;严格来说&#xff0c;论文所指的反卷积并不是真正的 deconvolution network 。 关于 deconvolution network 的详细介绍&#xff0c;请参考另一篇博客&#xff1a;什么是Deconvolutional Network&#xff1f; 一、参考资料 Learning Deconvolution Netwo…
阅读更多...
在IDEA中创建SpringBoot项目

在IDEA中创建SpringBoot项目

概述 SpringBoot是由Pivotal团队提供的全新的框架&#xff0c;其设计的目的是用来简化Spring应用的初始搭建以及开发过程。 传统方式构建Spring应用程序 导入依赖繁琐 依赖冲突 项目配置繁琐 SpringBoot特性 1、起步依赖 本质上就行一个Maven坐标&#xff0c;整合了完成一…
阅读更多...
【C++进阶】STL容器--list使用迭代器问题分析

【C++进阶】STL容器--list使用迭代器问题分析

目录 前言 1. list的基本使用 1.1 list构造函数 1.2 list迭代器 1.3 list capacity 1.4 list元素访问 1.5 list 修改操作 insert erase swap resize clear 2. list失效迭代器问题 3. list使用算法库函数问题 总结 前言 list&#xff08;链表&#xff09;在C中非常重要…
阅读更多...
【创建vue项目的两种方式】

【创建vue项目的两种方式】

Vue环境搭建 NodeJs安装包安装淘宝镜像 环境搭建webpack安装全局安装vue/cli查看模板创建项目1.webpack2. vue-cli NodeJs安装包 下载链接&#xff1a;官网链接 下载下来后&#xff0c;直接傻瓜式的安装即可。 通过在cmd控制台输入以下命令查看是否安装成功 node -v因为适配某…
阅读更多...
RK3399平台开发系列讲解（PCIE篇）PCIE体系结构有哪些知识

RK3399平台开发系列讲解（PCIE篇）PCIE体系结构有哪些知识

🚀返回专栏总目录 沉淀、分享、成长，让自己和他人都能有所收获！😄 一、PCI/PCIe拓扑结构 PCI Express (PCIe) 拓扑结构是指 PCI Express 总线中各个设备之间的连接和通信方式。PCI Express 是一种高速串行总线标准，用于连接计算机内部的各种硬件设备，如图形卡、网络适配…
阅读更多...
vue3---inputRef.value.focus()报错Cannot read properties of null (reading ‘focus‘)

vue3---inputRef.value.focus()报错Cannot read properties of null (reading ‘focus‘)

问题描述&#xff1a;点击编辑按钮&#xff0c;出现el-input框&#xff08;el-input显示隐藏通过v-if控制&#xff09; <el-input ref"inputRef" v-if"isEdit" v-model"modelName" blur"isEdit false" /> <el-button text …
阅读更多...
python小项目：口令保管箱

python小项目：口令保管箱

代码&#xff1a; #! python3 # python 编程-----口令保管箱passwords{emails: F7minlBDDuvMJuxESSKHFhTxFtjVB6,blog:VmALvQyKAxiVH5G8v01if1MLZF3sdt,luggage:12345,} import sys,pyperclip if len(sys.argv)<2:print(usage:python python3文件[accout]-copy accout pass…
阅读更多...
shell 脚本4

shell 脚本4

循环语句 echo命令 1.标准输出 2.用来调整脚本里面的格式 echo -e \b 删除b前面的数字 echo -e \t &#xff08;横向制表符 横向tab键&#xff09; echo -e \c 删除c后面的字符&#xff0c;并且不换行 echo -e \n 换行 自动硬盘分区 新建一块磁盘/dev/sdb 可以…
阅读更多...
循环测试之旅——深度解析Pytest插件 pytest-repeat

循环测试之旅——深度解析Pytest插件 pytest-repeat

在软件开发中，测试的重要性不言而喻。而为了提高测试的鲁棒性和可靠性，Pytest插件 pytest-repeat 应运而生。这个插件可以帮助你轻松实现测试用例的循环运行，以更全面地评估代码的稳定性。本文将深入介绍 pytest-repeat 插件的基本用法和实际案例，助你更好地利用循环测试，…
阅读更多...
chaper data writting

chaper data writting

在大气科学领域的期刊论文中&#xff0c;这个章节应该清晰地说明数据的来源、获取方式、处理过程和分析方法&#xff0c;以便其他研究人员能够理解和验证研究结果。 示例结构 数据来源 描述数据的来源&#xff0c;包括观测、实验或模拟数据。说明数据的获取途径和原始数据集的…
阅读更多...
Vue自定义成功弹窗H5实现类似于小程序的效果

Vue自定义成功弹窗H5实现类似于小程序的效果

效果图&#xff1a; <div class"father"><div class"success-box" v-if"isSuccess"><img src"../../assets/insure/success-logo.png" alt""><span>{{ successTitle }}</span></div> &…
阅读更多...
安全防御第三次作业

安全防御第三次作业

作业&#xff1a;拓扑图及要求如下图 注&#xff1a;server1是ftp服务器&#xff0c;server2是http服务器 lsw1&#xff1a; 其中g0/0/0口为trunk 实现 1&#xff0c;生产区在工作时间内可以访问服务器区&#xff0c;仅可以访问http服务器 验证&#xff1a; 2&#xff0c;办公…
阅读更多...
【DDD】学习笔记-领域驱动设计

【DDD】学习笔记-领域驱动设计

领域驱动设计&#xff08;Domain Driven Design&#xff0c;DDD&#xff09;是由 Eric Evans 最早提出的综合软件系统分析和设计的面向对象建模方法&#xff0c;如今已经发展成为了一种针对大型复杂系统的领域建模与分析方法。它完全改变了传统软件开发工程师针对数据库进行的建…
阅读更多...
跨平台Recorder录音插件：支持多种格式、音频可视化、实时上传、语音识别

跨平台Recorder录音插件：支持多种格式、音频可视化、实时上传、语音识别

视频教程地址&#xff1a;【跨平台Recorder录音插件&#xff1a;支持多种格式、音频可视化、实时上传、语音识别】 https://www.bilibili.com/video/BV1jQ4y1c7e4/?share_sourcecopy_web&vd_sourcee66c0e33402a09ca7ae1f0ed3d5ecf7c /** 先引入Recorder &#xff08; 需先…
阅读更多...
三篇论文联合复现：高比例新能源下考虑需求侧响应和智能软开关的配电网重构程序代码！

三篇论文联合复现：高比例新能源下考虑需求侧响应和智能软开关的配电网重构程序代码！

适用平台&#xff1a;MatlabYalmipCplex 程序在高比例新能源接入的情况下提出了考虑需求响应&#xff08;DR&#xff09;和智能软开关&#xff08;SOP&#xff09;的多时段主动配电网重构策略&#xff0c;进一步降低配电系统重构费用&#xff0c;减少弃风率和弃光率&#xff1…
阅读更多...
金融OCR领域实习日志（二）——四种OCR模型效果测试（附图）

金融OCR领域实习日志（二）——四种OCR模型效果测试（附图）

文章目录 四种模型ocr效果简单测试模型场景1.paddle框架下PP-OCRv31.1.效果如下&#xff1a;1.2.总结 2.paddle框架下ppocr_server_v22.1.效果如下2.2.总结 3.CnOCR3.1.效果如下3.2.总结 4.TesseractOCR4.1.效果如下4.2.总结 5.后续想法 四种模型ocr效果简单测试 模型 PP-OCR…
阅读更多...
【RT-DETR有效改进】 | 主干篇 | RevColV1可逆列网络（特征解耦助力小目标检测）

【RT-DETR有效改进】 | 主干篇 | RevColV1可逆列网络（特征解耦助力小目标检测）

前言 大家好&#xff0c;这里是RT-DETR有效涨点专栏。 本专栏的内容为根据ultralytics版本的RT-DETR进行改进&#xff0c;内容持续更新&#xff0c;每周更新文章数量3-10篇。 专栏以ResNet18、ResNet50为基础修改版本&#xff0c;同时修改内容也支持ResNet32、ResNet101和PP…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023