Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev

README.md

@@ -1,7 +1,7 @@
 ## YApi  
 
 ### 一、平台介绍
-![avatar](http://ov2tuszjv.bkt.clouddn.com/yapi-flow-base.png)
+![avatar](yapi-base-flow.jpg)
 
 <p style='text-indent:2em;line-height:1.8em'>YApi是<strong>高效</strong>、<strong>易用</strong>、<strong>功能强大</strong>的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API，YApi还为用户提供了优秀的交互体验，开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的管理。</p>
 

client/containers/Project/Interface/InterfaceList/InterfaceEditForm.js

@@ -51,22 +51,28 @@ class InterfaceEditForm extends Component {
       path: '',
       status: 'undone',
       method: 'get',
+
       req_params: [],
+
       req_query: [{
         name: '',
         desc: '',
         required: "1"
       }],
-      req_body_type: 'form',
+      
       req_headers: [{
         name: '',
         value: '', required: "1"
       }],
+
+      req_body_type: 'form',
       req_body_form: [{
         name: '',
         type: 'text',
         required: '1'
       }],
+      req_body_other: '',
+
       res_body_type: 'json',
       res_body: '',
       desc: '',
@@ -83,7 +89,7 @@ class InterfaceEditForm extends Component {
       if (!err) {
         if (values.res_body_type === 'json') values.res_body = this.state.res_body;
         values.req_params = this.state.req_params;
-        values.req_body_json = this.state.res_body;
+        values.req_body_other = this.state.req_body_other;
         values.method = this.state.method;
         let isfile = false, isHavaContentType = false;
         if (values.req_body_type === 'form') {
@@ -105,6 +111,19 @@ class InterfaceEditForm extends Component {
               value: isfile ? 'multipart/form-data' : 'application/x-www-form-urlencoded'
             })
           }
+        }else if(values.req_body_type === 'json'){
+          values.req_headers.map((item) => {
+            if (item.name === 'Content-Type') {
+              item.value = 'application/json'
+              isHavaContentType = true;
+            }
+          })
+          if(isHavaContentType === false){
+            values.req_headers.unshift({
+              name: 'Content-Type',
+              value: 'application/json'
+            })
+          }
         }
         values.req_headers = values.req_headers ?values.req_headers.filter((item) => item.name !== '') : []
         values.req_body_form = values.req_body_form ?  values.req_body_form.filter((item) => item.name !== ''): []
@@ -123,11 +142,11 @@ class InterfaceEditForm extends Component {
     let that = this, mockPreview, resBodyEditor;
     mockEditor({
       container: 'req_body_json',
-      data: that.state.req_body_json,
+      data: that.state.req_body_other,
       onChange: function (d) {
         if (d.format !== true) return false;
         that.setState({
-          req_body_json: d.text
+          req_body_other: d.text
         })
       }
     })
@@ -374,7 +393,7 @@ class InterfaceEditForm extends Component {
               })}
             </Select>
 
-            <Tooltip title="接口基本路径，可在项目配置里修改">
+            <Tooltip title="接口基本路径，可在项目配置里修改" style={{display: this.props.basepath == '' ? 'block': 'none'}}>
               <Input disabled value={this.props.basepath} readOnly onChange={() => { }} style={{ width: '25%' }} />
             </Tooltip>
             {getFieldDecorator('path', {
@@ -577,9 +596,9 @@ class InterfaceEditForm extends Component {
 
         <FormItem
           className="interface-edit-item"
-          wrapperCol={{ span: 12, offset: 6 }}
+          wrapperCol={{ span: 14, offset: 10 }}
         >
-          <Button type="primary" htmlType="submit">Submit</Button>
+          <Button type="primary" htmlType="submit">保存</Button>
         </FormItem>
       </Form>
     );

static/doc/mock.html

@@ -71,7 +71,7 @@
                          <h2 class="subject" id="Mock介绍">Mock介绍 <a class="hashlink" href="#Mock介绍">#</a></h2><p> <p style='text-indent:2em;line-height:1.8em'>yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则(<a href="#mock">点击到Mock规则</a>）生成Mock接口，这些接口会自动生成模拟数据，创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的，正是由于yapi的Mock是一个第三方平台，那么在团队开发时任何人都可以权限许可下创建、修改接口信息等操作，这对于团队开发是很有好处的。</p>
 <p> <strong>mock地址解析</strong>：yapi平台网址+mock+<strong>您的项目id</strong>+<strong>接口实际请求path</strong></p>
 <p> </p>
-<img src="./images/mock.jpg" /></p>
+<img src="./images/mock.jpg" style="width: 50%" /></p>
 <h3 class="subject" id="1 如何使用Mock?">1 如何使用Mock? <a class="hashlink" href="#1 如何使用Mock?">#</a></h3><h3 class="subject" id="1.1 最简单最直接的方式">1.1 最简单最直接的方式 <a class="hashlink" href="#1.1 最简单最直接的方式">#</a></h3><p>在代码直接请求yapi提供的mock地址，以jQuery为例：</p>
 <pre><code class="lang-javascript"><span class="token keyword">let</span> prefix <span class="token operator">=</span> <span class="token string">'http://yapi.local.qunar.com:3000/mock/2817'</span>
 $<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span>prefix<span class="token operator">+</span><span class="token string">'/baseapi/path'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>username<span class="token punctuation">:</span> <span class="token string">'xxx'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">{</span>