以下で使用するツールをダウンロードします

1つは、Swaggerエディターをインストールする

注：Swaggerをインストールする前に、ノードツールをインストールする必要があります

ツールのインストール

1.ノード

ダウンロードリンク：http：//nodejs.cn/

必要に応じてバージョンをダウンロードできます。私のコンピューターはwin764ビットなので、ダウンロードしたファイルはnode-v10.13.0-x64.msiです（ダブルクリックしてインストールします。特別なことは何もありません。説明はありません）。

ノードツールが正常にインストールされているかどうかをテストしますか？cmdターミナルを開く

C：\ Users \ zz> node -v

v10.13.0

C：\ Users \ zz> npm -v

6.4.1

node.jsが正常にインストールされていることがわかります。

1.1http-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 \ http-server

C：\ Users \ zz \ AppData \ Roaming \ npm \ hs-> C：\ Users \ zz \ AppData \ Roaming \ npm \ node_modules \ http-server \ bin \ http-server

+ [email protected]

9.118秒で28人の寄稿者から25個のパッケージを追加しました

C：\ Users \ zz>

2.swagger

https://github.com/swagger-api/swagger-codegen

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

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

https://github.com/swagger-api

ダウンロードしたファイル：

swagger-codegen-master.zip

swagger-editor-master.zip

swagger-ui-master.zip

2.1swagger-editor-master.zipを解凍します

Swaggerエディターのルートディレクトリに移動します。

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（注：このディレクトリでこのコマンドを実行する必要があります）

http-serverを起動し、。/を提供します

上で利用可能：

http://192.168.191.1:8000

http://192.168.39.187:8000

http://127.0.0.1:8000

CTRL-Cを押してサーバーを停止します

ブラウザ経由でアクセスします：http：// localhost：8000 / または http://127.0.0.1:8000 で、左側に編集ボックス、右側にプレビューインターフェイスを備えたSwagger編集の編集インターフェイスに入ります。

PS：

http-serverを介してswagger-editorを実行したくない場合は、tomcatを介して実行できます。

最初にswagger-editorディレクトリをtomcatルートディレクトリのwebappsにコピーし、次にtomcatを実行してlocalhost：8080 / swagger-editorにアクセスします。

2つ、swagger-ui環境の構築

1.新しいworksフォルダ（任意のディレクトリ）を作成し、worksディレクトリに入り、初期化コマンドを実行します。npminit、次のメッセージが表示されます。好きな場所に書き込むことができます。または、書き込む必要はありません。

package.jsonファイルがworksディレクトリに生成されます。

2.swagger-ui-master.zipを解凍します

上のスクリーンショットのdistディレクトリをD：\ Tools \ API_Editor_Tools \ worksディレクトリにコピーします。

3.Expressをインストールします

D：\ Tools \ API_Editor_Tools \ works> npm install express

npmWARNレジストリhttps://registry.npmjs.org/の予期しない警告：その他の警告ETIMEDOUT：httpsへのリクエスト：

// Registry.npmjs.org/bytesが失敗しました、理由：接続ETIMEDOUT 104.16.19.35:443

npmWARNレジストリ再検証中のリクエストエラーのため、https： //registry.npmjs.org/からの古いパッケージデータを使用しています。

[..................] \ loadDep：statuses：sill [email protected]インストール可能なステータスの確認

Expressを半日インストールしますが、まだインストールしていません（上記の方法では、インストールは成功しました!!）、次の方法で、リソースを取得するミラーサーバーを指定します。

npmのインストールが遅いという問題を解決します:(ミラーを変更する次の方法を使用しましたが、それでもインストールが成功せず、ミラーを変更せずに何度もインストールし、インストールは成功しました）

NPM（Node.jsパッケージ管理ツール）を使用して依存関係をインストールする場合、速度が非常に遅くなります。Expressをインストールするために、コマンドの実行後2時間以上インストールが成功しませんでした。結局、インストールはしかできませんでした。キャンセルされます。作成者の20M帯域幅が私のネットワークの理由ではないはずです。後で、最適な解決策を見つけるためにインターネットを長い間検索しました。インストール中に、リソースを取得するミラーサーバーを手動で指定できます。中国にあるAlibabaのミラーサーバー。コマンドは次のとおりです。

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

npmnoticeはpackage-lock.jsonとしてロックファイルを作成しました。このファイルをコミットする必要があります。

npm [email protected]リポジトリフィールドがありません。

+ [email protected]

36人の寄稿者から48個のパッケージを追加し、1.767秒で121個のパッケージを監査しました

脆弱性が0件見つかりました

D：\ Tools \ API_Editor_Tools \ works>

Expressをインストールすると、次の情報が追加されます。

4.index.jsを作成します

作業ディレクトリに新しい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ポートであるため、競合がある場合は、自分で変更してください。