From c409ec7649a5f126f86b1a55c8aae241d01c89fa Mon Sep 17 00:00:00 2001 From: "waliang.wang" Date: Wed, 26 Jul 2017 16:25:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=8D=E5=88=B6mock=20URL?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/actions/interfaceAction.js | 10 +++- client/constants/action-types.js | 3 +- .../containers/AddInterface/AddInterface.js | 32 ++++++++++--- .../containers/AddInterface/AddInterface.scss | 17 +++++++ .../AddInterface/MockUrl/MockUrl.js | 46 +++++++++++++++++++ .../AddInterface/ReqMethod/ReqMethod.js | 10 ++-- client/containers/Interface/Interface.js | 9 +++- .../Interface/InterfaceList/InterfaceList.js | 2 +- .../InterfaceTable/InterfaceTable.js | 2 + client/reducer/Interface/InterfaceReducer.js | 11 ++++- client/reducer/interface/InterfaceReducer.js | 11 ++++- package.json | 3 +- 12 files changed, 132 insertions(+), 24 deletions(-) create mode 100644 client/containers/AddInterface/MockUrl/MockUrl.js diff --git a/client/actions/interfaceAction.js b/client/actions/interfaceAction.js index 196feff1..53ddaaca 100644 --- a/client/actions/interfaceAction.js +++ b/client/actions/interfaceAction.js @@ -2,7 +2,8 @@ import { FETCH_INTERFACE_DATA, LIST_INTERFACE_CLICK, PROJECT_MEMBER_INTERFACE, - DELETE_INTERFACE_DATA + DELETE_INTERFACE_DATA, + SAVE_INTERFACE_PROJECT_ID } from '../constants/action-types.js' export function fetchInterfaceData (value) { @@ -30,3 +31,10 @@ export function deleteInterfaceData (value) { payload: value } } + +export function saveInterfaceProjectId (value) { + return { + type: SAVE_INTERFACE_PROJECT_ID, + payload: value + } +} diff --git a/client/constants/action-types.js b/client/constants/action-types.js index 12a7d58b..4e28de56 100644 --- a/client/constants/action-types.js +++ b/client/constants/action-types.js @@ -3,7 +3,8 @@ export const FETCH_INTERFACE_DATA = 'FETCH_INTERFACE_DATA' export const LIST_INTERFACE_CLICK = 'LIST_INTERFACE_CLICK' export const PROJECT_MEMBER_INTERFACE = 'PROJECT_MEMBER_INTERFACE' export const PUSH_INTERFACE_NAME = 'PUSH_INTERFACE_NAME' -export const DELETE_INTERFACE_DATA = 'DELETE_INTERFACE_DATA' +export const DELETE_INTERFACE_DATA = 'DELETE_INTERFACE_DATA' +export const SAVE_INTERFACE_PROJECT_ID = 'SAVE_INTERFACE_PROJECT_ID' // addInterFace export const FETCH_ADD_INTERFACE_INPUT = 'FETCH_ADD_INTERFACE_INPUT' diff --git a/client/containers/AddInterface/AddInterface.js b/client/containers/AddInterface/AddInterface.js index e19eef63..fcfa1855 100644 --- a/client/containers/AddInterface/AddInterface.js +++ b/client/containers/AddInterface/AddInterface.js @@ -11,6 +11,7 @@ import ReqHeader from './ReqHeader/ReqHeader.js' import ReqParams from './ReqParams/ReqParams.js' import ResParams from './ResParams/ResParams.js' import Result from './Result/Result.js' +import MockUrl from './MockUrl/MockUrl.js' import InterfaceTest from './InterfaceTest/InterfaceTest.js' import { saveForms, @@ -23,6 +24,7 @@ import { pushInterfaceMethod } from '../../actions/addInterface.js' +let projectId = '' const success = () => { message.success('保存成功!') } @@ -71,7 +73,8 @@ class AddInterface extends Component { this.state = { isLoading: '', isSave: false, - mockJson: '' + mockJson: '', + mockURL: '' } } @@ -106,7 +109,6 @@ class AddInterface extends Component { url.match(regTwo) return RegExp.$1 } - } verificationURL () { @@ -117,9 +119,22 @@ class AddInterface extends Component { } } + getMockURL (project_id, result) { + const params = {id: project_id} + axios.get('/project/get', {params: params}). + then( data => { + const { protocol, prd_host, basepath } = data.data.data + const mockURL = `${protocol}://${prd_host}${basepath}${result.path}` + this.setState({ + mockURL: mockURL + }) + }) + } + editState (data) { const props = this.props const { path, title, req_params_other, res_body, req_headers, project_id, method } = data + props.pushInputValue(path) props.pushInterfaceMethod(method) props.pushInterfaceName(title) @@ -127,6 +142,7 @@ class AddInterface extends Component { props.getResParams(res_body) props.addReqHeader(req_headers) props.fetchInterfaceProject(project_id) + projectId = project_id } initInterfaceData (interfaceId) { @@ -142,6 +158,8 @@ class AddInterface extends Component { this.editState(result) // 初始化 mock this.mockData() + + this.getMockURL(projectId, result) }) .catch(e => { console.log(e) @@ -175,7 +193,6 @@ class AddInterface extends Component { resParams = JSON.parse(this.props.resParams) json = JSON.stringify(Mock.mock(resParams), null, 2) } - console.log('json', json) this.setState({ mockJson: json }) @@ -184,13 +201,13 @@ class AddInterface extends Component { @autobind saveForms () { let postURL = undefined - const { interfaceName, url, seqGroup, reqParams, resParams } = this.props + const { interfaceName, url, seqGroup, reqParams, resParams, method } = this.props const ifTrue = this.verificationURL() const interfaceId = this.getInterfaceId() const params = { title: interfaceName, path: url, - method: 'POST', + method: method, req_headers: seqGroup, project_id: interfaceId, req_params_type: 'json', @@ -221,8 +238,8 @@ class AddInterface extends Component { render () { const TabPane = Tabs.TabPane - const { isLoading, isSave, mockJson='' } = this.state - console.log('mockJson', mockJson) + const { isLoading, isSave, mockJson='', mockURL } = this.state + console.log(mockURL) return (
@@ -235,6 +252,7 @@ class AddInterface extends Component { + mock diff --git a/client/containers/AddInterface/AddInterface.scss b/client/containers/AddInterface/AddInterface.scss index 5c4ecc9c..435c0030 100644 --- a/client/containers/AddInterface/AddInterface.scss +++ b/client/containers/AddInterface/AddInterface.scss @@ -167,6 +167,23 @@ color: #CCC; } } + + /* .mock-url-box.css */ + .mock-url-box { + clear: both; + padding: 10px 0 0 0; + margin: 0 0 0 20px; + p { + width: 70%; + height: 35px; + line-height: 35px; + border: 1px #DDD solid; + display: inline-block; + vertical-align: -4px; + margin: 0 10px 0 0; + padding: 0 0 0 10px; + } + } .loading { display: none; diff --git a/client/containers/AddInterface/MockUrl/MockUrl.js b/client/containers/AddInterface/MockUrl/MockUrl.js new file mode 100644 index 00000000..cfc8b81b --- /dev/null +++ b/client/containers/AddInterface/MockUrl/MockUrl.js @@ -0,0 +1,46 @@ +import '../AddInterface.scss' +import React, { Component } from 'react' +import { Button, message } from 'antd' +import Clipboard from 'clipboard' +import PropTypes from 'prop-types' + +const success = () => { + message.success('复制成功!') +} + +class MockUrl extends Component { + static propTypes = { + mockURL: PropTypes.string + } + + constructor(props) { + super(props) + } + + componentDidMount () { + setTimeout(this.clipboard, 500) + } + + clipboard () { + const btn = document.querySelector('#mock-clipboard') + const txt = document.querySelector('#mock-p').innerHTML + console.log('txt', txt) + new Clipboard(btn, { + text: () => txt, + target () { + success() + } + }) + } + + render () { + return ( +
+

{this.props.mockURL}

+ +
+ ) + } +} + +export default MockUrl \ No newline at end of file diff --git a/client/containers/AddInterface/ReqMethod/ReqMethod.js b/client/containers/AddInterface/ReqMethod/ReqMethod.js index 3e838275..0b5dae20 100644 --- a/client/containers/AddInterface/ReqMethod/ReqMethod.js +++ b/client/containers/AddInterface/ReqMethod/ReqMethod.js @@ -40,6 +40,7 @@ class ReqMethod extends Component { @autobind handleChange (value) { + console.log('value', value) this.props.pushInterfaceMethod(value) } @@ -57,20 +58,15 @@ class ReqMethod extends Component { render () { const { Option } = Select - const { url, interfaceName } = this.props + const { url, interfaceName, method } = this.props return (
协议 : - 请求协议 - 请求方式 - diff --git a/client/containers/Interface/Interface.js b/client/containers/Interface/Interface.js index 0a96066a..9af50b68 100644 --- a/client/containers/Interface/Interface.js +++ b/client/containers/Interface/Interface.js @@ -10,7 +10,8 @@ import moment from 'moment' import { fetchInterfaceData, projectMember, - closeProjectMember + closeProjectMember, + saveInterfaceProjectId } from '../../actions/interfaceAction.js' @connect( @@ -24,7 +25,8 @@ import { { fetchInterfaceData, projectMember, - closeProjectMember + closeProjectMember, + saveInterfaceProjectId } ) @@ -33,6 +35,7 @@ class Interface extends Component { fetchInterfaceData: PropTypes.func, interfaceData: PropTypes.array, projectMember: PropTypes.func, + saveInterfaceProjectId: PropTypes.func, closeProjectMember: PropTypes.func, modalVisible: PropTypes.bool } @@ -49,6 +52,8 @@ class Interface extends Component { } } + this.props.saveInterfaceProjectId(interfaceId) + axios.get('/interface/list', params) .then(result => { result = result.data.data diff --git a/client/containers/Interface/InterfaceList/InterfaceList.js b/client/containers/Interface/InterfaceList/InterfaceList.js index b0720f50..867ca611 100644 --- a/client/containers/Interface/InterfaceList/InterfaceList.js +++ b/client/containers/Interface/InterfaceList/InterfaceList.js @@ -21,7 +21,7 @@ class InterfaceList extends Component { render () { const { projectMember } = this.props const getInterfaceId = this.getInterfaceId() - console.log(`/AddInterface/${getInterfaceId}`) + return (
  • 添加接口
    • diff --git a/client/containers/Interface/InterfaceTable/InterfaceTable.js b/client/containers/Interface/InterfaceTable/InterfaceTable.js index b1b73066..751dac88 100644 --- a/client/containers/Interface/InterfaceTable/InterfaceTable.js +++ b/client/containers/Interface/InterfaceTable/InterfaceTable.js @@ -21,6 +21,7 @@ class InterfaceTable extends Component { static propTypes = { interfaceData: PropTypes.array, data: PropTypes.array, + projectId: PropTypes.string, deleteInterfaceData: PropTypes.func } @@ -70,6 +71,7 @@ class InterfaceTable extends Component { 'key': 'action', render: (data) => { const deleteInterface = this.deleteInterface.bind(this, data._id) + console.log(data) return (