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

安装swaggerui(官方文档)

  • git clone https://github.com/swagger-api/swagger-ui.git
  • cd swagger-ui
  • npm run dev
  • Wait a bit
  • Open http://localhost:3200/

摘抄

基于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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值