mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2025-04-12 15:10:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat - 创建接口

Browse Source
This commit is contained in:
waliang.wang 2017-07-20 14:48:29 +08:00
parent d9163d562b
commit d784d98b50
10 changed files with 243 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
client/actions/addInterFace.js
View File

@ -4,10 +4,11 @@ import {
FETCH_ADD_INTERFACE_HEADER_VALUE,
ADD_INTERFACE_SEQ_HEADER,
DELETE_INTERFACE_SEQ_HEADER,
ADD_INTERFACE_REQ_PARAMS,
DELETE_INTERFACE_REQ_PARAMS,
ADD_INTERFACE_RES_PARAMS,
DELETE_INTERFACE_RES_PARAMS
GET_INTERFACE_REQ_PARAMS,
GET_INTERFACE_RES_PARAMS,
SAVE_INTERFACE_FORMS
// ADD_INTERFACE_RES_PARAMS,
// DELETE_INTERFACE_RES_PARAMS
} from '../constants/action-types.js'
export function pushInputValue (value) {
@ -45,31 +46,45 @@ export function deleteReqHeader (value) {
};
}
export function addReqParams (value) {
export function getReqParams (value) {
return {
type: ADD_INTERFACE_REQ_PARAMS,
type: GET_INTERFACE_REQ_PARAMS,
payload: value
};
}
export function deleteReqParams (value) {
export function getResParams (value) {
return {
type: DELETE_INTERFACE_REQ_PARAMS,
type: GET_INTERFACE_RES_PARAMS,
payload: value
};
}
export function addResParams (value) {
export function saveForms (value) {
return {
type: ADD_INTERFACE_RES_PARAMS,
type: SAVE_INTERFACE_FORMS,
payload: value
};
}
export function deleteResParams (value) {
return {
type: DELETE_INTERFACE_RES_PARAMS,
payload: value
};
}
// export function deleteReqParams (value) {
// return {
// type: DELETE_INTERFACE_REQ_PARAMS,
// payload: value
// };
// }
// export function addResParams (value) {
// return {
// type: ADD_INTERFACE_RES_PARAMS,
// payload: value
// };
// }
// export function deleteResParams (value) {
// return {
// type: DELETE_INTERFACE_RES_PARAMS,
// payload: value
// };
// }

47
client/actions/addInterface.js
View File

@ -4,10 +4,11 @@ import {
FETCH_ADD_INTERFACE_HEADER_VALUE,
ADD_INTERFACE_SEQ_HEADER,
DELETE_INTERFACE_SEQ_HEADER,
ADD_INTERFACE_REQ_PARAMS,
DELETE_INTERFACE_REQ_PARAMS,
ADD_INTERFACE_RES_PARAMS,
DELETE_INTERFACE_RES_PARAMS
GET_INTERFACE_REQ_PARAMS,
GET_INTERFACE_RES_PARAMS,
SAVE_INTERFACE_FORMS
// ADD_INTERFACE_RES_PARAMS,
// DELETE_INTERFACE_RES_PARAMS
} from '../constants/action-types.js'
export function pushInputValue (value) {
@ -45,31 +46,45 @@ export function deleteReqHeader (value) {
};
}
export function addReqParams (value) {
export function getReqParams (value) {
return {
type: ADD_INTERFACE_REQ_PARAMS,
type: GET_INTERFACE_REQ_PARAMS,
payload: value
};
}
export function deleteReqParams (value) {
export function getResParams (value) {
return {
type: DELETE_INTERFACE_REQ_PARAMS,
type: GET_INTERFACE_RES_PARAMS,
payload: value
};
}
export function addResParams (value) {
export function saveForms (value) {
return {
type: ADD_INTERFACE_RES_PARAMS,
type: SAVE_INTERFACE_FORMS,
payload: value
};
}
export function deleteResParams (value) {
return {
type: DELETE_INTERFACE_RES_PARAMS,
payload: value
};
}
// export function deleteReqParams (value) {
// return {
// type: DELETE_INTERFACE_REQ_PARAMS,
// payload: value
// };
// }
// export function addResParams (value) {
// return {
// type: ADD_INTERFACE_RES_PARAMS,
// payload: value
// };
// }
// export function deleteResParams (value) {
// return {
// type: DELETE_INTERFACE_RES_PARAMS,
// payload: value
// };
// }

9
client/constants/action-types.js
View File

@ -9,10 +9,11 @@ export const FETCH_ADD_INTERFACE_TAG_VALUE = 'FETCH_ADD_INTERFACE_TAG_VALUE'
export const FETCH_ADD_INTERFACE_HEADER_VALUE = 'FETCH_ADD_INTERFACE_HEADER_VALUE'
export const ADD_INTERFACE_SEQ_HEADER = 'ADD_INTERFACE_SEQ_HEADER'
export const DELETE_INTERFACE_SEQ_HEADER = 'DELETE_INTERFACE_SEQ_HEADER'
export const ADD_INTERFACE_REQ_PARAMS = 'ADD_INTERFACE_REQ_PARAMS'
export const DELETE_INTERFACE_REQ_PARAMS = 'DELETE_INTERFACE_REQ_PARAMS'
export const ADD_INTERFACE_RES_PARAMS = 'ADD_INTERFACE_RES_PARAMS'
export const DELETE_INTERFACE_RES_PARAMS = 'DELETE_INTERFACE_RES_PARAMS'
export const GET_INTERFACE_REQ_PARAMS = 'GET_INTERFACE_REQ_PARAMS'
export const GET_INTERFACE_RES_PARAMS = 'GET_INTERFACE_RES_PARAMS'
export const SAVE_INTERFACE_FORMS = 'SAVE_INTERFACE_FORMS'
// export const ADD_INTERFACE_RES_PARAMS = 'ADD_INTERFACE_RES_PARAMS'
// export const DELETE_INTERFACE_RES_PARAMS = 'DELETE_INTERFACE_RES_PARAMS'
// group
export const FETCH_GROUP_LIST = 'FETCH_GROUP_LIST'

63
client/containers/AddInterface/AddInterface.js
View File

@ -1,33 +1,80 @@
import './AddInterface.scss'
import React, { Component } from 'react'
// import PropTypes from 'prop-types'
// import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import axios from 'axios'
import { connect } from 'react-redux'
import { autobind } from 'core-decorators'
import { Button } from 'antd'
import ReqMethod from './ReqMethod/ReqMethod.js'
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 { saveForms } from '../../actions/addInterface.js'
@connect(
state => {
return {
reqParams: state.addInterface.reqParams
}
},
{
saveForms
}
)
class AddInterface extends Component {
// static propTypes = {
// }
static propTypes = {
reqParams: PropTypes.string,
saveForms: PropTypes.func
}
constructor (props) {
super(props)
}
@autobind
saveForms () {
console.log(this)
// const config = {
// url: '/interface/add',
// method: 'POST',
// headers: {'Content-Type': 'application/json'},
// params: {
// method: 'POST',
// project_id: 8,
// req_headers: [],
// req_params_type: 'json',
// req_params: this.props.reqParams
// }
// }
const params = {
url: '/interface/add',
method: 'POST',
params: {
method: 'POST',
project_id: 8,
req_headers: [],
req_params_type: 'json',
req_params: this.props.reqParams
}
}
axios.post('/interface/add', params)
.then(data => {
console.log(data)
})
.catch(e => {
console.log(e)
})
console.log(this.props.reqParams)
}
render () {
const saveForms = this.saveForms.bind(this)
return (
<section className="add-interface-box">
<div className="content">
<Button type="primary" className="save" onClick={saveForms}>保存</Button>
<Button type="primary" className="save" onClick={this.saveForms}>保存</Button>
<ReqMethod />
<ReqHeader />
<ReqParams />

97
client/containers/AddInterface/AddInterface.scss
View File

@ -89,29 +89,9 @@
/* .req-params.css */
.req-params {
display: -webkit-box;
line-height: 32px;
padding: 20px 0 0 0;
border-top: 1px #EEE solid;
margin: 20px 0 0 0;
ul {
-webkit-box-flex: 1;
margin: 0 0 0 24px;
li {
display: -webkit-box;
margin: 0 0 10px 0;
}
.required {
margin: 0 10px 0 20px;
}
.title {
margin: 0 10px;
display: block;
}
}
border-top: 1px #EEE solid;
}
/* .req-save.css */
@ -147,19 +127,76 @@
padding: 20px 0 0 0;
border-top: 1px #EEE solid;
margin: 20px 0 0 0;
textarea {
width: 100%;
border: 1px #CCC solid;
height: 200px;
}
.ant-tabs {
-webkit-box-flex: 1;
}
textarea {
width: 100%;
border: 1px #DDD solid;
border-radius: 3px;
padding: 10px;
font-size: .14rem;
height: 150px;
}
}
}
}
#container {
max-width: 800px;
margin: 0 auto;
}
body {
.w-e-text {
p, h1, h2, h3, h4, h5, table, pre {
line-height: auto;
margin: 0;
font-size: .14rem;
color: #777;
font-family: 'Microsoft Yahei';
font-weight: normal;
}
}
.w-e-toolbar {
// display: none;
height: 1px;
overflow: hidden;
border: none;
}
.w-e-text {
padding: 15px;
}
}
#toolbar-container {
border: 1px solid #EEE;
background-color: #fff;
}
#toolbar-container:after {
display: table;
content: '';
clear: both;
}
#editor-toolbar {
float: left;
}
#btn-container {
float: right;
text-align: right;
}
#editor-text {
border: 1px solid #EEE;
border-top: 0;
height: 300px;
background-color: #fff;
}
#req-cover {
height: 330px;
padding: 0 20px;
background-color: #FFF;
-webkit-box-flex: 1;
}
#res-cover {
height: 330px;
padding: 0 20px;
background-color: #FFF;
-webkit-box-flex: 1;
}

57
client/containers/AddInterface/ReqParams/ReqParams.js
View File

@ -1,21 +1,9 @@
import React, { Component } from 'react'
import { Button } from 'antd'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import ParamsList from './ParamsList.js'
import { autobind } from 'core-decorators'
import {
addReqParams
} from '../../../actions/addInterface.js'
// 重新渲染页面
const getReqList = function (self) {
const [reqList, reqParams] = [[], self.props.reqParams]
reqParams.map((value, key) => {
reqList.push(<ParamsList key={key} dataNum={value.id} />)
})
return reqList
}
// import { autobind } from 'core-decorators'
import wangEditor from 'wangeditor'
import { getReqParams } from '../../../actions/addInterface.js'
@connect(
state => {
@ -24,51 +12,42 @@ const getReqList = function (self) {
}
},
{
addReqParams
getReqParams
}
)
class ReqParams extends Component {
static propTypes = {
addReqParams: PropTypes.func,
reqParams: PropTypes.array
reqParams: PropTypes.string,
getReqParams: PropTypes.func
}
constructor(props) {
super(props)
}
@autobind
addSeqParams () {
console.log(1)
let newSeqParams= []
let reqParams = this.props.reqParams
let id = reqParams[reqParams.length-1].id
let list = {
id: ++id,
paramsName: '',
describe: ''
componentDidMount () {
const reg = /(<p>)|(<\/p>)|&nbsp;|(<br>)|\s+/g
const E = wangEditor
const editor = new E('#req-cover')
editor.customConfig.menus = []
editor.customConfig.onchange = html => {
html = html.replace(reg, '')
this.props.getReqParams(html)
}
reqParams.push(list)
newSeqParams.push(...reqParams)
console.log(newSeqParams)
this.props.addReqParams(newSeqParams)
editor.create()
}
render () {
return (
<section>
<div className="req-params">
<strong className="req-h3">请求参数 :</strong>
<ul>
{ getReqList(this) }
</ul>
<div id="req-cover"></div>
</div>
<Button type="primary" className="req-save" onClick={this.addSeqParams}>添加</Button>
</section>
)
}
}
export default ReqParams
export default ReqParams

37
client/containers/AddInterface/ResParams/ResParams.js
View File

@ -1,10 +1,8 @@
import React, { Component } from 'react'
import { Button } from 'antd'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { autobind } from 'core-decorators'
import ParamsList from './ParamsList.js'
import { addResParams } from '../../../actions/addInterface.js'
import wangEditor from 'wangeditor'
import { getResParams } from '../../../actions/addInterface.js'
@connect(
state => {
@ -13,33 +11,28 @@ import { addResParams } from '../../../actions/addInterface.js'
}
},
{
addResParams
getResParams
}
)
class ResParams extends Component {
static propTypes = {
resParams: PropTypes.array,
addResParams: PropTypes.func
resParams: PropTypes.string,
getResParams: PropTypes.func
}
constructor(props) {
super(props)
}
@autobind
addResParams () {
let newResParams = []
let resParams = this.props.resParams
let id = resParams[resParams.length-1].id
let list = {
id: ++id,
tag: '',
content: ''
componentDidMount () {
var E = wangEditor
var editor = new E('#res-cover')
editor.customConfig.menus = []
editor.customConfig.onchange = html => {
this.props.getResParams(html)
}
resParams.push(list)
newResParams.push(...resParams)
this.props.addResParams(newResParams)
editor.create()
}
render () {
@ -47,12 +40,8 @@ class ResParams extends Component {
<section>
<div className="res-params">
<strong className="res-h3">返回参数 :</strong>
<ul>
<ParamsList />
</ul>
<div id="res-cover"></div>
</div>
<Button type="primary" className="res-save" onClick={this.addResParams}>添加</Button>
</section>
)
}

3
client/containers/AddInterface/Result/Result.js
View File

@ -20,9 +20,6 @@ class Result extends Component {
<TabPane tab="成功结果" key="1">
<textarea></textarea>
</TabPane>
<TabPane tab="失败结果" key="2">
<textarea></textarea>
</TabPane>
</Tabs>
</div>
)

50
client/reducer/addInterface/addInterface.js
View File

@ -4,10 +4,11 @@ import {
FETCH_ADD_INTERFACE_HEADER_VALUE,
ADD_INTERFACE_SEQ_HEADER,
DELETE_INTERFACE_SEQ_HEADER,
ADD_INTERFACE_REQ_PARAMS,
DELETE_INTERFACE_REQ_PARAMS,
ADD_INTERFACE_RES_PARAMS,
DELETE_INTERFACE_RES_PARAMS
GET_INTERFACE_REQ_PARAMS,
GET_INTERFACE_RES_PARAMS,
SAVE_INTERFACE_FORMS
// ADD_INTERFACE_RES_PARAMS,
// DELETE_INTERFACE_RES_PARAMS
} from '../../constants/action-types.js'
const initialState = {
@ -22,20 +23,8 @@ const initialState = {
content: ''
}
],
reqParams: [
{
id: 0,
paramsName: '',
describe: ''
}
],
resParams: [
{
id: 0,
paramsName: '',
describe: ''
}
]
reqParams: '',
resParams: ''
}
export default (state = initialState, action) => {
@ -65,26 +54,31 @@ export default (state = initialState, action) => {
...state,
seqGroup: action.payload
}
case ADD_INTERFACE_REQ_PARAMS:
case GET_INTERFACE_REQ_PARAMS:
return {
...state,
reqParams: action.payload
}
case DELETE_INTERFACE_REQ_PARAMS:
case GET_INTERFACE_RES_PARAMS:
return {
...state,
reqParams: action.payload
resParams: action.payload
}
case ADD_INTERFACE_RES_PARAMS:
case SAVE_INTERFACE_FORMS:
return {
...state,
reqParams: action.payload
}
case DELETE_INTERFACE_RES_PARAMS:
return {
...state,
reqParams: action.payload
resParams: action.payload
}
// case ADD_INTERFACE_RES_PARAMS:
// return {
// ...state,
// reqParams: action.payload
// }
// case DELETE_INTERFACE_RES_PARAMS:
// return {
// ...state,
// reqParams: action.payload
// }
default:
return state
}

1
package.json
View File

@ -42,6 +42,7 @@
"request": "^2.81.0",
"sha1": "^1.1.1",
"universal-cookie": "^2.0.8",
"wangeditor": "^3.0.4",
"ykit-config-antd": "^0.1.3",
"ykit-config-react": "^0.4.4"
},