mirror of
https://github.com/YMFE/yapi.git
synced 2024-12-09 05:00:30 +08:00
Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev
This commit is contained in:
zwjamnsss
commit
a3e05aa727
@ -5,7 +5,7 @@
|
||||
### 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 />
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
<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 />
|
||||
|
||||
最后点击保存按钮，保存后将会在"Mock地址"生成一个链接。
|
||||
>这里Mock地址的域名是需要已经配置host了
|
||||
>Mock地址的域名需要配置 host 指到我们的服务器 ip 地址
|
||||
|
||||
<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 />
|
||||
|
||||
@ -26,11 +26,6 @@
|
||||
|
||||
<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 />
|
||||
|
||||
#### 1.2 发起请求
|
||||
|
||||
将请求的信息填写完善如：请求方法（post、get等）、URL、请求头、请求的数据等。然后就点击"发送"，然后在"返回结果"出可以看到接口返回的数据。
|
||||
|
||||
<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 />
|
||||
|
||||
|
||||
<span id = "mock"></span>
|
||||
|
||||
@ -181,7 +181,7 @@ export default class HeaderCom extends Component {
|
||||
<Link to="/group">项目广场</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="/doc">
|
||||
<a target="_blank" href="./doc/index.html">文档</a>
|
||||
<a target="_blank" href="./doc/index.html">使用文档</a>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
<div className="user-toolbar">
|
||||
|
||||
@ -25,8 +25,8 @@ import {
|
||||
} from '../../actions/addInterface.js'
|
||||
|
||||
let projectId = ''
|
||||
const success = () => {
|
||||
message.success('保存成功!')
|
||||
const success = (text, arg) => {
|
||||
arg ? message.success(text) : message.error(text)
|
||||
}
|
||||
|
||||
@connect(
|
||||
@ -102,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)
|
||||
}
|
||||
}
|
||||
@ -139,8 +149,8 @@ class AddInterface extends Component {
|
||||
const params = {id: project_id}
|
||||
axios.get('/project/get', {params: params}).
|
||||
then( data => {
|
||||
const { protocol, prd_host, basepath } = data.data.data
|
||||
const mockURL = `${protocol}://${prd_host}${basepath}${result.path}`
|
||||
const { prd_host, basepath } = data.data.data
|
||||
const mockURL = `http://${prd_host}${basepath}${result.path}`
|
||||
this.setState({
|
||||
mockURL: mockURL,
|
||||
projectData: data.data.data
|
||||
@ -270,11 +280,16 @@ class AddInterface extends Component {
|
||||
|
||||
axios.post(postURL, params)
|
||||
.then(data => {
|
||||
if(data.data.errcode !== 0){
|
||||
this.setLoading()
|
||||
success(data.data.errmsg, false)
|
||||
return null;
|
||||
}
|
||||
const id = data.data.data._id
|
||||
const _id = id || interfaceId
|
||||
|
||||
this.setLoading()
|
||||
success()
|
||||
success('保存成功!', true)
|
||||
this.changeState(true)
|
||||
// 初始化 mock
|
||||
this.mockData()
|
||||
@ -285,8 +300,10 @@ class AddInterface extends Component {
|
||||
|
||||
this.jumpEditUrl(_id)
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e)
|
||||
.catch(error => {
|
||||
this.setLoading()
|
||||
success('程序出错，请联系管理员检查!', false)
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -42,7 +42,8 @@ class ReqHeader extends Component {
|
||||
addSeqGroup () {
|
||||
let newSeqGroup = []
|
||||
let seqGroup = this.props.seqGroup
|
||||
let id = seqGroup[seqGroup.length-1].id
|
||||
let length = seqGroup.length
|
||||
let id = length ? seqGroup[length-1].id : 0
|
||||
let list = {
|
||||
id: ++id,
|
||||
value: '',
|
||||
|
||||
@ -28,7 +28,6 @@ class ResParams extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
console.log(props)
|
||||
}
|
||||
|
||||
// initResParams () {
|
||||
@ -69,7 +68,6 @@ class ResParams extends Component {
|
||||
var rhymeCompleter = {
|
||||
identifierRegexps: [/[@]/],
|
||||
getCompletions: function (editor, session, pos, prefix, callback) {
|
||||
console.log(prefix)
|
||||
if (prefix.length === 0) { callback(null, []); return }
|
||||
var wordList = [
|
||||
{ name: '字符串', mock: '@string' },
|
||||
@ -97,10 +95,13 @@ class ResParams extends Component {
|
||||
}
|
||||
}
|
||||
langTools.addCompleter(rhymeCompleter);
|
||||
|
||||
editor.getSession().on('change', () => {
|
||||
this.props.getResParams(editor.getValue())
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
editor.setValue(json_parse(this.props.resParams))
|
||||
}, 400)
|
||||
}
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
<article class="markdown-body">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>通过点击页面上的"+添加接口"</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规则（<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>
|
||||
@ -78,13 +78,11 @@
|
||||
<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了</p>
|
||||
<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>
|
||||
<h4 class="subject" id="1.2_发起请求">1.2 发起请求 <a class="hashlink" href="#1.2_发起请求">#</a></h4><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>
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user