Swagger本地环境配置
一、技术背景
随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染、先后端分离的形态,而且前端技术和后端技术在各自的道路上越走越远。而前后端的唯一联系便是 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本地环境配置的更多相关文章
- Maven-001-初识及本地环境配置
前段时间想对自己之前写的一些代码或者小工具,因为写的比较乱,因而想系统的管理一下自己学习 Java 时写的源码,经过多方请教.网上查询,最终决定使用 Maven 来管理自己写的代码. Maven 是一 ...
- AJAX-初学AJAX本地环境配置
1.前段时间学习headfirst AJAX,发现有些概念比较陌生,理解起来比较困难,等看完了半本的JavaScript高级程序设计,再回头看这本AJAX,发现轻松了很多,但是遇到了一个问题,AJAX ...
- 使用xampp在本地环境配置虚拟域名
最近在学习ThinkPHP5.1.手册里面提到"实际部署中,应该是绑定域名访问到public目录,确保其它目录不在WEB目录下面."所以把使用xampp在本地配置虚拟域名的过程记录 ...
- Mac本地环境配置以及安装织梦CMS,增加新的坑解决办法
Mac上其实已经自带了Apache和PHP,只是默认关闭的.开启一下就行了. Apache配置 apache已经自带了,只需在“终端”输入命令开启下就行了. 开启apache服务 sudo ap ...
- 前端开发本地环境配置(Apache+Dreamweaver)
一.安装apache服务器 1.下载apache软件: 2.安装,直接下一步就好: 3.安装好后找到安装文件夹下的conf文件中的httpd.conf: 4.打开httpd.conf文件,做以下修改: ...
- maven 项目搭建,本地环境配置。
一,下载地址 http://maven.apache.org/download.cgi 英文不好的,可以在浏览器下载个翻译的插件,就好了,我用的是谷歌. 二, 解压文件,安装在自己制定的目录,注意安装 ...
- UPUPW本地环境配置thinkphp5的问题
问题解决参考: https://blog.csdn.net/lengyue1084/article/details/80001625 看httpd-vhosts.conf的配置: <Virtua ...
- iOS组件化开发一本地环境配置(一)
首先我们要使用pod支持组件化开发 解决CocoaPods慢的方案(gem和pod repo换源) gem换源 $ gem sources --remove https://rubygems.org/ ...
- JMeter学习-002-JMeter环境配置
本节主要介绍 JMeter 本地环境配置(JMeter 版本为 apache-jmeter-2.12),详细配置如下: 一.JDK配置 默认用户本地已经安装且配置好 JDK.若未配置,敬请参阅我的博客 ...
随机推荐
- CF97B Superset
嘟嘟嘟cf 嘟嘟嘟luogu 刚开始我看成了对于一个点\(i\),存在一个点\(j\)满足三个条件之一,而不是任意的\(j\).结果自然\(gg\)了,第二个点就\(WA\)了. 也不知怎么来的思路: ...
- TensorFlow函数(八)tf.control_dependencies()
tf.control_dependencies(control_inputs) 此函数指定某些操作执行的依赖关系 返回一个控制依赖的上下文管理器,使用 with 关键字可以让在这个上下文环境中的操作都 ...
- Hive学习之路 (六)Hive SQL之数据类型和存储格式
一.数据类型 1.基本数据类型 Hive 支持关系型数据中大多数基本数据类型 类型 描述 示例 boolean true/false TRUE tinyint 1字节的有符号整数 -128~127 1 ...
- c++——const关键字
1 const基础知识(用法.含义.好处) int main() { const int a; int const b; const int *c; int * const d; const int ...
- bat批处理文件自动判断系统版本信息(转载)
@echo offver|find "Version 5.0" >nulif not errorlevel 1 goto Windows2Kver|find "版本 ...
- 学习JavaWeb aop两种配置方式
aop aop:面向切面编程,它可以解决重复代码. aop有两种方式: 一..xml方式 1.在springmvc-servlet.xml中配置aop,应用bean文件: <!--aop配置-- ...
- mac上cocoapods安装与卸载
安装 # 安装最新beta版 sudo gem install cocoapods --pre -n /usr/local/bin # 安装最新稳定版 sudo gem install cocoapo ...
- 在element-ui的select下拉框加上滚动加载
在项目中,我们需要运用到很多来自后端返回的数据.有时是上百条,有时甚至上千条.如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此. 自然,后端就做了一 ...
- spark上的一些常用命令(一)
1. 加速跑 spark-sql --name uername --num-executors --driver-memory 8G --executor-memory 8G 2. 上传数据 建表 ) ...
- Python urllib模块学习
urlopen()与urlretrieve() 1.urlopen()方法 urllib.urlopen(url[, data[, proxies]]) :创建一个表示远程url的类文件对象,然后像本 ...