现在在做问卷测评的项目，前后端自己一个人做。
后端框架就用我熟悉的django，前端用React。原因是搜到一个AI根据网页图片自动生成代码的网站，它的实现是用React。前端的实现换成GEMINI问答。
首页登录模块的实现：
功能：账户的验证。
后端：账户验证用simplejwt一键式生成接口，这里讲一下验证码
验证码图片是由后端传给前端的。后端写两个接口（1）生成验证码文本与图片（2）（验证账户验证码），
（1）的实现可以是我项目的写法，也可以是验证码的库生成。
验证码使用缓存存到redis。
前端：编辑器使用vscode，插件是Live Server，用于开启服务器。
（1）react如何在vscode配置环境并成功运行？
进入创建好的目录，npx create-react-app reactdemo
（2） 我创建了一个react项目，现在它是全新的。我要写登录界面。画面有账户及输入框、验证码图片与输入框与确认，左侧放一张图片。给出代码与代码所在位置。
要求：样式使用UI库Ant Design ，尽量保持与我发送的图片效果一致，留出联调接口的地方（登录
）
需要安装antdesign与styled-components。
（3）在你的项目根目录下创建一个名为 .env 的文件。在 .env 文件中添加你的环境变量：
REACT_APP_API_URL=http://127.0.0.1:8000。
Ant Design 的 Form 组件的 onFinish 事件处理函数并不会直接传递一个 DOM 事件对象，而是传递一个包含表单数据和一些其他信息的 values 对象。所以，你需要修改你的 handleSubmit 函数，并将 event 参数替换为 values 参数。
后端：点击登录按钮时，发送请求验证码的接口；输入验证码后请求登录接口。这时候验证码校验与账户校验是写在一起的。
