一、安装 swagger editor
 
说明:安装swagger前需要安装node工具
 
工具安装
1. node
下载地址:http://nodejs.cn/
 

 
根据自己的需要下载版本即可,本人电脑是: win7 64bit,所以下载后的文件是:node-v10.13.0-x64.msi (双击安装即可,没啥特殊的,不再说明)
 

 
测试node工具是否安装成功?打开cmd终端
 
C:\Users\zz>node -v
v10.13.0
 
C:\Users\zz>npm -v
6.4.1
 
可以看到node.js安装成功!
 
1.1 安装http-server
 
使用node.js安装http-server模块,主要通过http-server模块来启用http服务,运行swagger-editor。通过命令: 
npm install -g http-server
 
安装记录:
C:\Users\zz>npm install -g http-server
C:\Users\zz\AppData\Roaming\npm\http-server -> C:\Users\zz\AppData\Roaming\npm\node_modules\http-server\bin\ht
tp-server
C:\Users\zz\AppData\Roaming\npm\hs -> C:\Users\zz\AppData\Roaming\npm\node_modules\http-server\bin\http-server
 
+ http-server@0.11.1
added 25 packages from 28 contributors in 9.118s
 
C:\Users\zz>
 
 
2.swagger
 
下载后的文件:
swagger-codegen-master.zip
swagger-editor-master.zip
swagger-ui-master.zip
 
2.1 解压 swagger-editor-master.zip

进入到 swagger editor 根目录:
 
C:\Users\zz>cd /d D:\Tools\API_Editor_Tools\tools\swagger\swagger-editor-master\swagger-editor-master
 
运行: http-server -p 8000
 
说明:-p的作用是指定端口,后面的8000就是我们指定的端口,访问localhost:8000就可以进入swagger-edit就可以进入编辑界面了,左边是编辑框,右边是预览界面
 
D:\Tools\API_Editor_Tools\tools\swagger\swagger-editor-master\swagger-editor-master>http-server -p 8000   (注意:需要到该目录下执行此命令)
Starting up http-server, serving ./
Available on:
Hit CTRL-C to stop the server
 
通过浏览器访问:http://localhost:8000/ 或 http://127.0.0.1:8000 即可进入 swagger edit的编辑界面了,左边是编辑框,右边是预览界面
 

 
PS:
如果不愿用通过http-server来运行swagger-editor,可以通过tomcat来运行:
首先把swagger-editor目录复制到tomcat根目录的webapps,然后运行tomcat,访问localhost:8080/swagger-editor就可以了
 
二、swagger-ui 环境搭建
 
1. 新建works文件夹,然后进入到 works目录,执行初始化命令:npm init ,出现如下信息,填的地方可以随便写,也可以不写
 

works目录下生成了一个package.json文件:
 

 
2. 解压swagger-ui-master.zip
 

 
将上截图中的 dist 目录复制到 D:\Tools\API_Editor_Tools\works 目录下:
 

 
 
3. 安装express
 
D:\Tools\API_Editor_Tools\works>npm install express
npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ETIMEDOUT: request to https:
//registry.npmjs.org/bytes failed, reason: connect ETIMEDOUT 104.16.19.35:443
npm WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
[..................] \ loadDep:statuses: sill resolveWithNewModule ms@2.0.0 checking installable status
 
安装express半天,还没有安装上,按照如下方法,指定镜像服务器获取资源:
 
解决npm install慢的问题: (我使用下面换镜像的方法,依然没有安装成功,后来多次安装,不换镜像,又安装成功了)
 
使用NPM(Node.js包管理工具)安装依赖时速度特别慢,为了安装Express,执行命令后两个多小时都没安装成功,最后只能取消安装,笔者20M带宽,应该不是我网络的原因,后来在网上找了好久才找到一种最佳解决办法,在安装时可以手动指定从哪个镜像服务器获取资源,我们可以使用阿里巴巴在国内的镜像服务器,命令如下:
 
npm install -gd express --registry=http://registry.npm.taobao.org
 
只需要使用–registry参数指定镜像服务器地址,为了避免每次安装都需要--registry参数,可以使用如下命令进行永久设置(个人建议,不要永久设置):
 
npm config set registry http://registry.npm.taobao.org
 
换了国内镜像,安装速度就很快了。
 
最后安装express成功记录:
 
C:\Users\zz>cd /d D:\Tools\API_Editor_Tools\works
 
D:\Tools\API_Editor_Tools\works>npm install express
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN note_app@1.0.0 No repository field.
 
+ express@4.16.4
added 48 packages from 36 contributors and audited 121 packages in 1.767s
found 0 vulnerabilities
 
D:\Tools\API_Editor_Tools\works>
 
安装express后,多了如下信息:

4. 创建index.js
 
work目录下 新建 index.js 文件,index.js文件内容如下:
 
var express = require('express');
var app = express();
app.use('/root', express.static('dist'));
app.get('/', function (req, res) {
  res.send('Hello World!');
});
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});
 
 
上述/root也可以换成其他字串
 
5.然后启动,并运行查看,如上代码为3000端口,如有冲突请自行修改
 
D:\Tools\API_Editor_Tools\works>node index.js   // 启动命令
Example app listening on port 3000!
 
 

 
 
在线的官方的Demo已经在本地搭建好了。
 
 
改造之旅
 
a. 希望替换官方的API
 
通过 swagger editor 导出json格式的文件如:swagger.json (这是我们需要的最重要的产物)
 
可以参考官方的文档,编写正确的符合格式的Spec。OpenAPI-Specification(https://github.com/OAI/OpenAPI-Specification)
 
 
配置json文件
 
1) 将 swagger editor 工具导出的 swagger.json 文件拷贝到 D:\Tools\API_Editor_Tools\works\dist 目录下:
 

 
 
2) 打开 D:\Tools\API_Editor_Tools\works\dist\index.html 文件,修改如下:
 

 
上面截图提到的index.js是上面提到的 D:\Tools\API_Editor_Tools\works>node index.js 这个文件
 

重启node index.js,然后重新打开浏览器,可以看到自己根据服务端API编写的API文档。
 
到此swagger-editor 和swagger-ui已经部署完毕了!!
 
参考:
 
https://www.cnblogs.com/shamo89/p/7680941.html    功能强大的swagger-editor的介绍与使用

swagger环境搭建的更多相关文章

  1. 基于Maven的Springboot+Mybatis+Druid+Swagger2+mybatis-generator框架环境搭建

    基于Maven的Springboot+Mybatis+Druid+Swagger2+mybatis-generator框架环境搭建 前言 最近做回后台开发,重新抓起以前学过的SSM(Spring+Sp ...

  2. 手把手教你 Apache DolphinScheduler 本地开发环境搭建 | 中英文视频教程

    点击上方 蓝字关注我们 最近,一些小伙伴反馈对小海豚的本地开发环境搭建过程不太了解,这不就有活跃的贡献者送来新鲜的视频教程!在此感谢@Tianqi-Dotes 的细致讲解 贡献者还贴心地录制了中英文两 ...

  3. .NET Core系列 : 1、.NET Core 环境搭建和命令行CLI入门

    2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高, ...

  4. Azure Service Fabric 开发环境搭建

    微服务体系结构是一种将服务器应用程序构建为一组小型服务的方法,每个服务都按自己的进程运行,并通过 HTTP 和 WebSocket 等协议相互通信.每个微服务都在特定的界定上下文(每服务)中实现特定的 ...

  5. rnandroid环境搭建

    react-native 环境搭建具体步骤这个大家已经玩烂了,这个主要是记录下来自己做win7系统遇到的坑 1.com.android.ddmlib.installexception 遇到这个问题,在 ...

  6. python开发环境搭建

    虽然网上有很多python开发环境搭建的文章,不过重复造轮子还是要的,记录一下过程,方便自己以后配置,也方便正在学习中的同事配置他们的环境. 1.准备好安装包 1)上python官网下载python运 ...

  7. springMVC初探--环境搭建和第一个HelloWorld简单项目

    注:此篇为学习springMVC时,做的笔记整理. MVC框架要做哪些事情? a,将url映射到java类,或者java类的方法上 b,封装用户提交的数据 c,处理请求->调用相关的业务处理—& ...

  8. 【定有惊喜】android程序员如何做自己的API接口?php与android的良好交互(附环境搭建),让前端数据动起来~

    一.写在前面 web开发有前端和后端之分,其实android还是有前端和后端之分.android开发就相当于手机app的前端,一般都是php+android或者jsp+android开发.androi ...

  9. Nexus(一)环境搭建

    昨天,成功搭建了自己的 Maven 环境(详见:Maven(一)环境搭建),今天就来研究和探讨下 Nexus 的搭建! 使用背景: 安装环境:Windows 10 -64位 JDK版本:1.7 Mav ...

随机推荐

  1. Spring中初始化bean和销毁bean的时候执行某个方法的详解

    关于在spring  容器初始化 bean 和销毁前所做的操作定义方式有三种: 第一种:通过注解@PostConstruct  和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作 ...

  2. java线程安全问题之静态变量、实例变量、局部变量

    java多线程编程中,存在很多线程安全问题,至于什么是线程安全呢,给出一个通俗易懂的概念还是蛮难的,如同<java并发编程实践>中所说: 写道 给线程安全下定义比较困难.存在很多种定义,如 ...

  3. ubuntu 16.04使用软件中心升级软件后桌面显示空白

    转载:http://www.jb51.net/os/Ubuntu/472560.html 每次在ubuntu Software里进行Updates后(或者直接关机后),重启电脑后,桌面显示空白 解决办 ...

  4. Xcode: Show Bounds Rectangles for UIView in Interface Builder

    选中一个 Xib 文件,然后依次选择菜单中的 Editor - Canvas - Show Bounds Rectangles

  5. 管道符和作业控制 shell变量 环境变量配置文件

    8.6 管道符和作业控制 8.7/8.8 shell变量 8.9 环境变量配置文件 管道符和作业控制 管道符:表示把一个文件的输出内容传送到后面的命令 grep  用来过滤指定关键词的命令 “|” 为 ...

  6. ClangFormat代码格式化

    下载地址:https://github.com/travisjeffery/ClangFormat-Xcode 配合Xcode自带的格式化操作,就很不错了 选中内容组合操作: 第一步:ClangFor ...

  7. UNIX环境编程学习笔记(1):——出错处理errno

    lienhua342014 年 8 月 24 日 1. errno变量 文件 <errno.h> 中定义了符号 errno 以及可以赋予它的各种常量,这些常量都是以字符 E 开头.例如,若 ...

  8. perforce使用技巧

    如果用其他编辑器打开一个在perforce上的文件, 只需要在notepad++ (或者其他)上右键选择 然后到perforce的workspace里Ctrl + V 即可定位到该文件. 再使用Ctr ...

  9. jquery与php的HTML转义与反转义

    1.jquery (1)Html转义 var tmp = '<a href="https://www.baidu.com/">连接</a>'; var tm ...

  10. SpringMVC使用@ResponseBody时返回json的日期格式及可能产生的问题

    http://blog.csdn.net/z69183787/article/details/40375831 遇到的问题: 1 条件: 1.1.表单里有两个时间参数,都是作为隐藏项随表单一起提交: ...