Merge branch 'dev' into 'master'

Dev

See merge request !21

README.md

@@ -1,29 +1,37 @@
-### Yapi是一个高效，易用，功能强大的api管理系统
+# YApi  
 
-#### 后台server如何启动和热更新？
+## 平台介绍
 
-1. npm install
+YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护、监控和保护任意规模的 API，而且yapi为用户提供了优秀的交互体验，开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的创建。
-2. npm run dev-server
 
-### 平台特性
+## 功能
+1. 项目接口管理
 
-  yapi是一个**高效**、**易用**、**可部署**的API管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护、监控和保护任意规模的 API，而且yapi为用户提供了优秀的交互体验，开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的创建。
+    提供基本的项目分组，项目管理，接口管理功能
->
 
-# 平台介绍
+2. mockServer服务
-## 1 接口管理架构
+
+    用户只需在项目配置线上域名和接口基本路径，通过将线上域名指到我们的yapi平台服务器，就可使用mockServer服务
+
+3. 用户管理
+
+    提供基本的用户注册登录管理等功能，集成了去哪儿QSSO登录
+
+## 快速开始
+### 1 接口管理架构
 平台以**项目分组** -> **项目** -> **接口**的划分进行接口组织管理。
 
-### 1.1 项目分组
+#### 1.1 项目分组
 登录之后进到项目首页，左边侧边栏显示的即分组列表。
-![分组列表](http://upload-images.jianshu.io/upload_images/842107-bf341260ab637b36.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+![分组列表](http://upload-images.jianshu.io/upload_images/842107-d90ca4b3242fa760.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 
 管理员有权限添加或删除分组。
 ![添加分组](http://upload-images.jianshu.io/upload_images/842107-a0d4d9a98003896a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 
 > 分组名称具有唯一性
 
-### 1.2 项目
+#### 1.2 项目
 选中不同的分组，右边会显示该分组下的项目列表。
 
 ![项目列表](http://upload-images.jianshu.io/upload_images/842107-137bcae58b84715e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
@@ -33,7 +41,7 @@
 
 > 项目『线上域名 + 基本路径』具有唯一性
 
-### 1.3 接口
+#### 1.3 接口
 点击项目名称，进入该项目接口列表。
 ![接口列表](http://upload-images.jianshu.io/upload_images/842107-e858005f714f4889.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 
@@ -44,27 +52,33 @@
 ![请求真实接口](http://upload-images.jianshu.io/upload_images/842107-2ee7171d707e91ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 
 
-### Mock功能
+#### Mock功能
 
    yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则生成Mock接口，这些接口会自动生成模拟数据，支持复杂的生成逻辑，创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的，正是由于yapi的Mock是一个第三方平台那么在 团队开发时任何人都可以权限许可下创建、修改接口信息等操作，这对于团队开发是很有好处的。
 
-####第一步：添加接口
+##### 第一步：添加接口
 通过点击页面上的"+添加接口"
 
 ![接口添加](http://note.youdao.com/yws/api/personal/file/WEB613bd4f29db038f2b41c03dcfceda2b6?method=download&shareKey=29bfc2b855f6f26ce0079baf567e54cc)
 
-####第二步：输入协议、URL、接口名、请求头、请求参数、mock规则等信息，然后点击右上角的"Mock"按钮。
+##### 第二步：输入协议、URL、接口名、请求头、请求参数、mock规则等信息，然后点击右上角的"Mock"按钮。
 
 ![接口详情](http://note.youdao.com/yws/api/personal/file/WEB0759331a53e095d910cfb4024ea657d5?method=download&shareKey=a86046f0bd2353d4763a9c962d747e5b)
 
-####第三步：当点击"Mock"按钮之后，就会在页面下方生成一个mock结果并产生一个API接口。点击"复制"按钮即可复制，用户拿到接口后就可以发请求了。
+##### 第三步：当点击"Mock"按钮之后，就会在页面下方生成一个mock结果并产生一个API接口。点击"复制"按钮即可复制，用户拿到接口后就可以发请求了。
 
 ![Mock结果](http://note.youdao.com/yws/api/personal/file/WEB265d4bf7cc979bda06d07639d1b84557?method=download&shareKey=64d41dea0371e38761f494d7899b3b35)
 
-####第四步：当拿到复制好接口之后就可以发起一个请求了，先将请求的信息填写完善如：请求方法（post、get等）、URL、请求头、请求的数据等。然后就点击"发送"，然后在"返回结果"出可以看到接口返回的数据。
+##### 第四步：当拿到复制好接口之后就可以发起一个请求了，先将请求的信息填写完善如：请求方法（post、get等）、URL、请求头、请求的数据等。然后就点击"发送"，然后在"返回结果"出可以看到接口返回的数据。
 
 ![请求接口](http://note.youdao.com/yws/api/personal/file/WEB1c22d5c4062be5f10be0b1cdfae86621?method=download&shareKey=93be3a4f1fe56219b89ea2c5ba04014d)
 
 你也可以通过点击"管理成员"来添加和删除项目的成员，便于团队管理。
 
-![成员管理](http://note.youdao.com/yws/api/personal/file/WEB1b9defdf0cb884f46c2bd6c30ceb02fb?method=download&shareKey=218b9326659208ec564b9fff3ea8c6c3)
+![成员管理](http://note.youdao.com/yws/api/personal/file/WEB1b9defdf0cb884f46c2bd6c30ceb02fb?method=download&shareKey=218b9326659208ec564b9fff3ea8c6c3)
+
+## 未来计划推出功能
+1. 可视化JSON编辑器，可定义JSON_Schema和mockjs
+2. 支持HTTP和RPC协议
+3. 自动化测试
+4. 多人协作

client/containers/AddInterface/AddInterface.js

@@ -76,7 +76,8 @@ class AddInterface extends Component {
       isLoading: '',
       isSave: false,
       mockJson: '',
-      mockURL: ''
+      mockURL: '',
+      projectData: {}
     }
   }
 
@@ -128,7 +129,8 @@ class AddInterface extends Component {
         const { protocol, prd_host, basepath } = data.data.data
         const mockURL = `${protocol}://${prd_host}${basepath}${result.path}`
         this.setState({
-          mockURL: mockURL
+          mockURL: mockURL,
+          projectData: data.data.data
         })
       })
   }
@@ -136,7 +138,9 @@ class AddInterface extends Component {
   editState (data) {
     const props = this.props
     const { path, title, req_params_other, res_body, req_headers, project_id, method } = data
-
+    this.setState({
+      apiData: data
+    })
     props.pushInputValue(path)
     props.pushInterfaceMethod(method)
     props.pushInterfaceName(title)
@@ -254,7 +258,7 @@ class AddInterface extends Component {
               <ReqMethod />
               <ReqHeader />
               <ReqParams data={this.props} />
-              <MockUrl mockURL={mockURL} serverIp={server_ip} />
+              <MockUrl mockURL={mockURL} serverIp={server_ip} projectData={this.state.projectData}  />
               <h3 className="req-title">返回部分</h3>
               <ResParams />
               <Result isSave={isSave} mockJson={mockJson} />

client/containers/AddInterface/MockUrl/MockUrl.js

@@ -11,7 +11,9 @@ const success = () => {
 class MockUrl extends Component {
   static propTypes = {
     mockURL: PropTypes.string,
-    serverIp: PropTypes.string
+    serverIp: PropTypes.string,
+    mockData: PropTypes.string,
+    projectData: PropTypes.object
   }
 
   constructor(props) {
@@ -35,13 +37,14 @@ class MockUrl extends Component {
   }
 
   render () {
+    console.log(this.props)
     const { serverIp } = this.props
     return (
       <section className="mock-url-box">
         <span className="title">mock地址 : </span>
         <p id="mock-p">{this.props.mockURL}</p>
         <Button type="primary" id="mock-clipboard">复制</Button>
-        <div className="host">请配置host ***.***.***.***  { serverIp }</div>
+        <div className="host"><label>请配置host:</label> {this.props.projectData.prd_host} { serverIp }</div>
       </section>
     )
   }