百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

分享:手把手生成漂亮的静态文档说明页

yuyutoo 2024-10-12 01:55 6 浏览 0 评论

最近经常被问 https://t.itmuch.com/doc.html 文档页是怎么制作的,考虑到步骤略复杂,写篇手记总结下吧。

TIPS

https://t.itmuch.com/doc.html 是个人在慕课网视频《 面向未来微服务:Spring Cloud Alibaba从入门到进阶[1] 》的实战项目配套文档。

效果

总体步骤

?整合Swagger,生成Swagger描述端点 /v2/api-docs

?使用 swagger2markup-maven-plugin ,将 /v2/api-docs 生成ASCIIDOC文件;

?使用 asciidoctor-maven-plugin ,将ASCIIDOC文件转换成HTML;

?部署

整合Swagger

TIPS

Swagger的使用非常简单,本文不展开探讨了,各位看官自行百度一下用法吧。

常用注解:

?@Api

?@ApiOperation

?@ApiModel

?@ApiModelProperty

1 加依赖

<!-- swagger -->
<!-- 之所以要排除,是因为如果不排除会报NumberFormatException的警告。 -->
<!-- 参考:https://github.com/springfox/springfox/issues/2265-->
<dependency>
 <groupId>io.springfox</groupId>
 <artifactId>springfox-swagger2</artifactId>
 <version>2.9.2</version>
 <exclusions>
 <exclusion>
 <groupId>io.swagger</groupId>
 <artifactId>swagger-annotations</artifactId>
 </exclusion>
 <exclusion>
 <groupId>io.swagger</groupId>
 <artifactId>swagger-models</artifactId>
 </exclusion>
 </exclusions>
</dependency>
<dependency>
 <groupId>io.springfox</groupId>
 <artifactId>springfox-swagger-ui</artifactId>
 <version>2.9.2</version>
</dependency>
<dependency>
 <groupId>io.swagger</groupId>
 <artifactId>swagger-annotations</artifactId>
 <version>1.5.21</version>
</dependency>
<dependency>
 <groupId>io.swagger</groupId>
 <artifactId>swagger-models</artifactId>
 <version>1.5.21</version>
</dependency>

2 配置Swagger(按照自己的需要配置,下面的配置代码仅供参考)

/**
 * @author itmuch.com
 */
@Configuration
@EnableSwagger2
public class SwaggerConfiguration {
 /**
 * swagger 信息
 *
 * @return 页面信息
 */
 private ApiInfo apiInfo() {
 return new ApiInfoBuilder()
 .title("ITMuch API")
 .description("ITMuch API")
 .termsOfServiceUrl("")
 .version("1.0.0")
 .contact(new Contact("", "", "")).build();
 }
 @Bean
 public Docket customImplementation() {
 return new Docket(DocumentationType.SWAGGER_2)
 .select()
 .apis(RequestHandlerSelectors.basePackage("com.itmuch"))
 .paths(PathSelectors.any())
 .build()
 .apiInfo(this.apiInfo());
 //.globalOperationParameters(parameters);
 }
}

3 为接口Swagger注解

@RestController
@RequestMapping("/notices")
@RequiredArgsConstructor(onConstructor = @__(@Autowired))
@Api(tags = "公告相关接口", description = "公告相关接口")
public class NoticeController {
 /**
 * 查询最新的一条公告
 *
 * @return 公告列表
 */
 @GetMapping("/newest")
 @ApiOperation(value = "查询最新的一条公告", notes = "用于:公告")
 public Notice findNewest() {
 return new Notice();
 }
}
@AllArgsConstructor
@NoArgsConstructor
@Builder
@Data
@ApiModel("公告")
public class Notice {
 /**
 * ID
 */
 @ApiModelProperty("id")
 private Integer id;
 /**
 * 公告内容
 */
 @ApiModelProperty("公告内容")
 private String content;
 ...
}

这样,应用启动完成后,就会有一个/v2/api-docs 端点,描述了你的API的信息。

生成ASCIIDOC

在pom.xml中添加如下内容:

<build>
 <plugins>
 <plugin>
 <groupId>io.github.swagger2markup</groupId>
 <artifactId>swagger2markup-maven-plugin</artifactId>
 <version>1.3.1</version>
 <configuration>
 <!-- api-docs访问url -->
 <swaggerInput>http://localhost:8080/v2/api-docs</swaggerInput>
 <!-- 生成为单个文档,输出路径 -->
 <outputFile>src/docs/asciidoc/generated/all</outputFile>
 <config>
 <!-- ascii格式文档 -->
 <swagger2markup.markupLanguage>ASCIIDOC</swagger2markup.markupLanguage>
 <swagger2markup.pathsGroupedBy>TAGS</swagger2markup.pathsGroupedBy>
 </config>
 </configuration>
 </plugin>
 ...

swagger2markup-maven-plugin 插件的作用是读取 http://localhost:8080/v2/api-docs 的信息,生成ASCIIDOC文档。当然你也可以生成其他格式,比如Markdown等等。

这款插件还有很多使用姿势,详见 https://github.com/Swagger2Markup/swagger2markup-maven-plugin[2]

生成HTML

下面,只需要将ASCIIDOC转换成html就OK了,在pom.xml中添加如下内容:

<build>
 <plugins>
 <plugin>
 <groupId>org.asciidoctor</groupId>
 <artifactId>asciidoctor-maven-plugin</artifactId>
 <version>1.5.6</version>
 <configuration>
 <!-- asciidoc文档输入路径 -->
 <sourceDirectory>src/docs/asciidoc/generated</sourceDirectory>
 <!-- html文档输出路径 -->
 <outputDirectory>src/docs/asciidoc/html</outputDirectory>
 <backend>html</backend>
 <sourceHighlighter>coderay</sourceHighlighter>
 <!-- html文档格式参数 -->
 <attributes>
 <doctype>book</doctype>
 <toc>left</toc>
 <toclevels>3</toclevels>
 <numbered></numbered>
 <hardbreaks></hardbreaks>
 <sectlinks></sectlinks>
 <sectanchors></sectanchors>
 </attributes>
 </configuration>
 </plugin>

asciidoctor-maven-plugin 插件同样也有很多姿势,详见:https://github.com/asciidoctor/asciidoctor-maven-plugin[3]

生成的文件在 src/docs/asciidoc/html (看你插件上面的配置哈),然后你就可以弄个NGINX部署了。

干货分享

最近将个人学习笔记整理成册,使用PDF分享。关注我,回复如下代码,即可获得百度盘地址,无套路领取!

?001:《Java并发与高并发解决方案》学习笔记;

?002:《深入JVM内核——原理、诊断与优化》学习笔记;

?003:《Java面试宝典》

?004:《Docker开源书》

?005:《Kubernetes开源书》

?006:《DDD速成(领域驱动设计速成)》


References

[1] 面向未来微服务:Spring Cloud Alibaba从入门到进阶: https://coding.imooc.com/class/358.html

[2]: https://github.com/Swagger2Markup/swagger2markup-maven-plugin

[3]: https://github.com/asciidoctor/asciidoctor-maven-plugin

相关推荐

网站制作的流程是什么呢?简单大概的流程

关注我!了解更多网站建设的小干货~如今,随着网络时代的全面到来,网站在人们的生活和工作中发挥着极其重要的作用。网站制作的发展使更多的人加入了这个行业。如果你想掌握网站制作的知识,你可以在学校或网上学习...

一款谷歌(Google)打造的广告网页设计制作软件

GoogleWebDesigner是由谷歌(Google)打造的一款广告网页设计制作软件,它能够帮助从事于广告网页设计工作或是有这方面需求的用户更加有效快速的进行完成相关的行业设计工作,软件可以支...

普通网站如何制作一个网站?

对行外人来讲,在预备做一个网站项目时,最想了解的无非就是网站制作的悉数流程。网站制作是要有计划的,事先策划好才能更快更好的完成。网站的几个基本组成元素:域名+空间+程序+模板+维护经验+日常管理.网站...

用纯Python就能写一个漂亮的网页,再见HTML

再见HTML!用纯Python就能写一个漂亮的网页我们在写一个网站或者一个网页界面的时候,需要学习很多东西,对小白来说很困难!比如我要做一个简单的网页交互:天啊,听听头都大呢!其实我就给老板做一个...

HTML表单4(form的action、method属性)——零基础自学网页制作

表单的工作过程表单的信息发送与处理过程可以简单的进行图示,如下图。以注册会员为例,用户在自己的电脑上打开相应的注册表单页面填写信息,完成填写后点击提交按钮,也就是图中1所示过程。这时浏览器会将这些信息...

官网网站设计网页制作模板建站前端自适应响应式网站仿站门户

案例背景航科慧联无人机搜索雷达能够在多种天气下检测到无人机的入侵、并获得目标的距离、方向和高度等具体信息,是无人机反制作战中的关键设备。航科慧联无人机搜索雷达能够在多种天气下检测到无人机的入侵、并获得...

软网推荐:在线制作软件图标

在制作PPT演示、软件、网页或其他程序时,我们往往需要用到一些个性化的图标。现在,即便是不安装任何软件,也可以上网在线制作自己需要的图标。首先访问如下制作网址:http://www.rw-design...

自定义跳转的h5网页如何制作?

文章来源:墨鹊微站...

网页如何制作?这几点要知道

这是一个个性张扬的时代,也是一个动手能力和动脑能力都比较强的时代,因此很多人对于能够自己动手完成的东西,都不太想假手于人。于是网页制作成了各大搜索引擎里面排名比较靠前的关键词之一。想要知道网页如何制作...

手机端网站简单制作教程,怎么快速制作一个移动端的网站

想要创建一个手机端的网站,需要有域名、已经完成网站页面的开发设计,零基础朋友不懂代码技术,直接在线套用乔拓云里面的网站模板来开发是比较简单可行的,进入乔拓云网,复制网站模板编辑网站的内容,注册域名后绑...

几张动图教你轻松了解Dreamweaver做网页

施老师:当今可是互联网时代,人们的生活、社交离不开互联网,那么不管你是网页设计师,还是销售达人,还是个体户,总必不可少的要在网上呈现一些页面给客户看,这个就是让你做网页,而Dreamweaver是做网...

用Deepseek制作网页版的汉诺塔游戏保姆级教程

在deepseek中输入:“帮我做一个网页版的汉诺塔演示游戏,游戏包含2层、3层、4层、5层的汉诺塔游戏演示,制作自动求解演示按钮,点击按钮就可以生成出步数,同时自动演示最优解动画。”...

JS制作网页版计算器

大家晚上好,我是洁哥,抱歉今天有点晚了,但是洁哥不会缺席哦,今天我们来看一个JS实现网页版计算器的例题,先来看一看出来的效果吧(123+123=246)(123-123=0)(123*123=1512...

网页制作流程哪几步

在数字化时代,网页制作成为企业和个人展示形象、传递信息的重要方式。但是,许多人对于网页制作的流程仍感到困扰。为了解决这一问题,我们将深入探讨网页制作的关键步骤,助您更好地理解和应用这一过程。第一步:需...

这4个设计技巧,教你做好个人网页制作

随着互联网发展,个人建站已经不是什么稀奇事,学生、求职者、插画师、摄影师、作家……都可以制作个人网站,用来展示自身形象,或者吸引粉丝。那么如何做好个人网站呢?在不懂设计和技术知识的情况下,个人网页制作...

取消回复欢迎 发表评论: