# 全栈学习 **Repository Path**: ffflying/full-stack ## Basic Information - **Project Name**: 全栈学习 - **Description**: vue、flask - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-01-02 - **Last Updated**: 2025-08-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README 初始目录：-.venv -Lib -Script -static -template -app.py 创建目录：-readme Git—Hbuilder： https://blog.csdn.net/weixin_46017976/article/details/115467134 https://www.cnblogs.com/anayigeren/p/10177027.html https://zhuanlan.zhihu.com/p/342034456 项目初始化 # 1、创建配置文件config.py，并在app中绑定加载以实现对配置的统一管理 # 2、创建扩展文件extension文件以实现对插件的统一管理：在extension中统一进行配置后，在app入口中引入配置好的变量 # 3、创建数据库（在MySQL中建一个空的库） # 4、创建数据模型并根据模型生成数据库表（根据模型定义通过flask命令生成数据库表） 数据模型类似于Java中的pojo，方便orm框架识别数据库。 进行数据迁移： # 初始化数据库及迁移环境 flask db init #这一命令会创建一个名为 migrations 的文件夹，用于存放迁移脚本和配置文件。 #生成迁移脚本文件，记录模型类的变更。 flask db migrate #Flask-Migrate 会对比当前模型和数据库结构，生成一个新的迁移脚本（例如 versions/123456_create_users_table.py），其中包含创建 User 表的 SQL 语句。 #根据迁移文件生成数据表，执行迁移，将变更应用到数据库,在数据库中创建表。 flask db upgrade #生成初始化数据 flask admin init #回滚到上一个版本 flask db downgrade # 当修改模型后可以通过update进行更新 flask db upgrade Flask-Migrate：适合需要管理数据库变更历史、团队协作或生产环境部署的场景。 或者使用create_all也行，db.create_all() 会扫描所有继承自 db.Model 的类（即数据模型），并根据这些模型的定义生成对应的数据库表。 db.create_all()：适合快速创建数据库表，适用于开发初期或简单应用。 # 5、创建路由blueprint文件夹以及路由文件blueprint及路由文件并在app中引入 # 6、 http://localhost:5173/#/pages/testpage/testpage # bug ## 1、 房間页面 ifelse的历史记录结构 ## 2、 pay 有几个用户显示几个用户 只能填写自己的分数框 预提交状态不能禁用全部按钮 只能禁用部分按钮 方便用户修改 默认为0 赢家默认20 只能一个赢家 其他玩家更新后能看到变化 提交————等待其他玩家提交提示————————当前已存在赢家————————盈亏守恒——————检测到变化重新提交 红绿框选区分颜色需要维护一个全局的payround数据 不然没办法同步 用户加入完要添加到全局的状态列表中 正结算的时候 用户加入 日志 规范数据： useinfo、members{id：{...}}-》历史记录怎么做—》roundpay 后端通常使用下划线命名（如 room_id），但前端更习惯驼峰命名（如 roomId）。 userstore修正 ## 3、后门调试、记事本文本框邮件发送 WebSocket 是长连接：一旦建立，会保持到主动断开或网络异常，无需在子页面重新创建。 房间绑定已完成：room.vue 中已通过 join_room 将连接绑定到房间，roundpay.vue 复用连接后，自动处于同一房间分组，可直接接收该房间的广播。 资源优化：重复创建连接会导致服务器维护多个无效连接，增加开销；复用连接可减少网络请求和服务器压力。 room.vue 负责 “建立连接并加入房间”，roundpay.vue 负责 “拿过这个连接用，并加自己的监听事件” 无 query 参数场景 优点：连接逻辑更简单，无需提前准备参数（适合参数动态生成的场景）。适合 “先连接，后验证” 的流程（例如连接后再让用户选择房间）。 缺点：连接建立后需要额外发送 init_room 等事件传递参数（多一次通信）。后端无法在连接阶段拦截非法用户（比如未登录用户也能建立连接，浪费资源）。 适合场景： 连接后需要动态选择房间 / 身份，或参数需要在连接后才能确定（例如用户先进入首页，再点击进入具体房间）。 带 query 参数场景 优点： 减少通信次数：连接时直接传递 room_id、user_id，后端可立即完成房间绑定（如 join_room），无需后续事件。 早期拦截非法连接：后端可在 connect 事件中验证参数（如用户是否有权限进入该房间），直接拒绝无效连接，节省服务器资源。 状态更清晰：连接与业务参数（房间、用户）绑定更紧密，避免 “连接已建立但未绑定房间” 的中间状态。 缺点： 需要提前准备好参数（如 room_id 必须在连接前确定）。 适合场景： 连接目标明确（如从房间页面进入，room_id 已知），且需要严格验证用户权限的场景（例如只有房间成员才能建立连接）。 Store 变成 "实时数据中心"：相当于在组件和 Socket 之间增加了一个缓存层 组件变成 "纯消费者"：只读取数据，不直接处理事件 事件流变成单向：Socket → Store → 组件 的清晰数据流 这样改造后，你的房间成员列表将自动在所有组件间保持同步，且完全无需担心事件管理问题！ 一、分数输入框（score-input）的禁用逻辑 禁用条件：player.userId !== currentUserId || isSubmitting 当当前玩家不是自己（player.userId !== currentUserId）时，输入框禁用，且显示灰色样式（disabled-input类）。 当处于提交中状态（isSubmitting为true）时，无论是否是自己，输入框均禁用。 核心逻辑：只有当前登录用户能编辑自己的分数，且提交过程中不允许修改。 二、赢家开关（winner-switch）的禁用逻辑 禁用条件：isSubmitting 开关仅在提交过程中（isSubmitting为true）禁用，其他时候： 自己的开关始终可操作； 他人的开关仅在对方已被标记为赢家时才显示（但不可操作，因userId不匹配）。 核心逻辑：提交过程中锁定所有开关状态，防止数据冲突。 三、底部按钮的禁用逻辑 取消按钮（secondary） 禁用条件：isSubmitting 提交过程中不允许取消，防止操作冲突。 确认按钮（primary） 禁用条件：isSubmitting || !allScoresFilled || !hasWinner 提交中（isSubmitting）禁用； 未填写所有分数（!allScoresFilled）禁用； 未选择赢家（!hasWinner）禁用。 核心逻辑：确保提交时数据完整（所有分数已填、至少有一个赢家），且同一时间只能提交一次。 四、其他隐含禁用逻辑 非当前用户的赢家开关默认不显示（通过v-if="player.userId === currentUserId || player.isWinner"控制），间接实现禁用； 输入框聚焦时清空默认值、失焦时恢复默认值的逻辑（@focus/@blur），仅对当前用户生效，不影响他人。 目前进度： #1、赢家使能后在其他页面进行展示 #2、统一提交控制 bug ：赢家不加20了 直接给个提醒算了 轻提示：温馨提示：赢家底分为20。 焦点处理 处理顺序： 1、实缴和聚焦 2、getdate去电 3、分数双向绑定 轮次之间的区别 让后端统一控制