diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 23228cd..ae922a7 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -36,7 +36,7 @@ module.exports = { title: '进阶', collapsable: false, children: [ - '/advance/i18n', '/advance/chart', '/advance/theme', '/advance/async', '/advance/authority', '/advance/error' + '/advance/i18n', '/advance/async', '/advance/authority', '/advance/error' ] }, { diff --git a/docs/develop/service.md b/docs/develop/service.md index ca71971..486be7f 100644 --- a/docs/develop/service.md +++ b/docs/develop/service.md @@ -3,5 +3,159 @@ title: 服务端交互 lang: zh-CN --- # 服务端交互 +数据服务是一个应用的灵魂,它驱动着应用的各个功能模块的正常运转。Vue Antd Admin 在 service 模块封装了服务端交互,通过 API 的形式可以和任何技术栈的服务端应用一起工作。 +## 服务交互流程 +在 Vue Antd Admin 中,服务端交互流程如下: +* 组件内调用 service 服务 API +* service 服务 API 封装请求数据,通过 request.js 发送请求 +* 组件获取 service 返回的数据,更新视图数据或触发其它行为 -### 作者还没来得及编辑该页面,如果你感兴趣,可以点击下方链接,帮助作者完善此页 +我们以登录为例,Login.vue 组件内,用户输入账号密码,点击登录,调用 services/user/login api +```vue {5,17} + + +``` +`services/user/login` 封装账户密码数据,通过 `request.js` 发送登录服务请求 +```js +import {request, METHOD} from '@/utils/request' +/** + * 登录服务 + * @param name 账户名 + * @param password 账户密码 + * @returns {Promise>} + */ +async function login(name, password) { + return request(LOGIN, METHOD.POST, { + name: name, + password: password + }) +} +``` +Login.vue 获取登录服务返回的数据,进行后续操作 +```vue {14,18-23} + + +``` +## 服务模块结构 +服务模块结构如下: +```bash +... +├── src +│ └── services # 数据服务模块 +│ ├── user.js # 用户数据服务 +│ ├── product.js # 产品服务 +│ ... +│ ├── api.js # api 地址管理 +│ └── index.js # 服务模块导出 +... +│ └── utils # 数据服务模块 +│ ├── request.js # 基于 axios 的 http 请求工具 +... +``` +services 文件夹下, api.js 用于服务请求地址的统一管理,index.js 用于模块化导出服务,其它 *.js 文件对应各个服务模块。 +## request.js +request.js 基于 axios 封装了一些常用的函数,如下: +```js +export { + METHOD, //http method 常量 + AUTH_TYPE, //凭证认证类型 常量 + request, //http请求函数 + setAuthorization, //设置身份凭证函数 + removeAuthorization, //移除身份凭证函数 + checkAuthorization //检查身份凭证是否过期函数 +} +``` +:::tip +凭证认证类型默认为 [Bearer](https://www.jianshu.com/p/8f7009456abc),你可以根据自己的需要实现其它类型的认证 +::: +## Base url 配置 +你可以在项目根目录下的环境变量文件(.env 和 .env.development)中配置你的 API 服务 base url 地址。 + +生产环境,.env 文件 +```properties +VUE_APP_API_BASE_URL=https://www.server.com +``` +开发环境,.env.development 文件: +```properties +VUE_APP_API_BASE_URL=https://localhost:8000 +``` +## 跨域设置 +在开发环境中,通常我们的Vue应用和服务应用运行在不同的地址或端口上。我们可以通过简单的设置,代理前端请求,来避免跨域问题。如下: + +首先,在 services/api.js 文件中设置 API_PROXY_PREFIX 常量,BASE_URL 像下面这样设置: +```js {2,4} +//跨域代理前缀 +const API_PROXY_PREFIX='/api' +//base url +const BASE_URL = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_API_BASE_URL : API_PROXY_PREFIX +//导出api服务地址 +module.exports = { + LOGIN: `${BASE_URL}/login`, + ROUTES: `${BASE_URL}/routes` +} +``` +然后,在 vue.config.js 文件中配置代理: +```js +model.exports = { + devServer: { + proxy: { + '/api': { //此处要与 /services/api.js 中的 API_PROXY_PREFIX 值保持一致 + target: process.env.VUE_APP_API_BASE_URL, + changeOrigin: true, + pathRewrite: { + '^/api': '' + } + } + } + } +} +``` +:::tip +此代理配置仅适用于开发环境,生产环境的跨域代理请在自己的web服务器配置。 +:::