day12-小游戏上线-Trae开发微信小程序01

今日内容

1 上线小游戏项目

# 1 我们使用Trae开发了小游戏--->消消乐--》只能本地玩---》所有互联网用户【你的朋友们】-->都可以玩

# 2 步骤
	1 购买一台云服务器【阿里云】-->远程连接
    2 在云服务器上装软件【nginx】
    3 把我们开发的代码，上传到云服务器上
    4 启动nginx软件
    5 浏览器中访问【所有用户都可以】

1.1 步骤1-购买服务器

# 1 购买云服务器
	-我们自己用的电脑--》叫个人pc--》装的系统都是win--》win系统不适合跑软件---》Linux适合
    	-常见的操作系统：win，mac，linux：企业使用，部署项目
    -所有互联网用户访问我们的项目，需要公网ip--》跟运营商购买【电信，联通】--》我们通过购买云服务器同时，购买公网IP
    -公网IP：互联网用户都能访问到的ip地址
    -阿里云，腾讯云，华为云。。。厂商都卖云服务器，随便挑一个即可--》讲课用阿里云
    	-建机房--》在机房中放非常多电脑---》租给别人用
        -服务器需要恒温恒湿----》阿里在西湖底建机房--》用水冷却
        -新疆，西藏电费便宜--》建机房---》购买这些服务器时，价格相对便宜
        
    -买一台云服务器相当于，花钱租别人一台电脑，我们使用---》这台电脑我摸不到--》只能远程连接
    	-我们本地win机器----》连接到购买的云服务器上
# 2 购买云服务器有几种购买方式
	1 包年包月：一买买一年，几年
    2 按量付费：按小时计费，用多少花多少钱---》讲课用这种
    3 抢占式实例：我们一般不用
    
    
# 3 购买地址：https://ecs.console.aliyun.com/?spm=5176.12818093_47.resourceCenter.1.3be92cc9PrgvfE
	-相当于同学们去电脑城配电脑：cpu，内存，硬盘。。。
    
# 4 购买完后
	ip：47.116.179.29
    用户名：root
    密码：LiuQingzhengsssss
    
    
# 5 服务器我们买完了，看不到--》但我们要操作它--》需要远程连接上去
	-在上海阿里云的机房中--》不可能去机房看到
    -使用软件：远程连接：
    	-finallshell：可以有图形化的操作--》推荐用
        -xshell
        -cmd 也可以
        
# 6 下载安装finallshell：https://www.hostbuf.com/t/988.html
	-双击安装即可
    
# 7 操作：如下图
	

**

1.2 安装nginx

# 1 nginx 是个软件---》可以装在服务器上【云服务器】，在浏览器中【本地，互联网用户】，通过ip地址，访问到这个软件---》一访问软件--》返回小游戏程序---》互联网用户就能看到这个小游戏，并玩

###### 2 步骤：你们只需要复制粘贴命令即可#######
# 1 下载 nginx 1.28.0 【下到云服务器上了】
wget https://nginx.org/download/nginx-1.28.0.tar.gz
# 2 解压安装包
tar -xf nginx-1.28.0.tar.gz
# 3 进入到文件夹中
cd nginx-1.28.0

# 4 安装软件--配置安装路径
dnf install -y pcre-devel gcc make zlib-devel openssl-devel

./configure --prefix=/usr/local/nginx --with-http_ssl_module

# 5 编译并安装
make &&  make install

# 6 创建软连接--》创建快捷方式
ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx 


# 7 开启nginx 软件
nginx
# 如果没开启--》访问服务器ip地址--》没反应
# 如果开启了--》访问服务器ip地址--》有反应--》如下图
	-我们想看到的是小游戏

# 8 修改看到的页面--》你们不用操作--》只看即可
cd /usr/local/nginx/html/ # 进入到目录
rm -rf index.html# 删除 index.html
# 新建一个index.html,写入文字

1.3 上传游戏代码

# 1 注意：3个文件都传上去
	-把三个文件--复制到桌面上
    
# 2 在目录下把原来文件删除【一定注意目录，目录不对不行】
cd /usr/local/nginx/html/ 

# 3 把三个文件传上去，右键

1.4 同学问题

# 1 部署多个项目--》nginx 软件配置--》比较专业--》需要学很多才能实现
	-可以把消消乐的三个文件删除--》重新传另一个项目的三个文件--》实现同一个服务器，可以有多个游戏

# 2 关于游戏规则问题
	-游戏是我们写的[Trae写的]--》想加任意规则，就跟Trae交互即可

1.5 释放云服务器

# 0 购买按量付费需要先充值--》充值金额要大于100元
	-自行选择购买还是不买
    
# 1 如果不释放，一直扣费
# 2 如果练习完了--》可以释放了
	-服务器上的所有东西都没了
    
# 3 释放步骤：
	1 关机--》云服务关掉
    2 释放--》云服务器释放

2 IT项目扫盲

2.1 IT公司人员职责及分配

# IT 公司，软件开发公司

# 1 技术研发部门【核心部门】：负责产品的技术实现、架构设计、代码开发与维护
    架构师：设计系统架构（如微服务、分布式），制定技术选型和开发规范
	开发工程师（前端 / 后端 / 全栈）：实现功能代码，遵循架构规范开发模块（如前端负责页面交互，后端处理数据逻辑）
    测试工程师【测试部：质量控制部】：设计测试用例，执行功能测试、性能测试，确保代码质量
    运维工程师（DevOps）：管理服务器、部署上线、监控系统稳定性，优化运维流程
    数据工程师 / 算法工程师：处理数据清洗、建模，开发 AI 算法（如推荐系统、机器学习模型）
    
    
# 2 产品部门：定义产品方向，收集用户需求，推动产品落地
    产品经理（PM）：调研市场需求，制定产品路线图，协调技术、设计、运营推进项目
    需求分析师：拆解业务需求，转化为技术可实现的功能规格说明书（PRD）
    项目经理（PM）：管理项目进度，协调资源，确保按时交付（部分公司由产品经理兼任）
    
    
# 3 设计与用户体验：优化产品界面与用户体验，提升用户留存和转化率
    UI 设计师：设计产品界面视觉（如配色、布局、图标），输出高保真原型。
    UX 设计师：研究用户行为，优化交互流程（如按钮点击逻辑、页面跳转路径）。
    交互设计师：细化界面动效和操作反馈，提升使用流畅度。
    
    
# 4 运营与市场部：推广产品、运营用户、提升品牌影响力
    运营团队：
        用户运营：维护用户社群，策划活动提升活跃度（如签到奖励、用户分层运营）。
        内容运营：生产图文、视频等内容（如公众号推文、产品教程），吸引流量。
        活动运营：策划促销活动（如电商大促、裂变拉新），制定转化目标。
    市场团队：
        品牌市场：制定品牌策略（如 Slogan、视觉 VI），投放广告（如社交媒体、搜索引擎）。
        增长营销：通过 SEO/SEM、信息流广告等渠道获取新用户，优化获客成本。
        
# 5  销售与客户服务部：获取客户、完成交易、提供售后支持
    销售团队：
        客户经理：对接企业客户，制定销售方案，完成签单目标。
        渠道销售：拓展代理商、合作伙伴，扩大市场覆盖。
    客服团队：
        客服专员：通过电话 / 在线聊天解决用户问题，收集反馈优化产品。
        售后工程师：为企业客户提供技术支持（如部署培训、故障排查）
        
         
# 6 行政、人力、财务:保障公司日常运转，管理人才与资源
	人力资源（HR）：招聘、培训、绩效考核，搭建团队架构。
    行政部门：办公场地管理、采购、后勤支持。
    财务部门：财务核算、税务申报、预算管理。

2.2 项目开发流程

# 1 一个项目从0--》到1 过程什么样
#############################
# 1 项目启动阶段 :  项目立项
	-高管，老板决定的
    
# 2 需求分析阶段  
	-产品经理：分析用户需求，功能
    
# 3 设计阶段
	-UI设计师：设计软件的界面，配色，交互。。。
    
    
# 4 分任务开发阶段
	-前端开发
    	-注册模版
        -订单模块
    -后端开发
    
    
    
# 5 测试
	-测试人员
    
# 6 上线
	-运维人员：把开发好的代码，部署到服务器
    -用户就可以使用软件了
    
    
# 7 运营，市场
	-推广
    -用户活跃
    
# 后面 做微信小程序项目--》完整的走这个流程

2.3 常见项目类型

# 1 网站类型软件【互联网：早些年常见；企业内部比较常见：医院，银行，电信】
	淘宝，京东
	拼多多不能通过网页购物
    
# 2 小程序类型软件【微信小程序一套开发上线流程】-必须上架
	-微信小程序：京东
    -支付宝小程序
    -抖音小程序

# 3 APP类型软件：安卓，ios，鸿蒙【之前讲过app开发：设计的语言更多，稍微复杂一下】【三期】
	-安卓app开发---》不用上架也行---》app--》发个朋友，装安卓手机上，直接能用
	-美团
    -京东
    -鸿蒙支持微信了吗？
    
    
# 4 桌面应用【目前比较少】
	QQ
    百度网盘
    ev录屏
    
# 5 其他
	-工业控制软件：机械臂控制
    -物联网
    -智能家居

3 换脸微信小程序-需求分析

########################### 我们的流程是最正统的企业软件开发流程##############
我们+Trae一起实现

# 1 我们依然开发换脸微信小程序
	-使用低代码平台开发过了
    -我们学的是技术和流程
    -我们只是用这个为例讲--》可以延展到任意的项目
    
# 2 需求：产品经理 分析--》我们现在做一下产品经理--》设计这个项目的需求
	-要做哪些功能
    	-1 注册功能：通过邮箱，用户名，密码注册
        	-手机号验证码登录--》需要花钱买短信额度【审核很严，必须是企业】，集成进去
        -2 登录功能
        -3 换脸功能：用户上传两张图片
        -4 换脸历史：看到之前的换脸
        -5 个人中心：用户名
        
        -6 其他：同学作为扩展
# 3 我们只能列出功能---》我们不是真产品---》我们不会写需求分析书【产品经理写的】	
	-我们把功能需求给Trae，让Trae帮我们生成需求分析书
    -我们做稍微改动
    
    
# 4 重点：使用Trae生成软件需求分析书
	1 创建ChangeFace项目
    2 新建一个文件夹
    3 使用提示词，让Trae生成需求分析书
    
    
# 5 提示词
你是一个工作经验丰富的产品经理，擅长编写软件需求分析书，现在帮我设计一款智能换脸微信小程序，分为微信小程序端(使用微信原生开发)和后端API(后端使用Django4+mysql8)，帮我生成需求文档，写入到  /项目需求.md中，后端对接Coze换脸工作流，要求实现如下功能:用户名邮箱密码注册，登录，退出,个人中心，换脸功能:用户上传两张图片，调用Coze工作流即可完成换脸;查看换脸历史功能。

3.1 需求分析书

# 智能换脸微信小程序 - 项目需求文档

## 1. 项目概述

### 1.1 项目背景
随着人工智能技术的发展，人脸交换技术（Face Swap）已成为热门的娱乐应用。本项目旨在开发一款基于微信小程序平台的智能换脸应用，用户通过上传两张照片即可实现人脸交换，为用户提供便捷、有趣的图片处理体验。

### 1.2 项目目标
- 开发一款用户友好的微信小程序，支持人脸交换功能
- 后端使用 Django4 + MySQL8 架构，对接 Coze 换脸工作流
- 提供完整的用户注册、登录、换脸、历史记录等功能

### 1.3 技术架构
| 层级 | 技术栈 | 说明 |
| :--- | :--- | :--- |
| 前端 | 微信原生小程序 | 微信小程序原生开发框架 |
| 后端 | Django 4.x | Python Web 框架 |
| 数据库 | MySQL 8.x | 关系型数据库 |
| AI服务 | Coze 工作流 | 换脸算法服务 |

---

## 2. 功能需求

### 2.1 用户认证模块

#### 2.1.1 用户注册
- **功能描述**：新用户通过用户名、邮箱、密码完成注册
- **业务规则**：
  - 用户名长度限制：3-20个字符，支持中英文、数字、下划线
  - 邮箱格式必须合法
  - 密码长度：6-20个字符，需包含字母和数字
  - 邮箱和用户名不可重复

#### 2.1.2 用户登录
- **功能描述**：用户通过邮箱/用户名和密码登录系统
- **业务规则**：
  - 支持邮箱或用户名登录
  - 密码错误超过3次，账号锁定5分钟

#### 2.1.3 用户退出
- **功能描述**：用户退出当前登录状态，清除本地缓存

### 2.2 换脸功能模块

#### 2.2.1 图片上传
- **功能描述**：用户上传两张图片（源图片和目标图片）
- **业务规则**：
  - 支持 JPG、PNG 格式
  - 单张图片大小不超过 10MB
  - 图片必须包含清晰人脸

#### 2.2.2 换脸处理
- **功能描述**：调用 Coze 工作流完成换脸操作
- **业务规则**：
  - 自动检测图片中的人脸
  - 支持单人脸交换
  - 返回换脸后的图片

#### 2.2.3 结果展示与保存
- **功能描述**：展示换脸结果，支持保存到相册

### 2.3 换脸历史模块

#### 2.3.1 历史记录列表
- **功能描述**：查看用户的换脸历史记录
- **业务规则**：
  - 按时间倒序排列
  - 显示缩略图、创建时间、状态

#### 2.3.2 历史记录详情
- **功能描述**：查看单条换脸记录的详细信息
- **业务规则**：
  - 展示源图片、目标图片、结果图片
  - 显示处理时间、状态

#### 2.3.3 删除历史记录
- **功能描述**：支持删除单条或多条历史记录

### 2.4 个人中心模块

#### 2.4.1 用户信息展示
- **功能描述**：展示用户基本信息（头像、用户名、邮箱）

#### 2.4.2 修改密码
- **功能描述**：用户可修改登录密码

#### 2.4.3 用户统计
- **功能描述**：展示用户换脸次数统计

---

## 3. 非功能需求

### 3.1 性能需求
- 换脸处理响应时间：平均 ≤ 30 秒
- 页面加载时间：≤ 2 秒
- 支持并发用户数：≥ 1000

### 3.2 安全性需求
- 用户密码加密存储（使用 bcrypt）
- API 接口需进行身份认证（JWT Token）
- 图片传输使用 HTTPS
- 防止 SQL 注入攻击

### 3.3 兼容性需求
- 支持微信小程序基础库版本：≥ 2.24.0
- 支持 iOS、Android 双平台

---

## 4. 接口设计

### 4.1 用户认证接口

#### 4.1.1 用户注册
- **URL**：`POST /api/auth/register/`
- **请求参数**：
| 字段名 | 类型 | 必填 | 说明 |
| :--- | :--- | :--- | :--- |
| username | string | 是 | 用户名（3-20字符） |
| email | string | 是 | 邮箱地址 |
| password | string | 是 | 密码（6-20字符） |

- **成功响应**：
```json
{
    "code": 200,
    "message": "注册成功",
    "data": {
        "user_id": 1,
        "username": "testuser",
        "email": "test@example.com"
    }
}
```

#### 4.1.2 用户登录
- **URL**：`POST /api/auth/login/`
- **请求参数**：
| 字段名 | 类型 | 必填 | 说明 |
| :--- | :--- | :--- | :--- |
| account | string | 是 | 邮箱或用户名 |
| password | string | 是 | 密码 |

- **成功响应**：
```json
{
    "code": 200,
    "message": "登录成功",
    "data": {
        "user_id": 1,
        "username": "testuser",
        "email": "test@example.com",
        "token": "JWT_TOKEN_STRING"
    }
}
```

#### 4.1.3 用户退出
- **URL**：`POST /api/auth/logout/`
- **请求头**：`Authorization: Bearer {token}`
- **成功响应**：
```json
{
    "code": 200,
    "message": "退出成功"
}
```

### 4.2 换脸功能接口

#### 4.2.1 发起换脸任务
- **URL**：`POST /api/face/swap/`
- **请求头**：`Authorization: Bearer {token}`
- **请求参数**（multipart/form-data）：
| 字段名 | 类型 | 必填 | 说明 |
| :--- | :--- | :--- | :--- |
| source_image | file | 是 | 源图片（含人脸） |
| target_image | file | 是 | 目标图片（含人脸） |

- **成功响应**：
```json
{
    "code": 200,
    "message": "任务已提交",
    "data": {
        "task_id": "uuid-string",
        "status": "processing",
        "created_at": "2024-01-01 12:00:00"
    }
}
```

#### 4.2.2 查询换脸结果
- **URL**：`GET /api/face/swap/{task_id}/`
- **请求头**：`Authorization: Bearer {token}`
- **成功响应**：
```json
{
    "code": 200,
    "message": "查询成功",
    "data": {
        "task_id": "uuid-string",
        "status": "completed",
        "source_image_url": "https://example.com/source.jpg",
        "target_image_url": "https://example.com/target.jpg",
        "result_image_url": "https://example.com/result.jpg",
        "created_at": "2024-01-01 12:00:00",
        "completed_at": "2024-01-01 12:00:30"
    }
}
```

### 4.3 换脸历史接口

#### 4.3.1 获取历史列表
- **URL**：`GET /api/face/history/`
- **请求头**：`Authorization: Bearer {token}`
- **请求参数**：
| 字段名 | 类型 | 必填 | 说明 |
| :--- | :--- | :--- | :--- |
| page | int | 否 | 页码，默认1 |
| page_size | int | 否 | 每页数量，默认10 |

- **成功响应**：
```json
{
    "code": 200,
    "message": "查询成功",
    "data": {
        "count": 100,
        "page": 1,
        "page_size": 10,
        "results": [
            {
                "task_id": "uuid-string",
                "status": "completed",
                "source_image_thumb": "https://example.com/source_thumb.jpg",
                "target_image_thumb": "https://example.com/target_thumb.jpg",
                "result_image_thumb": "https://example.com/result_thumb.jpg",
                "created_at": "2024-01-01 12:00:00"
            }
        ]
    }
}
```

#### 4.3.2 删除历史记录
- **URL**：`DELETE /api/face/history/{task_id}/`
- **请求头**：`Authorization: Bearer {token}`
- **成功响应**：
```json
{
    "code": 200,
    "message": "删除成功"
}
```

### 4.4 个人中心接口

#### 4.4.1 获取用户信息
- **URL**：`GET /api/user/profile/`
- **请求头**：`Authorization: Bearer {token}`
- **成功响应**：
```json
{
    "code": 200,
    "message": "查询成功",
    "data": {
        "user_id": 1,
        "username": "testuser",
        "email": "test@example.com",
        "avatar": "https://example.com/avatar.jpg",
        "swap_count": 10,
        "created_at": "2024-01-01 10:00:00"
    }
}
```

#### 4.4.2 修改密码
- **URL**：`POST /api/user/change-password/`
- **请求头**：`Authorization: Bearer {token}`
- **请求参数**：
| 字段名 | 类型 | 必填 | 说明 |
| :--- | :--- | :--- | :--- |
| old_password | string | 是 | 旧密码 |
| new_password | string | 是 | 新密码（6-20字符） |

- **成功响应**：
```json
{
    "code": 200,
    "message": "密码修改成功"
}
```

---

## 5. 数据库设计

### 5.1 用户表（users）

| 字段名 | 类型 | 约束 | 说明 |
| :--- | :--- | :--- | :--- |
| id | int | PRIMARY KEY, AUTO_INCREMENT | 用户ID |
| username | varchar(50) | NOT NULL, UNIQUE | 用户名 |
| email | varchar(100) | NOT NULL, UNIQUE | 邮箱 |
| password | varchar(255) | NOT NULL | 加密后的密码 |
| avatar | varchar(255) | NULL | 头像URL |
| swap_count | int | DEFAULT 0 | 换脸次数 |
| is_active | tinyint | DEFAULT 1 | 是否活跃 |
| locked_until | datetime | NULL | 锁定时间 |
| failed_attempts | int | DEFAULT 0 | 失败尝试次数 |
| created_at | datetime | NOT NULL, DEFAULT CURRENT_TIMESTAMP | 创建时间 |
| updated_at | datetime | NOT NULL, DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP | 更新时间 |

### 5.2 换脸任务表（face_swap_tasks）

| 字段名 | 类型 | 约束 | 说明 |
| :--- | :--- | :--- | :--- |
| id | varchar(36) | PRIMARY KEY | 任务UUID |
| user_id | int | FOREIGN KEY → users(id) | 用户ID |
| source_image_url | varchar(500) | NOT NULL | 源图片URL |
| target_image_url | varchar(500) | NOT NULL | 目标图片URL |
| result_image_url | varchar(500) | NULL | 结果图片URL |
| source_image_thumb | varchar(500) | NULL | 源图片缩略图 |
| target_image_thumb | varchar(500) | NULL | 目标图片缩略图 |
| result_image_thumb | varchar(500) | NULL | 结果图片缩略图 |
| status | varchar(20) | NOT NULL, DEFAULT 'pending' | 状态：pending/processing/completed/failed |
| error_message | text | NULL | 错误信息 |
| created_at | datetime | NOT NULL, DEFAULT CURRENT_TIMESTAMP | 创建时间 |
| completed_at | datetime | NULL | 完成时间 |

---

## 6. Coze 工作流对接设计

### 6.1 对接方式
- 通过 HTTP 请求调用 Coze 换脸工作流 API
- 使用异步任务队列（如 Celery）处理换脸任务

### 6.2 数据流转
1. 用户上传图片 → 后端保存到存储服务（如阿里云 OSS）
2. 后端调用 Coze API，传入图片 URL
3. Coze 返回处理结果图片 URL
4. 后端更新任务状态并保存结果

### 6.3 错误处理
- 调用失败时记录错误信息，重试机制（最多3次）
- 任务超时处理（超过5分钟标记为失败）

---

## 7. 小程序页面结构

| 页面路径 | 页面名称 | 功能描述 |
| :--- | :--- | :--- |
| /pages/index/index | 首页 | 换脸功能入口 |
| /pages/auth/login | 登录页 | 用户登录 |
| /pages/auth/register | 注册页 | 用户注册 |
| /pages/face/swap | 换脸页 | 图片上传与换脸 |
| /pages/face/result | 结果页 | 换脸结果展示 |
| /pages/history/index | 历史页 | 换脸历史列表 |
| /pages/history/detail | 历史详情页 | 单条记录详情 |
| /pages/profile/index | 个人中心 | 用户信息与设置 |

---

## 8. 安全考虑

1. **数据加密**：用户密码使用 bcrypt 加密存储
2. **Token 认证**：使用 JWT Token 进行接口认证
3. **权限校验**：每个接口验证用户身份和权限
4. **图片安全**：对上传图片进行病毒扫描和格式校验
5. **防止暴力破解**：登录失败次数限制和账号锁定机制
6. **数据备份**：定期备份数据库和图片文件

---

## 9. 附录

### 9.1 状态码说明

| 状态码 | 说明 |
| :--- | :--- |
| 200 | 成功 |
| 400 | 请求参数错误 |
| 401 | 未授权（Token无效或过期） |
| 403 | 禁止访问 |
| 404 | 资源不存在 |
| 500 | 服务器内部错误 |

### 9.2 任务状态说明

| 状态值 | 说明 |
| :--- | :--- |
| pending | 等待处理 |
| processing | 处理中 |
| completed | 已完成 |
| failed | 失败 |