codex开发英语单词应用

codex开发英语单词应用
Anyzir单词书管理后台
两个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 | npm install -g pnpm |
5. 进入codex
- 初次进入进行授权允许在该文件夹工作
- /approvals 设为full access
- 模型为gpt5.1 High
6. 输入以下提示词
- 由于过于简单无需写需求文档以及画对应的原型图
1 | 请你帮我基于shadcn/ui和tailwindcss, 实现一个管理后台的UI界面,要求有以下几个页面 |
- 等待AI开发完成
- 注意AI在开发一半时经常会报错,运行也会中断,需要重启一下
pnpm run dev - 如果出现报错,直接复制报错结果给codex让它修改即可
实现数据库引入
使用Drizzle作为数据库ORM工具,通过Supabase作为数据库
1. 进入Supabase,https://supabase.com,创建新的项目
- 地区新加坡
- 数据库密码要记住
2. 选择对应连接方式
初始化环境变量
- 打开Connect
- 创建环境变量
.env输入- 注意
[YOUR_PASSWORD]替换为数据库密码
- 注意
1 | DATABASE_URL=postgresql://postgres:[YOUR_PASSWORD]@db.ylfmxgkejugwqmuyxrpx.supabase.co:5432/postgres |
3. 输入提示词
引入ORM Drizzle
1 | 给该Next.js项目,安装并引入Drizzle ORM的相关依赖和配置,我需要集成我的supabase的数据库。 |
实现系统管理的登陆注册功能
1. 输入提示词
1 | 现在请你基于Drizzle ORM,帮我实现管理员注册功能的前后端,要求: |
注意
- Codex最后生成的文案很重要,因为它不会帮你做提示词里提到的东西,不管是前端UI,还是创建对应数据库,它不会帮我们完成对应的生成创建语句的SQL和应用对应数据库的操作
额外操作
由于我这里直接输入AI给我的操作报错了,所以我让Codex帮我完成,提示词:
1 | 帮我执行`npm run db:generate`和`npm run db:push`命令,若报错帮我处理问题 |
梯子不支持IPv6报错
1 | PS C:\Users\dell\Documents\codex_projects\admin-nextjs> npm run db:push |
我的原因是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 | import "dotenv/config"; |
Drizzle 必须加 ssl:true,否则会尝试直连 IPv6 → ENOTFOUND
最后终于成功执行,泪目
1 | PS C:\Users\dell\Documents\codex_projects\admin-nextjs> npm run db:push |
打开RLS策略
- 点击 Enable RLS for this table
- 点击 Enable RLS
目前情况
- 已完成数据表的创建
- 进行注册系统管理员
- 如果有报错复制返回让AI解决
- 感觉我被做局了,报错6个,弄完注册刚点击,又报错
2. 优化系统管理员提示词
1 | 优化一下管理员管理页面 |
- (UI优化)搜索
还没有账号注释代码
单词表数据导入
1. 下载单词表
- 打开https://github.com/kajweb/dict?tabreadme-ov-file
- 选择了较少的单词https://github.com/kajweb/dict/blob/master/book/1521164661774_PEPXiaoXue3_1.zip
- 下载解压并复制到cursor项目新建的文件夹temp下,并且格式化,快捷键为
Shift + Alt + F
2. 在supabase下创建words表
点击new table,name为words
对应的列手动的去输入
- wordRank
- headWord
- content
- bookId
3.导入单词表
让AI制作JSON转CSV的脚本
提示词如下:
1 | 帮我生成一个node.js脚本,能够把temp\PEPXiaoXue3_1.json的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 | 我在 supabase后台创建了一个words的表,请你帮我在项目中定义该表的 schema,这是表的定义: |
单词表管理页面
1. 提示词
1 | ```task |
- 这里我做近1小时的代码优化,关于单词书无法更改单词数量的问题,还有一些bug,还有网页上f12出现的报错,以及画面的优化
2. 添加删除 提示词
1 | 完成删除单词书的功能,同时删除books这张表中对应的单词书,以及words这张表中相同booksId的所有数据 |
- 这里有一次使用脚本,下载英语词汇,如何转化为scv然后导入数据库,报错全部交给AI去完成
- 然后去新建单词书,然后删除
