MAC下 Node.js +Swagger Editor + Swagger UI 环境搭建

基于MAC的搭建教程：

 

安装node.js

下载node.js最新版 
https://nodejs.org/en/download/ 

 

 

点击 安装器 node-v8.12.0.pkg 开始安装，我是一路下一步，安装完成 

 

 

node.js安装后验证

 npm -v 
 node -v 

 

下载Swagger-Editor

https://github.com/swagger-api/swagger-editor/releases

复制最新 release下载地址 

 

 

 

 

如果在终端下载 ：

wget https://github.com/swagger-api/swagger-editor/archive/v3.6.11.tar.gz

 

自己弄一个目录， 下载完成copy到自己的目录，后解压

tar -zxvf v3.6.11.tar.gz

 

 

 

安装node.js HttpServer

npm install -g http-server 安装完成如下图

 

 

 

 

启动Swagger-Editor项目

启动命令介绍：

http-server swagger-editor 以8080端口启动项目 
http-server –p 8082 swagger-editor 指定端口启动项目

 

比如我使用如下命令启动：

http-server -p 8081 swagger-editor-3.6.11

 

 

 

浏览器访问 

 

 

 

 

下载swagger-ui

 

可以下载最新的release

https://github.com/swagger-api/swagger-ui/releases

 

 

也可以直接 git clone 
git clone https://github.com/swagger-api/swagger-ui.git

 

 

安装 express

创建一个目录node_app 
初始化 node ，创建package.json文件（）

 

执行命令：mkdir node_app 

执行命令：cd node_ap

执行命令：npm init

 

// 然后会出现这些，自己看情况填，我什么都没填，直接全部回车跳过。
name: (node_app) node_app
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

 

 

安装 express 
执行命令：npm install express --save

 

创建 index.js

执行命令：vim index.js 

 

把下面代码贴入 index.js 中:

 

var express = require('express');
var app = express();

app.listen(8005, function () {
console.log('Example app listening on port 8005!');
});

 

 

在 node_app 中创建空目录 public

执行命令：mkdir public
执行命令：cd public

 

修改路由

执行命令：vim ../index.js
在文件第三行插入下面这句话app.use('/static', express.static('public'));

 

把下载好的Swagger UI 文件中dist 目录下的文件全部复制到 public 文件夹下。

 

 

 

如何渲染自定义的json文件或者yaml文件：

修改index.html文档文件

比如我自定义了一个test.yaml，位置在public/data/下面，

则将public目录下的index.html中的javascript代码中的url修改为

url: "/static/data/test.yaml",

 

 

切换到node_app目录，执行命令：node index.js （重启node服务器）

浏览器打开

http://localhost:8005/static/#/

http://localhost:8005/static/

均可访问

 

 

 

 

 

 

参考资料：

https://blog.csdn.net/ruglcc/article/details/76166200

http://www.cnblogs.com/jackyu126/p/8376052.html

 

 

学习文档编写的语法：

参考  https://www.gitbook.com/book/huangwenchao/swagger/details