安装nodejs
本机已安装nodejs略过
安装http-server
Chaim:~ Chaim$ npm install -g http-server
安装swagger-editor
Swagger Editor允许您在浏览器中编辑YAML中的Swagger API规范，并实时预览文档。然后可以生成有效的Swagger JSON描述并与完整的Swagger工具（代码生成，文档等）一起使用。
github下载：https://github.com/swagger-api/swagger-editor
启动swagger-editor
进入下载目录，执行：
Chaim:swagger-editor Chaim$ http-server swagger-editor
Starting up http-server, serving swagger-editor
Available on:
http://127.0.0.1:8080
http://192.168.3.29:8080
http://192.168.54.1:8080
http://192.168.1.1:8080
Hit CTRL-C to stop the server
缺省在8080端口监听，也可以如下改变端口
Chaim:swagger-editor Chaim$ http-server -p 2019 swagger-editor
浏览
按照网上方法在Chrome中打开“http://127.0.0.1:2019” 出现404错误
[Fri May 10 2019 13:00:29 GMT+0800 (CST)] "GET /" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36"
[Fri May 10 2019 13:00:29 GMT+0800 (CST)] "GET /" Error (404): "Not found"
查看github上说明，直接“npm start”即可
Chaim:swagger-editor Chaim$ npm start
会下载安装一些内容，自动打开浏览器"http://127.0.0.1:3001" ，成功显示SwaggerEditor界面
Starting up http-server, serving ./
Available on:
http://127.0.0.1:3001
http://192.168.3.29:3001
http://192.168.54.1:3001
http://192.168.1.1:3001
Hit CTRL-C to stop the server
[Fri May 10 2019 13:12:15 GMT+0800 (CST)] "GET /" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36"
[Fri May 10 2019 13:12:16 GMT+0800 (CST)] "GET /dist/swagger-editor.css" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36"
[Fri May 10 2019 13:12:16 GMT+0800 (CST)] "GET /dist/swagger-editor-bundle.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36"
[Fri May 10 2019 13:12:16 GMT+0800 (CST)] "GET /dist/swagger-editor-standalone-preset.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36"
[Fri May 10 2019 13:12:18 GMT+0800 (CST)] "GET /dist/favicon-32x32.png" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36"
安装swagger-ui
github下载：https://github.com/swagger-api/swagger-ui
dist
主要就在这个dist目录下，可以直接打开index.html查看。
测试
新建项目
Chaim:swagger Chaim$ mkdir swagger-test
Chaim:swagger Chaim$ cd swagger-test/
Chaim:swagger-test Chaim$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (swagger-test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/Chaim/Documents/workspace/swagger/swagger-test/package.json:
{
"name": "swagger-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
拷贝swagger-ui中dist目录
安装express
Chaim:swagger-test Chaim$ npm install express
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN swagger-test@1.0.0 No description
npm WARN swagger-test@1.0.0 No repository field.
+ express@4.16.4
added 48 packages from 36 contributors and audited 121 packages in 3.173s
found 0 vulnerabilities
创建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!');
});
启动，浏览
Chaim:swagger-test Chaim$ node index.js
Example app listening on port 3000!
浏览器打开“http://127.0.0.1:3000” ，会显示“Hello World!”
只有打开"http://127.0.0.1:3000/root/index.html" 才会显示Swagger ui界面，如下：
image.png
网友评论