codex开发英语单词应用

单词书管理后台

两个Tab

  • 单词书的管理页面
  • 管理员的管理页面

单词书管理后台框架图

系统管理员的登陆注册功能

  • 如果系统管理员数据库没有数据,进行初始化系统管理员注册,否则默认管理员的登陆操作
  • 管理员注册逻辑仅显示一个
  • 存在其他管理员进入也只能通过系统管理员增加授权的方式进入

系统管理员注册图

整体UI开发

基于nextjs框架: https://nextjs.org

1. 创建项目文件夹

  • C:\Users\dell\Documents\codex_projects

2. 在项目文件夹路径下打开终端,在当前目录创建项目运行命令:

npx create-next-app@latest admin-nextjs

  • admin-nextjs 对应项目名字
  • 默认配置(一路回车)

3. cursor打开admin-nextjs:

cursor admin-nextjs/

4. cursor打开终端初始化简单nextjs项目

1
2
3
npm install -g pnpm
pnpm install
pnpm dev

5. 进入codex

  • 初次进入进行授权允许在该文件夹工作
  • /approvals 设为full access
  • 模型为gpt5.1 High

6. 输入以下提示词

  • 由于过于简单无需写需求文档以及画对应的原型图
1
2
3
4
5
6
7
8
请你帮我基于shadcn/ui和tailwindcss, 实现一个管理后台的UI界面,要求有以下几个页面
1. `/`:如果用户已登陆,跳转到/books页面,如果用户没有登陆,跳转到
2. `/signup`:系统管理员注册功能,输入姓名、邮箱、密码、确认密码。
3. `/signin`:管理员的的登陆页,输入邮箱和密码登陆
4. `/books`:单词书管理
5. `/admin-users`:管理员管理

单词书管理和管理员管理页面要求登陆后才能查看, 并显示对应的侧边栏。侧边栏底部显示用户邮箱 + 退出登陆icon
  • 等待AI开发完成
  • 注意AI在开发一半时经常会报错,运行也会中断,需要重启一下pnpm run dev
  • 如果出现报错,直接复制报错结果给codex让它修改即可

实现数据库引入

使用Drizzle作为数据库ORM工具,通过Supabase作为数据库

1. 进入Supabase,https://supabase.com,创建新的项目

  • 地区新加坡
  • 数据库密码要记住
    Supabase新项目

2. 选择对应连接方式

初始化环境变量

  • 打开Connect
  • 创建环境变量.env输入
    • 注意[YOUR_PASSWORD]替换为数据库密码
1
DATABASE_URL=postgresql://postgres:[YOUR_PASSWORD]@db.ylfmxgkejugwqmuyxrpx.supabase.co:5432/postgres

3. 输入提示词

引入ORM Drizzle

1
2
给该Next.js项目,安装并引入Drizzle ORM的相关依赖和配置,我需要集成我的supabase的数据库。
我已经在项目中创建了`.env`文件,并且设置了 `DATABASE_URL` 环境变量。注意,只安装依赖并引入相关配置,不要给我默认创建额外的表。

实现系统管理的登陆注册功能

1. 输入提示词

1
2
3
4
5
6
7
8
现在请你基于Drizzle ORM,帮我实现管理员注册功能的前后端,要求:

1. 创建对应的管理员数据表`admin-users`,该表用来保存管理员和系统管理员的数据,以及`admin-session`,用来保存用户的session状态,用户登陆态有效期7天。注意:如果数据表中没有任何数据,那么自动跳转到`/signup`,实现首个系统管理员的注册功能。如果有管理员数据,不允许再二次注册系统管理员,自动跳转到`/signin`。

2. 实现`/signin`页面的登陆逻辑

3. 实现`/admin-users`页面新建管理员 + 管理员列表查看、编辑等逻辑,管理员分为系统管理员和普通管理员。系统管理员可以增加管理员,并且设置管理员为普通管理员或者是系统管理员。如果是普通管理员,无法看到管理员管理这一个侧边栏,同时后端接口也不充许调用。

注意

  • Codex最后生成的文案很重要,因为它不会帮你做提示词里提到的东西,不管是前端UI,还是创建对应数据库,它不会帮我们完成对应的生成创建语句的SQL和应用对应数据库的操作

额外操作

由于我这里直接输入AI给我的操作报错了,所以我让Codex帮我完成,提示词:

1
帮我执行`npm run db:generate`和`npm run db:push`命令,若报错帮我处理问题

梯子不支持IPv6报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
PS C:\Users\dell\Documents\codex_projects\admin-nextjs> npm run db:push                                                                       

> admin-nextjs@0.1.0 db:push
> drizzle-kit push

No config path provided, using default 'drizzle.config.ts'
Reading config file 'C:\Users\dell\Documents\codex_projects\admin-nextjs\drizzle.config.ts'
Using 'pg' driver for database querying
[⣷] Pulling schema from database...
Error: getaddrinfo ENOTFOUND db.ylfmxgkejugwqmuyxrpx.supabase.co
at C:\Users\dell\Documents\codex_projects\admin-nextjs\node_modules\pg-pool\index.js:45:11
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
at async Object.query (C:\Users\dell\Documents\codex_projects\admin-nextjs\node_modules\drizzle-kit\bin.cjs:80622:26)
at async fromDatabase2 (C:\Users\dell\Documents\codex_projects\admin-nextjs\node_modules\drizzle-kit\bin.cjs:19276:25) {
errno: -3008,
code: 'ENOTFOUND',
syscall: 'getaddrinfo',
hostname: 'db.ylfmxgkejugwqmuyxrpx.supabase.co'
}

我的原因是v2rayN不支持IPv6,解决方案:

Connect里的Method选择Session pooler
  • .env 改成:
1
DATABASE_URL=postgresql://postgres.ylfmxgkejugwqmuyxrpx:[YOUR-PASSWORD]@aws-1-ap-southeast-1.pooler.supabase.com:5432/postgres
告诉 Drizzle 不要尝试直连数据库(默认走 IPv6 会失败)
  • 修改 drizzle.config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import "dotenv/config";
import { defineConfig } from "drizzle-kit";

const connectionString = process.env.DATABASE_URL;

if (!connectionString) {
throw new Error("DATABASE_URL env var is not set");
}

export default defineConfig({
dialect: "postgresql",
schema: "./db/schema.ts",
out: "./drizzle",

// 最关键的修改在这里
dbCredentials: {
url: connectionString,
ssl: true, // 强制 HTTPS + IPv4,不走 IPv6
},
});

Drizzle 必须加 ssl:true,否则会尝试直连 IPv6 → ENOTFOUND


最后终于成功执行,泪目

1
2
3
4
5
6
7
8
9
10
11
PS C:\Users\dell\Documents\codex_projects\admin-nextjs> npm run db:push


> admin-nextjs@0.1.0 db:push
> drizzle-kit push

No config path provided, using default 'drizzle.config.ts'
Reading config file 'C:\Users\dell\Documents\codex_projects\admin-nextjs\drizzle.config.ts'
Using 'pg' driver for database querying
[✓] Pulling schema from database...
[✓] Changes applied

打开RLS策略

点击RLS

  • 点击 Enable RLS for this table
  • 点击 Enable RLS

目前情况

  • 已完成数据表的创建
  • 进行注册系统管理员
  • 如果有报错复制返回让AI解决
    • 感觉我被做局了,报错6个,弄完注册刚点击,又报错

2. 优化系统管理员提示词

1
2
3
优化一下管理员管理页面
1.系统管理员不能修改自己的状态和修改自己的角色,只能修改它人的状态。
2. 优化整体的UI,新建管理员用弹框的方式,同时编辑管理员,也是用弹框,不要在姓名和邮箱后面添加编辑按钮。点击弹框后将数据进行回显后编辑
  • (UI优化)搜索 还没有账号 注释代码

单词表数据导入

1. 下载单词表

2. 在supabase下创建words表

  • 点击new table,name为words
    点击new table

  • 对应的列手动的去输入

    • wordRank
    • headWord
    • content
    • bookId
      words.png

3.导入单词表

让AI制作JSON转CSV的脚本

提示词如下:

1
2
3
4
5
6
帮我生成一个node.js脚本,能够把temp\PEPXiaoXue3_1.json的JSON,处
理成为一个csv的格式并保存在同级目录下,这是这个json的示例数据:
```json
[Pasted Content 4208 chars]
```
csv的列包括wordRank、headWord、content、bookId,将content当作一个json保存
  • 最好提供示例数据,Codex读取上下文会超长
  • 其中的[Pasted Content 4208 chars]是通过复制1~118行数据,直接粘贴到命令行后出现的,直接复制没有效果
  • 大文本数据清洗的核心是不要让AI自己去读取,而是让它写脚本

  • 通过Codex写的脚本转换到csv文件后,正式开始导入

  • Insert -> Import data from CSV
    导入

  • 截止目前,完成数据的清洗工作和上传导入工作了

4.创建words表的schema

由于AI不知道项目创建了一个words表,Drizzle ORM的特点是会给对应数据库生成对应的schema,通过创建对应words表的schema,AI就知道了这个words表了

  • 首先获取表的定义语句
    • 点击words表,右下角从Data切换到Definition中的代码就是表的定义语句
  • 提示词如下:
1
2
3
4
5
6
7
8
9
10
11
我在 supabase后台创建了一个words的表,请你帮我在项目中定义该表的 schema,这是表的定义:
```
create table public.words (
id bigint generated by default as identity not null,
"wordRank" integer null,
"headWord" text null,
content json null,
"bookId" text null,
constraint words_pkey primary key (id)
) TABLESPACE pg_default;
```

单词表管理页面

1. 提示词

1
2
3
4
5
6
7
8
```task
请你帮我创建单词书的录入功能和单词书管理功能。要求:
1. 用户点击新建单词书后,出现弹框,要求用户输入标题、单词数量、封面url、bookId、标签(逗号分割)。
2. 单词书两个表渲染封面、标题、单词数量、 bookId信息。用户点击编辑可以弹出编
辑弹框。
3. 帮我完成单词书的 `books` 的表创建工作,并实现表的迁移操作
4. 通过bookId实现和words这个表的关联关系
```
  • 这里我做近1小时的代码优化,关于单词书无法更改单词数量的问题,还有一些bug,还有网页上f12出现的报错,以及画面的优化

2. 添加删除 提示词

1
完成删除单词书的功能,同时删除books这张表中对应的单词书,以及words这张表中相同booksId的所有数据
  • 这里有一次使用脚本,下载英语词汇,如何转化为scv然后导入数据库,报错全部交给AI去完成
  • 然后去新建单词书,然后删除

单词书H5