mirror of
https://github.com/YMFE/yapi.git
synced 2025-01-30 13:20:24 +08:00
suxiaoxin
commit
a9d84c103c
@ -1,36 +1,209 @@
|
||||
### Mock功能
|
||||
## Mock功能
|
||||
|
||||
<p style='text-indent:2em;line-height:1.8em'>yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则生成Mock接口，这些接口会自动生成模拟数据，支持复杂的生成逻辑，创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的，正是由于yapi的Mock是一个第三方平台那么在 团队开发时任何人都可以权限许可下创建、修改接口信息等操作，这对于团队开发是很有好处的。</p>
|
||||
<p style='text-indent:2em;line-height:1.8em'>yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则([点击到Mock规则](#mock)）生成Mock接口，这些接口会自动生成模拟数据，支持复杂的生成逻辑，创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的，正是由于yapi的Mock是一个第三方平台那么在 团队开发时任何人都可以权限许可下创建、修改接口信息等操作，这对于团队开发是很有好处的。</p>
|
||||
|
||||
#### 1 添加接口
|
||||
### 1 Mock步骤
|
||||
#### 1.1 创建接口
|
||||
|
||||
通过点击页面上的"+添加接口"
|
||||
通过点击页面上的"+添加接口"（若是接口已存在则跳到 1.2 ）
|
||||
|
||||
<img src="http://note.youdao.com/yws/api/personal/file/WEB613bd4f29db038f2b41c03dcfceda2b6?method=download&shareKey=29bfc2b855f6f26ce0079baf567e54cc" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
|
||||
|
||||
输入协议、URL、接口名、请求头、请求参数、mock规则等信息，然后点击右上角的"Mock"按钮。
|
||||
输入协议、URL、接口名、请求头、请求参数、Mock规则（[点击到Mock规则](#mock)）等信息。
|
||||
|
||||
<img src="http://upload-images.jianshu.io/upload_images/842107-78c0ea839619d068.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
|
||||
<img src="http://note.youdao.com/yws/api/personal/file/WEB680a37ba304768804b23cf2cf36ed40d?method=download&shareKey=0d750695dce3a4c7abf697fa58d24c57" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
|
||||
|
||||
#### 2 Mock
|
||||
输入Mock规则时它会在右边同步产生一个对应的结果
|
||||
|
||||
当点击"Mock"按钮之后，就会在页面下方生成一个mock结果并产生一个API接口。点击"复制"按钮即可复制，用户拿到接口后就可以发请求了。
|
||||
<img src="http://note.youdao.com/yws/api/personal/file/WEB929dce5eed22e1b7e9a10be98ee2ab38?method=download&shareKey=5616ed1d9e09cc38f9cdbb995c892cb5" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
|
||||
|
||||
<img src="http://note.youdao.com/yws/api/personal/file/WEBf9b154cb88d21daa8206e8c4a3d76042?method=download&shareKey=1999f6c2cf197b5b6d775c312e34073d" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
|
||||
最后点击保存按钮，保存后将会在"Mock地址"生成一个链接。
|
||||
>Mock地址的域名需要配置 host 指到我们的服务器 ip 地址
|
||||
|
||||
将请求的信息填写完善如：请求方法（post、get等）、URL、请求头、请求的数据等。然后就点击"发送"，然后在"返回结果"出可以看到接口返回的数据。
|
||||
<img src="http://note.youdao.com/yws/api/personal/file/WEB525ea3dadf1f274bbe12943341ba00cb?method=download&shareKey=95dbc9cf7a7646387c55dabf64cad888" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
|
||||
|
||||
<img src="http://upload-images.jianshu.io/upload_images/842107-2ee7171d707e91ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
|
||||
取到上面的链接在浏览器中请求就可以得到如下结果。
|
||||
|
||||
#### 3 成员管理
|
||||
<img src="http://note.youdao.com/yws/api/personal/file/WEBf168cd41d3ad4b5b24d68787063220c7?method=download&shareKey=beb6896165ddd3568ebecbcc92195180" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
|
||||
|
||||
你也可以通过点击"管理成员"来添加和删除项目的成员，便于团队管理。
|
||||
|
||||
<img src="http://note.youdao.com/yws/api/personal/file/WEB1b9defdf0cb884f46c2bd6c30ceb02fb?method=download&shareKey=218b9326659208ec564b9fff3ea8c6c3" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
|
||||
|
||||
<span id = "mock"></span>
|
||||
### 2.1 Mock语法规范
|
||||
>参考自：[Mock.js 官网](http://mockjs.com/)
|
||||
|
||||
Mock.js 的语法规范包括两部分：
|
||||
|
||||
[1. 数据模板定义规范（Data Template Definition，DTD）](#DTD)
|
||||
|
||||
[2. 数据占位符定义规范（Data Placeholder Definition，DPD）](#DPD)
|
||||
|
||||
<span id = "DTD"></span>
|
||||
### 数据模板定义规范（Data Template Definition，DTD）
|
||||
|
||||
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
|
||||
|
||||
|
||||
```
|
||||
// 属性名 name （与生成规则之间用 "|" 隔开）
|
||||
// 生成规则 rule（生成规则有7种详见下面的生成规则）
|
||||
// 属性值 value（可以含有 "@占位符" 同时也指定了最终值的初始值和类型）
|
||||
|
||||
'name|rule': value
|
||||
|
||||
生成规则：
|
||||
'name|min-max': value
|
||||
'name|count': value
|
||||
'name|min-max.dmin-dmax': value
|
||||
'name|min-max.dcount': value
|
||||
'name|count.dmin-dmax': value
|
||||
'name|count.dcount': value
|
||||
'name|+step': value
|
||||
```
|
||||
|
||||
生成规则示例：
|
||||
#### 1. 属性值是字符串 String
|
||||
|
||||
```
|
||||
1. 'name|min-max': string
|
||||
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
|
||||
|
||||
2. 'name|count': string
|
||||
通过重复 string 生成一个字符串，重复次数等于 count。
|
||||
```
|
||||
#### 2. 属性值是数字 Number
|
||||
```
|
||||
1. 'name|+1': number
|
||||
|
||||
属性值自动加 1，初始值为 number。
|
||||
|
||||
2. 'name|min-max': number
|
||||
|
||||
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
|
||||
|
||||
3. 'name|min-max.dmin-dmax': number
|
||||
|
||||
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。
|
||||
|
||||
例如：
|
||||
Mock.mock({
|
||||
'number1|1-100.1-10': 1,
|
||||
'number2|123.1-10': 1,
|
||||
'number3|123.3': 1,
|
||||
'number4|123.10': 1.123
|
||||
})
|
||||
// =>
|
||||
{
|
||||
"number1": 12.92,
|
||||
"number2": 123.51,
|
||||
"number3": 123.777,
|
||||
"number4": 123.1231091814
|
||||
}
|
||||
```
|
||||
|
||||
#### 3. 属性值是布尔型 Boolean
|
||||
```
|
||||
1. 'name|1': boolean
|
||||
|
||||
随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
|
||||
|
||||
2. 'name|min-max': value
|
||||
|
||||
随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
|
||||
```
|
||||
#### 4. 属性值是对象 Object
|
||||
```
|
||||
1. 'name|count': object
|
||||
|
||||
从属性值 object 中随机选取 count 个属性。
|
||||
|
||||
2. 'name|min-max': object
|
||||
|
||||
从属性值 object 中随机选取 min 到 max 个属性。
|
||||
```
|
||||
#### 5. 属性值是数组 Array
|
||||
```
|
||||
1. 'name|1': array
|
||||
|
||||
从属性值 array 中随机选取 1 个元素，作为最终值。
|
||||
|
||||
2. 'name|+1': array
|
||||
|
||||
从属性值 array 中顺序选取 1 个元素，作为最终值。
|
||||
|
||||
3. 'name|min-max': array
|
||||
|
||||
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
|
||||
|
||||
4. 'name|count': array
|
||||
|
||||
通过重复属性值 array 生成一个新数组，重复次数为 count。
|
||||
```
|
||||
#### 6. 属性值是函数 Function
|
||||
```
|
||||
1. 'name': function
|
||||
|
||||
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
|
||||
```
|
||||
#### 7.属性值是正则表达式 RegExp
|
||||
```
|
||||
1. 'name': regexp
|
||||
|
||||
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
|
||||
|
||||
例如：
|
||||
Mock.mock({
|
||||
'regexp1': /[a-z][A-Z][0-9]/,
|
||||
'regexp2': /\w\W\s\S\d\D/,
|
||||
'regexp3': /\d{5,10}/
|
||||
})
|
||||
// =>
|
||||
{
|
||||
"regexp1": "pJ7",
|
||||
"regexp2": "F)\fp1G",
|
||||
"regexp3": "561659409"
|
||||
}
|
||||
```
|
||||
<span id = "DPD"></span>
|
||||
### 数据占位符定义规范（Data Placeholder Definition，DPD）
|
||||
|
||||
占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
|
||||
|
||||
占位符 的格式为：
|
||||
```
|
||||
@占位符
|
||||
@占位符(参数 [, 参数])
|
||||
|
||||
说明：
|
||||
1. 用 @ 来标识其后的字符串是 占位符。
|
||||
2. 占位符 引用的是 Mock.Random 中的方法。
|
||||
3. 通过 Mock.Random.extend() 来扩展自定义占位符。
|
||||
4. 占位符 也可以引用 数据模板 中的属性。
|
||||
5. 占位符 会优先引用 数据模板 中的属性。
|
||||
6. 占位符 支持 相对路径 和 绝对路径。
|
||||
|
||||
Mock.mock({
|
||||
name: {
|
||||
first: '@FIRST',
|
||||
middle: '@FIRST',
|
||||
last: '@LAST',
|
||||
full: '@first @middle @last'
|
||||
}
|
||||
})
|
||||
// 上面的示例可以得到如下结果：
|
||||
{
|
||||
"name": {
|
||||
"first": "Charles",
|
||||
"middle": "Brenda",
|
||||
"last": "Lopez",
|
||||
"full": "Charles Brenda Lopez"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 未来计划推出功能
|
||||
|
||||
1. 可视化JSON编辑器，可定义JSON_Schema和mockjs
|
||||
2. 支持HTTP和RPC协议
|
||||
3. 自动化测试
|
||||
4. 多人协作
|
||||
4. 多人协作
|
||||
|
||||
@ -8,7 +8,8 @@ import {
|
||||
GET_INTERFACE_RES_PARAMS,
|
||||
PUSH_INTERFACE_NAME,
|
||||
PUSH_INTERFACE_METHOD,
|
||||
FETCH_INTERFACE_PROJECT
|
||||
FETCH_INTERFACE_PROJECT,
|
||||
ADD_INTERFACE_CLIPBOARD
|
||||
} from '../constants/action-types.js'
|
||||
import axios from 'axios'
|
||||
|
||||
@ -80,4 +81,11 @@ export function fetchInterfaceProject(id) {
|
||||
type: FETCH_INTERFACE_PROJECT,
|
||||
payload: axios.get('/project/get', { params: {id}})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function addInterfaceClipboard (func) {
|
||||
return {
|
||||
type: ADD_INTERFACE_CLIPBOARD,
|
||||
payload: func
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,7 +20,6 @@ export default class BreadcrumbNavigation extends Component {
|
||||
}
|
||||
|
||||
getBreadcrumb = (pathSnippets) => {
|
||||
console.log(pathSnippets);
|
||||
// 重置 state 中的 breadcrumb，防止重复渲染
|
||||
this.setState({
|
||||
breadcrumb: []
|
||||
@ -76,12 +75,9 @@ export default class BreadcrumbNavigation extends Component {
|
||||
path: '/' + pathSnippets.join('/')
|
||||
}]
|
||||
});
|
||||
} else {
|
||||
console.log(2);
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
console.log(location.hash);
|
||||
const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i);
|
||||
this.getBreadcrumb(pathSnippets);
|
||||
this.setState({
|
||||
|
||||
@ -17,6 +17,7 @@ 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'
|
||||
export const ADD_INTERFACE_CLIPBOARD = 'ADD_INTERFACE_CLIPBOARD'
|
||||
|
||||
// group
|
||||
export const FETCH_GROUP_LIST = 'FETCH_GROUP_LIST'
|
||||
|
||||
@ -38,7 +38,8 @@ const success = () => {
|
||||
url: state.addInterface.url,
|
||||
seqGroup: state.addInterface.seqGroup,
|
||||
interfaceName: state.addInterface.interfaceName,
|
||||
server_ip: state.login.server_ip
|
||||
server_ip: state.login.server_ip,
|
||||
clipboard: state.addInterface.clipboard
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -67,7 +68,8 @@ class AddInterface extends Component {
|
||||
getReqParams: PropTypes.func,
|
||||
getResParams: PropTypes.func,
|
||||
pushInputValue: PropTypes.func,
|
||||
pushInterfaceName: PropTypes.func
|
||||
pushInterfaceName: PropTypes.func,
|
||||
clipboard: PropTypes.func
|
||||
}
|
||||
|
||||
constructor (props) {
|
||||
@ -100,8 +102,18 @@ class AddInterface extends Component {
|
||||
const props = this.props
|
||||
props.pushInputValue('')
|
||||
props.pushInterfaceName('')
|
||||
props.getReqParams('')
|
||||
props.getResParams('')
|
||||
props.getReqParams(JSON.stringify({
|
||||
"id": 1,
|
||||
"name": "xxx"
|
||||
}))
|
||||
props.getResParams(JSON.stringify({
|
||||
errcode: "@natural",
|
||||
"data|3-8": {
|
||||
uid: "@id",
|
||||
name: "@name",
|
||||
email: "@email"
|
||||
}
|
||||
}))
|
||||
props.addReqHeader(initData)
|
||||
}
|
||||
}
|
||||
@ -110,6 +122,7 @@ class AddInterface extends Component {
|
||||
const reg = /add-interface\/edit\/(\d+)/g
|
||||
const regTwo = /add-interface\/(\d+)/g
|
||||
const url = location.href
|
||||
|
||||
if ( url.match(reg) ) {
|
||||
return RegExp.$1
|
||||
} else {
|
||||
@ -182,6 +195,19 @@ class AddInterface extends Component {
|
||||
})
|
||||
}
|
||||
|
||||
initInterfaceDataTwo (interfaceId) {
|
||||
const params = { id: interfaceId }
|
||||
|
||||
axios.get('/interface/get', {params: params})
|
||||
.then(result => {
|
||||
result = result.data.data
|
||||
this.getMockURL(result.project_id, result)
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
}
|
||||
|
||||
setLoading (boolean) {
|
||||
this.setState({
|
||||
isLoading: boolean ? 'is-loading' : ''
|
||||
@ -214,14 +240,23 @@ class AddInterface extends Component {
|
||||
})
|
||||
}
|
||||
|
||||
@autobind
|
||||
jumpEditUrl (_id) {
|
||||
const origin = location.origin
|
||||
const pathname = location.pathname
|
||||
location.href = `${origin}${pathname}#/add-interface/edit/${_id}`
|
||||
this.initInterfaceDataTwo(_id)
|
||||
setTimeout(() => {
|
||||
this.props.clipboard()
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
@autobind
|
||||
saveForms () {
|
||||
let postURL = undefined
|
||||
const { interfaceName, url, seqGroup, reqParams, resParams, method } = this.props
|
||||
const ifTrue = this.verificationURL()
|
||||
const interfaceId = this.getInterfaceId()
|
||||
const origin = location.origin
|
||||
const pathname = location.pathname
|
||||
const params = {
|
||||
title: interfaceName,
|
||||
path: url,
|
||||
@ -244,13 +279,21 @@ class AddInterface extends Component {
|
||||
this.setLoading(true)
|
||||
|
||||
axios.post(postURL, params)
|
||||
.then(() => {
|
||||
.then(data => {
|
||||
const id = data.data.data._id
|
||||
const _id = id || interfaceId
|
||||
|
||||
this.setLoading()
|
||||
success()
|
||||
this.changeState(true)
|
||||
// 初始化 mock
|
||||
this.mockData()
|
||||
location.href = `${origin}${pathname}#/add-interface/edit/${interfaceId}`
|
||||
|
||||
if (id) {
|
||||
this.setState({showMock: 'show-mock'})
|
||||
}
|
||||
|
||||
this.jumpEditUrl(_id)
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e)
|
||||
@ -262,12 +305,13 @@ class AddInterface extends Component {
|
||||
const { server_ip } = this.props
|
||||
const { isLoading, isSave, mockJson='', mockURL, tagName, showMock } = this.state
|
||||
let Pane = ''
|
||||
let mockGroup = ''
|
||||
if (showMock) {
|
||||
Pane = <TabPane tab="请求接口" key="3"><InterfaceTest /></TabPane>
|
||||
mockGroup = <MockUrl mockURL={mockURL} serverIp={server_ip} projectData={this.state.projectData} showMock={showMock}/>
|
||||
}
|
||||
return (
|
||||
<section className="add-interface-box">
|
||||
|
||||
<div className="content">
|
||||
<Tabs type="card">
|
||||
<TabPane tab={tagName} key="1">
|
||||
@ -275,7 +319,7 @@ class AddInterface extends Component {
|
||||
<ReqMethod />
|
||||
<ReqHeader />
|
||||
<ReqParams data={this.props} />
|
||||
<MockUrl mockURL={mockURL} serverIp={server_ip} projectData={this.state.projectData} showMock={showMock}/>
|
||||
{mockGroup}
|
||||
<h3 className="req-title">返回部分</h3>
|
||||
<ResParams />
|
||||
<Result isSave={isSave} mockJson={mockJson} />
|
||||
@ -283,7 +327,7 @@ class AddInterface extends Component {
|
||||
{Pane}
|
||||
</Tabs>
|
||||
</div>
|
||||
<Affix offsetBottom={0} className="save-button" onChange={affixed => console.log(affixed)}>
|
||||
<Affix offsetBottom={0} className="save-button">
|
||||
<Button type="primary" onClick={this.saveForms}>保存</Button>
|
||||
</Affix>
|
||||
<div className={`loading ${isLoading}`}></div>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
@import '../../styles/mixin.scss';
|
||||
|
||||
.add-interface-box {
|
||||
@include row-width-limit;
|
||||
margin: 0 auto;
|
||||
-webkit-box-flex: 1;
|
||||
min-height: 5rem;
|
||||
font-size: .14rem;
|
||||
@ -9,14 +11,12 @@
|
||||
font-size: .12rem;
|
||||
|
||||
.content {
|
||||
max-width: 11.7rem;
|
||||
min-width: 11.7rem;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
|
||||
background: #FFF;
|
||||
padding: 10px 20px 0 20px;
|
||||
margin: 0 auto;
|
||||
|
||||
|
||||
.ant-tabs {
|
||||
padding: 0 0 50px 0;
|
||||
}
|
||||
@ -24,7 +24,7 @@
|
||||
.ant-tabs-content {
|
||||
padding: 0 0 50px 0;
|
||||
}
|
||||
|
||||
|
||||
.border {
|
||||
zoom: 1;
|
||||
overflow: hidden;
|
||||
@ -244,6 +244,11 @@
|
||||
}
|
||||
#mock-clipboard {
|
||||
margin: 3px 0 0 0;
|
||||
background: #108ee9;
|
||||
border-radius: 5px;
|
||||
padding: 5px 20px;
|
||||
border: none;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,20 +1,34 @@
|
||||
import '../AddInterface.scss'
|
||||
import React, { Component } from 'react'
|
||||
import { Button, message } from 'antd'
|
||||
import { message } from 'antd'
|
||||
import Clipboard from 'clipboard'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'react-redux'
|
||||
import {
|
||||
addInterfaceClipboard
|
||||
} from '../../../actions/addInterface.js'
|
||||
|
||||
const success = () => {
|
||||
message.success('复制成功!')
|
||||
}
|
||||
|
||||
@connect(
|
||||
() => {
|
||||
return {}
|
||||
},
|
||||
{
|
||||
addInterfaceClipboard
|
||||
}
|
||||
)
|
||||
|
||||
class MockUrl extends Component {
|
||||
static propTypes = {
|
||||
mockURL: PropTypes.string,
|
||||
serverIp: PropTypes.string,
|
||||
mockData: PropTypes.string,
|
||||
showMock: PropTypes.string,
|
||||
projectData: PropTypes.object
|
||||
projectData: PropTypes.object,
|
||||
addInterfaceClipboard: PropTypes.func
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
@ -22,13 +36,15 @@ class MockUrl extends Component {
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
this.props.addInterfaceClipboard(this.clipboard)
|
||||
setTimeout(this.clipboard, 500)
|
||||
}
|
||||
|
||||
clipboard () {
|
||||
document.querySelector('#clipboard-button').innerHTML = '<button id="mock-clipboard">复制</button>'
|
||||
const btn = document.querySelector('#mock-clipboard')
|
||||
const txt = document.querySelector('#mock-p').innerHTML
|
||||
|
||||
|
||||
new Clipboard(btn, {
|
||||
text: () => txt,
|
||||
target () {
|
||||
@ -39,12 +55,13 @@ class MockUrl extends Component {
|
||||
|
||||
render () {
|
||||
const { serverIp, showMock } = this.props
|
||||
|
||||
return (
|
||||
<section className={`mock-url-box ${showMock}`}>
|
||||
<span className="title">mock地址 : </span>
|
||||
<p id="mock-p">{this.props.mockURL}</p>
|
||||
<Button type="primary" id="mock-clipboard">复制</Button>
|
||||
<div className="host"><label>请配置host:</label> {this.props.projectData.prd_host} { serverIp }</div>
|
||||
<span id="clipboard-button"></span>
|
||||
<div className="host"><label>请配置host:</label> { serverIp } {this.props.projectData.prd_host} </div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@ -66,9 +66,8 @@ class ReqMethod extends Component {
|
||||
<td>
|
||||
<span className="h3">请求方式 : </span>
|
||||
<Select value={method} style={{ width: 180 }} onChange={this.handleChange} size="large">
|
||||
<Option value="">选择请求方式</Option>
|
||||
<Option value="POST">POST</Option>
|
||||
<Option value="GET">GET</Option>
|
||||
<Option value="POST">POST</Option>
|
||||
<Option value="PUT">PUT</Option>
|
||||
<Option value="DELETE">DELETE</Option>
|
||||
</Select>
|
||||
|
||||
@ -37,7 +37,7 @@ class ResParams extends Component {
|
||||
// }
|
||||
// }
|
||||
|
||||
componentDidMount () {
|
||||
componentDidMount() {
|
||||
//const reg = /(<p>)|(<\/p>)| |(<br>)|\s+|<div>|<\/div>/g
|
||||
//editor.customConfig.menus = []
|
||||
// editor.customConfig.onchange = html => {
|
||||
@ -49,25 +49,64 @@ class ResParams extends Component {
|
||||
// }, 400)
|
||||
//editor.create()
|
||||
|
||||
function json_parse(json){
|
||||
try{
|
||||
function json_parse(json) {
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(json), null, "\t");
|
||||
}catch(e){
|
||||
} catch (e) {
|
||||
return json
|
||||
}
|
||||
}
|
||||
|
||||
let editor2 = this.editor = window.ace.edit("res-cover")
|
||||
editor2.getSession().setMode("ace/mode/json");
|
||||
editor2.getSession().on('change', ()=> {
|
||||
this.props.getResParams(editor2.getValue())
|
||||
var langTools = window.ace.require("ace/ext/language_tools");
|
||||
let editor = this.editor = window.ace.edit("res-cover")
|
||||
editor.getSession().setMode("ace/mode/json");
|
||||
editor.setOptions({
|
||||
enableBasicAutocompletion: true,
|
||||
enableSnippets: true,
|
||||
enableLiveAutocompletion: true
|
||||
});
|
||||
setTimeout( () => {
|
||||
editor2.setValue(json_parse(this.props.resParams))
|
||||
} ,400)
|
||||
|
||||
var rhymeCompleter = {
|
||||
identifierRegexps: [/[@]/],
|
||||
getCompletions: function (editor, session, pos, prefix, callback) {
|
||||
if (prefix.length === 0) { callback(null, []); return }
|
||||
var wordList = [
|
||||
{ name: '字符串', mock: '@string' },
|
||||
{ name: '自然数', mock: '@natural' },
|
||||
{ name: '布尔', mock: '@boolean' },
|
||||
{ name: '标题', mock: '@title' },
|
||||
{ name: '姓名', mock: '@name' },
|
||||
{ name: 'url', mock: '@url' },
|
||||
{ name: '域名', mock: '@domain' },
|
||||
{ name: 'ip地址', mock: '@ip' },
|
||||
{ name: 'id', mock: '@id' },
|
||||
{ name: 'guid', mock: '@guid' },
|
||||
{ name: '当前时间', mock: '@now' },
|
||||
{ name: '整数', mock: '@integer' },
|
||||
{ name: '浮点数', mock: '@float' },
|
||||
{ name: 'email', mock: '@email' },
|
||||
{ name: '大段文本', mock: '@text' },
|
||||
{ name: '句子', mock: '@sentence' },
|
||||
{ name: '单词', mock: '@word' },
|
||||
{ name: '地址', mock: '@region' }
|
||||
]
|
||||
callback(null, wordList.map(function (ea) {
|
||||
return { name: ea.mock, value: ea.mock, score: ea.mock, meta: ea.name }
|
||||
}));
|
||||
}
|
||||
}
|
||||
langTools.addCompleter(rhymeCompleter);
|
||||
|
||||
editor.getSession().on('change', () => {
|
||||
this.props.getResParams(editor.getValue())
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
editor.setValue(json_parse(this.props.resParams))
|
||||
}, 400)
|
||||
}
|
||||
|
||||
render () {
|
||||
render() {
|
||||
return (
|
||||
<section className="res-params-box">
|
||||
<Card title="返回 Mock" style={{ width: 500 }}>
|
||||
|
||||
@ -2,6 +2,7 @@ import React, { Component } from 'react'
|
||||
import { Card } from 'antd'
|
||||
import { connect } from 'react-redux'
|
||||
import PropTypes from 'prop-types'
|
||||
import Mock from 'mockjs'
|
||||
|
||||
@connect(
|
||||
state => {
|
||||
@ -25,12 +26,24 @@ class Result extends Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
const { mockJson } = this.props
|
||||
const { mockJson, resParams } = this.props
|
||||
let json, j;
|
||||
try{
|
||||
json = JSON.parse(resParams);
|
||||
}catch(e){
|
||||
json = false;
|
||||
}
|
||||
if(json !== false){
|
||||
j = JSON.stringify(Mock.mock(json), null, " ");
|
||||
}else{
|
||||
j = mockJson
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="result">
|
||||
<Card title="Mock 结果" style={{ width: 500 }}>
|
||||
<pre>{mockJson}</pre>
|
||||
<pre>{j}</pre>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
/* .interface-box.css */
|
||||
.interface-box {
|
||||
@include row-width-limit;
|
||||
margin: 24px auto;
|
||||
margin: 0 auto .24rem;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
|
||||
background: #FFF;
|
||||
@ -62,4 +62,3 @@
|
||||
body .interface-mode-box .add-user .ant-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -86,7 +86,7 @@ class InterfaceTable extends Component {
|
||||
<span>
|
||||
<Link to={`/add-interface/edit/${data._id}`}><span>编辑</span></Link>
|
||||
<span className="ant-divider" />
|
||||
<Popconfirm title="是否删除接口!" onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<Popconfirm title="你确定要删除接口吗!" onConfirm={confirm} okText="Yes" cancelText="No">
|
||||
<a href="">删除</a>
|
||||
</Popconfirm>
|
||||
</span>
|
||||
|
||||
@ -2,5 +2,5 @@
|
||||
|
||||
.g-doc {
|
||||
@include row-width-limit;
|
||||
margin: .24rem auto;
|
||||
margin: 0 auto .24rem;
|
||||
}
|
||||
|
||||
@ -21,8 +21,7 @@ const deleteConfirm = (id, props) => {
|
||||
delProject(id).then((res) => {
|
||||
if (res.payload.data.errcode == 0) {
|
||||
message.success('删除成功!')
|
||||
fetchProjectList(currGroup._id).then((res) => {
|
||||
console.log(res);
|
||||
fetchProjectList(currGroup._id).then(() => {
|
||||
});
|
||||
} else {
|
||||
message.error(res.payload.data.errmsg);
|
||||
@ -155,7 +154,6 @@ class ProjectList extends Component {
|
||||
|
||||
changeTableLoading(true);
|
||||
addProject(values).then((res) => {
|
||||
console.log(res);
|
||||
// 添加项目成功后再次请求列表
|
||||
if (res.payload.data.errcode == 0) {
|
||||
that.setState({
|
||||
@ -163,16 +161,14 @@ class ProjectList extends Component {
|
||||
});
|
||||
form.resetFields();
|
||||
message.success('创建成功! ');
|
||||
fetchProjectList(currGroup._id, this.props.currPage).then((res) => {
|
||||
fetchProjectList(currGroup._id, this.props.currPage).then(() => {
|
||||
changeTableLoading(false);
|
||||
console.log(131,res);
|
||||
});
|
||||
} else {
|
||||
changeTableLoading(false);
|
||||
message.error(res.payload.data.errmsg);
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
}).catch(() => {
|
||||
changeTableLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
@ -81,17 +81,14 @@ class UpDateModal extends Component {
|
||||
|
||||
// 确认修改
|
||||
handleOk = (e) => {
|
||||
console.log('in');
|
||||
e.preventDefault();
|
||||
const { form, updateProject, changeUpdateModal, currGroup, projectList, handleUpdateIndex, fetchProjectList, changeTableLoading } = this.props;
|
||||
form.validateFields((err, values) => {
|
||||
console.log(values);
|
||||
if (!err) {
|
||||
// console.log(projectList[handleUpdateIndex]);
|
||||
let assignValue = Object.assign(projectList[handleUpdateIndex], values);
|
||||
values.protocol = this.state.protocol.split(':')[0];
|
||||
assignValue.env = assignValue.envs.map((item, index) => {
|
||||
console.log(values['envs-protocol-'+index]);
|
||||
return {
|
||||
name: values['envs-name-'+index],
|
||||
domain: values['envs-protocol-'+index] + values['envs-domain-'+index]
|
||||
@ -104,16 +101,14 @@ class UpDateModal extends Component {
|
||||
if (res.payload.data.errcode == 0) {
|
||||
changeUpdateModal(false, -1);
|
||||
message.success('修改成功! ');
|
||||
fetchProjectList(currGroup._id).then((res) => {
|
||||
console.log(res);
|
||||
fetchProjectList(currGroup._id).then(() => {
|
||||
changeTableLoading(false);
|
||||
});
|
||||
} else {
|
||||
changeTableLoading(false);
|
||||
message.error(res.payload.data.errmsg);
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
}).catch(() => {
|
||||
changeTableLoading(false);
|
||||
});
|
||||
form.resetFields();
|
||||
@ -121,13 +116,6 @@ class UpDateModal extends Component {
|
||||
});
|
||||
}
|
||||
|
||||
envProtocolChange = (value) => {
|
||||
console.log(value);
|
||||
// this.setState({
|
||||
// envProtocolChange: value
|
||||
// })
|
||||
}
|
||||
|
||||
// 项目的修改操作 - 删除一项环境配置
|
||||
remove = (id) => {
|
||||
const { form } = this.props;
|
||||
@ -142,7 +130,6 @@ class UpDateModal extends Component {
|
||||
form.setFieldsValue({
|
||||
envs: envs.filter(key => {
|
||||
const realKey = key._id ? key._id : key
|
||||
console.log(key);
|
||||
return realKey !== id;
|
||||
})
|
||||
});
|
||||
@ -184,7 +171,6 @@ class UpDateModal extends Component {
|
||||
getFieldDecorator('envs', { initialValue: envMessage });
|
||||
const envs = getFieldValue('envs');
|
||||
const formItems = envs.map((k, index) => {
|
||||
console.log(k);
|
||||
const secondIndex = 'next' + index; // 为保证key的唯一性
|
||||
return (
|
||||
<Row key={index} type="flex" justify="space-between" align={index === 0 ? 'middle' : 'top'}>
|
||||
|
||||
@ -1,29 +1,21 @@
|
||||
@import '../../styles/mixin.scss';
|
||||
|
||||
.g-doc {
|
||||
margin: .24rem auto;
|
||||
margin: 0 auto .24rem;
|
||||
}
|
||||
|
||||
/* .user-box.css */
|
||||
.user-box {
|
||||
@include row-width-limit;
|
||||
padding: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 1;
|
||||
margin: .88rem auto 0 auto;
|
||||
// font-size: 0.14rem;
|
||||
|
||||
|
||||
margin-top: 40px;
|
||||
margin-bottom: 55px;
|
||||
|
||||
|
||||
|
||||
margin: 0 auto;
|
||||
.user-list {
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
|
||||
background: #FFF;
|
||||
border-radius:4px;
|
||||
min-height: 5rem;
|
||||
margin-top: 15px;
|
||||
.search{
|
||||
padding: 5px;
|
||||
background-color: #eee;
|
||||
@ -54,7 +46,6 @@
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
|
||||
background: #FFF;
|
||||
margin-top: 15px;
|
||||
min-height: 5rem;
|
||||
.ant-table-wrapper table {
|
||||
// font-size: .14rem;
|
||||
@ -68,7 +59,6 @@
|
||||
|
||||
.user-profile {
|
||||
-webkit-box-flex: 1;
|
||||
margin-top: 15px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
|
||||
background: #FFF;
|
||||
|
||||
@ -8,13 +8,14 @@ import {
|
||||
GET_INTERFACE_RES_PARAMS,
|
||||
PUSH_INTERFACE_NAME,
|
||||
PUSH_INTERFACE_METHOD,
|
||||
FETCH_INTERFACE_PROJECT
|
||||
FETCH_INTERFACE_PROJECT,
|
||||
ADD_INTERFACE_CLIPBOARD
|
||||
} from '../../constants/action-types.js'
|
||||
|
||||
const initialState = {
|
||||
interfaceName: '',
|
||||
url: '',
|
||||
method: '',
|
||||
method: 'GET',
|
||||
// 默认请求头部有一条数据
|
||||
seqGroup: [
|
||||
{
|
||||
@ -25,7 +26,8 @@ const initialState = {
|
||||
],
|
||||
reqParams: '',
|
||||
resParams: '',
|
||||
project: {}
|
||||
project: {},
|
||||
clipboard: () => {}
|
||||
}
|
||||
|
||||
export default (state = initialState, action) => {
|
||||
@ -80,6 +82,11 @@ export default (state = initialState, action) => {
|
||||
...state,
|
||||
project: action.payload.data.data
|
||||
}
|
||||
case ADD_INTERFACE_CLIPBOARD:
|
||||
return {
|
||||
...state,
|
||||
clipboard: action.payload
|
||||
}
|
||||
default:
|
||||
return state
|
||||
}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
@mixin row-width-limit {
|
||||
max-width: 11.7rem;
|
||||
min-width: 9.7rem;
|
||||
max-width: 12.2rem;
|
||||
min-width: 10.2rem;
|
||||
padding: 0 .24rem;
|
||||
}
|
||||
|
||||
@mixin wrap-width-limit {
|
||||
min-width: 9.7rem;
|
||||
min-width: 10.2rem;
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ class projectController extends baseController {
|
||||
|
||||
handleBasepath(basepath) {
|
||||
if (!basepath) return false;
|
||||
if (basepath === '/') return basepath;
|
||||
if (basepath[0] !== '/') basepath = '/' + basepath;
|
||||
if (basepath[basepath.length - 1] === '/') basepath = basepath.substr(0, basepath.length - 1);
|
||||
if (!yapi.commons.verifyPath(basepath)) {
|
||||
|
||||
@ -75,6 +75,7 @@ var projectController = function (_baseController) {
|
||||
key: 'handleBasepath',
|
||||
value: function handleBasepath(basepath) {
|
||||
if (!basepath) return false;
|
||||
if (basepath === '/') return basepath;
|
||||
if (basepath[0] !== '/') basepath = '/' + basepath;
|
||||
if (basepath[basepath.length - 1] === '/') basepath = basepath.substr(0, basepath.length - 1);
|
||||
if (!_yapi2.default.commons.verifyPath(basepath)) {
|
||||
|
||||
@ -17,6 +17,8 @@
|
||||
<script src="http://127.0.0.1:4000/yapi/prd/index@dev.js"></script>
|
||||
|
||||
<script src="/lib/ace-1.2.8.js"></script>
|
||||
<script src="/lib/snippets-json.js"></script>
|
||||
<script src="/lib/ext-language.tools.js"></script>
|
||||
<script src="/lib/mode-json-1.2.8.js"></script>
|
||||
<script src="https://qsso.corp.qunar.com/lib/qsso-auth.js"></script>
|
||||
|
||||
|
||||
@ -318,7 +318,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -355,7 +355,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
@ -453,7 +453,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -549,7 +549,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -637,7 +637,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"logout success..."</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -676,7 +676,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token string">"ok"</span>
|
||||
@ -767,7 +767,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" ><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" ><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -863,7 +863,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"logout success..."</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -1224,7 +1224,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"ok"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
@ -1314,7 +1314,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -1351,7 +1351,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/project.js.html#34" target="_blank">./server/controllers/project.js:34</a>
|
||||
<a href="./static/server/controllers/project.js.html#35" target="_blank">./server/controllers/project.js:35</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -1451,7 +1451,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -1492,7 +1492,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/project.js.html#115" target="_blank">./server/controllers/project.js:115</a>
|
||||
<a href="./static/server/controllers/project.js.html#116" target="_blank">./server/controllers/project.js:116</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -1546,7 +1546,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -1576,7 +1576,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/project.js.html#147" target="_blank">./server/controllers/project.js:147</a>
|
||||
<a href="./static/server/controllers/project.js.html#148" target="_blank">./server/controllers/project.js:148</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -1630,7 +1630,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -1660,7 +1660,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/project.js.html#180" target="_blank">./server/controllers/project.js:180</a>
|
||||
<a href="./static/server/controllers/project.js.html#181" target="_blank">./server/controllers/project.js:181</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -1702,7 +1702,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
@ -1738,7 +1738,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/project.js.html#208" target="_blank">./server/controllers/project.js:208</a>
|
||||
<a href="./static/server/controllers/project.js.html#209" target="_blank">./server/controllers/project.js:209</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -1780,7 +1780,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -1821,7 +1821,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/project.js.html#232" target="_blank">./server/controllers/project.js:232</a>
|
||||
<a href="./static/server/controllers/project.js.html#233" target="_blank">./server/controllers/project.js:233</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -1883,7 +1883,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -2068,7 +2068,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/project.js.html#278" target="_blank">./server/controllers/project.js:278</a>
|
||||
<a href="./static/server/controllers/project.js.html#279" target="_blank">./server/controllers/project.js:279</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -2110,7 +2110,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -2140,7 +2140,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/project.js.html#311" target="_blank">./server/controllers/project.js:311</a>
|
||||
<a href="./static/server/controllers/project.js.html#312" target="_blank">./server/controllers/project.js:312</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -2258,7 +2258,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code">
|
||||
<pre class="ydoc-example" data-foldnumber=10><code>
|
||||
<span class="token comment" spellcheck="true">//请求示例</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token string">"id"</span><span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
|
||||
@ -2300,7 +2300,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/project.js.html#402" target="_blank">./server/controllers/project.js:402</a>
|
||||
<a href="./static/server/controllers/project.js.html#403" target="_blank">./server/controllers/project.js:403</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -2342,7 +2342,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"ok"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -2616,7 +2616,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code">
|
||||
<pre class="ydoc-example" data-foldnumber=10><code>
|
||||
<span class="token comment" spellcheck="true">//请求 /interface/add</span>
|
||||
<span class="token comment" spellcheck="true">//header Content-Type:application/json</span>
|
||||
|
||||
@ -2751,7 +2751,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">.</span><span class="token operator">/</span>api<span class="token operator">/</span><span class="token keyword">interface</span><span class="token operator">/</span><span class="token keyword">get</span><span class="token punctuation">.</span>json</code></pre>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">.</span><span class="token operator">/</span>api<span class="token operator">/</span><span class="token keyword">interface</span><span class="token operator">/</span><span class="token keyword">get</span><span class="token punctuation">.</span>json</code></pre>
|
||||
|
||||
|
||||
</div>
|
||||
@ -2816,7 +2816,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">.</span><span class="token operator">/</span>api<span class="token operator">/</span><span class="token keyword">interface</span><span class="token operator">/</span>list<span class="token punctuation">.</span>json</code></pre>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">.</span><span class="token operator">/</span>api<span class="token operator">/</span><span class="token keyword">interface</span><span class="token operator">/</span>list<span class="token punctuation">.</span>json</code></pre>
|
||||
|
||||
|
||||
</div>
|
||||
@ -3041,7 +3041,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -3114,7 +3114,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@ -3209,7 +3209,7 @@
|
||||
|
||||
|
||||
<div>示例：</div>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
|
||||
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
|
||||
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@ -68,23 +68,23 @@
|
||||
<div class="ydoc-container-content " id="readme">
|
||||
|
||||
<article class="markdown-body">
|
||||
<h2 class="subject" id="快速开始">快速开始 <a class="hashlink" href="#快速开始">#</a></h2><h3 class="subject" id="1_接口管理架构">1 接口管理架构 <a class="hashlink" href="#1_接口管理架构">#</a></h3><p>平台以<strong>项目分组</strong> -> <strong>项目</strong> -> <strong>接口</strong>的划分进行接口组织管理。</p>
|
||||
<h2 class="subject" id="快速开始">快速开始 <a class="hashlink" href="#快速开始">#</a></h2><h3 class="subject" id="1 接口管理架构">1 接口管理架构 <a class="hashlink" href="#1 接口管理架构">#</a></h3><p>平台以<strong>项目分组</strong> -> <strong>项目</strong> -> <strong>接口</strong>的划分进行接口组织管理。</p>
|
||||
<p><img src="http://upload-images.jianshu.io/upload_images/842107-305ba49a60ee1ff5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<h4 class="subject" id="1.1_项目分组">1.1 项目分组 <a class="hashlink" href="#1.1_项目分组">#</a></h4><p>登录之后进到项目首页，左边侧边栏显示的即分组列表。</p>
|
||||
<h4 class="subject" id="1.1 项目分组">1.1 项目分组 <a class="hashlink" href="#1.1 项目分组">#</a></h4><p>登录之后进到项目首页，左边侧边栏显示的即分组列表。</p>
|
||||
<p><img src="http://upload-images.jianshu.io/upload_images/842107-d90ca4b3242fa760.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "200" style="margin-left:170px;display:block;" alt="图片名称" align=center /></p>
|
||||
<p>管理员有权限添加或删除分组。</p>
|
||||
<p><img src="http://upload-images.jianshu.io/upload_images/842107-a0d4d9a98003896a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "500" style="margin-left:170px;display:block;" alt="图片名称" align=center /></p>
|
||||
<blockquote>
|
||||
<p>分组名称具有唯一性</p>
|
||||
</blockquote>
|
||||
<h4 class="subject" id="1.2_项目">1.2 项目 <a class="hashlink" href="#1.2_项目">#</a></h4><p>选中不同的分组，右边会显示该分组下的项目列表。</p>
|
||||
<h4 class="subject" id="1.2 项目">1.2 项目 <a class="hashlink" href="#1.2 项目">#</a></h4><p>选中不同的分组，右边会显示该分组下的项目列表。</p>
|
||||
<p><img src="http://upload-images.jianshu.io/upload_images/842107-137bcae58b84715e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<p>创建项目需要填写项目名称，项目线上域名（添加完成后可配置项目其他环境域名），项目接口基本路径（接口路径前面相同的部分）以及项目描述。</p>
|
||||
<p><img src="http://upload-images.jianshu.io/upload_images/842107-360a50ddb746f73d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<blockquote>
|
||||
<p>项目『线上域名 + 基本路径』具有唯一性</p>
|
||||
</blockquote>
|
||||
<h4 class="subject" id="1.3_接口">1.3 接口 <a class="hashlink" href="#1.3_接口">#</a></h4><p>点击项目名称，进入该项目接口列表。</p>
|
||||
<h4 class="subject" id="1.3 接口">1.3 接口 <a class="hashlink" href="#1.3 接口">#</a></h4><p>点击项目名称，进入该项目接口列表。</p>
|
||||
<p><img src="http://upload-images.jianshu.io/upload_images/842107-e858005f714f4889.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<p>点击编辑，进入接口详情页（之后接口详情页和编辑也会分开），可以编辑接口或者请求测试真实接口。</p>
|
||||
<p><img src="http://upload-images.jianshu.io/upload_images/842107-78c0ea839619d068.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
|
||||
@ -68,19 +68,156 @@
|
||||
<div class="ydoc-container-content " id="readme">
|
||||
|
||||
<article class="markdown-body">
|
||||
<h3 class="subject" id="Mock功能">Mock功能 <a class="hashlink" href="#Mock功能">#</a></h3> <p style='text-indent:2em;line-height:1.8em'>yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则生成Mock接口，这些接口会自动生成模拟数据，支持复杂的生成逻辑，创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的，正是由于yapi的Mock是一个第三方平台那么在 团队开发时任何人都可以权限许可下创建、修改接口信息等操作，这对于团队开发是很有好处的。</p>
|
||||
<h2 class="subject" id="Mock功能">Mock功能 <a class="hashlink" href="#Mock功能">#</a></h2> <p style='text-indent:2em;line-height:1.8em'>yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则(<a href="#mock">点击到Mock规则</a>）生成Mock接口，这些接口会自动生成模拟数据，支持复杂的生成逻辑，创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的，正是由于yapi的Mock是一个第三方平台那么在 团队开发时任何人都可以权限许可下创建、修改接口信息等操作，这对于团队开发是很有好处的。</p>
|
||||
|
||||
<h4 class="subject" id="1_添加接口">1 添加接口 <a class="hashlink" href="#1_添加接口">#</a></h4><p>通过点击页面上的"+添加接口"</p>
|
||||
<h3 class="subject" id="1 Mock步骤">1 Mock步骤 <a class="hashlink" href="#1 Mock步骤">#</a></h3><h4 class="subject" id="1.1 创建接口">1.1 创建接口 <a class="hashlink" href="#1.1 创建接口">#</a></h4><p>通过点击页面上的"+添加接口"（若是接口已存在则跳到 1.2 ）</p>
|
||||
<p><img src="http://note.youdao.com/yws/api/personal/file/WEB613bd4f29db038f2b41c03dcfceda2b6?method=download&shareKey=29bfc2b855f6f26ce0079baf567e54cc" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<p> 输入协议、URL、接口名、请求头、请求参数、mock规则等信息，然后点击右上角的"Mock"按钮。</p>
|
||||
<p><img src="http://upload-images.jianshu.io/upload_images/842107-78c0ea839619d068.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<h4 class="subject" id="2_Mock">2 Mock <a class="hashlink" href="#2_Mock">#</a></h4><p>当点击"Mock"按钮之后，就会在页面下方生成一个mock结果并产生一个API接口。点击"复制"按钮即可复制，用户拿到接口后就可以发请求了。</p>
|
||||
<p><img src="http://note.youdao.com/yws/api/personal/file/WEBf9b154cb88d21daa8206e8c4a3d76042?method=download&shareKey=1999f6c2cf197b5b6d775c312e34073d" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<p>将请求的信息填写完善如：请求方法（post、get等）、URL、请求头、请求的数据等。然后就点击"发送"，然后在"返回结果"出可以看到接口返回的数据。</p>
|
||||
<p><img src="http://upload-images.jianshu.io/upload_images/842107-2ee7171d707e91ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<h4 class="subject" id="3_成员管理">3 成员管理 <a class="hashlink" href="#3_成员管理">#</a></h4><p>你也可以通过点击"管理成员"来添加和删除项目的成员，便于团队管理。</p>
|
||||
<p><img src="http://note.youdao.com/yws/api/personal/file/WEB1b9defdf0cb884f46c2bd6c30ceb02fb?method=download&shareKey=218b9326659208ec564b9fff3ea8c6c3" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<h2 class="subject" id="未来计划推出功能">未来计划推出功能 <a class="hashlink" href="#未来计划推出功能">#</a></h2><ol>
|
||||
<p> 输入协议、URL、接口名、请求头、请求参数、Mock规则（<a href="#mock">点击到Mock规则</a>）等信息。</p>
|
||||
<p><img src="http://note.youdao.com/yws/api/personal/file/WEB680a37ba304768804b23cf2cf36ed40d?method=download&shareKey=0d750695dce3a4c7abf697fa58d24c57" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<p>输入Mock规则时它会在右边同步产生一个对应的结果</p>
|
||||
<p><img src="http://note.youdao.com/yws/api/personal/file/WEB929dce5eed22e1b7e9a10be98ee2ab38?method=download&shareKey=5616ed1d9e09cc38f9cdbb995c892cb5" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<p>最后点击保存按钮，保存后将会在"Mock地址"生成一个链接。</p>
|
||||
<blockquote>
|
||||
<p>Mock地址的域名需要配置 host 指到我们的服务器 ip 地址</p>
|
||||
</blockquote>
|
||||
<p><img src="http://note.youdao.com/yws/api/personal/file/WEB525ea3dadf1f274bbe12943341ba00cb?method=download&shareKey=95dbc9cf7a7646387c55dabf64cad888" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<p>取到上面的链接在浏览器中请求就可以得到如下结果。</p>
|
||||
<p><img src="http://note.youdao.com/yws/api/personal/file/WEBf168cd41d3ad4b5b24d68787063220c7?method=download&shareKey=beb6896165ddd3568ebecbcc92195180" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<p><span id = "mock"></span></p>
|
||||
<h3 class="subject" id="2.1 Mock语法规范">2.1 Mock语法规范 <a class="hashlink" href="#2.1 Mock语法规范">#</a></h3><blockquote>
|
||||
<p>参考自：<a href="http://mockjs.com/">Mock.js 官网</a></p>
|
||||
</blockquote>
|
||||
<p>Mock.js 的语法规范包括两部分：</p>
|
||||
<p><a href="#DTD">1. 数据模板定义规范（Data Template Definition，DTD）</a></p>
|
||||
<p><a href="#DPD">2. 数据占位符定义规范（Data Placeholder Definition，DPD）</a></p>
|
||||
<p><span id = "DTD"></span></p>
|
||||
<h3 class="subject" id="数据模板定义规范（Data Template Definition，DTD）">数据模板定义规范（Data Template Definition，DTD） <a class="hashlink" href="#数据模板定义规范（Data Template Definition，DTD）">#</a></h3><p>数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：</p>
|
||||
<pre><code>// 属性名 name （与生成规则之间用 "|<span class="token string">" 隔开）
|
||||
// 生成规则 rule（生成规则有7种详见下面的生成规则）
|
||||
// 属性值 value（可以含有 "</span>@占位符" 同时也指定了最终值的初始值和类型）
|
||||
|
||||
'name|rule'<span class="token operator">:</span> value
|
||||
|
||||
生成规则：
|
||||
'name|min-max'<span class="token operator">:</span> value
|
||||
'name|count'<span class="token operator">:</span> value
|
||||
'name|min-max.dmin-dmax'<span class="token operator">:</span> value
|
||||
'name|min-max.dcount'<span class="token operator">:</span> value
|
||||
'name|count.dmin-dmax'<span class="token operator">:</span> value
|
||||
'name|count.dcount'<span class="token operator">:</span> value
|
||||
'name|+step'<span class="token operator">:</span> value
|
||||
</code></pre><p>生成规则示例：</p>
|
||||
<h4 class="subject" id="1. 属性值是字符串 String">1. 属性值是字符串 String <a class="hashlink" href="#1. 属性值是字符串 String">#</a></h4><pre><code><span class="token number">1</span>. 'name|min-max'<span class="token operator">:</span> string
|
||||
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
|
||||
|
||||
<span class="token number">2</span>. 'name|count'<span class="token operator">:</span> string
|
||||
通过重复 string 生成一个字符串，重复次数等于 count。
|
||||
</code></pre><h4 class="subject" id="2. 属性值是数字 Number">2. 属性值是数字 Number <a class="hashlink" href="#2. 属性值是数字 Number">#</a></h4><pre><code><span class="token number">1</span>. 'name|+<span class="token number">1</span>'<span class="token operator">:</span> number
|
||||
|
||||
属性值自动加 <span class="token number">1</span>，初始值为 number。
|
||||
|
||||
<span class="token number">2</span>. 'name|min-max'<span class="token operator">:</span> number
|
||||
|
||||
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
|
||||
|
||||
<span class="token number">3</span>. 'name|min-max.dmin-dmax'<span class="token operator">:</span> number
|
||||
|
||||
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。
|
||||
|
||||
例如：
|
||||
Mock.mock(<span class="token punctuation">{</span>
|
||||
'number1|<span class="token number">1</span>-<span class="token number">100.1</span>-<span class="token number">10</span>'<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
'number2|<span class="token number">123.1</span>-<span class="token number">10</span>'<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
'number3|<span class="token number">123.3</span>'<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
'number4|<span class="token number">123.10</span>'<span class="token operator">:</span> <span class="token number">1.123</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
// =>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"number1"</span><span class="token operator">:</span> <span class="token number">12.92</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"number2"</span><span class="token operator">:</span> <span class="token number">123.51</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"number3"</span><span class="token operator">:</span> <span class="token number">123.777</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"number4"</span><span class="token operator">:</span> <span class="token number">123.1231091814</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><h4 class="subject" id="3. 属性值是布尔型 Boolean">3. 属性值是布尔型 Boolean <a class="hashlink" href="#3. 属性值是布尔型 Boolean">#</a></h4><pre><code><span class="token number">1</span>. 'name|<span class="token number">1</span>'<span class="token operator">:</span> boolean
|
||||
|
||||
随机生成一个布尔值，值为 <span class="token boolean">true</span> 的概率是 <span class="token number">1</span>/<span class="token number">2</span>，值为 <span class="token boolean">false</span> 的概率同样是 <span class="token number">1</span>/<span class="token number">2</span>。
|
||||
|
||||
<span class="token number">2</span>. 'name|min-max'<span class="token operator">:</span> value
|
||||
|
||||
随机生成一个布尔值，值为 value 的概率是 min / (min + max<span class="token punctuation">)</span>，值为 !value 的概率是 max / (min + max<span class="token punctuation">)</span>。
|
||||
</code></pre><h4 class="subject" id="4. 属性值是对象 Object">4. 属性值是对象 Object <a class="hashlink" href="#4. 属性值是对象 Object">#</a></h4><pre><code><span class="token number">1</span>. 'name|count'<span class="token operator">:</span> object
|
||||
|
||||
从属性值 object 中随机选取 count 个属性。
|
||||
|
||||
<span class="token number">2</span>. 'name|min-max'<span class="token operator">:</span> object
|
||||
|
||||
从属性值 object 中随机选取 min 到 max 个属性。
|
||||
</code></pre><h4 class="subject" id="5. 属性值是数组 Array">5. 属性值是数组 Array <a class="hashlink" href="#5. 属性值是数组 Array">#</a></h4><pre><code><span class="token number">1</span>. 'name|<span class="token number">1</span>'<span class="token operator">:</span> array
|
||||
|
||||
从属性值 array 中随机选取 <span class="token number">1</span> 个元素，作为最终值。
|
||||
|
||||
<span class="token number">2</span>. 'name|+<span class="token number">1</span>'<span class="token operator">:</span> array
|
||||
|
||||
从属性值 array 中顺序选取 <span class="token number">1</span> 个元素，作为最终值。
|
||||
|
||||
<span class="token number">3</span>. 'name|min-max'<span class="token operator">:</span> array
|
||||
|
||||
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
|
||||
|
||||
<span class="token number">4</span>. 'name|count'<span class="token operator">:</span> array
|
||||
|
||||
通过重复属性值 array 生成一个新数组，重复次数为 count。
|
||||
</code></pre><h4 class="subject" id="6. 属性值是函数 Function">6. 属性值是函数 Function <a class="hashlink" href="#6. 属性值是函数 Function">#</a></h4><pre><code><span class="token number">1</span>. 'name'<span class="token operator">:</span> function
|
||||
|
||||
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
|
||||
</code></pre><h4 class="subject" id="7.属性值是正则表达式 RegExp">7.属性值是正则表达式 RegExp <a class="hashlink" href="#7.属性值是正则表达式 RegExp">#</a></h4><pre><code><span class="token number">1</span>. 'name'<span class="token operator">:</span> regexp
|
||||
|
||||
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
|
||||
|
||||
例如：
|
||||
Mock.mock(<span class="token punctuation">{</span>
|
||||
'regexp1'<span class="token operator">:</span> /<span class="token punctuation">[</span>a-z<span class="token punctuation">]</span><span class="token punctuation">[</span>A-Z<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span>-<span class="token number">9</span><span class="token punctuation">]</span>/<span class="token punctuation">,</span>
|
||||
'regexp2'<span class="token operator">:</span> /\w\W\s\S\d\D/<span class="token punctuation">,</span>
|
||||
'regexp3'<span class="token operator">:</span> /\d<span class="token punctuation">{</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">10</span><span class="token punctuation">}</span>/
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
// =>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"regexp1"</span><span class="token operator">:</span> <span class="token string">"pJ7"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"regexp2"</span><span class="token operator">:</span> <span class="token string">"F)\fp1G"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"regexp3"</span><span class="token operator">:</span> <span class="token string">"561659409"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><p><span id = "DPD"></span></p>
|
||||
<h3 class="subject" id="数据占位符定义规范（Data Placeholder Definition，DPD）">数据占位符定义规范（Data Placeholder Definition，DPD） <a class="hashlink" href="#数据占位符定义规范（Data Placeholder Definition，DPD）">#</a></h3><p>占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。</p>
|
||||
<p>占位符 的格式为：</p>
|
||||
<pre><code>@占位符
|
||||
@占位符(参数 <span class="token punctuation">[</span><span class="token punctuation">,</span> 参数<span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||||
|
||||
说明：
|
||||
<span class="token number">1</span>. 用 @ 来标识其后的字符串是 占位符。
|
||||
<span class="token number">2</span>. 占位符 引用的是 Mock.Random 中的方法。
|
||||
<span class="token number">3</span>. 通过 Mock.Random.extend(<span class="token punctuation">)</span> 来扩展自定义占位符。
|
||||
<span class="token number">4</span>. 占位符 也可以引用 数据模板 中的属性。
|
||||
<span class="token number">5</span>. 占位符 会优先引用 数据模板 中的属性。
|
||||
<span class="token number">6</span>. 占位符 支持 相对路径 和 绝对路径。
|
||||
|
||||
Mock.mock(<span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
first<span class="token operator">:</span> '@FIRST'<span class="token punctuation">,</span>
|
||||
middle<span class="token operator">:</span> '@FIRST'<span class="token punctuation">,</span>
|
||||
last<span class="token operator">:</span> '@LAST'<span class="token punctuation">,</span>
|
||||
full<span class="token operator">:</span> '@first @middle @last'
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
// 上面的示例可以得到如下结果：
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"name"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"first"</span><span class="token operator">:</span> <span class="token string">"Charles"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"middle"</span><span class="token operator">:</span> <span class="token string">"Brenda"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"last"</span><span class="token operator">:</span> <span class="token string">"Lopez"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"full"</span><span class="token operator">:</span> <span class="token string">"Charles Brenda Lopez"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><h2 class="subject" id="未来计划推出功能">未来计划推出功能 <a class="hashlink" href="#未来计划推出功能">#</a></h2><ol>
|
||||
<li>可视化JSON编辑器，可定义JSON_Schema和mockjs</li><li>支持HTTP和RPC协议</li><li>自动化测试</li><li>多人协作</li></ol>
|
||||
|
||||
</article>
|
||||
|
||||
@ -129,8 +129,7 @@ $(document).ready(function() {
|
||||
});
|
||||
|
||||
$('.markdown-body pre').map(function(i, item) {
|
||||
$(item).addClass('ydoc-example').append('<div class="ui-copy js-copy" data-clipboard-action="copy" data-clipboard-target=".js-code-' + i + '" data-copy-number="' + i + '">copy</div><div class="copy-tip copy-tip-' + i + '">已复制</div>');
|
||||
$(item).children('code').addClass('js-code-'+i);
|
||||
$(item).addClass('ydoc-example');
|
||||
});
|
||||
|
||||
var winHeight = $(window).height() - 44,
|
||||
@ -214,17 +213,4 @@ $(document).ready(function() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 代码复制功能
|
||||
var clipboard = new Clipboard('.js-copy');
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
var copyNumber = $(e.trigger).attr('data-copy-number');
|
||||
$('.copy-tip-'+copyNumber).show();
|
||||
setTimeout(function() {
|
||||
$('.copy-tip-'+copyNumber).hide();
|
||||
}, 1000);
|
||||
e.clearSelection();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -43,6 +43,7 @@ class projectController extends baseController {
|
||||
|
||||
handleBasepath(basepath) {
|
||||
if (!basepath) return false;
|
||||
if (basepath === '/') return basepath;
|
||||
if (basepath[0] !== '/') basepath = '/' + basepath;
|
||||
if (basepath[basepath.length - 1] === '/') basepath = basepath.substr(0, basepath.length - 1);
|
||||
if (!yapi.commons.verifyPath(basepath)) {
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
</script>
|
||||
|
||||
<script src="/lib/ace-1.2.8.js"></script>
|
||||
<script src="/lib/ext-language.tools.js"></script>
|
||||
<script src="/lib/mode-json-1.2.8.js"></script>
|
||||
<script src="https://qsso.corp.qunar.com/lib/qsso-auth.js"></script>
|
||||
</body>
|
||||
|
||||
5
static/lib/ext-language.tools.js
Normal file
5
static/lib/ext-language.tools.js
Normal file
File diff suppressed because one or more lines are too long
1
static/lib/snippets-json.js
Normal file
1
static/lib/snippets-json.js
Normal file
@ -0,0 +1 @@
|
||||
define("ace/snippets/json",["require","exports","module"],function(e,t,n){"use strict";t.snippetText=undefined,t.scope="json"})
|
||||
@ -13,6 +13,9 @@
|
||||
},
|
||||
"options": {
|
||||
"foldcode": true
|
||||
// "markdown": { // 对于 markdown 编译器进行统一配置
|
||||
// "menuLevel": 4 //选取第几级 head 作为目录，默认 -1 没有目录
|
||||
// }
|
||||
},
|
||||
"pages": [{
|
||||
"name": "index", // Page Name 会根据他生成 html 文件，例: index.html
|
||||
@ -70,6 +73,7 @@
|
||||
"description": "高效、易用、功能强大、的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。"
|
||||
},
|
||||
"content": "./README/README-mock.md" // 内容(这里以markdown文件举例)
|
||||
|
||||
},{
|
||||
"name": "api",
|
||||
"title": "",
|
||||
@ -82,6 +86,7 @@
|
||||
"type": "interface", // 类型，可选 component 和 lib，默认 component
|
||||
"source": true, // 是否生成源文件预览，默认 false
|
||||
"categories":["group","user","project", "interface"]
|
||||
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user