一、技术背景

随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染、先后端分离的形态,而且前端技术和后端技术在各自的道路上越走越远。而前后端的唯一联系便是 API 接口,与此同时,API 文档也变成了前后端开发人员联系的纽带,变得越来越重要。Swagger 就是一款用来更好的书写 API 文档的框架。

首先让我们来看下 Swagger 的应用生态,红字部分是官网 https://swagger.io 推荐的,这里就不一一介绍了。

图1:Swagger 生态

官网中给出了 SwaggerHub 和 SwaggerHub Pro 两种开发工具,其中后者提供了若干种团队协作支持,但是需要收取一定的费用。下图是 SwaggerHub 的界面,左边是搜索框,点击信息可以跳转到相应的 OAS 代码位置;中间是 OAS 代码编辑处;右边是 API 可视化界面。

图2:Swagger Hub 界面

Springfox 则是用 Spring 构建自动的 JSON API 文档的工具,在 Java 中通过注释的形式自动生成  OAS 文档,但是现在还没有集成 Swagger 3.0。

   大家可以参考 Springfox 的官方文档:https://springfox.github.io/springfox/docs/snapshot/ 来进一步的了解。

二、Swagger本地环境的配置

这里的大多数操作是在 Windows 下的 PowerShell 中完成的,给出了相应的代码。这里我建议大家新建一个文件夹,将所有下载的文件统一放置管理,相应的指令也在该文件目录下完成。

1.下载 Nodejs,在官网下载最新的 Nodejs:https://nodejs.org/en/。当前常用的版本是 10.13.0。

这里需要注意的是,在 Nodejs 安装安成后会在一个新的 cmd 中自动安装相应的 package,安装过程中可能会重启电脑,而且在某些时候重启过后会提示 warning,并再次重新启动电脑,此时,只需要将打开的 cmd 窗口关闭即可,不影响后续的操作。在安装完成后,可以测试 node 和 npm(即上面说的 node 包管理器)的版本。

node -v
npm -v

  

2.下载 Swagger-editor 和 Swagger-ui。

git clone https://github.com/swagger-api/swagger-editor
git clone https://github.com/swagger-api/swagger-ui.git

3.安装 http-server ,这里我的默认 8080 端口被 Jenkins 占用了,如果需要修改则输入 http-server –p 8081 swagger-editor。

npm install -g http-server
http-server –p 8081 swagger-editor

4.启动 http-server,出现如下的输出:

http-server swagger-editor

图3:配置成功提示

需要注意一点,这里我们将 swagger-editor 安装在 D 盘的 swagger 文件夹下,而非 C 盘的默认路径,在输入启动命令时需要先找到存储位置的上一级目录,如这里 cd D:\\Swagger。按理说在 Swagger\\swagger-editor 文件目录下启动应该也可以,但是自己的电脑一直没能成功,如果有深入研究的朋友可以在评论区与我探讨。

图4:swagger-editor 存储结构

此时,便可以在网页上输入 http://localhost:808,或者输入 shell 中提示的地址登陆 Swagger-editor 了,界面如图所示。如果输入网址出错,可以先尝试更换浏览器重新进入。

http://localhost:8081

图4:Swagger-editor 界面

Swagger本地环境配置的更多相关文章

  1. Maven-001-初识及本地环境配置

    前段时间想对自己之前写的一些代码或者小工具,因为写的比较乱,因而想系统的管理一下自己学习 Java 时写的源码,经过多方请教.网上查询,最终决定使用 Maven 来管理自己写的代码. Maven 是一 ...

  2. AJAX-初学AJAX本地环境配置

    1.前段时间学习headfirst AJAX,发现有些概念比较陌生,理解起来比较困难,等看完了半本的JavaScript高级程序设计,再回头看这本AJAX,发现轻松了很多,但是遇到了一个问题,AJAX ...

  3. 使用xampp在本地环境配置虚拟域名

    最近在学习ThinkPHP5.1.手册里面提到"实际部署中,应该是绑定域名访问到public目录,确保其它目录不在WEB目录下面."所以把使用xampp在本地配置虚拟域名的过程记录 ...

  4. Mac本地环境配置以及安装织梦CMS,增加新的坑解决办法

    Mac上其实已经自带了Apache和PHP,只是默认关闭的.开启一下就行了. Apache配置 apache已经自带了,只需在“终端”输入命令开启下就行了. ​​​开启apache服务 sudo ap ...

  5. 前端开发本地环境配置(Apache+Dreamweaver)

    一.安装apache服务器 1.下载apache软件: 2.安装,直接下一步就好: 3.安装好后找到安装文件夹下的conf文件中的httpd.conf: 4.打开httpd.conf文件,做以下修改: ...

  6. maven 项目搭建,本地环境配置。

    一,下载地址 http://maven.apache.org/download.cgi 英文不好的,可以在浏览器下载个翻译的插件,就好了,我用的是谷歌. 二, 解压文件,安装在自己制定的目录,注意安装 ...

  7. UPUPW本地环境配置thinkphp5的问题

    问题解决参考: https://blog.csdn.net/lengyue1084/article/details/80001625 看httpd-vhosts.conf的配置: <Virtua ...

  8. iOS组件化开发一本地环境配置(一)

    首先我们要使用pod支持组件化开发 解决CocoaPods慢的方案(gem和pod repo换源) gem换源 $ gem sources --remove https://rubygems.org/ ...

  9. JMeter学习-002-JMeter环境配置

    本节主要介绍 JMeter 本地环境配置(JMeter 版本为 apache-jmeter-2.12),详细配置如下: 一.JDK配置 默认用户本地已经安装且配置好 JDK.若未配置,敬请参阅我的博客 ...

随机推荐

  1. 20155314 2016-2017-2 《Java程序设计》第1周学习总结

    20155314 2016-2017-2 <Java程序设计>第1周学习总结 学习目标 了解Java基础知识(已完成) 了解JVM.JRE与JDK,并下载.安装.测试JDK(已完成) 了解 ...

  2. MySQL插入emoji表情失败问题的解决方法

    前言 之前一直认为UTF-8是万能的字符集问题解决方案,直到最近遇到这个问题.最近在做新浪微博的爬虫, 在存库的时候发现只要保持emoji表情,就回抛出以下异常: Incorrect string v ...

  3. 集合之LinkedList

    一.概述 LinkedList与ArrayList一样实现List接口,只是ArrayList是List接口的大小可变数组的实现,LinkedList是List接口链表的实现.基于链表实现的方式使得L ...

  4. [转]托管DirectX,从MDX到SlimDX的转换

    开始迁移到托管DirectX SlimDX框架的,例如,MDX应用的帕特里克Murrisa地形的浏览器. 在托管DirectX代码所示,到新的代码,与SlimDX评论的形式. MDX迁移项目中Slim ...

  5. java集合(类似python的列表)

    一:学习方法 我们在学习一个类的时候,如果他是期其他类的实现类,我们在学习的时候,先学习他的共同的继承类,学习他们共有的方法,在学习他实现类的特殊方法.由共性--->特殊. 二:集合 1.集合和 ...

  6. ios宏定义学习

    宏简介: 宏是一种批量处理的称谓.一般说来,宏是一种规则或模式,或称语法替换 ,用于说明某一特定输入(通常是字符串)如何根据预定义的规则转换成对应的输出(通常也是字符串).这种替换在预编译时进行,称作 ...

  7. 提高PHP开发效率, PhpStorm必装的几款插件

    1. Translation 最好用的翻译插件 对于我等英文不好的同学来说,简直是福音. 打开翻译对话框 : Ctrl + Shift + O(英文字母o) 鼠标取词并翻译 : Ctrl + Shif ...

  8. 如何防止网页被植入广告,内容被监控-HTTPS

    前几天一朋友说访问网站页面底部怎么出现小广告了呢,内容有点不雅,朋友截图发给我,调侃我说怎么放这种广告,我一听纳闷,网站运行伊始,从来没有投放过任何广告,更别说不雅广告了. 最近还遇到一个问题就是,网 ...

  9. QT4.8.6之qt.network.ssl: QSslSocket: cannot call unresolved function ERR_get_error

    想试着用qt写一个爬虫,编译的时候报如下错误 qt.network.ssl: QSslSocket: cannot call unresolved function ERR_get_error qt. ...

  10. 使用 lxml 中的 xpath 高效提取文本与标签属性值

    以下代码在 python 3.5 + jupyter notebook 中运行测试无误! # 我们爬取网页的目的,无非是先定位到DOM树的节点,然后取其文本或属性值 myPage = '''<h ...