异步 · 请求工具库说明

请求库说明

GraceVueAdmin 默认安装了 axios, 以 axios 为基础进行了进一步封装,您可以以下方式来使用 axios 完成 api 请求。

1. 直接使用 axios;

2. 使用 GraceVueAdmin 封装的 get、post、put、delete 等方法;

3. 基于 axios 按照自己的项目要求或者开发习惯封装一个自己的请求工具 js,然后使用;

跨域请求问题

基于 vite 构建的项目开发模式运行时网址一般为 http://localhost:3000/#/ ,这样在请求时经常会出现跨域请求问题,控制台错误提示 :

此文档内容需登录 + 付费后才能查看!

请在后端完成允许跨域设置,保证请求正常,以 php 为例 :

此文档内容需登录 + 付费后才能查看!


直接使用 axios 示例

此文档内容需登录 + 付费后才能查看!


使用 GraceVueAdmin 封装的 request.js

GraceVueAdmin 以 axios 为基础进行了进一步封装,使用说明如下 :

基础配置

首先完成请求库的基本配置工作,相关配置位置 : /src/config.js

此文档内容需登录 + 付费后才能查看!

请根据自己的项目情况完善或者改进请求相关配置,

initToken() 函数 用于获取或者生成一个所有请求都必须携带的 token,此处演示了 “接口秘钥 + 时间戳”生成请求 token 的方法,您可以直接使用此处方式生成 token 也可以重写这个函数来实现自己 token 生成逻辑。

initUserToken() 函数 用于获取本地数据中的 用户令牌,在后端系统环境所有的请求都用该携带用户令牌,后端根据这个用户令牌识别用户,然后进行权限校验等后续逻辑。


get 请求

GraceVueAdmin 请求库通过 get() 函数来完成 get 请求,参数如下 :

此文档内容需登录 + 付费后才能查看!

使用示例

此文档内容需登录 + 付费后才能查看!

注意事项

get 请求要求后端必须返回 JSON 形式的数据,否则会提示错误。


post 请求

GraceVueAdmin 请求库通过 get() 函数来完成 get 请求,参数如下 :

此文档内容需登录 + 付费后才能查看!

使用示例

此文档内容需登录 + 付费后才能查看!


post 请求签名机制

使用 GraceVueAdmin 请求库的 post 函数完成 post 请求时会自动对 post 请求数据进行签名,签名规则 :

此文档内容需登录 + 付费后才能查看!

一个 php 后端签名示例

此文档内容需登录 + 付费后才能查看!

您可以通过前后端签名结果比对来校验数据来源的完整性,从而保证接口通信安全!


put 请求

put 请求与 post 请求参数一致 :

此文档内容需登录 + 付费后才能查看!

示例

此文档内容需登录 + 付费后才能查看!


delete 请求

参数 :

此文档内容需登录 + 付费后才能查看!

示例

此文档内容需登录 + 付费后才能查看!


后端代码示例 ( php )

此文档内容需登录 + 付费后才能查看!