chenjingyong
/
ds8-solution-pro
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
dev
usertest
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '2ee86448a4'
${ noResults }
ds8-solution-pro/furionDoc/build/docs/clientapi/index.html

118 lines
153 KiB
HTML
Raw Normal View History Unescape Escape

初始化
12 months ago
<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-clientapi" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.0.0">
<title data-rh="true">5.6 Vue/React/Angular 接口代理 | Furion</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="http://furion.baiqian.ltd/docs/clientapi"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="5.6 Vue/React/Angular 接口代理 | Furion"><meta data-rh="true" name="description" content="原来 Ajax 也可以不用写的"><meta data-rh="true" property="og:description" content="原来 Ajax 也可以不用写的"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="http://furion.baiqian.ltd/docs/clientapi"><link data-rh="true" rel="alternate" href="http://furion.baiqian.ltd/docs/clientapi" hreflang="en"><link data-rh="true" rel="alternate" href="http://furion.baiqian.ltd/docs/clientapi" hreflang="x-default"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Furion RSS Feed">
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Furion Atom Feed"><link rel="stylesheet" href="/assets/css/styles.3f87a095.css">
<script src="/assets/js/runtime~main.89709a83.js" defer="defer"></script>
<script src="/assets/js/main.10e5dc01.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const a=new URLSearchParams(window.location.search).entries();for(var[t,e]of a)if(t.startsWith("docusaurus-data-")){var n=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(n,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><div class="floatbar_hUWl"><div class="qrcode_sWwE"><img title="微信扫码关注 Furion 官方公众号" src="/img/weixin_qrcode.jpg" style="display:block"><div>❤️ 关注 Furion 微信公众号有惊喜哦！</div></div><div style="display:flex;flex-direction:row-reverse;align-items:flex-start"><div class="title_SD0k">🫠 遇到问题了</div><div class="extend__5i1"><a class="item_Y35a" href="/docs/subscribe"><div style="flex:1"><div class="itemTitle_If_T">⭐️ VIP 服务 ⭐️</div><div class="itemDesc_dp7r">仅需 499 元/年，尊享 365 天项目无忧</div></div><div class="jiantou_mV_o"></div></a><div class="item_Y35a"><div style="flex:1"><div class="itemTitle_If_T">问题反馈</div><div class="itemDesc_dp7r">到 Furion 开源仓库反馈</div></div><div class="jiantou_mV_o"></div></div></div></div></div><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="announcementBar_mb4j" style="background-color:#4623d9;color:yellow" role="banner"><div class="content_knG7 announcementBarContent_xLdY">⭐️ 开通 VIP 服务仅需 499 元/年，尊享 365 天项目无忧 <a href="/docs/subscribe" style="background-color:rgb(199, 29, 36);color:#ffffff;padding:1px 10px;border-radius:3px;text-decoration:none;display:inline-block;margin:0 5px;font-size:12px;cursor:pointer;">立即开通</a>⭐️</div></div><nav aria-label="Main" class="navbar navbar--fixed-top navbarHideable_m1mJ"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/furionlogo.png" alt="Furion Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/furionlogo.png" alt="Furion Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">Furion</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/category/appendix">文档</a><a class="navbar__item navbar__link" href="/docs/global/app">静态类</a><a class="navbar__item navbar__link" href="/docs/settings/appsettings">配置</a><a class="navbar__item navbar__link" href="/blog">博客</a><div class="navbar__item dropdown dropdown--hoverable"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">更新日志</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/upgrade">📝 查看日志（v4.9.1.7）</a></li><li><a class="dropdown__link" href="/docs/target">🚀 路线图</a></li></ul></div><a href="http://furion.baiqian.ltd/api/api" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">API<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__it
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="561-历史背景">5.6.1 历史背景<a href="#561-历史背景" class="hash-link" aria-label="Direct link to 5.6.1 历史背景" title="Direct link to 5.6.1 历史背景">​</a></h2>
<p>在现在主流的 Web 项目开发中，越来越多的开发者选择使用 <code>Vue/React/Angular</code> 三大框架进行开发，这三大框架和传统开发模式最大的不同是前者采用前后端分离的方式，而后者统一由后端程序员编写。</p>
<p>在前后端分离的模式中，前后端程序员各司其职，后端程序负责编写接口（API），前端程序员负责编写客户端请求后端接口（API）并进行数据绑定。</p>
<p><strong>但这里暴露出了一个工作效率极低且易出错的问题，那就是前端程序需要将后端几百个甚至上千个接口进行一一对应编写，大多都是采用 <code>$.ajax</code> 或 <code>axios</code> 的方式。</strong></p>
<p>一旦后端接口参数或返回值发生改变，前端程序员需要一一进行勘正，一旦出现纠正不完全就会导致系统无法响应或接收错误的用户消息从而造成不必要的维护工作和成本浪费。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="562-如何解决">5.6.2 如何解决？<a href="#562-如何解决" class="hash-link" aria-label="Direct link to 5.6.2 如何解决？" title="Direct link to 5.6.2 如何解决？">​</a></h2>
<p><code>Furion</code> 框架编写的所有后端接口都会生成规范化的 <code>swagger.json</code> 文件，使用该文件可以在 <strong><a href="https://editor.swagger.io" target="_blank" rel="noopener noreferrer">https://editor.swagger.io</a></strong> 生成任何支持标准 <code>swagger</code> 的界面或客户端代码。</p>
<p><strong>自此，前端程序员再也无需自己手写 <code>$.ajax</code> 和 <code>axios</code> 代码，这部分代码全部自动生成，以后开发效率至少提高一半以上。</strong></p>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="563-生成客户端请求代码">5.6.3 生成客户端请求代码<a href="#563-生成客户端请求代码" class="hash-link" aria-label="Direct link to 5.6.3 生成客户端请求代码" title="Direct link to 5.6.3 生成客户端请求代码">​</a></h2>
<div class="theme-admonition theme-admonition-important admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>关于 <code>TypeScript</code> 和 <code>JavaScript</code></div><div class="admonitionContent_BuS1"><p>以下教程仅适用于 <code>Vue/React/Angular</code> 的 <code>TypeScript</code> 类型项目，暂不支持 <code>JavaScript</code>。</p><p>为了项目良好的发展和维护，建议使用 <code>TypeScript</code> 进行编写。</p></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="5331-生成客户端代码">5.3.3.1 生成客户端代码<a href="#5331-生成客户端代码" class="hash-link" aria-label="Direct link to 5.3.3.1 生成客户端代码" title="Direct link to 5.3.3.1 生成客户端代码">​</a></h3>
<ol>
<li><strong>打开规范化文档（Swagger）首页，并点击顶部 <code>/swagger/xxxx/swagger.json</code> 到新窗口打开。</strong></li>
</ol>
<img src="/img/sg1.png">
<ol start="2">
<li><strong>接着全选并复制全部内容</strong></li>
</ol>
<img src="/img/sg2.png">
<ol start="3">
<li><strong>打开 <a href="https://editor.swagger.io/" target="_blank" rel="noopener noreferrer">https://editor.swagger.io</a> 官网并粘贴进去</strong></li>
</ol>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>无法联网</div><div class="admonitionContent_BuS1"><p><code>Furion</code> 也提供了 <strong><a href="https://gitee.com/dotnetchina/Furion/blob/v4/clients/Swagger-Editor.rar" target="_blank" rel="noopener noreferrer">Swagger-Editor.rar</a></strong> 离线包，可直接下载解压并双击 <code>index.html</code> 即可。</p></div></div>
<img src="/img/sg3.png">
<ol start="4">
<li><strong>最后点击顶部的 <code>Generate Client</code> 选择对应的语言/框架进行生成即可。</strong></li>
</ol>
<hr>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="5632-vuereact-配置">5.6.3.2 <code>Vue/React</code> 配置<a href="#5632-vuereact-配置" class="hash-link" aria-label="Direct link to 5632-vuereact-配置" title="Direct link to 5632-vuereact-配置">​</a></h3>
<p><strong>点击 <code>Generate Client</code> 顶部菜单并选择 <code>typescript-axios</code> 进行下载。</strong></p>
<img src="/img/sg4.png">
<p><strong>下载成功之后拷贝下图选择的目录和文件：</strong></p>
<img src="/img/sg5.png">
<p><strong>接着打开你的 <code>Vue</code> 或 <code>React</code> 项目，并在 <code>src</code> 目录下创建 <code>api-services</code> 目录并将刚刚复制的目录文件放在里面。</strong></p>
<img src="/img/sg6.png">
<p><strong>接下来通过 <code>npm</code> 或 <code>yarn</code> 安装 <code>axios</code> 包</strong></p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"># npm 方式</span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">npm i axios@0.21.4</span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"># yarn 方式</span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">yarn add axios@0.21.4</span></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<div class="theme-admonition theme-admonition-important admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span><code>axios</code> 版本说明</div><div class="admonitionContent_BuS1"><p>注意 <code>axios</code> 版本必须是 <code>0.21.4</code> 版本，如果安装其他版本可能会出现无法编译的情况。</p></div></div>
<p><strong>接着下载 <code>Furion</code> 提供的 <code>Vue/React</code> 工具库 <code>axios-utils.ts</code> 并拷贝到和 <code>api-services</code> 同级目录下：</strong></p>
<p><a href="https://gitee.com/dotnetchina/Furion/blob/v4/clients/axios_vue_react/axios-utils.ts" target="_blank" rel="noopener noreferrer">axios-utils.ts 下载地址</a></p>
<img src="/img/sg7.png">
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span><code>Vue3</code> 项目不能编译问题</div><div class="admonitionContent_BuS1"><p>如果在 <code>Vue3</code> 项目中无法编译通过，则需要修改根目录下的 <code>tsconfig.app.json</code> 和 <code>tsconfig.vite-config.json</code> 和 <code>tsconfig.vitest.json</code> 文件并添加下列配置即可，如：</p><div class="language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line theme-code-block-highlighted-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">&quot;compilerOptions&quot;: {</span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> &quot;importsNotUsedAsValues&quot;: &quot;remove&quot;, // TypeScript 5.0 - 使用</span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> &quot;preserveValueImports&quot;: false, // TypeScript 5.0 - 使用</span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> // &quot;verbatimModuleSyntax&quot;: false // TypeScript 5.0 + 使用</span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">}</span></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><img src="/img/sg8.png"></div></div>
<hr>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="5633-angular-配置">5.6.3.3 <code>Angular</code> 配置<a href="#5633-angular-配置" class="hash-link" aria-label="Direct link to 5633-angular-配置" title="Direct link to 5633-angular-配置">​</a></h3>
<p><strong>点击 <code>Generate Client</code> 顶部菜单并选择 <code>typescript-angular</code> 进行下载。</strong></p>
<img src="/img/sg9.png">
<p><strong>下载成功之后拷贝下图选择的目录和文件：</strong></p>
<img src="/img/sg10.png">
<p><strong>接着打开你的 <code>Angular</code> 项目，并在 <code>src</code> 目录下创建 <code>api-services</code> 目录并将刚刚复制的目录文件放在里面。</strong></p>
<img src="/img/sg11.png">
<p><strong>接着下载 <code>Furion</code> 提供的 <code>Angular</code> 工具库 <code>angular-utils.ts</code> 并拷贝到和 <code>api-services</code> 同级目录下：</strong></p>
<p><a href="https://gitee.com/dotnetchina/Furion/blob/v4/clients/angular/angular-utils.ts" target="_blank" rel="noopener noreferrer">angular-utils.ts 下载地址</a></p>
<img src="/img/sg12.png">
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span><code>Angular</code> 项目不能编译问题</div><div class="admonitionContent_BuS1"><p>如果在 <code>Angular</code> 项目中无法编译通过，则需要修改根目录下的 <code>api-services/encoder.ts</code> 文件，并在 <code>encodeKey</code> 和 <code>encodeValue</code> 前添加 <code>override</code> 即可，如：</p><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockTitle_Ktv7">api-services/encoder.ts</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token keyword" style="font-style:italic">export</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">CustomHttpUrlEncodingCodec</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">extends</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">HttpUrlEncodingCodec</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> override </span><span class="token function" style="color:rgb(130, 170, 255)">encodeKey</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">k</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">string</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> k </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">super</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">encodeKey</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="
<p><strong>最后在 <code>src/app/app.module.ts</code> 中注册 <code>ServeModule</code></strong></p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockTitle_Ktv7">src/app/app.module.ts</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> NgModule </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;@angular/core&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> BrowserModule </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;@angular/platform-browser&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> AppRoutingModule </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;./app-routing.module&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> AppComponent </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;./app.component&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><sp
<img src="/img/sg14.png">
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="564-初始配置">5.6.4 初始配置<a href="#564-初始配置" class="hash-link" aria-label="Direct link to 5.6.4 初始配置" title="Direct link to 5.6.4 初始配置">​</a></h2>
<p>完成上面步骤之后还需要最后一步，那就修改服务端（后端）接口（API）地址。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="5641-vuereact-配置">5.6.4.1 <code>Vue/React</code> 配置<a href="#5641-vuereact-配置" class="hash-link" aria-label="Direct link to 5641-vuereact-配置" title="Direct link to 5641-vuereact-配置">​</a></h3>
<p>在 <code>Vue/React</code> 项目中编辑 <code>Furion</code> 框架提供的 <code>axios-utils.ts</code> 文件，并将 <code>serveConfig</code> 修改为对应的后端地址即可，如：</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">/**</span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> * 当前版本：v1.0.3</span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> * 使用描述：https://editor.swagger.io 代码生成 typescript-axios 辅组工具库</span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> * 依赖说明：适配 axios 版本：v0.21.1</span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> * 视频教程：https://www.bilibili.com/video/BV1EW4y1C71D</span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> */</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> globalAxios</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> AxiosInstance </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;axios&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Configuration </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;./api-services&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></span><br></span><spa
<img src="/img/sg15.png">
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="5642-angular-配置">5.6.4.2 <code>Angular</code> 配置<a href="#5642-angular-配置" class="hash-link" aria-label="Direct link to 5642-angular-配置" title="Direct link to 5642-angular-配置">​</a></h3>
<p>如果是 <code>Angular</code> 项目则编辑 <code>Furion</code> 框架提供的 <code>angular-utils.ts</code> 文件，并将 <code>serveConfig</code> 修改为对应的后端地址即可，如：</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">/**</span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> * 当前版本：v1.0.3</span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> * 使用描述：https://editor.swagger.io 代码生成 typescript-angular 辅组工具库</span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> */</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> HttpClientModule</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> HttpEvent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> HttpHandler</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> HttpHeaders</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> HttpInterceptor</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> HttpRequest</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span cla
<img src="/img/sg16.png">
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="565-基本使用">5.6.5 基本使用<a href="#565-基本使用" class="hash-link" aria-label="Direct link to 5.6.5 基本使用" title="Direct link to 5.6.5 基本使用">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="5651-vuereact-中使用">5.6.5.1 <code>Vue/React</code> 中使用<a href="#5651-vuereact-中使用" class="hash-link" aria-label="Direct link to 5651-vuereact-中使用" title="Direct link to 5651-vuereact-中使用">​</a></h3>
<p>在 <code>Vue/React</code> 中使用有两种方式，一种是 <code>Promise</code>，另外一种就是 <code>async/await</code>，推荐使用后者。</p>
<ul>
<li><code>Promise</code> 方式</li>
</ul>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line theme-code-block-highlighted-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> getAPI </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;../axios-utils&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// 注意项目的路径</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token function" style="color:rgb(130, 170, 255)">getAPI</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">SystemAPI</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// SystemAPI 对应的是 Swagger 分组标签名称 + API</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">apiGetXXXX</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">then</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">res</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token keyword" style="font-style:italic">var</span><span class="token plain"> data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> res</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token
<ul>
<li><code>async/await</code> 方式</li>
</ul>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line theme-code-block-highlighted-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> getAPI</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> feature </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;../axios-utils&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// 注意项目的路径</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="font-style:italic">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">err</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> res</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">feature</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token function" style="color:rgb(130, 170, 255)">getAPI</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">SystemAPI</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">apiGetXXX</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">err</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="t
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>关于 <code>关于文件流下载</code></div><div class="admonitionContent_BuS1"><p>对于文件流下载可能存在下载文件过大的情况，这时候需要添加 <code>options</code> 参数 <code>responseType: &quot;blob&quot;</code> 解决，如：</p><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line theme-code-block-highlighted-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token function" style="color:rgb(130, 170, 255)">getAPI</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">SystemAPI</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> responseType</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;blob&quot;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">apiGetXXX</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="5652-angular-中使用">5.6.5.2 <code>Angular</code> 中使用<a href="#5652-angular-中使用" class="hash-link" aria-label="Direct link to 5652-angular-中使用" title="Direct link to 5652-angular-中使用">​</a></h3>
<p>在 <code>Angular</code> 项目中，通过构造函数注入对应的服务即可</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Component </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;@angular/core&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> PersonService </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;src/api-services&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// 注意项目的路径</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token decorator at operator" style="color:rgb(137, 221, 255)">@</span><span class="token decorator function" style="color:rgb(130, 170, 255)">Component</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> selector</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;app-root&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> templateUrl</span><span class="token operator" style="color:rgb(137, 221, 255)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;./app.component.html&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> styleUrls</span><span class="token operat
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="566-重新生成代码">5.6.6 重新生成代码<a href="#566-重新生成代码" class="hash-link" aria-label="Direct link to 5.6.6 重新生成代码" title="Direct link to 5.6.6 重新生成代码">​</a></h2>
<p>如果后端接口（API）发生改变，只需要删除 <code>api-services</code> 下所有目录文件并重新生成复制进去即可。</p>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>关于 <code>Angular</code> 项目</div><div class="admonitionContent_BuS1"><p>如果是 <code>Angular</code> 项目，可以保留 <code>api-services/encoder.ts</code> 文件并删除其他目录文件，新生成的目录文件无需复制 <code>encoder.ts</code>，这样可以避免每次修改 <code>encoder.ts</code> 文件。</p></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="567-swagger-多分组生成">5.6.7 <code>Swagger</code> 多分组生成<a href="#567-swagger-多分组生成" class="hash-link" aria-label="Direct link to 567-swagger-多分组生成" title="Direct link to 567-swagger-多分组生成">​</a></h2>
<p>在很多大型系统中，为了方便对接口进行归类，往往使用了 <code>Swagger</code> 多分组功能，这样会使系统的接口散落在多个 <code>swagger.json</code> 中。</p>
<p>这个时候，需要在后端规范化文档中启用多分组配置：</p>
<div class="language-json codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-json codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">{</span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> &quot;SpecificationDocumentSettings&quot;: {</span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> &quot;EnableAllGroups&quot;: true</span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> }</span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">}</span></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>启用配置之后在 <code>Swagger</code> 导航栏顶部下拉分组将出现 <code>All Groups</code> 选项，这时候使用这个 <code>All Groups</code> 的 <code>swagger.json</code> 进行生成。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="568-自定义生成前端方法名">5.6.8 自定义生成前端方法名<a href="#568-自定义生成前端方法名" class="hash-link" aria-label="Direct link to 5.6.8 自定义生成前端方法名" title="Direct link to 5.6.8 自定义生成前端方法名">​</a></h2>
<div class="theme-admonition theme-admonition-important admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>版本说明</div><div class="admonitionContent_BuS1"><p>以下内容仅限 <code>Furion 4.1.7+</code> 版本使用。</p></div></div>
<p>通过我们根据 <code>swagger.json</code> 生成前端代码时，<code>Swagger</code> 会自动根据路由地址生成调用的 <code>api</code> 名称，但这样的名称往往不易读，这时候可自定义 <code>[OperationId]</code> 来配置生成的前端名称。</p>
<div class="language-cs codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-cs codeBlock_bY9V thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token keyword" style="font-style:italic">using</span><span class="token plain"> </span><span class="token namespace" style="color:rgb(178, 204, 214)">Furion</span><span class="token namespace punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token namespace" style="color:rgb(178, 204, 214)">SpecificationDocument</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="font-style:italic">public</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">PersonDto</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></span><br></span><span class="token-line theme-code-block-highlighted-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token attribute class-name" style="color:rgb(255, 203, 107)">OperationId</span><span class="token attribute attribute-arguments punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token attribute attribute-arguments keyword" style="font-style:italic">nameof</span><span class="token attribute attribute-arguments punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token attribute attribute-arguments">TestMethod</span><span class="token attribute attribute-arguments punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token attribute attribute-arguments punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token keyword" style="font-style:italic">public</span><span class="token plain"> </span><span class="token return-type class-name keyword" style="color:rgb(255, 203, 107);font-style:italic">string</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">TestMethod</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#bfc7d5"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="col
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="569-框架客户端工具库介绍">5.6.9 框架客户端工具库介绍<a href="#569-框架客户端工具库介绍" class="hash-link" aria-label="Direct link to 5.6.9 框架客户端工具库介绍" title="Direct link to 5.6.9 框架客户端工具库介绍">​</a></h2>
<p><code>axios-utils.ts</code> 和 <code>angular-utils.ts</code> 是 <code>Furion</code> 框架专门针对 <code>Furion</code> 开发的 <code>WebAPI</code> 项目编写的客户端代理库，在这个代理库中已经处理了跨域，授权，自动刷新 <code>token</code> 以及解密客户端 <code>JWT token</code> 问题。</p>
<p>同时提供了非常方便的 <code>feature</code> 方法，可将异步方法进行同步化处理。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="5610-无法连接外网内网情况离线包">5.6.10 无法连接外网/内网情况/离线包<a href="#5610-无法连接外网内网情况离线包" class="hash-link" aria-label="Direct link to 5.6.10 无法连接外网/内网情况/离线包" title="Direct link to 5.6.10 无法连接外网/内网情况/离线包">​</a></h2>
<p>在一些比较注重代码安全的组织或公司中，可能不能连接外网进行生成，这个时候只需要下载 <a href="https://github.com/swagger-api/swagger-editor" target="_blank" rel="noopener noreferrer">https://github.com/swagger-api/swagger-editor</a> 代码在本地部署即可。</p>
<p><code>Furion</code> 官网也提供了 <code>Swagger-Editor.rar</code> 离线包下载：<a href="https://gitee.com/dotnetchina/Furion/blob/v4/clients/Swagger-Editor.rar" target="_blank" rel="noopener noreferrer">https://gitee.com/dotnetchina/Furion/blob/v4/clients/Swagger-Editor.rar</a></p>
<p>下载离线包后直接双击 <code>index.html</code> 启动即可</p>
<img src="/img/sg17.png">
<h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="5611-反馈与建议">5.6.11 反馈与建议<a href="#5611-反馈与建议" class="hash-link" aria-label="Direct link to 5.6.11 反馈与建议" title="Direct link to 5.6.11 反馈与建议">​</a></h2>
<div class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>与我们交流</div><div class="admonitionContent_BuS1"><p>给 Furion 提 <a href="https://gitee.com/dotnetchina/Furion/issues/new?issue" target="_blank" rel="noopener noreferrer">Issue</a>。</p></div></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><a href="http://github.crmeb.net/u/furion" target="_blank" style="display:block;margin-bottom:20px;text-decoration:none;position:relative;border-radius:5px;overflow:hidden;color:#25c2a0" title="CRMEB 专注开源电商系统研发"><img src="/img/crmeb-spec.jpg" style="display:block;pointer-events:none;max-width:100%"><span style="position:absolute;display:block;right:0;bottom:0;z-index:5;font-size:12px;background-color:rgba(0,0,0,0.8);padding:0 5px">特别赞助</span></a><div class="theme-doc-footer-edit-meta-row row"><div class="col"><a class="ass_kwc6" style="margin:0;margin-bottom:10px;height:80px;z-index:999" href="/docs/subscribe"><div class="title_MSGy">开通 VIP 服务尊享一对一技术指导</div><div class="progress_esN_"><div class="number_F0eG">344</div><div class="percent_Dln9"><div class="current_QYTp" style="width:34.4%"></div></div><div class="number_F0eG">1000</div></div></a><a href="https://gitee.com/dotnetchina/Furion/tree/v4/handbook/docs/clientapi.mdx" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_VsjB"><div class="donate_FEDP" style="margin:0;margin-bottom:10px;border:2px solid #ffb02e;margin-top:-4px" title="您的支持是我们坚持完善下去的动力！"><div style="position:relative;margin-right:9px"><img src="/img/donateme.png" style="height:100%;max-height:100%;display:block;min-width:70px" alt="赞助 Furion"><span style="position:absolute;top:25px;left:0;right:0;font-size:12px;z-index:1;text-align:center;color:white;font-weight:bold;background-color:rgba(0, 0, 0, 0.4)">查看大图</span></div><div style="display:flex;flex:1;flex-direction:column;justify-content:space-between;padding:5px 0 5px 0"><h3 style="font-weight:500;font-size:17px;margin:4px 0 0 0;text-align:left;background:linear-gradient(to right, red, blue);background-clip:text;-webkit-background-clip:text;color:transparent;white-space:nowrap;cursor:pointer">谢谢您对 Furion 的认可！</h3><div style="display:flex;justify-content:space-between;white-space:nowrap;margin-top:10px"><span style="font-size:12px;color:#ccc">微信：ibaiqian</span><a href="https://gitee.com/dotnetchina/Furion" style="margin-right:6px" target="_blank"><img src="https://gitee.com/dotnetchina/Furion/badge/star.svg?theme=white" alt="star"></a></div></div></div><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2023-11-22T02:38:21.000Z">Nov 22, 2023</time></b> by <b>百小僧</b></span></div></div><a style="display:flex;width:100%;box-sizing:border-box;align-items:center;justify-content:space-between;padding-left:5px" title="⭐️ 开通 VIP 服务仅需 499 元/年，尊享 365 天项目无忧2323 ⭐️" href="/docs/subscribe"><div style="flex:1;margin:5px 5px 5px 0;user-se
</body>
</html>