概述

在这个前面我有一篇讲过关于前端如何快速生成文档的帖子是基于 [knife4j-openapi3与Umi/OpenApi](https://www.codefather.cn/post/1807127065467867137)，在这个帖子中，要将后端接口改成指定的格式才能让前端生成，对于后端的我来说有点小痛苦，我就不想按照这个格式写(其实是因为生成的 CURD 需要修改下对应的 Swagger 格式 ) ，我就在想，有没有其他的框架，能够直接根据我这个文档生成呢？不出意外就是我们下面说到底 Alova.js 了

Alova 介绍

官方文档：[https://alova.js.org/zh-CN/](https://alova.js.org/zh-CN/)

alova（读作/əˈləʊva/）是一个流程简化的下一代请求工具，它可以将你的 API 集成工作流从 7 个步骤极致地简化为 1 个步骤，你只需要选择 API 即可使用。看官方给出的图片：

看图是不是很清晰，通俗点就是一键生成代码，然后选择接口用就好了！！

相对于其他的请求库 Alova 有什么优势呢？

官方文档这里给出来表格我这里就不过多解释了

https://alova.js.org/zh-CN/about/comparison/

运行环境

Alova 使用能够支持 React 吗？支持 Vue3 吗？通通支持，看官网介绍给出的解释是能够支持任何 JS 运行环境

Alova 还支持缓存、并行发送请求、自动管理请求状态等等.....

快速入门

创建项目

这里我们快速创建一个 Vite +Vue3 项目来使用一下这个 Alova.Js 最主要的是要验证是否能够自动生成文档！

兼容性注意

Vite 需要 Node.js 版本 18+ 或 20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

我这里使用的 Node 版本是 20.17.0

打开 cmd 窗口创建 Vite 项目

```shell npm create vite@latest ```

名称应该是 alova ！！！

使用 WebStrom 来打开这个项目

如下图所示：

安装依赖

打开项目控制台输入如下命令安装依赖让项目跑起来

▼
shell
复制代码
npm install

运行项目

引入 Alova.js

安装 Alova.js 依赖

```shell npm install alova --save ```

安装扩展

```shell npm install @alova/wormhole --save-dev ```

同时安装@alova/wormhole和 alova 的 vscode 扩展可以享受到完整的特性，@alova/wormhole提供自动生成特性，vscode 扩展可以快速调用@alova/wormhole的能力，并提供在编辑器中快速查找接口文档的快捷键。

对于 vscode 打开的朋友，这里能够直接安装 vsode 插件一键生成文档哦

官方文档：https://alova.js.org/zh-CN/tutorial/getting-started/extension-integration

我这里使用的 WebStrom 官方这里也给出了命令调用，我们可以封装到 pageckage.json 中

官方文档：https://alova.js.org/zh-CN/api/wormhole/#commands

自动生成配置文件

▼
shell
复制代码
alova init [-t, --type <type>] [-c --cwd <path>]

在当前目录下生成 alova.config 配置文件，它将会根据项目类型自动生成不同后缀的配置文件。

参数：

-t, --type：指定要生成的配置文件类型，可选值有：auto/ts/typescript/module/commonjs，默认为auto，它将根据项目类型自动生成不同后缀的配置文件。

-c, --cwd ：指定要生成的配置文件的工作目录，默认为当前目录。

生成的这个配置类似于 umi 那个能够填写后端 API 接口 json 文件的哪个配置

根据配置文件生成对应的 API 接口文档

▼
shell
复制代码
alova gen [-f, --force] [-c --cwd <path>] [-w --workspace]

gen 将会查找alova.config.{cjs,js,mjs,ts}配置文件并使用它自动生成 API 相关信息。

参数：

-f, --force：默认情况下，将会检查最新的 openAPI 文件是否有更新，指定此参数后将会忽略检查，并强制重新生成。

-c, --cwd ：指定要生成的配置文件的工作目录，默认为当前目录。

-w, --workspace：指定是否以 workspace 的方式生成，它将会根据package.json中的workspaces，或pnpm-workspace.yaml中定义的子包来查找配置文件，并生成所有子包的 API 相关信息。

这里直接 alova init 试试

一般情况下，我们修改这个 input 就好

启动后端项目

这个项目是我正在学习的一个项目，是 B 站 uniapp 的一个壁纸项目，我想给后台和后台管理页面做出来然后 uniapp 也做出来，仅供学习哈

这个基本上都是使用 springboot-init 生成的，这里我这个 springboot-init 是基于 Springboot2.7 + Swagger3 + satoken 的一个基础模板，模板的源代码在我的 github：https://github.com/XiaoZhangCode/spring-boot-init

这里填写上后端这个 Swagger 的 json 地址

然后输入 alova gen 看看效果

生成的格式是这样的，

我们直接先试试能不能用，打开 HelloWord 组件代码如下：

▼
javascript
复制代码
<script setup lang="ts">
import Api from "../api/index.ts"
import {onMounted} from "vue";


const userLogin = async () => {
  let res = await Api.general.userLogin({
    data: {
      userAccount: "admin",
      userPassword: "12345678"
    }
  });
  console.log(res)
}
onMounted(() => {
   userLogin()
})

const getPage = () => {
  let detailsPage = Api.general.getWallpaperDetailsPage({} as any);
  detailsPage.then(res => {
    console.log(res)
  })
}


</script>

<template>

    <div class="card">
      <button @click="getPage()">获取请求分页</button>
    </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
    >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a
        href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
        target="_blank"
    >Vue Docs Scaling up Guide</a
    >.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

主要是测试下接口调用，这里模拟登录账号后，点击获取一下获取分页信息

用法和其他请求库是类似的，鼠标悬浮到方法上，就能看到参数和相应信息，还是挺好的

启动项目看看效果

登录接口调用成功！测试下分页接口

这里就有点问题了，刚刚我们明明已经调用过登录了，

这是登录接口返回到 cookie 我们看看请求是否带上了，

没有携带 cookie ，之前 Axios 时候需要在 reuqest.js 中加上：

▼
plain
复制代码
withCredentials: true,

我们看看这个创建的 CreateAlova 中是否有这个属性

很遗憾在详解 Alova 这一章没有这个参数，但是在官方文档中，讲解到这个CreateAlova 的实例对象是 Method 的父类所有 Method 都会继承这个方法中的参数，然后我们在请求适配器中，找到对应的请求适配器fetchAdapter()

找到一个参数配置

文档地址：https://alova.js.org/zh-CN/resource/request-adapter/fetch#%E9%85%8D%E7%BD%AE%E9%A1%B9

图中的credentials和这个withCredentials很像。而在创建 Alova 实例时候有一个创建 Method 函数之前的钩子函数，这里我们可以统一给 Method 增加配置项，这里我们试试

credentials选项可以有三个值：

omit：默认值。当设置为omit时，跨域请求不会发送任何凭证。这意味着请求不会发送cookies、HTTP认证等信息。

same-origin：当设置为same-origin时，只有当URL与调用Fetch的脚本位于同一源（协议、域名和端口都相同）时，才会发送凭证。如果请求的目标URL与当前页面的源不同，那么请求将不会发送任何凭证。

include：当设置为include时，无论是同源请求还是跨域请求，都会发送凭证。这允许跨域请求携带cookies和HTTP认证信息。

我们将值设置为include，这样等到页面登陆后点击获取分页请求就成功啦！

目前为止，这个 Alova.js 生成文档以及使用文档生成的 API 接口调用全部过程就到此为止了，整体体验下来还是可以的，因为后端定义的方法名就是前端 API 生成都文档接口名，对于全干工程师来说是非常友好的哈哈哈。

这个 Alova 还有很多优秀的功能，大家感兴趣可以自行了解...

Swagger3携手Alova.Js：轻松驾驭自动化，后端接口秒级生成！

概述