前端er Go-Frame 的学习笔记：实现 to-do 功能（二）

文章目录

效果
相关
目标
前端
搭建前端基础代码
- [配置 tsconfig.json](#配置 tsconfig.json)
- [后端：统一接口为 v1 版本，路由分组](#后端：统一接口为 v1 版本，路由分组)
- [前端：引入 alova，配置实例](#前端：引入 alova，配置实例)
- 前端页面功能的实现
源仓库

效果

目标

上一章已经把后端实现了大概的功能，目前写一下前端，在构建的过程中可能要改改后端不合理的地方，比如：

请求的资源应该是复数，所以要修改后端的路由 todo => todos
先把前端的页面画出来，alova 的使用要学习一下
乐观更新是什么？

前端

前端的话，我想看一下 Alova 的使用方法，然后想一下如何简化前端，只用写资源名字，即可做到增删改查，

技术栈的话，选择 React 19 + Antd 6 + Alova

搭建前端基础代码

在项目根目录下，用 vite 的脚手架来搭建项目

bash 复制代码

pnpm create vite

然后输入项目名，选择框架等等

搭建好基础之后，把 antd 和 alova 安装一下

再安装一些 eslint, antfu-eslint，具体的使用配置可以看这个：https://github.com/antfu/eslint-config

bash 复制代码

pnpm i -D eslint @antfu/eslint-config

然后写一下 eslint-config.js

js 复制代码

import { antfu } from '@antfu/eslint-config'

// 第一个对象是基础配置（你没写东西）
// 第二个对象是覆盖 antfu 内置规则
export default antfu({

}, {
    rules: {
        'no-console': 'off',                           // 允许使用 console.log，不再警告
        'prefer-const': 'off',                         // 允许使用 let，不强制要求用 const
        'ts/ban-ts-comment': 'off',                    // 允许使用 @ts-ignore / @ts-nocheck 等注释
        'no-case-declarations': 'off',                 // 允许在 switch/case 里直接写 const/let
        'ts/no-use-before-define': 'off',              // 允许变量或函数在定义前被使用
        'ts/no-unused-expressions': 'off',             // 允许类似条件 && 表达式的写法
        'ts/no-empty-object-type': 'off',              // 允许定义空对象类型 type A = {}
        'ts/no-unsafe-function-type': 'off',           // 允许使用 any 函数签名 (...args: any[]) => any
        'ts/consistent-type-definitions': 'off',       // 不强制只能用 type 或 interface，随便写
        'style/indent': ['error', 4],                  // 强制使用 4 空格缩进
        'style/jsx-indent-props': ['error', 4],        // JSX 属性缩进也是 4 空格
        'prefer-promise-reject-errors': 'off',         // 允许 reject('xxx')，不强制必须 new Error()
        'eslint-comments/no-unlimited-disable': 'off', // 允许写 /* eslint-disable */ 禁用所有规则
    },
})

ok，依赖安装完之后，来看看这个空的项目，配置一下环境，以及 vite 的代理 proxy，和 tsconfig.json

配置 tsconfig.json，用于改变 ide 代码编辑器的配置，比方说 @ 这种 alias
配置 vite.config.json 中的 @ 用于打包时候的描述，以及 proxy 代理请求后端接口

配置 tsconfig.json

后端：统一接口为 v1 版本，路由分组

还记的写后端时遇到的疑问吗 https://goframe.org/quick/scaffold-api-definition，为什么用 /api/v1 当借口的前缀

目前后端是没有接口路由分组的，所以来改一下后端，让前端以后通过 /api/v1/todo 来访问

前端：引入 alova，配置实例

前端的话，要改这几个文件

把 Alova 的实例的 baseUrl 改一下
.env 文件也改改

这些就算是前端的配置了

ts 复制代码

// api/alova.ts
import { createAlova } from 'alova'
import adapterFetch from 'alova/fetch'
import ReactHook from 'alova/react'

export const alovaInstance = createAlova({
    baseURL: '/api/v1', // 这里会自动拼接到每个接口的前面的
    requestAdapter: adapterFetch(),
    responded: response => response.json(),
    statesHook: ReactHook, // 如果写 react 的话，要引入这个，不然白屏
})

然后写一下页面

js 复制代码

// 页面 todo.tsx
import { useRequest } from 'alova/client'
import { Button } from 'antd'
import { alovaInstance } from '@/api/alova'

export function PageTodo() {
    const { data } = useRequest(
        alovaInstance.Get('/todo'),
    )
    console.log('data:>>', data)
    return (
        <>
            <div>
                这是 todo 的页面
            </div>
            <Button>点我123312</Button>
        </>
    )
}

然后再浏览器中试一下，可以看到前端能请求到接口了！

这里其实并没有那么顺利

当我没有改后端的 /api/v1 分组之前，前端是请求不到后端的，我以为是后端没有配置跨域，（后来我也没去配置 go-frame 的跨域，因为不是这个问题）

是因为什么呢，就是 vite 的代理，我以为前端请求的 /api/v1/todo，就会走代理，之后代理会把 api/v1 给去掉，但是这个想法是错误的