程序猿老爸带娃编程的小小课堂——九九乘法表的编程实现【导航台账】老蒋的技术博客全系列文章汇总持续更新【Python带娃编程系列实践】第0周九九乘法表——女儿的第一次“循环认知”专栏名称Python带娃编程系列实践专栏作者制造数据与AI践行者老蒋javy21作者CSDN制造数据与AI践行者老蒋-CSDN博客本文源码归属虚拟工厂“智联工坊” - 教学实践案例库 引言这是专栏的第0篇——严格来说它是我和女儿在编程路上迈出的第一步。那天她刚学完 Python 的for循环眼睛盯着课本上的例题问我“爸循环除了数数还能干啥”我想了想打开电脑敲了几行代码然后问她“你看过九九乘法表吧”她点点头。“那如果我告诉你用 5 行代码就能把整张表打印出来你信吗”她不信。于是我们开始了第一次真正意义上的“编程实践”。没有图形界面没有网页没有动画——只有几行代码一个黑乎乎的终端和女儿逐渐睁大的眼睛。当她看到屏幕上齐刷刷地打出整张乘法表时她说了一句话让我特别欣慰“原来循环真的可以把重复的事情变得这么简单。”这就是我写这个专栏的初心。不是为了教孩子写代码而是让她感受到编程的思维方式——把重复的事情交给机器把创造力留给自己。 为什么要从“九九乘法表”开始很多家长问我“为什么不直接从游戏开始孩子对游戏更感兴趣。”我的回答是让孩子先理解“编程为什么能解决问题”比“编程能做出多酷的东西”更重要。九九乘法表这个案例有三个不可替代的价值价值说明概念纯粹只涉及循环嵌套和字符串拼接不掺杂复杂概念结果可预期孩子知道“正确结果长什么样”能立刻判断程序是否跑对了可玩性强虽然简单但加上 Server-Sent Events 实时输出后能看到“每一步是怎么生成的”而这篇文章最终的成果——一个带实时输出演示的网页版九九乘法表生成器——让女儿第一次感受到了“后端算东西前端显示东西”的完整流程。这也是后续所有 Web 案例的种子。️ 核心原理大白话版这部分是给孩子看的家长可以念给娃听。问九九乘法表有什么规律答第一行有 1 个式子1×11第二行有 2 个式子1×22, 2×24第三行有 3 个式子……第几行就有几个式子。问这个规律怎么用代码表达答用两层循环——外层循环控制“第几行”从 1 到 9内层循环控制“这一行有几个式子”从 1 到当前行号问什么叫“嵌套”答就像日历——年份里包含月份月份里包含天数。外层循环每走一步内层循环就要从头到尾跑一遍。 技术实现1. 核心算法纯 Python5 行搞定for i in range(1, 10): # 外层第1行到第9行 for j in range(1, i 1): # 内层第1列到第i列 print(f{j}×{i}{i*j}, end\t) print() # 换行关键理解range(1, 10)是 1 到 9不包含 10end\t让每个式子用制表符隔开对齐更美观内层循环的终点是i 1因为第 i 行正好有 i 个式子2. 可视化增强Flask SSE为了让女儿看到每一步的生成过程我们引入了 Server-Sent EventsSSE技术让后端逐行向前端推送数据而不是一次性全部返回。效果点击“执行”按钮后终端里一列一列地出现乘法公式像有人在逐行书写一样。 项目结构javy21_99table/ ├── app.py # Flask 主入口 ├── requirements.txt # 依赖Flask ├── templates/ │ └── index.html # 单页应用含所有样式和脚本 └── static/ # 本次未使用预留 关键代码解读文件头规范符合 V1.2 标准#!/usr/bin/env python3 # -*- coding: utf-8 -*- # 制造数据与AI践行者老蒋 | CSDN: https://blog.csdn.net/javy21 # 文件名: app.py # 专栏归属: Python带娃编程系列实践 # # 核心问题: 如何用循环嵌套生成九九乘法表并实时展示生成过程 # # 解决方案推演 (Why this way?): # 1. 方案选择: 采用 Flask SSE 而非纯终端输出 # 目的是让女儿看到“逐行生成”的动态过程理解循环的执行顺序。 # 2. 关键设计: 使用生成器 (yield) 配合 SSE 协议 # 既保持了后端的简洁性又实现了前端实时更新。 # 3. 边界思考: 对 command 参数做白名单校验仅允许 multiplication/clear # 防止任意命令注入。 # # 案例溯源: “智联工坊”虚拟工厂 - 教学实践案例库 # 适用周次: 第0周启蒙篇 核心函数注释含设计推演def generate_multiplication_table() - list[str]: 功能描述生成标准格式的九九乘法表每行作为一个字符串元素。 设计思路与推演过程 1. 外层循环 i 从 1 到 9代表乘法表的行号被乘数。 2. 内层循环 j 从 1 到 i代表每行的列号乘数 第 i 行恰好有 i 个式子符合数学规律。 3. 使用 f-string 格式化字符串并追加制表符 \t 确保各列对齐便于终端或前端展示。 4. 每行结束后调用 strip() 去除末尾多余空白。 业务场景溯源 来自“智联工坊”虚拟工厂教学案例库 将循环嵌套概念具象化为可直观观察的数学表格。 Returns: list[str]: 每行一个字符串元素共9行。 示例: [1×11, 1×22 2×24, ...] lines: list[str] [] for i in range(1, 10): line_parts: list[str] [] for j in range(1, i 1): line_parts.append(f{j}×{i}{i*j}) lines.append(\t.join(line_parts)) return linesSSE 流式推送带异常处理app.route(/api/execute, methods[GET]) def execute_command() - Response: 功能描述SSE 接口逐行推送九九乘法表的生成过程。 设计思路与推演过程 1. 使用 Server-Sent Events (SSE) 协议实现流式输出 让前端逐行接收数据模拟“逐行书写”的效果。 2. 通过 time.sleep(0.3) 控制输出节奏 让女儿有足够时间观察每一行的生成。 3. 结构化消息格式: {type: output|clear|complete, content: str} 便于前端统一处理。 业务场景溯源 来自“智联工坊”商用智能交互屏项目中的实时数据推送模式 简化后用于教学场景。 Args: command (str): URL 参数支持 multiplication 或 clear Returns: Response: text/event-stream 格式的流式响应 command: str request.args.get(command, ) # 白名单校验防止命令注入 if command not in [multiplication, clear]: def error_gen(): yield format_sse({type: error, content: 无效指令请使用 multiplication 或 clear}) yield format_sse({type: complete}) return Response(error_gen(), mimetypetext/event-stream) def generate() - Generator[str, None, None]: 生成器逐步生产 SSE 数据块 try: if command multiplication: yield format_sse({type: output, content: 开始生成九九乘法表...}) time.sleep(0.5) lines generate_multiplication_table() for idx, line in enumerate(lines, 1): yield format_sse({type: output, content: f 第{idx}行: {line}}) time.sleep(0.3) yield format_sse({type: output, content: ✅ 九九乘法表生成完成}) yield format_sse({type: complete}) elif command clear: yield format_sse({type: clear}) yield format_sse({type: complete}) except Exception as e: # 异常捕获并返回友好错误信息符合 V1.2 Agent 规范 logger.error(fSSE 生成失败: {str(e)}, exc_infoTrue) yield format_sse({type: error, content: f生成失败: {str(e)}}) yield format_sse({type: complete}) return Response(generate(), mimetypetext/event-stream) def format_sse(data: dict) - str: 格式化 SSE 消息符合 text/event-stream 协议规范 return fdata: {json.dumps(data, ensure_asciiFalse)}\n\n 调试纪实给博客读者的真实记录问题1终端输出时每行开头有制表符错位现象\t在某些浏览器中显示宽度不固定导致对齐混乱。解决将\t改为nbsp;nbsp;nbsp;nbsp;HTML 空格确保等宽字体下对齐。问题2SSE 连接在 Chrome 中频繁自动断开现象执行过程中断前端捕获到onerror事件。原因nginx 默认 proxy 超时设置过短60s而我们的生成过程不超过 10s实际是浏览器对 SSE 的空闲超时处理。解决在前端EventSource的onerror中自动重连并添加心跳保活机制。问题3女儿说“为什么第一行只有一个式子”对嵌套逻辑的困惑这是个认知问题不是技术问题。解决用“爬楼梯”打比方——第1层只有1级台阶第2层有2级台阶第9层有9级台阶。外层循环决定“你在第几层”内层循环决定“你走几级台阶”。 女儿参与了什么她不是旁观者环节她的参与她的收获算法理解在白板上手写九九乘法表标注行列规律理解“第 i 行有 i 个式子”代码调试修改range(1, 10)为range(1, 5)观察“变成4行”理解循环边界的影响节奏控制调整time.sleep(0.3)为0.1或1.0观察输出速度变化理解“控制流”前端验收测试“清空屏幕”功能是否重置滚动条体验“用户测试”的角色 本篇知识点速览知识点通俗解释应用场景for循环重复做某件事指定次数遍历列表、批量处理数据循环嵌套循环里面再套一个循环处理二维结构表格、矩阵range()生成一个数字序列控制循环次数f-string在字符串中嵌入变量值格式化输出信息SSE (Server-Sent Events)后端向前端逐条推送消息实时日志、进度条、流式输出生成器 (yield)按需生成数据不一次性占用内存流式处理大数据 下期预告本文是专栏的第0篇启蒙篇接下来我们将进入正式的周更节奏第1周已发布明星呼吸灯墙——让静态图片“活”过来第2周即将发布双色球模拟器——用10万次模拟告诉你“中奖概率有多低”从“终端输出”到“网页交互”再到“数据可视化”我们一步一步来。 读者互动您是从哪一步开始带孩子接触编程的欢迎在评论区分享你的故事。如果你带孩子跟着做了这个案例遇到了什么问题或者孩子有什么“意外收获”也欢迎告诉我——你的反馈会直接影响后续文章的优化方向。系列专栏【Python带娃编程系列实践】——每周一篇从零到一。关联推荐本文的 SSE 流式输出技术将会在《老攻城狮的AI编程实践之路》专栏的《AI Agent 实时对话流式输出》一文中有更深入的工程化讲解。关于作者制造数据与AI践行者老蒋javy2120多年软件行业老兵CSDN博客专家。用代码陪伴女儿成长。下一站双色球模拟器。我们来了由于篇幅限制需要完整app.py和templates/index.html的规范版代码的请关注并收藏可通过评论留言获取核心改动已在本文中完整呈现。本文首发于 CSDN《Python带娃编程系列实践》专栏欢迎关注持续更新关注收藏可提供免费合集资料优先分享、源代码获取、问题1v1交流的机会。
