零代码基础的人，也可以通过阿里的通义千问大模型，写出你想要的前端页面

立刻&坚持

已于 2025-02-27 11:54:42 修改

阅读量760

点赞数 25

文章标签：前端

于 2025-02-22 14:37:54 首次发布

本文链接：https://blog.csdn.net/weixin_44170040/article/details/145794669

版权

前言

在当今数字化时代，掌握编程技能变得越来越重要。然而，对于一些人来说，从零开始学习编程可能是一项挑战。幸运的是，借助人工智能工具如阿里的通义千问大模型，即使是没有编程背景的人也能轻松编写出所需的功能代码。本文将通过一个具体的例子——构建一个简单的验证码管理系统，来演示如何利用通义千问生成前后端代码。

目标

- 使用Flask框架创建Web应用。
- 使用SQLite作为数据库存储验证码数据。
- 实现验证码列表页面和新增/编辑页面。
- 支持搜索功能。
- 提供添加、编辑和删除验证码的功能。

用户需求

写一个Web前端页面，需求是用来创建指定手机号验证码。用户可以通过前端创建手机号然后对对应手机进行输入特定验证码，客户就可以把它当密码了。一共是两个页面：

1. **列表页面**：
- 展现所有的指定验证码。
- 包含搜索框，根据手机号进行搜索。
- 列表字段包括：序列、用户手机号、指定验证码、备注、启用状态、创建时间、更新时间和操作（可进行编辑及删除）。

2. **新增页面**：
- 字段包括：用户手机号、指定验证码、备注、启用（开关，默认关闭）。
- 新增用户指定手机号的验证码后会调整列表页面。

环境准备

确保你已经安装了以下工具：

- Python 3.x
- Flask (可以通过pip安装)

安装Flask

如果你还没有安装Flask，可以使用以下命令进行安装：
pip install flask

项目结构

我们将创建一个简单的项目结构，包含以下几个文件和文件夹：

verification_system/
│
├── app.py # Flask应用主文件
├── templates/
│ ├── index.html # 列表页面
│ └── add_edit.html # 新增/编辑页面
└── static/
└── style.css # 样式文件

步骤一：创建Flask应用

首先，我们使用通义千问生成 `app.py` 文件，这是Flask应用的主文件。

使用通义千问生成 `app.py`

你可以通过以下对话向通义千问请求生成 `app.py` 文件的内容：

用户大概想法: 我没有编程经验，但我需要一个简单的验证码管理系统。系统需要显示所有验证码记录，支持搜索特定手机号的验证码记录，添加新的验证码记录，编辑现有的验证码记录，以及删除不需要的验证码记录。

具体需求如下（输入大模型-代码模式）：
- 写一个Web前端页面，需求是用来创建指定手机号验证码。用户可以通过前端创建手机号然后对对应手机进行输入特定验证码，客户就可以把它当密码了。
- 一共是两个页面：
1. 列表页面：
- 展现所有的指定验证码。
- 包含搜索框，根据手机号进行搜索。
- 列表字段包括：序列、用户手机号、指定验证码、备注、启用状态、创建时间、更新时间和操作（可进行编辑及删除）。
2. 新增页面：
- 字段包括：用户手机号、指定验证码、备注、启用（开关，默认关闭）。
- 新增用户指定手机号的验证码后会调整列表页面。
请帮我生成一个Flask应用的主文件 `app.py`，使用SQLite作为数据库。

**通义千问**:

app.py

将通义千问生成的代码保存为 `app.py` 文件。

步骤二：创建前端页面

接下来，我们使用通义千问生成前端页面模板。

使用通义千问生成 `index.html`

**用户**: 请帮我生成一个验证码列表页面 `index.html`，包含搜索功能和操作按钮（新增、编辑、删除）。具体要求如下：
- 展现所有的指定验证码。
- 包含搜索框，根据手机号进行搜索。
- 列表字段包括：序列、用户手机号、指定验证码、备注、启用状态、创建时间、更新时间和操作（可进行编辑及删除）。

**通义千问**:

index.html

将通义千问生成的代码保存为 `templates/index.html` 文件。

使用通义千问生成 `add_edit.html`

**用户**: 请帮我生成一个新增/编辑验证码页面 `add_edit.html`，支持输入手机号、验证码、备注和启用状态。具体要求如下：
- 字段包括：用户手机号、指定验证码、备注、启用（开关，默认关闭）。
- 新增用户指定手机号的验证码后会调整列表页面。

**通义千问**:

add_edit.html

将通义千问生成的代码保存为 `templates/add_edit.html` 文件。

步骤三：创建样式文件

最后，我们使用通义千问生成样式文件以美化页面。

使用通义千问生成 `style.css`

**用户**: 请帮我生成一个样式文件 `style.css`，美化验证码管理系统页面。