【硬核教程】只需1秒—你也可以有自己的API文档
Nothing is true. Everything is permitted.
写在前面
先聊聊为什么想到了要用Vuepress来代替原来写在Confluence上的文档。
大意是有个需要其他部门接入的项目,这个项目有个用md写的接入文档,其他部门的人需要看着这个文档才知道怎么接以及哪些东西需要接。
但是有个问题是这个文档长的一匹,有多长呢?
而且这个md文件是放在confluence上的。
本身用confluence阅读md的体验就不好,这个文档能够让你的滚轮滚个足足十多秒,skr~。
你想要看的某个小章节就藏在这一大坨文字里。即使从最上面的导航锚点定位到了想要看的地方,但是你看着看着,滑着滑着就不知道自己在哪儿了。
然后找了半天,要么你运气好找到了。要么就只有回到最上面的导航,在一堆导航里再找一次。如果你运气究极不好,可能还要把上面的步骤重复几次,真的到了那个时候,你的心态可能就炸了。还接个毛的业务,心里只想找到写文档的人,然后一顿操作。
这就是为什么,我想换个方式来展示这个接口文档。
说到这个,又不得不吐槽。去网上找了很多vuepress的使用,总体下来两个字,复杂。再去看看vuepress的官方文档(虽然最后的解决方案都是在官方找到的),总结下来也是两个字,懵逼(因为我想找的那个地方藏得比较深)。
于是就有了写这一期硬核教程。
Don't BB, 你这个项目启起来到底啥样?
我看的很多教程,都是在没有背景、没有代码、没有效果的情况就开始了。让本来希望通过这个教程入门的人懵上加懵(比如我)。
Github地址:-> 戳此 <-
墙裂建议,先拉下来看看效果。
直接npm install
安装完依赖之后,直接npm start
即可。在你本地的8080端口就会运行一个如下的界面。
并不是自动打开浏览器,需要手动进入本地项目地址
然后点开始开发会进入到如下的详细界面。
左边就是我们需要详细展示的文档,可以看到我简单的分了两类作为样例。
好了好了,效果看到了,Show me the code
首先,这个项目的目录长这样。
.
├── .vuepress
│ ├── config.js
│ ├── public
│ │ └── logo.jpg
│ └── router.js
├── LICENSE
├── README.md
├── groupA
│ ├── README.md
│ └── 类别A的李四.md
├── groupB
│ ├── README.md
│ └── 类别B的张三.md
├── package-lock.json
└── package.json
接下来就分别将一下首页和详情页是怎么来的,以及如果需要加一个页面(也就是路由)该怎么做。
首先是首页
项目的根目录下的README.md就是你刚刚看到的首页。里面的源码长这样,你可以对比首页来看。
---
home: true
heroImage: /logo.jpg
heroText: 你的标题
tagline: 你的副标题
lang: en-US
actionText: 开始开发 →
actionLink: /groupA/
features:
- title: 吹
【硬核教程】只需1秒—你也可以有自己的API文档的更多相关文章
- SpringBoot非官方教程 | 第十篇: 用spring Restdocs创建API文档
转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot10-springrestdocs/ 本文出自方志 ...
- 写20万数据到Excel只需9秒
on my god,写20万数据到Excel只需9秒 还是菜鸟时,在某个.Net项目中,用户需要从业务系统导出Report,而数据量通常都在上万条以上,最初采用的方式就是在服务器端用NPOI生成E ...
- 【ZT】在微信上有哪些高情商的说话方式 | M周刊(听语音需要60秒,看文字只需10秒)
https://baijiahao.baidu.com/s?id=1590547145580792217&wfr=spider&for=pc https://yuedu.baidu.c ...
- oh my god,写20万数据到Excel只需9秒
还是菜鸟时,在某个.Net项目中,用户需要从业务系统导出Report,而数据量通常都在上万条以上,最初采用的方式就是在服务器端用NPOI生成Excel,把Data一行一行一个Cell一个Cell地写到 ...
- Spring Boot 2.x基础教程:使用Swagger2构建强大的API文档
随着前后端分离架构和微服务架构的流行,我们使用Spring Boot来构建RESTful API项目的场景越来越多.通常我们的一个RESTful API就有可能要服务于多个不同的开发人员或开发团队:I ...
- Spring Boot教程(二十三)使用Swagger2构建强大的RESTful API文档(2)
添加文档内容 在完成了上述配置后,其实已经可以生产文档内容,但是这样的文档主要针对请求本身,而描述主要来源于函数等命名产生,对用户并不友好,我们通常需要自己增加一些说明来丰富文档内容.如下所示,我们通 ...
- Spring Boot2 系列教程 (四) | 集成 Swagger2 构建强大的 RESTful API 文档
前言 快过年了,不知道你们啥时候放年假,忙不忙.反正我是挺闲的,所以有时间写 blog.今天给你们带来 SpringBoot 集成 Swagger2 的教程. 什么是 Swagger2 Swagger ...
- 【HighCharts系列教程】二、Highcharts结构及API文档
一.你必须知道的 1.首先,HighCharts是基于Jquery框架开发的,所以需要在页面引入Jquery,具体代码是: <script type="text/javascript& ...
- Swagger UI教程 API 文档神器 搭配Node使用
ASP.NET Web API 使用Swagger生成在线帮助测试文档 Swagger 生成 ASP.NET Web API 前言 swagger ui是一个API在线文档生成和测试的利器,目前发现最 ...
随机推荐
- Razor视图中的@:和语法
Razor视图中的@:和语法 原创changuncle 最后发布于2016-12-07 17:43:50 阅读数 4456 收藏 展开 在MVC项目中新建视图的时候默认支持ASPX引擎和Razor引 ...
- JS中使用lambda筛选list
LevelEnum.filter(x=>x.Category=="水利工程")
- LCA 倍增算法模板
. #include <cstring> #include <cstdio> #include <cstdlib> #include <algorithm&g ...
- beego 使用连接mysql 报错 register db Ping `default1`, Error 1049: Unknown database 'test_beego' must have one register DataBase alias named `default`
项目移植到另一台电脑后出现以下问题,及其解决方法: package models import ( "github.com/astaxie/beego/orm" _ "g ...
- EAC3 Adaptive Hybrid Transform (AHT)
adaptive hybrid transform 由两个linear transforms级联组成. 第一个transform为MDCT,MDCT使用KBD window产生256个transfor ...
- 免费天气API,天气JSON API,不限次数获取十五天的天气预报
紧急情况说明: 禁用IP列表: 39.104.69.*(原因39.104.69.6 在2018年10月的 17~20日 排行为top 1,每天几十万次.) 47.98.211.* (原因47.98.2 ...
- JVM探秘:VisualVM监控远程Java进程
VisualVM在Java 8中是JDK自带的一个图形化工具,项目主页 VisualVM,在后续版本中可能会从JDK移除. VisualVM可以监控Java进程的CPU与内存占用情况,可以监控Java ...
- sql注入基础知识
信息安全概论课堂作业 SQL注入之万能密码漏洞 第一道题是牵扯到了万能密码漏洞 用户名先输入个’ 返回了sql报错语句,猜测存在sql注入漏洞 使用万能密码测试 登陆成功 原理 假设登录框处的判断代码 ...
- AcWing 837. 连通块中点的数量
#include <iostream> using namespace std; ; int n, m; int p[N], size[N]; int find(int x) { if ( ...
- 【读书笔记】--《编写高质量iOS与OS X代码的52个有效方法》
1.Objective-C 起源: 在 C 语言基础上添加了面向对象特性,是 C 语言的超集.Objective-C 由 SmallTalk 语言演变过来,使用消息结构,运行环境由运行环境决定. OC ...