mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
149 lines
33 KiB
HTML
149 lines
33 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>服务端交互 | Vue Antd Admin</title>
|
||
<meta name="generator" content="VuePress 1.5.2">
|
||
<link rel="icon" href="/favicon.ico">
|
||
<meta name="description" content="Vue Antd Admin">
|
||
<link rel="preload" href="/assets/css/0.styles.566e6543.css" as="style"><link rel="preload" href="/assets/js/app.4044373b.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/27.4a757523.js" as="script"><link rel="prefetch" href="/assets/js/10.b3af0ac4.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.9a3bd7bf.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.cf783558.js"><link rel="prefetch" href="/assets/js/16.8cd2d550.js"><link rel="prefetch" href="/assets/js/17.a194e1da.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.58b681da.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.94de0f4c.js"><link rel="prefetch" href="/assets/js/22.be24120c.js"><link rel="prefetch" href="/assets/js/23.e2e4171a.js"><link rel="prefetch" href="/assets/js/24.d3dad329.js"><link rel="prefetch" href="/assets/js/25.936cbc18.js"><link rel="prefetch" href="/assets/js/26.bf7fa383.js"><link rel="prefetch" href="/assets/js/28.fbeefcef.js"><link rel="prefetch" href="/assets/js/29.baa62900.js"><link rel="prefetch" href="/assets/js/3.ed8a83eb.js"><link rel="prefetch" href="/assets/js/30.6397ca35.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.40c5e0e5.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.a8d32d40.js"><link rel="prefetch" href="/assets/js/5.2d98be03.js"><link rel="prefetch" href="/assets/js/6.53f712d2.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.a6aa3458.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||
<link rel="stylesheet" href="/assets/css/0.styles.566e6543.css">
|
||
</head>
|
||
<body>
|
||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
|
||
指南
|
||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||
配置
|
||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||
主题
|
||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||
GitHub
|
||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
|
||
指南
|
||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||
配置
|
||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||
主题
|
||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||
GitHub
|
||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" aria-current="page" class="active sidebar-link">服务端交互</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/develop/service.html#服务交互流程" class="sidebar-link">服务交互流程</a></li><li class="sidebar-sub-header"><a href="/develop/service.html#服务模块结构" class="sidebar-link">服务模块结构</a></li><li class="sidebar-sub-header"><a href="/develop/service.html#request-js" class="sidebar-link">request.js</a></li><li class="sidebar-sub-header"><a href="/develop/service.html#base-url-配置" class="sidebar-link">Base url 配置</a></li><li class="sidebar-sub-header"><a href="/develop/service.html#跨域设置" class="sidebar-link">跨域设置</a></li></ul></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="服务端交互"><a href="#服务端交互" class="header-anchor">#</a> 服务端交互</h1> <p>数据服务是一个应用的灵魂，它驱动着应用的各个功能模块的正常运转。Vue Antd Admin 在 service 模块封装了服务端交互，通过 API 的形式可以和任何技术栈的服务端应用一起工作。</p> <h2 id="服务交互流程"><a href="#服务交互流程" class="header-anchor">#</a> 服务交互流程</h2> <p>在 Vue Antd Admin 中，服务端交互流程如下：</p> <ul><li>组件内调用 service 服务 API</li> <li>service 服务 API 封装请求数据，通过 request.js 发送请求</li> <li>组件获取 service 返回的数据，更新视图数据或触发其它行为</li></ul> <p>我们以登录为例，Login.vue 组件内，用户输入账号密码，点击登录，调用 services/user/login api</p> <div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
...
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span>login<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/services/user'</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'Login'</span><span class="token punctuation">,</span>
|
||
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token function">onSubmit</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>logging <span class="token operator">=</span> <span class="token boolean">true</span>
|
||
<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">getFieldValue</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span>
|
||
<span class="token keyword">const</span> password <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">getFieldValue</span><span class="token punctuation">(</span><span class="token string">'password'</span><span class="token punctuation">)</span>
|
||
<span class="token function">login</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> password<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">afterLogin</span><span class="token punctuation">(</span>res<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></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p><code>services/user/login</code> 封装账户密码数据，通过 <code>request.js</code> 发送登录服务请求</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>request<span class="token punctuation">,</span> <span class="token constant">METHOD</span><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/request'</span>
|
||
<span class="token comment">/**
|
||
* 登录服务
|
||
* @param name 账户名
|
||
* @param password 账户密码
|
||
* @returns {Promise<AxiosResponse<T>>}
|
||
*/</span>
|
||
<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">login</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> password</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token constant">LOGIN</span><span class="token punctuation">,</span> <span class="token constant">METHOD</span><span class="token punctuation">.</span><span class="token constant">POST</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> name<span class="token punctuation">,</span>
|
||
password<span class="token operator">:</span> password
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>Login.vue 获取登录服务返回的数据，进行后续操作</p> <div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
...
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span>login<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/services/user'</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'Login'</span><span class="token punctuation">,</span>
|
||
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token function">onSubmit</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token function">login</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> password<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">afterLogin</span><span class="token punctuation">(</span>res<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">afterLogin</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>code <span class="token operator">>=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//登录成功</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">//登录失败</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>error <span class="token operator">=</span> loginRes<span class="token punctuation">.</span>message
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h2 id="服务模块结构"><a href="#服务模块结构" class="header-anchor">#</a> 服务模块结构</h2> <p>服务模块结构如下：</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token punctuation">..</span>.
|
||
├── src
|
||
│ └── services <span class="token comment"># 数据服务模块</span>
|
||
│ ├── user.js <span class="token comment"># 用户数据服务</span>
|
||
│ ├── product.js <span class="token comment"># 产品服务</span>
|
||
│ <span class="token punctuation">..</span>.
|
||
│ ├── api.js <span class="token comment"># api 地址管理</span>
|
||
│ └── index.js <span class="token comment"># 服务模块导出</span>
|
||
<span class="token punctuation">..</span>.
|
||
│ └── utils <span class="token comment"># 数据服务模块</span>
|
||
│ ├── request.js <span class="token comment"># 基于 axios 的 http 请求工具</span>
|
||
<span class="token punctuation">..</span>.
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>services 文件夹下， api.js 用于服务请求地址的统一管理，index.js 用于模块化导出服务，其它 *.js 文件对应各个服务模块。</p> <h2 id="request-js"><a href="#request-js" class="header-anchor">#</a> request.js</h2> <p>request.js 基于 axios 封装了一些常用的函数，如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token punctuation">{</span>
|
||
<span class="token constant">METHOD</span><span class="token punctuation">,</span> <span class="token comment">//http method 常量</span>
|
||
<span class="token constant">AUTH_TYPE</span><span class="token punctuation">,</span> <span class="token comment">//凭证认证类型 常量</span>
|
||
request<span class="token punctuation">,</span> <span class="token comment">//http请求函数</span>
|
||
setAuthorization<span class="token punctuation">,</span> <span class="token comment">//设置身份凭证函数</span>
|
||
removeAuthorization<span class="token punctuation">,</span> <span class="token comment">//移除身份凭证函数</span>
|
||
checkAuthorization <span class="token comment">//检查身份凭证是否过期函数</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>凭证认证类型默认为 <a href="https://www.jianshu.com/p/8f7009456abc" target="_blank" rel="noopener noreferrer">Bearer<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，你可以根据自己的需要实现其它类型的认证</p></div> <h2 id="base-url-配置"><a href="#base-url-配置" class="header-anchor">#</a> Base url 配置</h2> <p>你可以在项目根目录下的环境变量文件(.env 和 .env.development)中配置你的 API 服务 base url 地址。</p> <p>生产环境，.env 文件</p> <div class="language-properties line-numbers-mode"><pre class="language-properties"><code><span class="token attr-name">VUE_APP_API_BASE_URL</span><span class="token punctuation">=</span><span class="token attr-value">https://www.server.com</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>开发环境，.env.development 文件：</p> <div class="language-properties line-numbers-mode"><pre class="language-properties"><code><span class="token attr-name">VUE_APP_API_BASE_URL</span><span class="token punctuation">=</span><span class="token attr-value">https://localhost:8000</span>
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="跨域设置"><a href="#跨域设置" class="header-anchor">#</a> 跨域设置</h2> <p>在开发环境中，通常我们的Vue应用和服务应用运行在不同的地址或端口上。我们可以通过简单的设置，代理前端请求，来避免跨域问题。如下：</p> <p>首先，在 services/api.js 文件中设置 API_PROXY_PREFIX 常量，BASE_URL 像下面这样设置：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><div class="highlighted"> </div><br><div class="highlighted"> </div><br><br><br><br><br><br></div><pre class="language-js"><code><span class="token comment">//跨域代理前缀</span>
|
||
<span class="token keyword">const</span> <span class="token constant">API_PROXY_PREFIX</span><span class="token operator">=</span><span class="token string">'/api'</span>
|
||
<span class="token comment">//base url</span>
|
||
<span class="token keyword">const</span> <span class="token constant">BASE_URL</span> <span class="token operator">=</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">'production'</span> <span class="token operator">?</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">VUE_APP_API_BASE_URL</span> <span class="token operator">:</span> <span class="token constant">API_PROXY_PREFIX</span>
|
||
<span class="token comment">//导出api服务地址</span>
|
||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token constant">LOGIN</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">BASE_URL</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/login</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
|
||
<span class="token constant">ROUTES</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">BASE_URL</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/routes</span><span class="token template-punctuation string">`</span></span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>然后，在 vue.config.js 文件中配置代理：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>model<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
devServer<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
proxy<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token string">'/api'</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//此处要与 /services/api.js 中的 API_PROXY_PREFIX 值保持一致</span>
|
||
target<span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">VUE_APP_API_BASE_URL</span><span class="token punctuation">,</span>
|
||
changeOrigin<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
pathRewrite<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token string">'^/api'</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>
|
||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>此代理配置仅适用于开发环境，生产环境的跨域代理请在自己的web服务器配置。</p></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/develop/service.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2020/8/8 21:51:40</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||
←
|
||
<a href="/develop/theme.html" class="prev">
|
||
主题定制
|
||
</a></span> <span class="next"><a href="/develop/mock.html">
|
||
Mock
|
||
</a>
|
||
→
|
||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||
<script src="/assets/js/app.4044373b.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/27.4a757523.js" defer></script>
|
||
</body>
|
||
</html>
|