(window.webpackJsonp=window.webpackJsonp||[]).push([[225],{513:function(t,s,e){"use strict";e.r(s);var a=e(42),n=Object(a.a)({},(function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"界面风格"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#界面风格"}},[t._v("#")]),t._v(" 界面风格")]),t._v(" "),e("p",[t._v("使用过swagger-bootstrap-ui的朋友应该都知道，它是基于左右菜单式的布局方式,这和目前大部分后台管理系统有些类似，使用这种风格的原因,我想应该是更符合国人的操作习惯吧.")]),t._v(" "),e("p",[t._v("相比较swagger-ui的上下依次铺开的结构，我想这种方式更适合接口对接人员.")]),t._v(" "),e("p",[e("img",{attrs:{src:"/knife4j/images/des.png",alt:""}})]),t._v(" "),e("p",[t._v("每个接口文档主要通过"),e("strong",[t._v("文档说明")]),t._v("和"),e("strong",[t._v("在线调试")]),t._v("两个核心tab组件展开介绍,同时打开文档说明则会以多tab的方式逐次展开文档说明,来回切换查看不同接口文档说明,方便快捷.")]),t._v(" "),e("p",[t._v("如下图：")]),t._v(" "),e("p",[e("img",{attrs:{src:"/knife4j/images/mul-tab.png",alt:""}})]),t._v(" "),e("p",[e("strong",[t._v("文档说明")]),t._v("：会根据Swagger的标准JSON文件,详细的列出该接口的信息说明,主要包括：接口地址、接口类型、produces、consumes、接口参数字段说明、请求示例、响应参数说明、响应状态码、响应示例")]),t._v(" "),e("p",[e("img",{attrs:{src:"/knife4j/images/desc.png",alt:""}})]),t._v(" "),e("p",[e("strong",[t._v("在线调试")]),t._v("：开发者可以基于此文档进行接口的调试,ui会根据接口的信息自动列出请求参数、请求地址等信息,开发者只需要填写相应的字段值即可联调测试")]),t._v(" "),e("p",[e("img",{attrs:{src:"/knife4j/images/debug-online.png",alt:""}})]),t._v(" "),e("comment-comment")],1)}),[],!1,null,null,null);s.default=n.exports}}]);