不会后端不用愁，Strapi解你忧——使用Qoder生成前端开发框架，技术栈React18 + Vite + ReactRouter6 + Axios + vw 适配 + Ant Design Mobile + Zustand + Strapi5

拥抱AI，我们可以不用再手动使用脚手架搭建前端系统基础框架了。只需要根据自己的需要结合AI聊天工具推荐出相关技术栈，即可使用Qoder/Cusor等AI工具自动生成即可。

前端我们已经使用Strapi创建了需要的数据表及测试数据，API查询也调通了，只需要提供相关技术栈及本地服务Url提供给AI工具，AI工具会自动制定计划，给出我们想要的基础框架。

需要注意的事，使用AI进行项目初始化需要讲究策略，“基础配置”可以一步到位，但“业务逻辑”建议分布落地。

---

 第一步. 基础架构与依赖安装（适合“一步到位”）

第二步：核心代码生成（建议“模块化投喂”）

---

 

一. 基础架构与依赖安装（适合“一步到位”）：

1. 你可以直接要求 AI 帮你完成环境搭建和依赖安装。这部分工作标准化程度比较高，AI 处理得非常完美。

推荐指令如下：

使用 Vite 初始化一个 React 18 + TypeScript 项目。请帮我安装并配置以下依赖：
UI库：antd-mobile (最新版)
状态管理：zustand
路由：react-router-dom@6
请求库：axios
样式工具：postcss-px-to-viewport (用于vw适配), less
Strapi SDK (可选，或者直接用 axios)
请给出完整的 npm install 命令，并帮我修改 vite.config.ts 以支持 vw 适配配置。

2. 项目初始化，点“终端运行”即可

注：如果不想每一步都手动点“终端运行”，可以点右侧的“每次询问”，下拉菜单中选“开启自动运行”，就不用每次手动点击了。

对于项目初始化这部分工作标准化程度高的工作，可以考虑开启自动运行，等项目进入实际开发再进行关闭。

 

项目初始化完成会自动安装依赖、启动项目

返回IDE，聊天窗口中点“接受”即可。

第二步：核心代码生成（建议“模块化投喂”）

为了保证代码的可维护性和准确性，建议将核心代码生成指令拆分为 “通用层” 和 “业务层” 两步。

1. 通用层封装（一次性生成）

这一步主要是为了打通前端与 Strapi 的连接。与以往版本不同，Strapi 5 的 API 结构比较特定，一次性让 AI 写好 Axios 封装可以避免后续重复劳动。

推荐指令如下：

基于 Axios 封装一个请求工具 src/utils/request.ts。
本地服务器地址为 http://localhost:1337。
添加请求拦截器：自动携带 Token（如果有）。
添加响应拦截器：重点处理 Strapi 的数据结构，直接返回 response.data.data，如果是错误则抛出异常。
同时，请在 src/store 下创建一个 useGlobalStore.ts，用 Zustand 管理全局加载状态和用户信息。

执行完成，浏览器中查看项目，已经成功创建了示例页面

手动接受所有修改

2. 业务功能实现（分批生成）

博客功能看似简单，但涉及列表渲染、详情解析、筛选逻辑。如果要一次性生成，AI 很容易写出几百行的“巨型组件”。建议按页面拆分：

1）批次 A（首页与列表）：

创建文章列表页 src/pages/Home。
使用 Ant Design Mobile 的 List 和 Card 组件展示文章。
顶部需要一个 SearchBar 或 Segmented 控件用于分类/标签筛选。
使用 useRequest 或自定义 Hook 调用 Strapi 接口 /api/posts，支持分页和筛选参数。

指令执行完成，Qoder把文章的API弄错成了/articles 了，可以手动修改，当然也可以指令直接让Qoder自己修改。

改好之后，项目依然报错：

这时候就建议人工介入排查错误，修改代码了，效率高，也减少了冗余代码的产生（让AI修复可能无法一次性处理好，需要你一遍遍的贴报错信息，它一遍遍修复，肯定会产生不少冗余代码的）。

经排查，是article对象直接使用了非必填的字段引起报错：

可以使用IDE全局替换功能直接给 article.attributes添加?，即 article.attributes? 。

项目热更新，项目已经没有报错了，首页的文章数据页加载出来了。

但是现在数据展示不正常，这时候就可以结合文章表Post的相关属性对Home页面进行展示调整了。

首页文章列表我们只需要展示文章创建时间、标题、摘要，指令如下：

文章API为：/posts
首页文章列表项只需要展示创建时间、标题title、摘要excerpt、封面图cover(非必填）
注意：当前版本为Strapi5

注：这里要跟Qoder强调是Strapi5，Strapi 5 的响应数据结构与 v4 不同，不再使用 attributes 包装字段。尽管我们在项目初始化的技术栈指令中已经告诉了Strapi的版本，但很明显，Qoder这里没处理好，还是使用了attributes 包装字段。

处理好之后，下面这个数据结构才是正确的：

// 文章接口 (Strapi 5 数据结构)
export interface Article {
  documentId: string
  id: number
  title: string
  excerpt?: string
  cover?: {
    data: {
      id: number
      documentId: string
      url: string
      alternativeText?: string
      name?: string
      mime?: string
      size?: number
      width?: number
      height?: number
    }
  }
  createdAt: string
  updatedAt: string
  publishedAt: string
}

这次的展示总算正常了

那么，首页需要展示的数据基本上都有了，至于样式可以后边调整，下面我们继续创建文章详情页面。

2）批次 B（文章详情）：

文章详情有些复杂，我们创建了分类和标签以及评论表，这里先实现商品详情+分类的展示，根据自己创建的数据表，编写指令如下：

创建文章详情页 src/pages/Detail。
根据路由参数documentId 获取文章详情。
使用 Ant Design Mobile 的 NavBar 做导航。
注意：Strapi 返回的内容通常是 Markdown 或富文本，请使用 dangerouslySetInnerHTML 渲染，并处理基本的样式重置。
文章表Post需要展示的字段如下：
- title：标题
- content：内容
- contentMd：内容(markdown为true)
- excerpt：摘要
- category Relation (manyToOne) with Category：表连接查询展示分类Category

商品详情没有展示分类，那么我们需要再次单独给Qoder指令关联查询分类，如果当前文章有分类就展示。指令如下：

文章详情页面添加分类展示，
分类Category与文章Post是一对多的关系

事实证明，还是得给AI填喂数据表字段结构，不然它总是会自己补充，真真是改不完的bug了。

继续填喂指令，给出分类表Category字段结构，让AI自己去调整完善：

文章详情页面添加分类展示，分类表Category字段结构如下：
name    String (Text)    ✅ 是    分类名称
description    String (Text)    ❌ 否    分类描述
parentId    String (Text)    ❌ 否    父级分类ID（用于实现多级分类/树形结构）

另外，分类表Category一对多关联 Post 表；
对相关文件进行调整后进行测试验证。

正常加载文章详情及分类，就基本就没啥问题了。