mirror of
https://github.com/YMFE/yapi.git
synced 2025-01-18 13:04:46 +08:00
297 lines
16 KiB
HTML
297 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<title>YApi 接口管理平台 使用手册</title>
|
||
|
||
<meta name="keywords" content="api管理,接口管理,接口文档,api文档">
|
||
|
||
|
||
<meta name="description" content="YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API，YApi 还为用户提供了优秀的交互体验，开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的管理。">
|
||
|
||
|
||
<link rel="shortcut icon" href="./images/favicon.ico" />
|
||
<link rel="stylesheet" href="source/main.css" />
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="styles/theme.css" />
|
||
|
||
|
||
<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">
|
||
</head>
|
||
<body>
|
||
<div class="ydoc">
|
||
<header class="ydoc-header">
|
||
<div class="ydoc-header-area">
|
||
|
||
<a href="./index.html" class="navbar-brand"><img src="./images/logo_header@2x.png" /> YAPI</a>
|
||
|
||
<button class="ydocIcon navbar-toggle"></button>
|
||
<nav class="ydoc-nav">
|
||
<ul class="navbar-left">
|
||
|
||
<li class="">
|
||
|
||
<a href="index.html"></a>
|
||
</li>
|
||
|
||
<li class="active">
|
||
|
||
<a href="usage.html">使用手册</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
|
||
<a href="devops.html">内网部署</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
|
||
<a href="plugin.html">插件 Wiki</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
|
||
<a href="qa.html">常见问题</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
|
||
<a href="releases.html">版本记录</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
|
||
<a href="http://yapi.demo.qunar.com/" target="_blank">demo 站点</a>
|
||
</li>
|
||
|
||
<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>
|
||
<p class="desc ">高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="ydoc-container">
|
||
|
||
<div class="ydoc-container-content ">
|
||
|
||
|
||
<div class="content-left staticsidenav" role="complementary">
|
||
<nav class="docs-sidebar hidden-print hidden-xs hidden-sm">
|
||
<ul class="nav docs-sidenav">
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="getfamiliar.html">认识 YApi</a>
|
||
</li>
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="quickstart.html">创建第一个API</a>
|
||
</li>
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="manage.html">管理分组与项目</a>
|
||
</li>
|
||
|
||
<!-- <li class="active" class="active" > -->
|
||
<li class="active" >
|
||
|
||
<a href="project.html">项目操作</a>
|
||
</li>
|
||
|
||
<ul class="nav docs-sidenav-extend" >
|
||
|
||
<li >
|
||
<a href="#新建项目">新建项目</a>
|
||
</li>
|
||
|
||
<li >
|
||
<a href="#修改项目">修改项目</a>
|
||
</li>
|
||
|
||
<li >
|
||
<a href="#删除项目">删除项目</a>
|
||
</li>
|
||
|
||
<li >
|
||
<a href="#配置环境">配置环境</a>
|
||
</li>
|
||
|
||
<li >
|
||
<a href="#请求配置">请求配置</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="interface.html">接口操作</a>
|
||
</li>
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="mock.html">普通 Mock</a>
|
||
</li>
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="adv_mock.html">高级 Mock</a>
|
||
</li>
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="case.html">使用测试集</a>
|
||
</li>
|
||
|
||
<!-- <li > -->
|
||
<li >
|
||
|
||
<a href="data.html">数据导入</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="content-right markdown-body use-sidebar" role="main">
|
||
|
||
<h2 class="subject" id="新建项目">新建项目 <a class="hashlink" href="#新建项目">#</a></h2><p>点击右上角的 <code>+</code> 新建项目，进入新建项目页面。</p>
|
||
<p><img src="./images/usage/project_add.png" /></p>
|
||
<p>在新建项目页，填写项目信息：</p>
|
||
<blockquote>
|
||
<ul>
|
||
<li>项目名称不允许重复，包括其他分组</li><li>基本路径为接口统一添加了前缀</li><li>新建项目页只列出了部分配置，其他详细配置(环境配置、项目图标等)需要进入项目页的“设置”面板进行配置。</li></ul>
|
||
</blockquote>
|
||
<p><img src="./images/usage/project_add_panel.png" /></p>
|
||
<h2 class="subject" id="修改项目">修改项目 <a class="hashlink" href="#修改项目">#</a></h2><p>在项目页点击上方的 <code>设置</code> Tab 进入项目设置面板，这个面板涵盖了项目的所有配置。</p>
|
||
<p><img src="./images/usage/project_setting.png" /></p>
|
||
<p>这里比新建项目页面新增的功能如下：</p>
|
||
<h3 class="subject" id="修改项目图标">修改项目图标 <a class="hashlink" href="#修改项目图标">#</a></h3><p>点击项目图标，可以修改图标及背景色：</p>
|
||
<p><img src="./images/usage/project_setting_logo.png" /></p>
|
||
<h2 class="subject" id="删除项目">删除项目 <a class="hashlink" href="#删除项目">#</a></h2><p>点击下方的删除按钮，输入项目名称进行删除。</p>
|
||
<blockquote>
|
||
<p>删除项目是高风险操作，因此 YApi 对这个操作进行了特别的约束。</p>
|
||
</blockquote>
|
||
<h2 class="subject" id="配置环境">配置环境 <a class="hashlink" href="#配置环境">#</a></h2><p><code>环境配置</code> 一项可以添加该项目下接口的实际环境，供 <a href="./usage-使用测试集.html">接口测试</a> 使用，这里增加了全局header，可以在项目中设置全局header值。在接口运行页面的选择环境select中也增加<code>环境配置</code>弹层。</p>
|
||
<p><img src="./images/usage/project_setting_env.png" /></p>
|
||
<h2 class="subject" id="请求配置">请求配置 <a class="hashlink" href="#请求配置">#</a></h2><p>通过自定义 js 脚本方式改变请求的参数和返回的 response 数据</p>
|
||
<h3 class="subject" id="请求参数示例">请求参数示例 <a class="hashlink" href="#请求参数示例">#</a></h3><p>以 jquery ajax 为例，假设当前的请求参数是</p>
|
||
<pre><code><span class="token punctuation">{</span>
|
||
url<span class="token operator">:</span> '/api/user?id=<span class="token number">1</span>'<span class="token punctuation">,</span>
|
||
method<span class="token operator">:</span> 'POST'<span class="token punctuation">,</span>
|
||
headers<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
xxx<span class="token operator">:</span> 'xxx'
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
data<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
type<span class="token operator">:</span> <span class="token number">1</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><p>那么公共变量 context 包含以下属性：</p>
|
||
<pre><code>context = <span class="token punctuation">{</span>
|
||
pathname<span class="token operator">:</span> '/api/user'<span class="token punctuation">,</span>
|
||
query<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
id<span class="token operator">:</span> <span class="token number">1</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
requestHeader<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
xxx<span class="token operator">:</span> 'xxx'
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
method<span class="token operator">:</span> 'POST'<span class="token punctuation">,</span>
|
||
requestBody<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
type<span class="token operator">:</span><span class="token number">1</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><p>假设我们需要在 url 增加一个 token 参数，可以写如下自定义脚本：</p>
|
||
<pre><code>context.query.token = context.utils.md5(context.pathname + 'salt'<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code></pre><h3 class="subject" id="返回数据示例">返回数据示例 <a class="hashlink" href="#返回数据示例">#</a></h3><p>在上面的示例请求完成后，假设返回 responseBody={a:1},公共变量 context 包含以下属性：</p>
|
||
<pre><code>context = <span class="token punctuation">{</span>
|
||
pathname<span class="token operator">:</span> '/api/user'<span class="token punctuation">,</span>
|
||
query<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
id<span class="token operator">:</span> <span class="token number">1</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
requestHeader<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
xxx<span class="token operator">:</span> 'xxx'
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
method<span class="token operator">:</span> 'POST'<span class="token punctuation">,</span>
|
||
requestBody<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
type<span class="token operator">:</span><span class="token number">1</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
responseData<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
a<span class="token operator">:</span><span class="token number">1</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
responseHeader<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
content-type<span class="token operator">:</span> 'application/json'
|
||
...
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><p>假设我们需要修改响应数据 responseBody a 的值为 2，可以填写如下自定义脚本：</p>
|
||
<pre><code>context.responseBody.a = <span class="token number">2</span><span class="token punctuation">;</span>
|
||
</code></pre><h3 class="subject" id="工具函数">工具函数 <a class="hashlink" href="#工具函数">#</a></h3><pre><code>context.utils = <span class="token punctuation">{</span>
|
||
_ //underscore 函数<span class="token punctuation">,</span>详细 API 查看官网 http<span class="token operator">:</span>//underscorejs.org/
|
||
base64 //转换字符串为 base64 编码
|
||
md5 //转换字符串为 md5 编码
|
||
sha1 //转换字符串为 sha1 编码
|
||
sha224 //转换字符串为 sha224 编码
|
||
sha256 //转换字符串为 sha256 编码
|
||
sha384 //转换字符串为 sha384 编码
|
||
sha512 //转换字符串为 sha512 编码
|
||
unbase64 //转换 base64 编码为字符串
|
||
<span class="token punctuation">}</span>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<footer class="footer">
|
||
<div class="copyright">
|
||
© 2018 <a href="https://ymfe.org">YMFE</a> Team. Build by <a href="http://ued.qunar.com/ydoc/">ydoc</a>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
<div class="open-panel"></div>
|
||
<div class="mask"></div>
|
||
|
||
|
||
<script src="source/main.js"></script>
|
||
<script src="source/app.js"></script>
|
||
|
||
|
||
</body>
|
||
|
||
</html>
|