Merge branch 'master' of https://github.com/YMFE/yapi

README.md

@@ -32,10 +32,20 @@ YApi 是<strong>高效</strong>、<strong>易用</strong>、<strong>功能强大
 
     npm install -g yapi-cli --registry https://registry.npm.taobao.org
     yapi server 
+    
+#### 服务管理
+利用pm2方便服务管理维护。
+
+    npm install pm2 -g  //安装pm2
+    cd  {项目目录}
+    pm2 start "vendors/server/app.js" --name yapi //pm2管理yapi服务
+    pm2 info yapi //查看服务信息
+    pm2 stop yapi //停止服务
+    pm2 restart yapi //重启服务
 
 #### 升级
 升级项目版本是非常容易的，并且不会影响已有的项目数据，只会同步 vendors 目录下的源码文件。
-
+    
     cd  {项目目录}
     yapi ls //查看版本号列表
     yapi update //更新到最新版本
@@ -66,6 +76,7 @@ YApi 是<strong>高效</strong>、<strong>易用</strong>、<strong>功能强大
 * [docker-yapi](https://github.com/Ryan-Miao/docker-yapi)
 * [docker-compose一键部署yapi](https://github.com/jinfeijie/yapi)
 * [docker-YApi: 更易用的 YApi 镜像](https://github.com/fjc0k/docker-YApi)
+* [使用DockerCompose构建部署Yapi](https://github.com/MyHerux/daily-code/blob/master/Program/%E5%B7%A5%E5%85%B7%E7%AF%87/Yapi/%E4%BD%BF%E7%94%A8DockerCompose%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2Yapi.md)
 
 ### YApi 一些工具
 * [mysql服务http工具,可配合做自动化测试](https://github.com/hellosean1025/http-mysql-server)

client/components/Postman/Postman.js

@@ -133,10 +133,18 @@ export default class Run extends Component {
       envModalVisible: false,
       test_res_header: null,
       test_res_body: null,
+      autoPreviewHTML: true,
       ...this.props.data
     };
   }
 
+  get testResponseBodyIsHTML() {
+    const hd = this.state.test_res_header
+    return hd != null
+      && typeof hd === 'object'
+      && String(hd['Content-Type'] || hd['content-type']).indexOf('text/html') !== -1
+  }
+
   checkInterfaceData(data) {
     if (!data || typeof data !== 'object' || !data._id) {
       return false;
@@ -927,14 +935,25 @@ export default class Run extends Component {
                 <div className="body">
                   <div className="container-title">
                     <h4>Body</h4>
+                    <Checkbox
+                      checked={this.state.autoPreviewHTML}
+                      onChange={e => this.setState({ autoPreviewHTML: e.target.checked })}>
+                      <span>自动预览HTML</span>
+                    </Checkbox>
                   </div>
-                  <AceEditor
-                    readOnly={true}
-                    className="pretty-editor-body"
-                    data={this.state.test_res_body}
-                    mode={handleContentType(this.state.test_res_header)}
-                    // mode="html"
-                  />
+                  {
+                    this.state.autoPreviewHTML && this.testResponseBodyIsHTML
+                      ? <iframe
+                          className="pretty-editor-body"
+                          srcDoc={this.state.test_res_body}
+                        />
+                      : <AceEditor
+                          readOnly={true}
+                          className="pretty-editor-body"
+                          data={this.state.test_res_body}
+                          mode={handleContentType(this.state.test_res_header)}
+                      />
+                  }
                 </div>
               </div>
             </Spin>

client/components/Postman/Postman.scss

@@ -15,6 +15,7 @@
     border: 1px solid #d9d9d9;
     border-radius: 4px;
     min-height: 300px;
+    min-width: 100%;
   }
   .pretty-editor-header {
     border: 1px solid #d9d9d9;
@@ -58,10 +59,19 @@
     }
 
     .header, .body{
-      padding-left: 10px;
       margin-bottom: 10px;
     }
 
+    .header {
+      padding-left: 10px;
+      padding-right: 5px;
+    }
+
+    .body {
+      padding-left: 5px;
+      padding-right: 10px;
+    }
+
     .response-test{
       min-height: 400px;
     }
@@ -111,6 +121,8 @@
       max-width: 400px;
     }
     .container-title {
+      display: flex;
+      justify-content: space-between;
       padding: .08rem 0;
     }
     .resizer {
@@ -124,7 +136,7 @@
         background-color: #acaaaa;
         opacity: .8;
         position: absolute;
-        left: 16px;
+        left: 50%;
       }
     }
     // res body 无返回json时显示text信息