mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2025-01-24 13:14:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
suxiaoxin 2017-07-26 15:31:19 +08:00
commit 805ec5ff37
7 changed files with 108 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -81,7 +81,7 @@ class AddInterface extends Component {
id: 0,
name: '',
value: ''
}]
}]
let interfaceId = undefined
if (ifTrue) {
interfaceId = this.getInterfaceId()
@ -106,7 +106,7 @@ class AddInterface extends Component {
url.match(regTwo)
return RegExp.$1
}
}
verificationURL () {
@ -170,7 +170,7 @@ class AddInterface extends Component {
mockData () { // mock 数据
let resParams = ''
let json = ''
if(this.props.resParams){
resParams = JSON.parse(this.props.resParams)
json = JSON.stringify(Mock.mock(resParams), null, 2)
@ -236,8 +236,10 @@ class AddInterface extends Component {
<ResParams />
<Result isSave={isSave} mockJson={mockJson} />
</TabPane>
<TabPane tab="Mock" key="2">mock</TabPane>
<TabPane tab="测试" key="3">
{
// <TabPane tab="Mock" key="2">mock</TabPane>
}
<TabPane tab="请求接口" key="3">
<InterfaceTest />
</TabPane>
</Tabs>

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

@ -6,10 +6,12 @@
.content {
max-width: 11rem;
margin: 0 auto;
margin: 24px auto;
border-radius: 4px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
background: #FFF;
padding: 10px 20px 50px 20px;
.save {
float: right;
margin: 0 0 10px 0;
@ -19,7 +21,7 @@
float: right;
margin: 0 15px 0 0;
}
table {
width: 100%;
border-top: 1px #EEE solid;
@ -27,7 +29,7 @@
th {
padding:0 10px;
}
td {
padding: 10px 0;
}
@ -54,7 +56,7 @@
margin: 0 0 0 10px;
cursor: pointer;
}
/* .req-header.css */
.req-header {
display: -webkit-box;
@ -90,7 +92,7 @@
.req-save, .res-save {
margin: 5px 0 0 107px;
}
/* .req-params.css */
.req-params {
display: -webkit-box;
@ -98,12 +100,12 @@
margin: 20px 0 0 0;
border-top: 1px #EEE solid;
}
.res-params-box {
display: inline-block;
width: 530px;
float: left;
/* .req-save.css */
.res-params {
display: -webkit-box;
@ -131,7 +133,7 @@
}
}
}
/* Result.css */
.result {
display: inline-block;
@ -153,10 +155,10 @@
border: 1px #CCC solid;
height: 300px;
overflow-x: hidden;
overflow-y: auto;
overflow-y: auto;
line-height: 1.2;
}
.ant-tabs {
-webkit-box-flex: 1;
}
@ -243,4 +245,4 @@ body {
padding: 0 20px;
background-color: #FFF;
-webkit-box-flex: 1;
}
}

81
client/containers/AddInterface/InterfaceTest/InterfaceTest.js
View File

@ -12,6 +12,8 @@ import {
import './InterfaceTest.scss'
const { TextArea } = Input;
@connect(
state => ({
reqParams: state.addInterface.reqParams,
@ -52,9 +54,34 @@ export default class InterfaceTest extends Component {
@autobind
testInterface() {
const { method, url, seqGroup, interfaceProject } = this.props;
const { prd_host, basepath, protocol } = interfaceProject;
const reqParams = JSON.parse(this.props.reqParams);
const headers = {}
let query = {};
if (method === 'GET') {
Object.keys(reqParams).forEach(key => {
const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams) : reqParams.toString();
query[key] = value;
})
}
seqGroup.forEach((headerItem) => {
headers[headerItem.name] = headerItem.value;
})
const href = URL.format({
protocol: protocol || 'http',
host: prd_host,
pathname: (basepath + url).replace(/\/+/g, '/'),
query
});
crossRequest({
url: 'http://petstore.swagger.io/v2/swagger.json',
method: 'GET',
url: href,
method,
headers,
data: {
a:1
},
@ -74,7 +101,7 @@ export default class InterfaceTest extends Component {
if (method === 'GET') {
Object.keys(reqParams).forEach(key => {
const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams) : reqParams.toString();
const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams[key]) : reqParams[key].toString();
query[key] = value;
})
}
@ -82,37 +109,53 @@ export default class InterfaceTest extends Component {
const href = URL.format({
protocol: protocol || 'http',
host: prd_host,
pathname: URL.resolve(basepath, url),
pathname: (basepath + url).replace(/\/+/g, '/'),
query
});
return (
<div>
<div>接口名：{interfaceName}</div>
<div>
METHOD: <Input value={method} disabled />
URL: <Input value={href} />
HEADERS: <Input value={JSON.stringify(seqGroup, 2)} />
请求参数：
<div>
<div className="interface-test">
<div className="interface-name">{interfaceName}</div>
<div className="req-part">
<div className="req-row method">
METHOD：<Input value={method} disabled style={{display: 'inline-block', width: 200}} />
</div>
<div className="req-row url">
URL：<Input value={href} style={{display: 'inline-block', width: 800, margin: 10}} />
<Button onClick={this.testInterface} type="primary">发送</Button>
</div>
<div className="req-row headers">
HEADERS：
{
Object.keys(reqParams).map((key, index) => {
const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams) : reqParams.toString();
seqGroup.map((headerItem, index) => {
return (
<div key={index}>
<Input value={key} style={{display: 'inline-block', width: 200}} />{' = '}
<Input value={value} style={{display: 'inline-block', width: 200}} />
<Input disabled value={headerItem.name} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
<Input value={headerItem.value} style={{display: 'inline-block', width: 200, margin: 10}} />
</div>
)
})
}
</div>
<div className="req-row params">
请求参数：
{
Object.keys(reqParams).map((key, index) => {
const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams[key]) : reqParams[key].toString();
return (
<div key={index}>
<Input disabled value={key} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
<Input value={value} style={{display: 'inline-block', width: 200, margin: 10}} />
</div>
)
})
}
</div>
</div>
<Button onClick={this.testInterface}>发送跨域请求</Button>
<div>
<div className="res-part">
返回结果：
{JSON.stringify(this.state.res, 2)}
<TextArea value={JSON.stringify(this.state.res, 2)}></TextArea>
</div>
</div>
)

9
client/containers/AddInterface/InterfaceTest/InterfaceTest.scss
View File

@ -0,0 +1,9 @@
.interface-test {
.interface-name {
font-size: 24px;
margin-bottom: 24px;
}
.req-row {
margin-bottom: 24px;
}
}

11
client/containers/Interface/Interface.scss
View File

@ -3,7 +3,9 @@
max-width: 11rem;
display: -webkit-box;
-webkit-box-flex: 1;
margin: 15px auto 0 auto;
margin: 24px auto;
border-radius: 4px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
font-size: 0.14rem;
background: #FFF;
@ -11,16 +13,16 @@
width: 216px;
line-height: 45px;
background: #f9fafe;
li {
padding: 0 0 0 30px;
color: #344562;
cursor: pointer;
&:hover {
color: #29f;
}
a {
color: #344562;
&:hover {
@ -69,4 +71,3 @@
}
}
}

7
client/containers/ProjectGroups/GroupList/GroupList.scss
View File

@ -1,7 +1,8 @@
.group-bar {
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
border-radius: 4px;
.curr-group {
background: #34495E;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
border-radius: 4px 4px 0 0;
padding: 32px 24px;
.curr-group-name {
@ -38,7 +39,7 @@
height: 48px;
min-width: 263px;
padding: 10px 6px;
background: #fff;
background: #eee;
.search {
display: inline-block;
margin-right: 6px;
@ -51,7 +52,7 @@
overflow-x: hidden;
border-bottom: 1px solid #e9e9e9;
padding-bottom: 24px;
border-radius: 0 0 6px 6px;
border-radius: 0 0 4px 4px;
.group-item {
// height: 48px;
// line-height: 48px;

9
client/containers/ProjectGroups/ProjectList/UpDateModal.js
View File

@ -252,7 +252,7 @@ class UpDateModal extends Component {
})(
<Input placeholder="请输入环境域名" style={{ width: '90%', marginRight: 8 }} addonBefore={
getFieldDecorator(`envs-protocol-${index}`, {
initialValue: envMessage.length !== 0 && k.domain ? k.domain.split('\/\/')[0]+'\/\/' : '',
initialValue: envMessage.length !== 0 && k.domain ? k.domain.split('\/\/')[0]+'\/\/' : 'http\:\/\/',
rules: [{
required: true
}]
@ -266,11 +266,14 @@ class UpDateModal extends Component {
</FormItem>
</Col>
<Col span={2}>
{envs.length > 0 ? (
{/* 新增的项中，只有最后一项有删除按钮 */}
{ (envs.length > 0 && k._id) || (envs.length == index + 1) ? (
<Icon
className="dynamic-delete-button"
type="minus-circle-o"
onClick={() => this.remove(k._id ? k._id : k)}
onClick={() => {
return this.remove(k._id ? k._id : k);
}}
/>
) : null}
</Col>