全场景教育 AI 助手诞生，Web + 小程序 + 实时同步，随时随地想用就用

⭐️个人主页：秋邱-ZEEKLOG博客

📚所属栏目：python

序章：一场 “多端协同” 的探险之旅

经过前 7 期迭代，成绩预测平台已进化为 “智能教学助手”，但新的 “场景壁垒” 出现了：

• 教师在办公室需要 Web 端批量处理数据，却只能用电脑；
• 家长接送孩子时想查看成绩，打开电脑太麻烦；
• 学生在家用平板学习，却同步不了学校的预测记录。

这一期，我们开启 “多端协同探险”，目标是打破设备边界 —— 打造 “Web 端管理后台 + 微信小程序 + 数据实时同步” 的全场景体系，让教师、家长、学生随时随地能用，实现 “一处操作，多端同步” 的终极体验！

探险地图：三大关卡 + 通关目标

第一关：Web 端管理后台搭建（教师专属 “作战指挥室”）

🗺️ 痛点地图

教师需要批量导入数据、导出分析报告、管理学生信息，但之前的 GUI 仅支持单机使用，无网络同步和批量操作功能 —— 效率低下，无法满足班级管理需求。

🛠️ 闯关工具

• 前端：Vue3 + Element Plus（快速搭建专业管理界面）
• 后端：FastAPI（提供 RESTful API，对接原有 Python 业务逻辑）
• 数据库：MySQL（复用已有数据库，新增多端同步表）

🚀 实战攻略（分步骤通关）

1. 搭建后端 API 服务（衔接原有业务）

# main.py（FastAPI后端） from fastapi import FastAPI, UploadFile, File from fastapi.middleware.cors import CORSMiddleware import pandas as pd from core.model_handler import model_handler from core.db_utils import save_batch_data, query_class_data app = FastAPI(title="成绩预测平台Web API") # 允许跨域（适配前端和小程序） app.add_middleware( CORSMiddleware, allow_origins=["*"], allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) # 批量导入+预测API @app.post("/api/batch/predict") async def batch_predict(file: UploadFile = File(...), class_name: str = None): # 读取Excel文件 df = pd.read_excel(await file.read()) # 数据预处理+预测（复用原有模型逻辑） features = df[model_handler.feature_cols].values predictions = model_handler.predict_batch(features) df["预测期末成绩"] = predictions # 批量保存到数据库（支持多端查询） save_batch_data(df, class_name) # 返回预测结果 return {"code": 200, "data": df.to_dict(orient="records"), "msg": "批量预测成功"} # 导出分析报告API @app.get("/api/report/export") async def export_report(class_name: str): # 生成分析报告（复用大模型生成逻辑） report = generate_teacher_report(class_name) # 生成Excel文件 df, _ = get_class_data(class_name) return StreamingResponse( io.BytesIO(df.to_excel(index=False)), media_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", headers={"Content-Disposition": f"attachment; filename={class_name}成绩报告.xlsx"} )

2. 开发 Web 端前端界面（Vue3）

组件 --> action="/api/batch/predict" :file-list="fileList" :on-success="handleSuccess" :before-upload="beforeUpload" :data="{ class_name: className }" accept=".xlsx,.xls" > <el-button type="primary">选择Excel文件> upload> -select v-model="className" placeholder="选择班级"> 一年级1班" value="一年级1班">> label="一年级2班" value="一年级2班"></el-option> </el-select> <el-button @click="exportReport">导出成绩报告</el-button> > import { ref } from 'vue'; import { ElMessage } from 'element-plus'; const fileList = ref([]); const className = ref(''); const beforeUpload = (file) => { const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel'; if (!isExcel) ElMessage.error('请上传Excel文件！'); return isExcel; }; const handleSuccess = (res) => { ElMessage.success(`批量预测成功，共处理${res.data.length}条数据`); }; const exportReport = () => { window.open(`/api/report/export?class_name=${className.value}`); }; #### 3. 通关测试 - 操作：教师上传100条学生数据Excel，选择班级后点击“预测”； - 通关勋章：3分钟内完成预测，可导出含分析报告的Excel，Web端数据实时存入数据库。 --- ## 第二关：微信小程序开发（家长/学生“口袋助手”） ### 🗺️ 痛点地图 家长需要随时查看孩子成绩、接收学习提醒，学生需要快速获取个性化建议，但之前的平台仅支持PC端——无法满足“移动场景”使用需求。 ### 🛠️ 闯关工具 - 开发工具：微信开发者工具 - 后端依赖：复用FastAPI接口（多端共用一套API） - 核心能力：微信登录、数据查询、消息推送、智能答疑 ### 🚀 实战攻略（分步骤通关） #### 1. 小程序初始化与登录对接 ```javascript // app.js（小程序全局配置） App({ onLaunch() { // 微信登录，获取用户信息 wx.login({ success: res => { // 调用后端接口获取用户身份（关联平台账号） wx.request({ url: 'http://服务器IP:8000/api/wechat/login', data: { code: res.code }, success: res => { this.globalData.userInfo = res.data.userInfo; // 存储用户信息（角色、班级） } }); } }); }, globalData: { userInfo: null } });

2. 核心页面开发（成绩查询 + 智能答疑）

<!-- 成绩查询页面 --> student-info"> <text>学生姓名：{{ studentName }} ：{{ className }} -card">>预测期末成绩 predictedScore }} Suggestion">获取个性化学习建议 </view> > app = getApp(); Page({ data: { studentName: '', className: '', predictedScore: '' }, onLoad() { // 从全局获取用户信息 const userInfo = app.globalData.userInfo; this.setData({ studentName: userInfo.studentName, className: userInfo.class_name }); // 查询成绩 this.queryScore(); }, queryScore() { wx.request({ url: 'http://服务器IP:8000/api/score/query', data: { studentName: this.data.studentName, className: this.data.className }, success: res => { this.setData({ predictedScore: res.data.score }); } }); }, getSuggestion() { wx.navigateTo({ url: '/pages/suggestion/suggestion' }); } });

3. 智能答疑与消息推送

// 智能答疑页面逻辑 getAnswer(e) { const question = e.detail.value; wx.request({ url: 'http://服务器IP:8000/api/qa/chat', data: { question: question, username: app.globalData.userInfo.username, role: app.globalData.userInfo.role }, success: res => { this.setData({ answer: res.data.response }); } }); } // 消息推送（成绩更新提醒） // 后端接口（FastAPI） @app.post("/api/wechat/push") async def push_message(student_name: str, class_name: str, score: float): # 调用微信消息推送接口 wx_push( touser=get_wechat_openid(student_name, class_name), template_id="你的消息模板ID", data={ "first": {"value": "成绩更新提醒"}, "keyword1": {"value": student_name}, "keyword2": {"value": str(score)}, "remark": {"value": "点击查看详细分析"} } ) return {"code": 200, "msg": "推送成功"}

4. 通关测试

• 操作：家长用微信登录小程序，查看孩子成绩，发送 “如何提升成绩” 提问；
• 通关勋章：10 秒内加载成绩，智能答疑秒级回复，成绩更新时收到微信消息提醒。

第三关：多端数据同步中枢（打破设备壁垒）

🗺️ 痛点地图

Web 端修改的学生信息、小程序提交的查询记录无法同步，导致 “数据孤岛”—— 教师在 Web 端更新成绩，家长在小程序看不到最新结果。

🛠️ 闯关工具

• 同步引擎：Redis 发布订阅（实时推送数据更新）
• 数据库设计：新增 “数据同步日志表”（记录多端操作）
• 核心逻辑：一端操作触发事件，多端实时接收并更新

🚀 实战攻略（分步骤通关）

1. 搭建 Redis 同步中枢

# 后端同步逻辑（FastAPI） import redis from fastapi import BackgroundTasks # 连接Redis redis_client = redis.Redis(host="localhost", port=6379, db=0) CHANNEL = "data_sync_channel" def publish_sync_event(event_type: str, data: dict): """发布同步事件（如成绩更新、用户信息修改）""" event = {"type": event_type, "data": data} redis_client.publish(CHANNEL, json.dumps(event)) # 批量预测后发布同步事件 @app.post("/api/batch/predict") async def batch_predict(background_tasks: BackgroundTasks, ...): # 原有预测逻辑... # 后台发布同步事件（不阻塞主流程） background_tasks.add_task( publish_sync_event, event_type="score_update", data={"class_name": class_name, "count": len(df)} ) return {"code": 200, "msg": "预测成功"}

2. 多端订阅同步事件

# Web端前端订阅（Vue3） import { createWebSocket } from '@/utils/websocket'; // 建立WebSocket连接，订阅Redis同步事件 const ws = createWebSocket('ws://服务器IP:8000/ws/sync'); ws.onmessage = (event) => { const data = JSON.parse(event.data); if (data.type === 'score_update') { ElMessage.info(`班级${data.data.class_name}成绩已更新，共${data.data.count}条数据`); // 刷新页面数据 fetchClassScores(); } }; // 小程序订阅（WebSocket） wx.connectSocket({ url: 'ws://服务器IP:8000/ws/sync' }); wx.onSocketMessage((res) => { const data = JSON.parse(res.data); if (data.type === 'score_update' && data.data.class_name === app.globalData.userInfo.class_name) { wx.showToast({ title: '班级成绩已更新' }); // 刷新成绩数据 that.queryScore(); } });

3. 通关测试

• 操作：教师在 Web 端批量更新 100 条成绩，家长在小程序查看；
• 通关勋章：Web 端操作完成后，小程序 1 秒内收到更新提醒，刷新后显示最新成绩，数据无延迟、无遗漏。

终极验收：多端协同场景实测

运维避坑指南（探险必备）

1. 跨域问题：小程序和 Web 端需配置 FastAPI 跨域允许，微信小程序需添加服务器域名到 “request 合法域名”；
2. 网络稳定性：WebSocket 连接异常时，添加重连机制，确保同步不中断；
3. 权限控制：小程序用户仅能查看本人 / 本班数据，通过后端接口校验角色和班级；
4. 性能优化：小程序图片懒加载、接口请求缓存，避免频繁调用导致卡顿。

本期总结

这一期，我们用 “闯关探险” 的模式，完成了 “Web 端 + 微信小程序 + 数据同步中枢” 的全场景搭建 —— 教师有了高效的 PC 端管理工具，家长和学生有了便捷的移动端口袋助手，多端数据实时互通，彻底打破了设备壁垒。

现在的平台，不仅是 “智能教学助手”，更是 “全场景教育协同平台”，真正适配了教育场景中 “随时随地使用” 的核心需求。

下期预告：我们将聚焦 “生态整合”，对接学校教务系统、电子书包等第三方平台，实现 “数据互通、功能互补”，让平台融入更大的教育生态！