mirror of
https://github.com/YMFE/yapi.git
synced 2024-12-21 05:19:42 +08:00
opti: 接口列表菜单布局优化
This commit is contained in:
wenbo.dong
parent
7d761ab16e
commit
253d6d4016
@ -227,8 +227,8 @@ class InterfaceMenu extends Component {
|
||||
const matchParams = this.props.match.params;
|
||||
let menuList = this.state.list;
|
||||
const searchBox = <div className="interface-filter">
|
||||
<Input onChange={this.onFilter} value={this.state.filter} placeholder="Filter by name" style={{ width: "70%" }} />
|
||||
<Tag color="#108ee9" onClick={() => this.changeModal('add_cat_modal_visible', true)} style={{ marginLeft: "16px" }} ><Icon type="plus" /></Tag>
|
||||
<Input onChange={this.onFilter} value={this.state.filter} placeholder="Filter by name" />
|
||||
<Tag color="#108ee9" onClick={() => this.changeModal('add_cat_modal_visible', true)} className="btn-filter" ><Icon type="plus" /></Tag>
|
||||
<Modal
|
||||
title="添加接口"
|
||||
visible={this.state.visible}
|
||||
|
||||
@ -250,7 +250,7 @@ class View extends Component {
|
||||
if(!methodColor) methodColor = "get";
|
||||
let res = <div className="caseContainer">
|
||||
<div className="colName">
|
||||
<span className="colKey">接口名：</span>
|
||||
<span className="colKey">接口名称：</span>
|
||||
<span className="colValue">{this.props.curData.title}</span>
|
||||
</div>
|
||||
<div className="colMethod">
|
||||
@ -262,7 +262,7 @@ class View extends Component {
|
||||
<span className="colValue">{this.props.currProject.basepath}{this.props.curData.path}</span>
|
||||
</div>
|
||||
<div className="colstatus">
|
||||
<span className="colKey">状态：</span>
|
||||
<span className="colKey">状  态：</span>
|
||||
<span className={'tag-status ' + this.props.curData.status}>{status[this.props.curData.status]}</span>
|
||||
</div>
|
||||
<div className="colAddTime">
|
||||
|
||||
@ -42,13 +42,23 @@
|
||||
height: 40px;
|
||||
line-height: 31px;
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
width: 100%;
|
||||
}
|
||||
.interface-filter{
|
||||
padding-top:7px;
|
||||
padding-left: 10px;
|
||||
padding-right: 50px;
|
||||
height:45px;
|
||||
line-height: 32px;
|
||||
padding-top:7px;
|
||||
background-color: #efefef
|
||||
background-color: #efefef;
|
||||
position: relative;
|
||||
}
|
||||
.btn-filter {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.interface-list{
|
||||
.cat_switch_hidden{
|
||||
@ -71,7 +81,6 @@
|
||||
}
|
||||
.interface-item{
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
overflow: hidden;
|
||||
top: 0px;
|
||||
line-height: 100%;
|
||||
|
||||
@ -899,7 +899,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/group.js.html#290" target="_blank">./server/controllers/group.js:290</a>
|
||||
<a href="./static/server/controllers/group.js.html#303" target="_blank">./server/controllers/group.js:303</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -971,7 +971,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/group.js.html#330" target="_blank">./server/controllers/group.js:330</a>
|
||||
<a href="./static/server/controllers/group.js.html#343" target="_blank">./server/controllers/group.js:343</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -3511,7 +3511,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/interface.js.html#168" target="_blank">./server/controllers/interface.js:168</a>
|
||||
<a href="./static/server/controllers/interface.js.html#181" target="_blank">./server/controllers/interface.js:181</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -3576,7 +3576,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/interface.js.html#193" target="_blank">./server/controllers/interface.js:193</a>
|
||||
<a href="./static/server/controllers/interface.js.html#206" target="_blank">./server/controllers/interface.js:206</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -3641,7 +3641,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/interface.js.html#255" target="_blank">./server/controllers/interface.js:255</a>
|
||||
<a href="./static/server/controllers/interface.js.html#268" target="_blank">./server/controllers/interface.js:268</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -3874,7 +3874,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/interface.js.html#427" target="_blank">./server/controllers/interface.js:427</a>
|
||||
<a href="./static/server/controllers/interface.js.html#440" target="_blank">./server/controllers/interface.js:440</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -3946,7 +3946,7 @@
|
||||
|
||||
<p>
|
||||
<small class="text-muted">源码位置:</small>
|
||||
<a href="./static/server/controllers/interface.js.html#615" target="_blank">./server/controllers/interface.js:615</a>
|
||||
<a href="./static/server/controllers/interface.js.html#628" target="_blank">./server/controllers/interface.js:628</a>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
@ -144,14 +144,14 @@
|
||||
<pre><code>mockd地址： http<span class="token operator">:</span>//yapi.corp.qunar.com/mock/<span class="token number">29</span>/api/hackathon/login
|
||||
</code></pre><p> 注：项目id可以在项目设置里查看到</p>
|
||||
<h2 class="subject" id="定义mock数据示例">定义mock数据示例 <a class="hashlink" href="#定义mock数据示例">#</a></h2><pre><code><span class="token punctuation">{</span>
|
||||
<span class="token property">"status|0-1"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> //接口状态
|
||||
"status|<span class="token number">0</span>-<span class="token number">1</span>"<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> //接口状态
|
||||
<span class="token property">"message"</span><span class="token operator">:</span> <span class="token string">"请求完成"</span><span class="token punctuation">,</span> //消息提示
|
||||
<span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"counts"</span><span class="token operator">:</span><span class="token string">"@integer"</span><span class="token punctuation">,</span> //统计数量
|
||||
<span class="token property">"totalSubjectType|4-10"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
"totalSubjectType|<span class="token number">4</span>-<span class="token number">10</span>"<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"subjectName|regexp"</span><span class="token operator">:</span> <span class="token string">"大数据|机器学习|工具"</span><span class="token punctuation">,</span> //主题名
|
||||
<span class="token property">"subjectType|+1"</span><span class="token operator">:</span> <span class="token number">1</span> //类型
|
||||
"subjectName|regexp"<span class="token operator">:</span> "大数据|机器学习|工具<span class="token string">", //主题名
|
||||
"</span>subjectType|+<span class="token number">1</span>"<span class="token operator">:</span> <span class="token number">1</span> //类型
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"data"</span><span class="token operator">:</span><span class="token punctuation">[</span>
|
||||
@ -164,8 +164,8 @@
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><h2 class="subject" id="yapiMock跟mockjs区别">yapiMock跟mockjs区别 <a class="hashlink" href="#yapiMock跟mockjs区别">#</a></h2><p>因为yapi基于json定义mock，无法使用mockjs原有的函数功能，正则表达式需要基于rule书写，示例如下：</p>
|
||||
<pre><code><span class="token punctuation">{</span>
|
||||
<span class="token property">"name|regexp"</span><span class="token operator">:</span> <span class="token string">"[a-z0-9_]+?"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"type|regexp"</span><span class="token operator">:</span> <span class="token string">"json|text|xml"</span> //枚举数据类型可这样实现
|
||||
"name|regexp"<span class="token operator">:</span> <span class="token string">"[a-z0-9_]+?"</span><span class="token punctuation">,</span>
|
||||
"type|regexp"<span class="token operator">:</span> "json|text|xml" //枚举数据类型可这样实现
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><h2 class="subject" id="如何使用Mock?">如何使用Mock? <a class="hashlink" href="#如何使用Mock?">#</a></h2><h3 class="subject" id="1_在js代码直接请求yapi提供的mock地址（不用担心跨域问题）">1 在js代码直接请求yapi提供的mock地址（不用担心跨域问题） <a class="hashlink" href="#1_在js代码直接请求yapi提供的mock地址（不用担心跨域问题）">#</a></h3><p>在代码直接请求yapi提供的mock地址，以jQuery为例：</p>
|
||||
<pre><code class="lang-javascript"><span class="token keyword">let</span> prefix <span class="token operator">=</span> <span class="token string">'http://yapi.local.qunar.com:3000/mock/2817'</span>
|
||||
@ -196,9 +196,9 @@ $<span class="token punctuation">.</span><span class="token function">post</span
|
||||
<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">"|"</span> 隔开）
|
||||
// 生成规则 rule（生成规则有<span class="token number">7</span>种详见下面的生成规则）
|
||||
// 属性值 value（可以含有 <span class="token string">"@占位符"</span> 同时也指定了最终值的初始值和类型）
|
||||
<pre><code>// 属性名 name （与生成规则之间用 "|<span class="token string">" 隔开）
|
||||
// 生成规则 rule（生成规则有7种详见下面的生成规则）
|
||||
// 属性值 value（可以含有 "</span>@占位符" 同时也指定了最终值的初始值和类型）
|
||||
|
||||
'name|rule'<span class="token operator">:</span> value
|
||||
|
||||
|
||||
@ -8,7 +8,6 @@ $(document).ready(function() {
|
||||
var $versionSelector = $('.version-selector');
|
||||
var $versionMask = $('.m-version-mask');
|
||||
var isPanelHide = true;
|
||||
var winWidth = $(window).width();
|
||||
var h2 = $('.content-right').find('h2');
|
||||
var h3 = $('.content-right').find('h3');
|
||||
var a = $('.content-left').find('a');
|
||||
|
||||
@ -309,7 +309,20 @@ class groupController extends baseController {
|
||||
try {
|
||||
var groupInst = yapi.getInst(groupModel);
|
||||
let result = await groupInst.list();
|
||||
ctx.body = yapi.commons.resReturn(result);
|
||||
let newResult = [];
|
||||
if(result && result.length > 0){
|
||||
for(let i=0; i< result.length; i++){
|
||||
result[i] = result[i].toObject();
|
||||
result[i].role = await this.checkAuth(result[i]._id, 'group', 'edit');
|
||||
if(result[i].role){
|
||||
newResult.unshift(result[i]);
|
||||
}else{
|
||||
newResult.push(result[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ctx.body = yapi.commons.resReturn(newResult);
|
||||
} catch (e) {
|
||||
ctx.body = yapi.commons.resReturn(null, 402, e.message);
|
||||
}
|
||||
|
||||
@ -103,10 +103,23 @@ class interfaceController extends baseController {
|
||||
return ctx.body = yapi.commons.resReturn(null, 400, '接口请求路径不能为空');
|
||||
}
|
||||
|
||||
if (!yapi.commons.verifyPath(params.path)) {
|
||||
let http_path = url.parse(params.path, true);
|
||||
params.path = http_path.pathname;
|
||||
|
||||
if (!yapi.commons.verifyPath(http_path.pathname)) {
|
||||
return ctx.body = yapi.commons.resReturn(null, 400, '接口path第一位必须是/，最后一位不能为/');
|
||||
}
|
||||
|
||||
if(!params.req_query){
|
||||
params.req_query = [];
|
||||
Object.keys(http_path.query).forEach((item)=>{
|
||||
params.req_query.push({
|
||||
name: item
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
let checkRepeat = await this.Model.checkRepeat(params.project_id, params.path, params.method);
|
||||
|
||||
if (checkRepeat > 0) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user