yapi/static/doc/usage-创建第一个API.html

195 lines
9.1 KiB
HTML
Raw Normal View History

2017-08-21 21:18:55 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no,email=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">
<meta name="description" content="description of your site">
<meta name="author" content="author of the site">
2017-08-31 11:55:24 +08:00
<title>YApi 使用手册</title>
<link rel="stylesheet" href="source/main.css" />
2017-08-31 17:08:28 +08:00
<link rel="stylesheet" href="styles/theme.css" />
2017-08-21 21:18:55 +08:00
</head>
<body>
<div class="ydoc">
<header class="ydoc-header">
<div class="ydoc-header-area">
<a href="http://ued.qunar.com/ymfe/" class="navbar-brand">YMFE</a>
<button class="ydocIcon navbar-toggle">&#xf020;</button>
<nav class="ydoc-nav">
<ul class="navbar-left">
<li class="">
<a href="index.html">首页</a>
</li>
<li class="active">
2017-08-31 11:55:24 +08:00
<a href="usage.html">使用手册</a>
</li>
2017-08-21 21:18:55 +08:00
<li class="">
<a href="api.html"></a>
</li>
</ul>
</nav>
</div>
</header>
<!-- <header style="height:20px"></header> -->
<!-- Docs page layout -->
<div class="ydoc-banner-bg">
<div class="ydoc-banner ">
<div class="ydoc-banner-area">
<h1 >YApi</h1>
2017-09-01 15:59:53 +08:00
<p class="desc ">高效、易用、功能强大的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。</p>
2017-08-21 21:18:55 +08:00
</div>
</div>
<div class="ydoc-container">
2017-08-30 15:53:48 +08:00
<div class="ydoc-container-content ">
2017-08-21 21:18:55 +08:00
2017-08-30 15:53:48 +08:00
<div class="content-left staticsidenav" role="complementary">
<nav class="docs-sidebar hidden-print hidden-xs hidden-sm">
<ul class="nav docs-sidenav">
<!-- <li > -->
<li >
2017-08-31 11:55:24 +08:00
<a href="usage-认识 YApi.html">认识 YApi</a>
</li>
<!-- <li class="active" class="active" > -->
<li class="active" >
<a href="usage-创建第一个API.html">创建第一个API</a>
2017-08-30 15:53:48 +08:00
</li>
<ul class="nav docs-sidenav-extend" >
<li >
2017-08-31 11:55:24 +08:00
<a href="#起步">起步</a>
2017-08-30 15:53:48 +08:00
</li>
2017-08-31 11:55:24 +08:00
2017-08-30 15:53:48 +08:00
</ul>
2017-08-31 11:55:24 +08:00
<!-- <li > -->
<li >
<a href="usage-使用mock功能.html">使用mock功能</a>
</li>
2017-08-30 15:53:48 +08:00
</ul>
</nav>
</div>
<div class="content-right markdown-body use-sidebar" role="main">
2017-08-31 11:55:24 +08:00
<h2 class="subject" id="起步">起步 <a class="hashlink" href="#起步">#</a></h2><h3 class="subject" id="创建API">创建API <a class="hashlink" href="#创建API">#</a></h3><p>注册新用户或使用 QSSO 登录。</p>
<p>新用户进入 YApi 时没有任何权限,只能浏览公开项目,想要创建 API 应联系 <code>组长</code> 将你添加到某分组或某项目中。
登录之后进到项目首页,左边侧边栏显示的即分组列表。</p>
2017-08-24 16:37:45 +08:00
<p><img src="./images/project_group.png" width = "200" style="margin-left:170px;display:block;" alt="图片名称" align=center /></p>
2017-08-31 11:55:24 +08:00
<h4 class="subject" id="项目列表">项目列表 <a class="hashlink" href="#项目列表">#</a></h4><p>选中不同的分组,右边会显示该分组下的项目列表。</p>
2017-08-24 16:37:45 +08:00
<p><img src="./images/project_list.png" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
2017-08-31 11:55:24 +08:00
<h3 class="subject" id="添加项目">添加项目 <a class="hashlink" href="#添加项目">#</a></h3><ul>
<li><p>点击右上角的“+“号进入添加项目页面
<img src="./images/project_add.png" width = "100%" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
</li><li><p>添加项目页面
<img src="./images/project_add_view.png" width = "100%" style="margin:0px auto;display:block;" alt="图片名称" align=center />
2017-08-24 16:37:45 +08:00
添加完成后进去项目详情页面</p>
2017-08-31 11:55:24 +08:00
</li></ul>
<h3 class="subject" id="项目详情页面">项目详情页面 <a class="hashlink" href="#项目详情页面">#</a></h3><h4 class="subject" id="添加接口分类">添加接口分类 <a class="hashlink" href="#添加接口分类">#</a></h4><p><img src="./images/interface_add_cat.png" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
2017-08-24 16:37:45 +08:00
<p>添加完成后可以在左侧列表看到新添加的接口分类</p>
<h4 class="subject" id="4.2_添加接口">4.2 添加接口 <a class="hashlink" href="#4.2_添加接口">#</a></h4><p>鼠标移动到接口分类的菜单icon点击添加接口</p>
2017-08-24 16:37:45 +08:00
<p><img src="./images/interface_add.png" width="400" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
<h4 class="subject" id="4.3_接口编辑">4.3 接口编辑 <a class="hashlink" href="#4.3_接口编辑">#</a></h4><p>添加完接口点击新添加的接口,跳转到接口预览页面,可看到刚才填写的信息。接口的详细信息点击编辑功能进行添加</p>
<h4 class="subject" id="4.4_测试接口">4.4 测试接口 <a class="hashlink" href="#4.4_测试接口">#</a></h4><p>点击运行tab,可进入到接口测试页面,首先安装chrome crossRequest扩展才可正常使用此功能
2017-08-24 17:12:55 +08:00
<img src="./images/interface_run.png" width="800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
2017-08-24 16:37:45 +08:00
点击保存按钮可把当前测试保存到测试集,方便下次调试</p>
2017-08-21 21:18:55 +08:00
2017-08-30 15:53:48 +08:00
</div>
2017-08-21 21:18:55 +08:00
</div>
</div>
</div>
<footer class="footer">
<div class="copyright">
&copy; 2016 <a href="http://ued.qunar.com/ymfe/">YMFE</a> Team. Build by <a href="http://ued.qunar.com/ydoc/">ydoc</a>.
</div>
</footer>
</div>
2017-08-30 15:53:48 +08:00
<div class="open-panel"></div>
<div class="mask"></div>
2017-08-21 21:18:55 +08:00
<script src="source/main.js"></script>
<script src="source/app.js"></script>
<script>
var lineHeight = 18;
2017-08-21 21:18:55 +08:00
var EXAMPLE_MAX_HEIGHT;
function fold() {
// 折叠code
$('.markdown-body pre').css({
"line-height": lineHeight + "px"
});
$('.markdown-body pre').map(function(i, item) {
var $item = $(item);
var foldnumber = $item.data('foldnumber');
EXAMPLE_MAX_HEIGHT = lineHeight * (foldnumber || 6);
if ($item.height() > EXAMPLE_MAX_HEIGHT) {
$item.css({
"padding-bottom": 30
});
$item.find('code').height(EXAMPLE_MAX_HEIGHT);
$item.append('<span class="extend">展开更多……</span>');
};
});
$('.ydoc-example').delegate('.extend', 'click', function() {
var $this = $(this);
$this.removeClass('extend').addClass('fold');
$this.html('折叠代码');
$this.parent().children('.js-code').height('auto');
$this.parent().height('auto');
2017-08-21 21:18:55 +08:00
});
$('.ydoc-example').delegate('.fold', 'click', function() {
var $this = $(this);
var foldnumber = $this.parent().data('foldnumber');
EXAMPLE_MAX_HEIGHT = lineHeight * (foldnumber || 6);
$this.removeClass('fold').addClass('extend');
$this.parent().height(EXAMPLE_MAX_HEIGHT); // pre
$this.parent().children('.js-code').height(EXAMPLE_MAX_HEIGHT); // code
2017-08-21 21:18:55 +08:00
$this.html("展开更多……");
});
}
$(document).ready(fold);
</script>
</body>
</html>