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.若未配置,敬请参阅我的博客 ...
随机推荐
- logstash 匹配日志格式
2017-05-15 12:06:17 INFO me.cinyi.imapp.push.commons.iospush - 用户ID[1000]-标识[11500], admin推送通知成功, ...
- js之点击值发生变化
点击值发生变化,应用场景,比如像阿里云那样我通常密码是以******的形式存在,我必须要点击查看,它才会以明文显示. 在实际开发中,比如以智能门锁为例,安装门锁时,有个叫密码输入框的表单,这个是选填项 ...
- 初识Qt鼠标、键盘事件及定时器和随机数
1.新建Qt Gui应用,项目名称为“myEvent”,基类名称为QWidget,类名称为Widget. 2.widget.h文件中添加以下代码,该段代码中包含了三个事件函数和一个槽函数 privat ...
- nodeJs搭建简单服务器
实现简单的例子:hello word 把第一个文件命名为server.js 在server.js里写入 var http = require("http"); http.crea ...
- Kafka集群配置
kafka_2.11-0.9.0.1.tgz 1.进入项目前的目录 cd /home/dongshanxia mkdir kafka #创建项目目录 cd kafka #进入项目目录 mkdir ka ...
- MySQL日期时间处理函数
-- MySQL日期时间处理函数SELECT NOW() FROM DUAL;-- 当前日期时间:2017-05-12 11:41:47-- 在MySQL里也存在和Oracle里类似的dual虚拟表: ...
- hive--数据仓库
1.1.1 hive是什么? Hive是基于 Hadoop 的一个数据仓库工具: 1. hive本身不提供数据存储功能,使用HDFS做数据存储: 2. hive也不分布 ...
- 针对铁定浏览器的css选择符
/***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child ...
- 在myeclipse等IDE中添加本地的dtd与schema约束文件
*针对没有网络无法正确引入dtd而使用不了提示的问题 (配置完后重启IDE) window->perferences- > 搜索xml c 找到xml catalog 右边点击 a ...
- linux 监控文件变化
介绍 有时候我们常需要当文件变化的时候便触发某些脚本操作,比如说有文件更新了就同步文件到远程机器.在实现这个操作上,主要用到两个工具,一个是rsync,一个是inotifywait .inotifyw ...