技术分享

本页面只读。您可以查看源文件，但不能更改它。如果您觉得这是系统错误，请联系管理员。
<h2>npm安装模块</h2><ul class=" list-paddingleft-2"><li><p>【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录；</p></li><li><p>【npm install -g xxx】利用npm安装全局模块xxx；</p></li></ul><p><strong>本地安装时将模块写入package.json中：</strong></p><ul class=" list-paddingleft-2"><li><p>【npm install xxx】安装但不写入package.json；</p></li><li><p>【npm install xxx –save】 &nbsp;安装并写入package.json的”dependencies”中；</p></li><li><p>【npm install xxx –save-dev】安装并写入package.json的”devDependencies”中。</p></li></ul><h2><a></a>npm 删除模块</h2><p>【npm uninstall xxx】删除xxx模块； <br/>【npm uninstall -g xxx】删除全局模块xxx；</p><p><br/></p><p><br/></p><p>npm install swagger-editor(等了好一会)</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; npm install http-server</p><p style="text-align:left"><span style="font-size:24px">一、swagger-editor环境搭建</span></p><p style="text-align:left"><span style="font-family:&#39;KaiTi_GB2312&#39;;font-size:14px">提示<span style="color:#ff0000">（重要）</span>：安装swagger前先去nodejs官网下载进行nodejs的安装，打开cmd命令测试安装结果，现在版本安装nodejs后node和npm会一并安装。安装后测试，如下图（<span style="color:#ff6666">若无法访问国外网站，本文所用到的安装文件在文章结尾处会统一上传</span>）：</span></p><p style="text-align:left"><span style="font-size:18px"><img src="https://img-blog.csdn.net/20161210172759908?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcm9uMDMxMjk1OTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""/><br/></span></p><p style="text-align:left"><span style="font-size:18px">1.打开swagger-editor官网，如果无法访问直接使用如下链接进行下载：<a href="https://github.com/swagger-api/swagger-editor/releases/download/v2.10.4/swagger-editor.zip" target="_blank"><span style="color:#ff0000">GitHub:Swagger-editor</span></a><span style="font-size:16px;font-family:&#39;宋体&#39;">，若github也无法访问详见最后文件下载地址。</span></span></p><p style="text-align:left"><span style="font-size:18px">2.下载后解压后运行如下命令 &nbsp;npm install -g http-server，这是指安装http-server服务器，-g是指全局安装，在安装nodejs时可指定全局位置，具体可以去网上搜索看如何指定位置，不指定也没影响，这里不详细说明</span><span style="font-size:18px">。</span></p><p style="text-align:left"><span style="font-size:18px">3.然后运行如下命令，启动该项目http-server swagger-editor，默认为8080端口 ，若想更换端口则使用如下命令 http-server –p 2008 swagger-editor，启动成功如下：</span></p><p style="text-align:left"><span style="font-size:18px"><span style="white-space:pre"><img src="https://img-blog.csdn.net/20161210173653918?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcm9uMDMxMjk1OTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""/></span></span></p><p style="text-align:left"><span style="font-size:18px"><span style="white-space:pre">4</span>.使用浏览器访问结果</span></p><p style="text-align:left"><span style="font-size:18px"><span style="white-space:pre"><img src="https://img-blog.csdn.net/20161210174122830?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcm9uMDMxMjk1OTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""/></span></span></p><p style="text-align:left"><span style="font-size:18px"><span style="white-space:pre">5</span>.swagger-editor主要是编写api接口文档，但需要配合swagger-ui来查看，里面的代码格式为yaml，不用慌，可能你需要学着看官方文档进行编写，熟练就好了，耽误不了多少时间（工欲善其事必先利其器），努力吧。</span></p><p style="text-align:left"><span style="font-size:18px"><br/></span></p><p style="text-align:left"><span style="font-size:24px">二、swagger-ui官方版(nodejs)环境搭建</span></p><p style="text-align:left"><span style="font-size:18px">1.同样的进入官网下载ui项目，项目在github中的位置：</span><span style="font-size:18px"><a href="https://github.com/swagger-api/swagger-ui" target="_blank"><span style="color:#ff0000">GitHub:Swagger-ui</span></a>，<span style="font-family:&#39;宋体&#39;;font-size:16px">若github也无法访问详见最后文件下载地址。</span></span></p><p style="text-align:left"><span style="font-size:18px">2.下载到本地进行解压，首先看目录结构你可能会懵逼，不要紧，主体部分都放入dist目录下，可以进入dist目录打开index.html看下界面，可以发现基本的模式还是有了，只不过是静态的文件，接下来进行nodejs配置，使其可以进行端口访问，直接使用node命令访问index.js没有反应，英语稍微好点点的同学可以看下官网的配置步骤，接下来手动配置ui环境。</span></p><p style="text-align:left"><span style="font-size:18px">3.下面进行项目的配置，新建node_app文件夹，初始化node，输入好信息后会自动创建package.json文件，如下图：</span></p><p style="text-align:left"><span style="font-size:18px"><span style="white-space:pre"><img src="https://img-blog.csdn.net/20161210175714906?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcm9uMDMxMjk1OTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""/></span></span></p><p style="text-align:left"><span style="font-size:18px">初始化命令npm init，出现如下信息，填的地方可以随便写，也可以不写</span></p><p style="text-align:left"><span style="font-size:18px"><span style="white-space:pre"><img src="https://img-blog.csdn.net/20161210175829025?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcm9uMDMxMjk1OTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""/></span></span></p><p style="text-align:left"><span style="font-size:18px"><span style="white-space:pre">4</span>.将下载的swagger-ui中的dist文件夹拷贝到node_app下：</span></p><p style="text-align:left"><span style="font-size:18px"><img src="https://img-blog.csdn.net/20161210180019543?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcm9uMDMxMjk1OTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""/></span></p><p style="text-align:left"><span style="font-size:18px">5.安装express，如果出错可以去nodejs安装目录进行安装</span></p><p style="text-align:left"><span style="font-size:18px"><span style="white-space:pre"><img src="https://img-blog.csdn.net/20161210180143280?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcm9uMDMxMjk1OTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""/></span></span></p><p style="text-align:left"><span style="font-size:18px"><span style="white-space:pre">6</span>.</span><span style="font-size:18px">创建index.js，并将如下代码写入该js中</span></p><p style="text-align:left"><span style="font-size:18px"><span style="white-space:pre"><img src="https://img-blog.csdn.net/20161210180313237?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcm9uMDMxMjk1OTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""/></span></span></p><p style="text-align:left"><span style="font-size:18px"><span style="white-space:pre"></span></span></p><p><strong>[javascript]</strong> <a href="https://blog.csdn.net/ron03129596/article/details/53559803#" title="view plain">view plain</a> <a href="https://blog.csdn.net/ron03129596/article/details/53559803#" title="copy">copy</a> </p><ol class=" list-paddingleft-2"><li><p>var&nbsp;express&nbsp;=&nbsp;require(&#39;express&#39;);&nbsp;&nbsp;</p></li><li><p>var&nbsp;app&nbsp;=&nbsp;express();&nbsp;&nbsp;</p></li><li><p>app.use(&#39;/root&#39;,&nbsp;express.static(&#39;dist&#39;));&nbsp;&nbsp;</p></li><li><p>app.get(&#39;/&#39;,&nbsp;function&nbsp;(req,&nbsp;res)&nbsp;{&nbsp;&nbsp;</p></li><li><p>&nbsp;&nbsp;res.send(&#39;Hello&nbsp;World!&#39;);&nbsp;&nbsp;</p></li><li><p>});&nbsp;&nbsp;</p></li><li><p>&nbsp;&nbsp;</p></li><li><p>app.listen(3000,&nbsp;function&nbsp;()&nbsp;{&nbsp;&nbsp;</p></li><li><p>&nbsp;&nbsp;console.log(&#39;Example&nbsp;app&nbsp;listening&nbsp;on&nbsp;port&nbsp;3000!&#39;);&nbsp;&nbsp;</p></li><li><p>});&nbsp;&nbsp;</p></li></ol><p><br/> </p><p style="text-align:left"><span style="font-size:18px">7.然后启动，并运行查看，如上代码为3000端口，如有冲突请自行修改</span></p><p style="text-align:left"><span style="font-size:18px"><span style="white-space:pre"><img src="https://img-blog.csdn.net/20161210180506707?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcm9uMDMxMjk1OTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""/></span></span></p><p style="text-align:left"><span style="font-size:18px"><span style="white-space:pre"><span style="white-space:pre"><img src="https://img-blog.csdn.net/20161210180553942?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcm9uMDMxMjk1OTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""/></span></span></span></p><p style="text-align:left"><span style="font-size:18px"><span style="white-space:pre"><span style="white-space:pre">8</span>.</span></span><span style="white-space:pre;font-size:18px">有些同学可能会懵逼：这个Uber API怎么来的呢？下面我再给您解释下这个Uber &nbsp;API的来路，编辑index.html</span></p><p style="text-align:left"><span style="white-space:pre;font-size:18px">文件</span><span style="font-size:18px;white-space:pre">你会发现有一段url引用了swagger官网的jsonApi文件，这里我们将这个json文件下载下来放到和index.html平级</span></p><p style="text-align:left"><span style="font-size:18px;white-space:pre">的目录，</span><span style="font-size:18px;white-space:pre">这里呢我直接访问我已经安装好的swagger-edtior进行文件的下载</span></p><p style="text-align:left"><span style="font-size:18px;white-space:pre"><span style="white-space:pre"><img src="https://img-blog.csdn.net/20161210180737209?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcm9uMDMxMjk1OTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""/></span></span></p><p style="text-align:left"><span style="font-size:18px;white-space:pre"><span style="white-space:pre"><span style="font-size:18px;white-space:pre">然后存放到如下目录，并修改index.html</span><br/></span></span></p><p style="text-align:left"><span style="font-size:18px;white-space:pre"><img src="https://img-blog.csdn.net/20161210180919243?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcm9uMDMxMjk1OTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""/></span><span style="font-size:18px;white-space:pre"><span style="white-space:pre"><span style="white-space:pre"><img src="https://img-blog.csdn.net/20161210180842773?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcm9uMDMxMjk1OTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""/></span></span></span></p><p style="text-align:left"><span style="font-size:18px;white-space:pre"><span style="white-space:pre"><span style="white-space:pre"></span></span></span></p><p>那么这个意思呢就是指我们在swagger-editor中编写好了api文档，我们再放到ui中去预览，那么到此swagger-editor</p><p>和swagger-ui已经部署完毕了，我也是一头雾水过来的，这位<a href="http://www.jianshu.com/p/d6626e6bd72c" target="_blank">简书朋友</a>给了我很大的帮助。</p><p style="text-align:left"><span style="font-size:18px"><br/></span></p><p style="text-align:left"><span style="font-size:24px">三、swagger-ui扩展版(tomcat)环境搭建</span></p><p style="text-align:left"><span style="font-size:18px">1.在SosoApi<a href="http://www.sosoapi.com/" target="_blank">下载Swagger-ui扩展版</a>，那SosoApi本身自己可以管理项目，编写API文档</span></p><p><br/></p>
技术分享

站点工具

页面工具
