fes.js/guide/mock.html

178 lines
76 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mock 数据 | Fes.js</title>
<meta name="description" content="一个好用的前端应用解决方案">
<link rel="preload stylesheet" href="/fes.js/assets/style.4a63a91b.css" as="style">
<script type="module" src="/fes.js/assets/app.9ce4615c.js"></script>
<link rel="preload" href="/fes.js/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/fes.js/assets/chunks/framework.b31a4d00.js">
<link rel="modulepreload" href="/fes.js/assets/chunks/theme.6d04f763.js">
<link rel="modulepreload" href="/fes.js/assets/guide_mock.md.8a0d04da.lean.js">
<link rel="icon" href="/logo.png">
<script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-c74291a9><!--[--><!--]--><!--[--><span tabindex="-1" data-v-11226aa0></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-11226aa0> Skip to content </a><!--]--><!----><header class="VPNav" data-v-c74291a9 data-v-c74e2951><div class="VPNavBar has-sidebar" data-v-c74e2951 data-v-3d8ab908><div class="container" data-v-3d8ab908><div class="title" data-v-3d8ab908><div class="VPNavBarTitle has-sidebar" data-v-3d8ab908 data-v-e189ae0c><a class="title" href="/fes.js/" data-v-e189ae0c><!--[--><!--]--><!--[--><img class="VPImage logo" src="/fes.js/logo.png" alt data-v-b9e17fa4><!--]--><!--[-->Fes.js<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-3d8ab908><div class="curtain" data-v-3d8ab908></div><div class="content-body" data-v-3d8ab908><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-3d8ab908><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-3d8ab908 data-v-3f9f1003><span id="main-nav-aria-label" class="visually-hidden" data-v-3f9f1003>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/fes.js/guide/" tabindex="0" data-v-3f9f1003 data-v-3417cce8 data-v-035e7ba4><!--[-->指南<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fes.js/reference/config/" tabindex="0" data-v-3f9f1003 data-v-3417cce8 data-v-035e7ba4><!--[-->编译时配置<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fes.js/reference/api/" tabindex="0" data-v-3f9f1003 data-v-3417cce8 data-v-035e7ba4><!--[-->API<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fes.js/reference/plugin/" tabindex="0" data-v-3f9f1003 data-v-3417cce8 data-v-035e7ba4><!--[-->插件<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/fes.js/reference/cli/index.html" tabindex="0" data-v-3f9f1003 data-v-3417cce8 data-v-035e7ba4><!--[-->CLI<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-3f9f1003 data-v-7e9a1097><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-7e9a1097><span class="text" data-v-7e9a1097><!----> v3.4.7 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-7e9a1097><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-7e9a1097><div class="VPMenu" data-v-7e9a1097 data-v-b9be57d1><div class="items" data-v-b9be57d1><!--[--><!--[--><div class="VPMenuLink" data-v-b9be57d1 data-v-aadfa0cc><a class="VPLink link" href="https://fesjs.mumblefe.cn/2.0/" target="_blank" rel="noreferrer" data-v-aadfa0cc data-v-035e7ba4><!--[-->v2.0<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-035e7ba4><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b9be57d1 data-v-aadfa0cc><a class="VPLink link" href="https://fesjs.mumblefe.cn/1.0/" target="_blank" rel="noreferrer" data-v-aadfa0cc data-v-035e7ba4><!--[-->v1.0<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-035e7ba4><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-3f9f1003 data-v-7e9a1097><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-7e9a1097><span class="text" data-v-7e9a1097><!----> 了解更多 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-7e9a1097><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-7e9a1097><div class="VPMenu" data-v-7e9a1097 data-v-b9be57d1><div class="items" data-v-b9be57d1><!--[--><!--[--><div class="VPMenuLink" data-v-b9be57d1 data-v-aadfa0cc><a class="VPLink link" href="https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md" target="_blank" rel="noreferrer" data-v-aadfa0cc data-v-035e7ba4><!--[-->更新日志<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-035e7ba4><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b9be57d1 data-v-aadfa0cc><a class="VPLink link" href="http://fes-design.mumblefe.cn/" target="_blank" rel="noreferrer" data-v-aadfa0cc data-v-035e7ba4><!--[-->fes-design<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-035e7ba4><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-3d8ab908 data-v-57b3b443><label title="toggle dark mode" data-v-57b3b443 data-v-d27e0b3e><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-d27e0b3e data-v-397f7bd3><span class="check" data-v-397f7bd3><span class="icon" data-v-397f7bd3><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d27e0b3e><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d27e0b3e><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></label></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-3d8ab908 data-v-632bbf2a data-v-eb6c55bf><!--[--><a class="VPSocialLink" href="https://github.com/WeBankFinTech/fes.js" aria-label="github" target="_blank" rel="noopener" data-v-eb6c55bf data-v-36e7150a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-3d8ab908 data-v-479e3dea data-v-7e9a1097><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-7e9a1097><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-7e9a1097><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-7e9a1097><div class="VPMenu" data-v-7e9a1097 data-v-b9be57d1><!----><!--[--><!--[--><!----><div class="group" data-v-479e3dea><div class="item appearance" data-v-479e3dea><p class="label" data-v-479e3dea>Appearance</p><div class="appearance-action" data-v-479e3dea><label title="toggle dark mode" data-v-479e3dea data-v-d27e0b3e><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-d27e0b3e data-v-397f7bd3><span class="check" data-v-397f7bd3><span class="icon" data-v-397f7bd3><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d27e0b3e><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d27e0b3e><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></label></div></div></div><div class="group" data-v-479e3dea><div class="item social-links" data-v-479e3dea><div class="VPSocialLinks social-links-list" data-v-479e3dea data-v-eb6c55bf><!--[--><a class="VPSocialLink" href="https://github.com/WeBankFinTech/fes.js" aria-label="github" target="_blank" rel="noopener" data-v-eb6c55bf data-v-36e7150a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-3d8ab908 data-v-800f602f><span class="container" data-v-800f602f><span class="top" data-v-800f602f></span><span class="middle" data-v-800f602f></span><span class="bottom" data-v-800f602f></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-c74291a9 data-v-1c6a0f8c><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-1c6a0f8c><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-1c6a0f8c><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-1c6a0f8c>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-1c6a0f8c data-v-fdf147c8><button data-v-fdf147c8>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-c74291a9 data-v-f8b70c20><div class="curtain" data-v-f8b70c20></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-f8b70c20><span class="visually-hidden" id="sidebar-aria-label" data-v-f8b70c20> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-f8b70c20><section class="VPSidebarItem level-0" data-v-f8b70c20 data-v-a0c168fa><div class="item" role="button" tabindex="0" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><h2 class="text" data-v-a0c168fa>开始</h2><!----></div><div class="items" data-v-a0c168fa><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/index.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>介绍</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/getting-started.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>快速上手</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-f8b70c20><section class="VPSidebarItem level-0 has-active" data-v-f8b70c20 data-v-a0c168fa><div class="item" role="button" tabindex="0" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><h2 class="text" data-v-a0c168fa>基础</h2><!----></div><div class="items" data-v-a0c168fa><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/directory-structure.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>目录结构</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/builder.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>Vite 和 Webpack 双构建</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/config.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>编译时配置</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/runtime-config.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>运行时配置</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/env.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>环境变量</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/route.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>路由</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/plugin.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>插件</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/template.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>HTML 模板</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/mock.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>Mock 数据</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/upgrade3.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>从 2.x 迁移到 3.x</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-f8b70c20><section class="VPSidebarItem level-0" data-v-f8b70c20 data-v-a0c168fa><div class="item" role="button" tabindex="0" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><h2 class="text" data-v-a0c168fa>样式和资源文件</h2><!----></div><div class="items" data-v-a0c168fa><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/image.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>使用图片</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/css.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>使用 css</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/public.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>静态资源</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-f8b70c20><section class="VPSidebarItem level-0" data-v-f8b70c20 data-v-a0c168fa><!----><div class="items" data-v-a0c168fa><!--[--><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/contributing.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>贡献指南</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-a0c168fa data-v-a0c168fa><div class="item" data-v-a0c168fa><div class="indicator" data-v-a0c168fa></div><a class="VPLink link link" href="/fes.js/guide/faq.html" data-v-a0c168fa data-v-035e7ba4><!--[--><p class="text" data-v-a0c168fa>常见问题</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-c74291a9 data-v-d746c125><div class="VPDoc has-sidebar has-aside" data-v-d746c125 data-v-9702f3ec><!--[--><!--]--><div class="container" data-v-9702f3ec><div class="aside" data-v-9702f3ec><div class="aside-curtain" data-v-9702f3ec></div><div class="aside-container" data-v-9702f3ec><div class="aside-content" data-v-9702f3ec><div class="VPDocAside" data-v-9702f3ec data-v-7acd232e><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-7acd232e data-v-ec56e3d5><div class="content" data-v-ec56e3d5><div class="outline-marker" data-v-ec56e3d5></div><div class="outline-title" data-v-ec56e3d5>本页目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-ec56e3d5><span class="visually-hidden" id="doc-outline-aria-label" data-v-ec56e3d5> Table of Contents for current page </span><ul class="root" data-v-ec56e3d5 data-v-afdbde2c><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-7acd232e></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-9702f3ec><div class="content-container" data-v-9702f3ec><!--[--><!--]--><!----><main class="main" data-v-9702f3ec><div style="position:relative;" class="vp-doc _fes_js_guide_mock" data-v-9702f3ec><div><h1 id="mock-数据" tabindex="-1">Mock 数据 <a class="header-anchor" href="#mock-数据" aria-label="Permalink to &quot;Mock 数据&quot;"></a></h1><p>Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞。</p><h2 id="约定式-mock-文件" tabindex="-1">约定式 Mock 文件 <a class="header-anchor" href="#约定式-mock-文件" aria-label="Permalink to &quot;约定式 Mock 文件&quot;"></a></h2><p>Fes.js 约定 <code>./mock.js</code> 为 mock 文件。</p><p>比如:</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">.</span></span>
<span class="line"><span style="color:#babed8;">├── mock.js</span></span>
<span class="line"><span style="color:#babed8;">└── src</span></span>
<span class="line"><span style="color:#babed8;"> └── pages</span></span>
<span class="line"><span style="color:#babed8;"> └── index.vue</span></span></code></pre></div><h2 id="编写-mock-文件" tabindex="-1">编写 Mock 文件 <a class="header-anchor" href="#编写-mock-文件" aria-label="Permalink to &quot;编写 Mock 文件&quot;"></a></h2><p>可以参考如下 🌰:</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">({</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">cgiMock</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">mockjs</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">utils</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Random</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">mockjs</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 测试 proxy 与 mock 用例集合</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/movie/in_theaters_mock</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> code</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> msg</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> result</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> text</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">movie: movie/in_theaters_mock ~~~~~</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/movie/test_mock</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> code</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> msg</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> result</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> text</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">mock: movie/test_mock</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 测试用例: mock.js change重现请求需要能拉最新的数据</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/watchtest</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> code</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> msg</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> result</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> text</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">通过 register 测试 mock watch: 初始状态</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 返回一个数字</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// cgiMock(&#39;/number&#39;, 666);</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/number</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">999</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 返回一个json</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> url</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/json</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> result</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> code</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">400101</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> msg</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">不合法的请求:Missing cookie &#39;wb_app_id&#39; for method parameter of type String</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> transactionTime</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">20170309171146</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> success</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 利用 mock.js 产生随机文本</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/text</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">cparagraph</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 返回一个字符串 利用 mock.js 产生随机字符</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/random</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">mockjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">mock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">string|1-10</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;"></span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 正则匹配url, 返回一个字符串</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">/</span><span style="color:#BABED8;">\/</span><span style="color:#C3E88D;">abc</span><span style="color:#89DDFF;">|</span><span style="color:#BABED8;">\/</span><span style="color:#C3E88D;">xyz</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">regexp test!</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// option.result 参数如果是一个函数, 可以实现自定义返回内容, 接收的参数是是经过 express 封装的 req 和 res 对象.</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">/</span><span style="color:#BABED8;">\/</span><span style="color:#C3E88D;">function</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">function test</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 返回文本 readFileSync</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/file</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">utils</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">file</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./package.json</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 更复杂的规则配置</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> url</span><span style="color:#89DDFF;">:</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#BABED8;">\/</span><span style="color:#C3E88D;">who</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> method</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">GET</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> result</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">req</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">query</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">kwan</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">json</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> kwan</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">孤独患者</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Nooooooooooo</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;"> headers</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">Content-Type</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">text/plain</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">Content-Length</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">123</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> ETag</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">12345</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;"> cookies</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">myname</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> value</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">kwan</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> maxAge</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">900000</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> httpOnly</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;"> ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 携带参数的请求</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/v2/audit/list</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">currentPage</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">pageSize</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">isAudited</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">req</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">body</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> code</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> msg</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> data</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">currentPage</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">pageSize</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> totalPage</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> totalCount</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">12</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> pageData</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">from</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> length</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">pageSize</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">title</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> authorName</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">cname</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> authorId</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">name</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> createTime</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Date</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">now</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> updateTime</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Date</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">now</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> readCount</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">integer</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">60</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> favoriteCount</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">integer</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">50</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> postId</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">12323</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> serviceTag</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">业务类型</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> productTag</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">产品类型</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> requestTag</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">需求类型</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> handleTag</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">已采纳</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> postType</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">voice</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> postStatus</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">isAudited</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pass</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">auditing</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> auditStatus</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">audit1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// multipart/form-data 类型</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/v2/upload</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> code</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> msg</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">文件上传成功</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="cgimock-参数" tabindex="-1">cgiMock 参数 <a class="header-anchor" href="#cgimock-参数" aria-label="Permalink to &quot;cgiMock 参数&quot;"></a></h3><p>创建一个 mock 接口,参数非常灵活,参考上面的 demo 即可。</p><h3 id="mockjs-参数" tabindex="-1">mockjs 参数 <a class="header-anchor" href="#mockjs-参数" aria-label="Permalink to &quot;mockjs 参数&quot;"></a></h3><p><a href="http://mockjs.com/" target="_blank" rel="noreferrer">Mock.js</a> 是常用的辅助生成模拟数据的三方库,借助他可以提升我们的 mock 数据能力。</p><p>比如:</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">({</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">cgiMock</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">mockjs</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">utils</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/random</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">mockjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">mock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">string|1-10</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;"></span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="utils-参数" tabindex="-1">utils 参数 <a class="header-anchor" href="#utils-参数" aria-label="Permalink to &quot;utils 参数&quot;"></a></h3><p>工具函数:</p><ul><li>utils.file(path),从项目根目录根据 path 寻找文件,返回文件流。</li></ul><h2 id="配置-mock" tabindex="-1">配置 Mock <a class="header-anchor" href="#配置-mock" aria-label="Permalink to &quot;配置 Mock&quot;"></a></h2><p>详见配置 <a href="./../reference/config/#mock">mock</a></p><h2 id="关闭-mock" tabindex="-1">关闭 Mock <a class="header-anchor" href="#关闭-mock" aria-label="Permalink to &quot;关闭 Mock&quot;"></a></h2><p>可以通过配置关闭。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-9702f3ec data-v-0b6073ff><!--[--><!--]--><!----><div class="prev-next" data-v-0b6073ff><div class="pager" data-v-0b6073ff><a class="pager-link prev" href="/fes.js/guide/template.html" data-v-0b6073ff><span class="desc" data-v-0b6073ff>Previous page</span><span class="title" data-v-0b6073ff>HTML 模板</span></a></div><div class="has-prev pager" data-v-0b6073ff><a class="pager-link next" href="/fes.js/guide/upgrade3.html" data-v-0b6073ff><span class="desc" data-v-0b6073ff>Next page</span><span class="title" data-v-0b6073ff>从 2.x 迁移到 3.x</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-c74291a9 data-v-12cd1677><div class="container" data-v-12cd1677><p class="message" data-v-12cd1677>Released under the MIT License.</p><p class="copyright" data-v-12cd1677>Copyright © 2020-present Webank</p></div></footer><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"d93ea205\",\"guide_builder.md\":\"7aef2181\",\"guide_env.md\":\"e59a9bdd\",\"guide_config.md\":\"62eccd9f\",\"guide_upgrade3.md\":\"3bcfb370\",\"guide_css.md\":\"db5fc79d\",\"guide_plugin.md\":\"7d7f4c03\",\"guide_contributing.md\":\"8666fd37\",\"guide_public.md\":\"84526512\",\"guide_getting-started.md\":\"ceac98ee\",\"index.md\":\"7ef233cd\",\"guide_route.md\":\"11dd4240\",\"reference_config_index.md\":\"15d388f7\",\"guide_template.md\":\"0f61d40d\",\"reference_api.md\":\"5e62d83f\",\"guide_faq.md\":\"79254e2b\",\"guide_image.md\":\"2e74f65f\",\"guide_mock.md\":\"8a0d04da\",\"reference_cli_index.md\":\"8071a8c2\",\"reference_api_index.md\":\"72b9ecff\",\"guide_directory-structure.md\":\"f0919b75\",\"guide_runtime-config.md\":\"8d7d4f16\",\"reference_plugin_index.md\":\"ee42a061\",\"reference_plugin_dev_index.md\":\"1a7b2210\",\"reference_plugin_plugins_login.md\":\"c4b18ed3\",\"reference_plugin_plugins_editor.md\":\"59115d8d\",\"reference_plugin_plugins_locale.md\":\"e5f16382\",\"reference_plugin_dev_api.md\":\"2d7e42be\",\"reference_plugin_plugins_layout.md\":\"5c7c196b\",\"reference_plugin_plugins_sass.md\":\"aea91d6e\",\"reference_plugin_plugins_swc.md\":\"f887c1f1\",\"reference_plugin_plugins_pinia.md\":\"c7ff2416\",\"reference_plugin_plugins_request.md\":\"a62289a7\",\"reference_plugin_plugins_access.md\":\"ba03251a\",\"reference_plugin_plugins_watermark.md\":\"95337b01\",\"reference_plugin_plugins_windicss.md\":\"8deb5ce9\",\"reference_plugin_plugins_request-4.md\":\"58780b87\",\"reference_plugin_plugins_icon.md\":\"f2cb3f94\",\"reference_plugin_plugins_qiankun.md\":\"ec18784c\",\"reference_plugin_plugins_model.md\":\"ef7fdf24\",\"reference_plugin_plugins_jest.md\":\"d574f7ac\",\"reference_plugin_plugins_vuex.md\":\"3806c06f\",\"reference_plugin_plugins_enums.md\":\"9c0c3064\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Fes.js\",\"description\":\"一个好用的前端应用解决方案\",\"base\":\"/fes.js/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/WeBankFinTech/fes.js\"}],\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"编译时配置\",\"link\":\"/reference/config/\"},{\"text\":\"API\",\"link\":\"/reference/api/\"},{\"text\":\"插件\",\"link\":\"/reference/plugin/\",\"activeMatch\":\"/plugin/\"},{\"text\":\"CLI\",\"link\":\"/reference/cli/index.md\"},{\"text\":\"v3.4.7\",\"items\":[{\"text\":\"v2.0\",\"link\":\"https://fesjs.mumblefe.cn/2.0/\"},{\"text\":\"v1.0\",\"link\":\"https://fesjs.mumblefe.cn/1.0/\"}]},{\"text\":\"了解更多\",\"items\":[{\"text\":\"更新日志\",\"link\":\"https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md\"},{\"text\":\"fes-design\",\"link\":\"http://fes-design.mumblefe.cn/\"}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"开始\",\"items\":[{\"text\":\"介绍\",\"link\":\"/guide/index.md\"},{\"text\":\"快速上手\",\"link\":\"/guide/getting-started.md\"}]},{\"text\":\"基础\",\"items\":[{\"text\":\"目录结构\",\"link\":\"/guide/directory-structure.md\"},{\"text\":\"Vite 和 Webpack 双构建\",\"link\":\"/guide/builder.md\"},{\"text\":\"编译时配置\",\"link\":\"/guide/config.md\"},{\"text\":\"运行时配置\",\"link\":\"/guide/runtime-config.md\"},{\"text\":\"环境变量\",\"link\":\"/guide/env.md\"},{\"text\":\"路由\",\"link\":\"/guide/route.md\"},{\"text\":\"插件\",\"link\":\"/guide/plugin.md\"},{\"text\":\"HTML 模板\",\"link\":\"/guide/template.md\"},{\"text\":\"Mock 数据\",\"link\":\"/guide/mock.md\"},{\"text\":\"从 2.x 迁移到 3.x\",\"link\":\"/guide/upgrade3.md\"}]},{\"text\":\"样式和资源文件\",\"items\":[{\"text\":\"使用图片\",\"link\":\"/guide/image.md\"},{\"text\":\"使用 css\",\"link\":\"/guide/css.md\"},{\"text\":\"静态资源\",\"link\":\"/guide/public.md\"}]},{\"text\":\"贡献指南\",\"link\":\"/guide/contributing.md\"},{\"text\":\"常见问题\",\"link\":\"/guide/faq.md\"}],\"/reference/plugin/\":[{\"text\":\"介绍\",\"link\":\"/reference/plugin/index.md\"},{\"text\":\"Plugins\",\"items\":[{\"text\":\"@fesjs/plugin-access\",\"link\":\"/reference/plugin/plugins/access.md\"},{\"text\":\"@fesjs/plugin-enums\",\"link\":\"/reference/plugin/plugins/enums.md\"},{\"text\":\"@fesjs/plugin-icon\",\"link\":\"/reference/plugin/plugins/icon.md\"},{\"text\":\"@fesjs/plugin-jest\",\"link\":\"/reference/plugin/plugins/jest.md\"},{\"text\":\"@fesjs/plugin-layout\",\"link\":\"/reference/plugin/plugins/layout.md\"},{\"text\":\"@fesjs/plugin-locale\",\"link\":\"/reference/plugin/plugins/locale.md\"},{\"text\":\"@fesjs/plugin-model\",\"link\":\"/reference/plugin/plugins/model.md\"},{\"text\":\"@fesjs/plugin-request\",\"link\":\"/reference/plugin/plugins/request.md\"},{\"text\":\"@fesjs/plugin-vuex\",\"link\":\"/reference/plugin/plugins/vuex.md\"},{\"text\":\"@fesjs/plugin-qiankun\",\"link\":\"/reference/plugin/plugins/qiankun.md\"},{\"text\":\"@fesjs/plugin-windicss\",\"link\":\"/reference/plugin/plugins/windicss.md\"},{\"text\":\"@fesjs/plugin-sass\",\"link\":\"/reference/plugin/plugins/sass.md\"},{\"text\":\"@fesjs/plugin-editor\",\"link\":\"/reference/plugin/plugins/editor.md\"},{\"text\":\"@fesjs/plugin-pinia\",\"link\":\"/reference/plugin/plugins/pinia.md\"},{\"text\":\"@fesjs/plugin-watermark\",\"link\":\"/reference/plugin/plugins/watermark.md\"},{\"text\":\"@fesjs/plugin-login\",\"link\":\"/reference/plugin/plugins/login.md\"},{\"text\":\"@fesjs/plugin-swc\",\"link\":\"/reference/plugin/plugins/swc.md\"}]},{\"text\":\"插件开发\",\"items\":[{\"text\":\"插件介绍\",\"link\":\"/reference/plugin/dev/index.md\"},{\"text\":\"插件API\",\"link\":\"/reference/plugin/dev/api.md\"}]}]},\"outline\":{\"label\":\"本页目录\"},\"search\":{\"provider\":\"local\"},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2020-present Webank\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
</body>
</html>