feat: 接口测试部分

client/actions/addInterface.js

@@ -7,8 +7,10 @@ import {
   GET_INTERFACE_REQ_PARAMS,
   GET_INTERFACE_RES_PARAMS,
   PUSH_INTERFACE_NAME,
-  PUSH_INTERFACE_METHOD
+  PUSH_INTERFACE_METHOD,
+  FETCH_INTERFACE_PROJECT
 } from '../constants/action-types.js'
+import axios from 'axios'
 
 export function pushInputValue (value) {
   return {
@@ -72,3 +74,10 @@ export function pushInterfaceMethod (value) {
     payload: value
   }
 }
+
+export function fetchInterfaceProject(id) {
+  return {
+    type: FETCH_INTERFACE_PROJECT,
+    payload: axios.get('/project/get', { params: {id}})
+  }
+}

client/constants/action-types.js

@@ -14,6 +14,7 @@ export  const DELETE_INTERFACE_SEQ_HEADER = 'DELETE_INTERFACE_SEQ_HEADER'
 export  const GET_INTERFACE_REQ_PARAMS = 'GET_INTERFACE_REQ_PARAMS'
 export  const GET_INTERFACE_RES_PARAMS = 'GET_INTERFACE_RES_PARAMS'
 export  const PUSH_INTERFACE_METHOD = 'PUSH_INTERFACE_METHOD'
+export  const FETCH_INTERFACE_PROJECT = 'FETCH_INTERFACE_PROJECT'
 
 // group
 export const FETCH_GROUP_LIST = 'FETCH_GROUP_LIST'

client/containers/AddInterface/AddInterface.js

@@ -17,7 +17,9 @@ import {
   getReqParams,
   addReqHeader,
   pushInputValue,
-  pushInterfaceName
+  pushInterfaceName,
+  fetchInterfaceProject,
+  pushInterfaceMethod
 } from '../../actions/addInterface.js'
 
 const success = () => {
@@ -41,7 +43,9 @@ const success = () => {
     getResParams,
     addReqHeader,
     pushInputValue,
-    pushInterfaceName
+    pushInterfaceName,
+    fetchInterfaceProject,
+    pushInterfaceMethod
   }
 )
 
@@ -106,12 +110,14 @@ class AddInterface extends Component {
 
   editState (data) {
     const props = this.props
-    const { path, title, req_params_other, res_body, req_headers} = data
+    const { path, title, req_params_other, res_body, req_headers, project_id, method } = data
     props.pushInputValue(path)
+    props.pushInterfaceMethod(method)
     props.pushInterfaceName(title)
     props.getReqParams(req_params_other)
     props.getResParams(res_body)
     props.addReqHeader(req_headers)
+    props.fetchInterfaceProject(project_id)
   }
 
   initInterfaceData (interfaceId) {

client/containers/AddInterface/InterfaceTest/InterfaceTest.js

@@ -1,34 +1,55 @@
 import React, { Component } from 'react'
-// import PropTypes from 'prop-types'
-// import { connect } from 'react-redux'
-import { Button } from 'antd'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { Button, Input } from 'antd'
 import { autobind } from 'core-decorators';
 import crossRequest from 'cross-request';
+import { withRouter } from 'react-router';
+import URL from 'url';
 
 import {
 } from '../../../actions/group.js'
 
 import './InterfaceTest.scss'
 
-// @connect(
-//   state => ({
-//   }),
-//   {
-//   }
-// )
+@connect(
+  state => ({
+    reqParams: state.addInterface.reqParams,
+    method: state.addInterface.method,
+    url: state.addInterface.url,
+    seqGroup: state.addInterface.seqGroup,
+    interfaceName: state.addInterface.interfaceName,
+    interfaceProject: state.addInterface.project
+  }),
+  {
+  }
+)
+@withRouter
 export default class InterfaceTest extends Component {
 
   static propTypes = {
+    reqParams: PropTypes.string,
+    method: PropTypes.string,
+    url: PropTypes.string,
+    interfaceName: PropTypes.string,
+    seqGroup: PropTypes.array,
+    match: PropTypes.object,
+    interfaceProject: PropTypes.object
   }
 
   state = {
-    res: {}
+    res: {},
+    header: {}
   }
 
   constructor(props) {
     super(props)
   }
 
+  componentWillMount() {
+
+  }
+
   @autobind
   testInterface() {
     crossRequest({
@@ -46,12 +67,51 @@ export default class InterfaceTest extends Component {
 
 
   render () {
+    const { method, url, seqGroup, interfaceName, interfaceProject } = this.props;
+    const { prd_host, basepath, protocol } = interfaceProject;
+    const reqParams = JSON.parse(this.props.reqParams);
+    let query = {};
+
+    if (method === 'GET') {
+      Object.keys(reqParams).forEach(key => {
+        const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams) : reqParams.toString();
+        query[key] = value;
+      })
+    }
+
+    const href = URL.format({
+      protocol: protocol || 'http',
+      host: prd_host,
+      pathname: URL.resolve(basepath, url),
+      query
+    });
+
 
     return (
       <div>
+        <div>接口名：{interfaceName}</div>
+        <div>
+          METHOD: <Input value={method} disabled />
+          URL: <Input value={href} />
+          HEADERS: <Input value={JSON.stringify(seqGroup, 2)} />
+          请求参数：
+          <div>
+            {
+              Object.keys(reqParams).map((key, index) => {
+                const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams) : reqParams.toString();
+                return (
+                  <div key={index}>
+                    <Input value={key} style={{display: 'inline-block', width: 200}} />{' = '}
+                    <Input value={value} style={{display: 'inline-block', width: 200}} />
+                  </div>
+                )
+              })
+            }
+          </div>
+        </div>
         <Button onClick={this.testInterface}>发送跨域请求</Button>
         <div>
-          {this.state.res.toString()}
+          {JSON.stringify(this.state.res, 2)}
         </div>
       </div>
     )

client/containers/ProjectGroups/GroupList/GroupList.js

@@ -72,7 +72,6 @@ export default class GroupList extends Component {
       }else if(!groupName && this.props.groupList.length){
         this.props.history.push(`/group/${this.props.groupList[0].group_name}`);
       }
-      console.log(currGroup);
       this.setState({groupList: this.props.groupList});
       this.props.setCurrGroup(currGroup)
     });

client/reducer/addInterface/addInterface.js

@@ -7,7 +7,8 @@ import {
   GET_INTERFACE_REQ_PARAMS,
   GET_INTERFACE_RES_PARAMS,
   PUSH_INTERFACE_NAME,
-  PUSH_INTERFACE_METHOD
+  PUSH_INTERFACE_METHOD,
+  FETCH_INTERFACE_PROJECT
 } from '../../constants/action-types.js'
 
 const initialState = {
@@ -23,7 +24,8 @@ const initialState = {
     }
   ],
   reqParams: '',
-  resParams: ''
+  resParams: '',
+  project: {}
 }
 
 export default (state = initialState, action) => {
@@ -73,6 +75,11 @@ export default (state = initialState, action) => {
         ...state,
         method: action.payload
       }
+    case FETCH_INTERFACE_PROJECT:
+      return {
+        ...state,
+        project: action.payload.data.data
+      }
     default:
       return state
   }

package.json

@@ -53,6 +53,7 @@
     "sha1": "^1.1.1",
     "string-replace-webpack-plugin": "^0.1.3",
     "universal-cookie": "^2.0.8",
+    "url": "^0.11.0",
     "wangeditor": "^3.0.4",
     "ykit-config-antd": "^0.1.3",
     "ykit-config-react": "^0.4.4"