1. 从「打印一页口算题」这件小事说起小学数学口算题生成系统说白了就是让家长不用再手写或到处找题点几下就能生成一页带答案的口算练习还能直接导出 Word 打印出来。它适合谁适合零基础、没写过几行代码、但想给孩子每天出一页口算题的家长也适合想练手 AI 编程的初学者。核心检索词就三个AI编程、Word导出、口算题生成系统。我身边不少朋友的做法是打开搜索引擎找现成的口算题图片截图、拼版、打印题目重复率高难度也没法调。中午休息那点时间与其翻十几页网页不如让 AI 直接给你写一个能跑的小系统。整个过程不需要你懂前端框架也不需要你配数据库一个 HTML 页面加一个 Python 小服务就能把「选数量 → 选类型 → 生成题目 → 导出 Word」这条链路走通。这篇就按可跟做的顺序来先讲清楚要做什么再把 TaoToken 的接入准备好然后给出能直接复制的项目骨架和前端页面配置接着验证一次真实请求、确认 Word 能下载最后把新手最容易踩的坑列出来。全程围绕一个目标——10 分钟内跑通闭环。2. 前置准备用 TaoToken 给 AI 编程工具接上模型能力AI 编程工具本身只是壳真正帮你写代码的是背后的大模型。你要做的是把模型的调用地址和密钥配好让工具能稳定地生成和补全代码。这里用 TaoToken 来做接入它的 API 地址是 https://taotoken.net/api 控制台和密钥管理都在官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 上。操作顺序很简单先进控制台创建一个 API Key然后把这把 Key 填到你用的 AI 编程工具里。如果你用的是支持自定义模型地址的编辑器或插件把请求地址指向 TaoToken 的 API 即可。密钥不要写死在代码里放到环境变量里更稳妥。注意API Key 相当于你的账户凭证不要提交到公开仓库也不要截图发到群里。泄露了就去控制台删掉重建一把。配好之后你可以先用模型对话页面做一次最小验证确认模型能正常回话再去写项目代码。模型对话入口在这里https://taotoken.net/api?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentmodel-chat 。如果你打算长期用 AI 写代码、跑 Agent 类任务可以看看 Coding Planhttps://taotoken.net/api?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentcoding-plan 。密钥管理页在 https://taotoken.net/api?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentapi-keys 接入文档在 https://taotoken.net/api?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentdoc 。这一步不用花太久重点是拿到 Key、确认模型能通。通了之后再让 AI 生成项目代码成功率会高很多因为工具在补全和纠错时依赖的就是这条模型链路。3. 可复制配置项目骨架与前端页面3.1 目录结构在本地新建一个文件夹比如math-calculation里面放两个文件就够了math-calculation/ ├── index.html # 前端页面选择数量、类型生成题目导出 Word └── server.py # 本地服务提供静态页面 生成题目接口3.2 前端页面配置index.html负责交互。题目数量和类型用单选按钮radio生成后把题目渲染到页面上再提供一个「导出 Word」按钮。下面这份是可直接用的骨架!DOCTYPE html html langzh-CN head meta charsetUTF-8 / title小学数学口算题生成系统/title style body { font-family: Microsoft YaHei, sans-serif; max-width: 720px; margin: 40px auto; } .row { margin: 12px 0; } .questions { margin-top: 20px; line-height: 2; font-size: 18px; } .questions span { display: inline-block; width: 180px; } button { padding: 8px 18px; margin-right: 10px; cursor: pointer; } /style /head body h2小学数学口算题生成系统/h2 div classrow strong题目数量/strong labelinput typeradio namecount value30 checked / 30道/label labelinput typeradio namecount value50 / 50道/label labelinput typeradio namecount value80 / 80道/label labelinput typeradio namecount value100 / 100道/label /div div classrow strong题目类型/strong labelinput typeradio nametype valueadd20 checked / 20以内加减法/label labelinput typeradio nametype valuemix100 / 100以内混合加减法/label labelinput typeradio nametype valuemul9 / 九九乘法表/label labelinput typeradio nametype valuemix4 / 四则混合运算/label /div div classrow button onclickgenerate()生成题目/button button onclickexportWord()导出 Word/button /div div classquestions idquestions/div script let currentQuestions []; function getSelected(name) { return document.querySelector(input[name${name}]:checked).value; } async function generate() { const count getSelected(count); const type getSelected(type); const res await fetch(/api/generate?count${count}type${type}); const data await res.json(); currentQuestions data.questions; document.getElementById(questions).innerHTML currentQuestions.map(q span${q}/span).join(); } function exportWord() { if (currentQuestions.length 0) { alert(请先生成题目); return; } const html html xmlns:ourn:schemas-microsoft-com:office:office xmlns:wurn:schemas-microsoft-com:office:word headmeta charsetutf-8/head body h2小学数学口算练习/h2 div stylefont-size:16px;line-height:2; ${currentQuestions.map(q span styledisplay:inline-block;width:180px;${q}/span).join()} /div /body/html; const blob new Blob([html], { type: application/msword }); const a document.createElement(a); a.href URL.createObjectURL(blob); a.download 口算练习.doc; a.click(); URL.revokeObjectURL(a.href); } /script /body /html这里导出 Word 用的是「HTML 伪装成 .doc」的轻量做法Word 能正常打开排版也够用不需要额外装库。对小白来说这是最省事的路径。3.3 后端生成逻辑server.py用 Python 标准库起服务不依赖第三方包避免装环境卡住import http.server import socketserver import json import random from urllib.parse import urlparse, parse_qs def gen_add20(): a, b random.randint(1, 20), random.randint(1, 20) if a b: a, b b, a op random.choice([, -]) return f{a} {op} {b} def gen_mix100(): a, b random.randint(1, 100), random.randint(1, 100) if a b: a, b b, a op random.choice([, -]) return f{a} {op} {b} def gen_mul9(): a, b random.randint(1, 9), random.randint(1, 9) return f{a} × {b} def gen_mix4(): a, b, c random.randint(1, 20), random.randint(1, 10), random.randint(1, 10) return f{a} {b} × {c} GENERATORS { add20: gen_add20, mix100: gen_mix100, mul9: gen_mul9, mix4: gen_mix4, } class Handler(http.server.SimpleHTTPRequestHandler): def do_GET(self): parsed urlparse(self.path) if parsed.path /api/generate: params parse_qs(parsed.query) count int(params.get(count, [30])[0]) qtype params.get(type, [add20])[0] gen GENERATORS.get(qtype, gen_add20) questions [gen() for _ in range(count)] body json.dumps({questions: questions}, ensure_asciiFalse).encode(utf-8) self.send_response(200) self.send_header(Content-Type, application/json; charsetutf-8) self.send_header(Content-Length, str(len(body))) self.end_headers() self.wfile.write(body) else: super().do_GET() if __name__ __main__: with socketserver.TCPServer((, 8000), Handler) as httpd: print(服务已启动http://localhost:8000) httpd.serve_forever()把这两个文件放进同一个文件夹后端负责按类型和数量出题前端负责展示和导出职责清晰改起来也方便。4. 验证请求与成功结果4.1 启动服务打开终端进入项目目录执行python server.py看到服务已启动http://localhost:8000就说明起来了。浏览器访问http://localhost:8000页面会显示数量单选、类型单选和两个按钮。4.2 验证接口先单独验证生成接口是否正常浏览器直接访问http://localhost:8000/api/generate?count5typemul9正常返回类似{questions: [3 × 7 , 8 × 2 , 6 × 9 , 4 × 4 , 9 × 5 ]}返回的是 JSON、题目数量和类型都对说明后端没问题。4.3 验证 Word 导出回到页面选「50道」「100以内混合加减法」点「生成题目」页面上会出现 50 道题。再点「导出 Word」浏览器会下载一个口算练习.doc。用 Word 或 WPS 打开能看到标题和整齐排列的题目直接打印即可。到这一步从生成题目到下载文档的闭环就跑通了。整个过程不需要数据库也不需要前端构建工具两个文件搞定。5. 本篇常见错排查5.1 页面打开是空白或 404多半是没在项目目录里启动服务。server.py用的是当前目录作为静态根目录如果你在别的路径执行python server.pyindex.html就找不到。解决方法是先cd到math-calculation再启动。5.2 点生成没反应控制台报 fetch 失败检查服务是否还在运行终端有没有报错。另外确认访问的是http://localhost:8000而不是直接双击打开index.html。直接打开本地文件时/api/generate这个相对路径没有服务承载请求必然失败。5.3 导出的 Word 打开是乱码通常是编码问题。确认index.html里meta charsetutf-8存在且 Blob 的内容是 UTF-8 字符串。如果还是乱码把导出内容里的中文标题换成英文先测一次能定位是不是编码环节的问题。5.4 端口 8000 被占用报Address already in use时换个端口把server.py里的8000改成8001同时访问地址也跟着改。或者关掉占用 8000 的进程再启动。5.5 题目类型选四则混合运算结果不对四则混合运算涉及运算优先级当前生成器只是拼出表达式没有算答案。如果你需要带答案的版本可以在生成器里补一个求值逻辑或者让 AI 帮你把gen_mix4改成先算结果再输出。这类小改动直接丢给模型对话就能拿到代码https://taotoken.net/api?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentmodel-chat 。5.6 想加「答案页」但不知道从哪下手思路是生成题目时同时算出答案导出时把答案单独放一页。改动集中在server.py的生成函数和index.html的导出逻辑属于增量修改不用重构。长期做这类小工具的话用 Coding Plan 会更顺手https://taotoken.net/api?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentcoding-plan 。6. 把这条链路用起来跑通之后你会发现真正花时间的不是写代码而是想清楚需求要几种题型、每页多少道、要不要答案页、排版留多大间距。这些想明白了剩下的交给 AI 生成和微调就行。给你一个实用建议先把gen_add20和gen_mul9这两个最简单的生成器改到满意确认导出 Word 的排版符合打印习惯再去加复杂题型。每次只改一个点改完立刻刷新页面验证比一次性大改再排查要快得多。密钥和接入相关的操作都在控制台完成https://taotoken.net/api?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentconsole 接入细节看文档https://taotoken.net/api?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentdoc 。把这两个文件留着以后想加英语单词听写、拼音练习都是同一套骨架换个生成逻辑的事。
