mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
161 lines
35 KiB
JavaScript
161 lines
35 KiB
JavaScript
import{_ as c,r as p,o as i,c as l,b as s,d as n,a as t,w as u,f as a}from"./app.005e0daf.js";const r={},k=a(`<h1 id="mock-数据" tabindex="-1"><a class="header-anchor" href="#mock-数据" aria-hidden="true">#</a> Mock 数据</h1><p>Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞。</p><h2 id="约定式-mock-文件" tabindex="-1"><a class="header-anchor" href="#约定式-mock-文件" aria-hidden="true">#</a> 约定式 Mock 文件</h2><p>Fes.js 约定 <code>./mock.js</code> 为 mock 文件。</p><p>比如:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>.
|
||
├── mock.js
|
||
└── src
|
||
└── pages
|
||
└── index.vue
|
||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编写-mock-文件" tabindex="-1"><a class="header-anchor" href="#编写-mock-文件" aria-hidden="true">#</a> 编写 Mock 文件</h2><p>可以参考如下 🌰:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> cgiMock<span class="token punctuation">,</span> mockjs<span class="token punctuation">,</span> utils <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> Random <span class="token punctuation">}</span> <span class="token operator">=</span> mockjs<span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 测试 proxy 与 mock 用例集合</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/movie/in_theaters_mock'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>
|
||
<span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'movie: movie/in_theaters_mock ~~~~~'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/movie/test_mock'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>
|
||
<span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'mock: movie/test_mock'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 测试用例: mock.js change,重现请求,需要能拉最新的数据</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/watchtest'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>
|
||
<span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'通过 register 测试 mock watch: 初始状态'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 返回一个数字</span>
|
||
<span class="token comment">// cgiMock('/number', 666);</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/number'</span><span class="token punctuation">,</span> <span class="token number">999</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 返回一个json</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/json'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'400101'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">"不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">transactionTime</span><span class="token operator">:</span> <span class="token string">'20170309171146'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">success</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 利用 mock.js 产生随机文本</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/text'</span><span class="token punctuation">,</span> Random<span class="token punctuation">.</span><span class="token function">cparagraph</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 返回一个字符串 利用 mock.js 产生随机字符</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span>
|
||
<span class="token string">'/random'</span><span class="token punctuation">,</span>
|
||
mockjs<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token string-property property">'string|1-10'</span><span class="token operator">:</span> <span class="token string">'★'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 正则匹配url, 返回一个字符串</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\/abc|\\/xyz</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token string">'regexp test!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// option.result 参数如果是一个函数, 可以实现自定义返回内容, 接收的参数是是经过 express 封装的 req 和 res 对象.</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\/function$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">'function test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 返回文本 readFileSync</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/file'</span><span class="token punctuation">,</span> utils<span class="token punctuation">.</span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string">'./package.json'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 更复杂的规则配置</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\/who</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'GET'</span><span class="token punctuation">,</span>
|
||
<span class="token function">result</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>req<span class="token punctuation">.</span>query<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">'kwan'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">kwan</span><span class="token operator">:</span> <span class="token string">'孤独患者'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||
res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">'Nooooooooooo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token string-property property">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'text/plain'</span><span class="token punctuation">,</span>
|
||
<span class="token string-property property">'Content-Length'</span><span class="token operator">:</span> <span class="token string">'123'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">ETag</span><span class="token operator">:</span> <span class="token string">'12345'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">cookies</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'myname'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'kwan'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">maxAge</span><span class="token operator">:</span> <span class="token number">900000</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">httpOnly</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 携带参数的请求</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/v2/audit/list'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">{</span> currentPage<span class="token punctuation">,</span> pageSize<span class="token punctuation">,</span> isAudited <span class="token punctuation">}</span> <span class="token operator">=</span> req<span class="token punctuation">.</span>body<span class="token punctuation">;</span>
|
||
res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
currentPage<span class="token punctuation">,</span>
|
||
pageSize<span class="token punctuation">,</span>
|
||
<span class="token literal-property property">totalPage</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">totalCount</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">pageData</span><span class="token operator">:</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">length</span><span class="token operator">:</span> pageSize <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">title</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">authorName</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">cname</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">authorId</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">createTime</span><span class="token operator">:</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">updateTime</span><span class="token operator">:</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">readCount</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">integer</span><span class="token punctuation">(</span><span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">favoriteCount</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">integer</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">postId</span><span class="token operator">:</span> <span class="token string">'12323'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">serviceTag</span><span class="token operator">:</span> <span class="token string">'业务类型'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">productTag</span><span class="token operator">:</span> <span class="token string">'产品类型'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">requestTag</span><span class="token operator">:</span> <span class="token string">'需求类型'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">handleTag</span><span class="token operator">:</span> <span class="token string">'已采纳'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">postType</span><span class="token operator">:</span> <span class="token string">'voice'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">postStatus</span><span class="token operator">:</span> isAudited <span class="token operator">?</span> <span class="token string">'pass'</span> <span class="token operator">:</span> <span class="token string">'auditing'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">auditStatus</span><span class="token operator">:</span> <span class="token string">'audit1'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// multipart/form-data 类型</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/v2/upload'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'文件上传成功'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="cgimock-参数" tabindex="-1"><a class="header-anchor" href="#cgimock-参数" aria-hidden="true">#</a> cgiMock 参数</h3><p>创建一个 mock 接口,参数非常灵活,参考上面的 demo 即可。</p><h3 id="mockjs-参数" tabindex="-1"><a class="header-anchor" href="#mockjs-参数" aria-hidden="true">#</a> mockjs 参数</h3>`,12),d={href:"http://mockjs.com/",target:"_blank",rel:"noopener noreferrer"},v=a(`<p>比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> cgiMock<span class="token punctuation">,</span> mockjs<span class="token punctuation">,</span> utils <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span>
|
||
<span class="token string">'/random'</span><span class="token punctuation">,</span>
|
||
mockjs<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token string-property property">'string|1-10'</span><span class="token operator">:</span> <span class="token string">'★'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="utils-参数" tabindex="-1"><a class="header-anchor" href="#utils-参数" aria-hidden="true">#</a> utils 参数</h3><p>工具函数:</p><ul><li>utils.file(path),从项目根目录根据 path 寻找文件,返回文件流。</li></ul><h2 id="配置-mock" tabindex="-1"><a class="header-anchor" href="#配置-mock" aria-hidden="true">#</a> 配置 Mock</h2>`,6),m=a(`<h2 id="关闭-mock" tabindex="-1"><a class="header-anchor" href="#关闭-mock" aria-hidden="true">#</a> 关闭 Mock</h2><p>可以通过配置关闭。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,3);function b(g,y){const e=p("ExternalLinkIcon"),o=p("RouterLink");return i(),l("div",null,[k,s("p",null,[s("a",d,[n("Mock.js"),t(e)]),n(" 是常用的辅助生成模拟数据的三方库,借助他可以提升我们的 mock 数据能力。")]),v,s("p",null,[n("详见配置 "),t(o,{to:"/reference/config/#mock"},{default:u(()=>[n("mock")]),_:1}),n("。")]),m])}const h=c(r,[["render",b],["__file","mock.html.vue"]]);export{h as default};
|