主题：【从零开始打造校园教务小程序】💻

📜 声明

本文章中所有内容仅供学习交流使用，不用于其他任何目的，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！擅自使用本文讲解的技术而导致的任何意外，作者均不负责！

引言：始于一个简单的想法

期末考试结束了，校园里弥漫着轻松的氛围，但有一件事却让我倍感烦躁——登录学校的教务管理系统。作为一名学生，我需要频繁查看成绩和课表，而目前登录教务系统的两种登录方式都不尽如人意：学校官方Web端操作繁琐，某学长开发的微信小程序则充斥着广告，严重影响使用体验。

在校园墙上，我也看到了不少同学对现有教务系统小程序的吐槽：“广告太多了！”“打开就要等3秒广告，烦死了！”"能不能有个纯净版的？"这些声音坚定了我的想法：我要自己开发一个干净、安全、无广告的校园教务小程序！

需求分析：明确功能定位

当天晚上，我便开始构思开发需求。作为一个实用型小程序，核心功能必须围绕学生的日常需求展开：

• 登录页面：账号输入框、密码输入框、验证码输入框、登录按钮、记住密码复选框
• 主页页面：个人信息展示、课表查询、成绩查询、教务公告、系部动态、图书馆、地图、校友之家、科研成就、退出
• 用户页面：学校名、用户详细信息展示、关于我们、宣传大使、退出

这些功能覆盖了学生在校期间最常用的教务管理需求，简单明了，直击痛点。

技术栈评估：个人能力与AI辅助

在开始开发前，我先对自己的技术栈进行了评估：

• Python基础扎实
• 熟悉C和Java面向对象编程
• 掌握MySQL基础
• 了解网络编程和静态网页数据获取
• 简单了解HTML、CSS、JavaScript（能看懂但不会写复杂代码）
• 初步学习了数据结构

很明显，仅凭我个人的能力，要独立开发一个完整的微信小程序是不可能的。但幸运的是，我们生活在一个AI辅助开发的时代。我决定采用"后端自己开发，前端AI辅助"的模式，借助AI的力量来弥补我前端开发能力的不足。

起初，我尝试了Deepseek和豆包，但很快发现它们在处理小程序开发这类需要上下文关联的任务时，表现并不理想。直到后来我发现了TRAE，它能够自主联系上下文并查看所需代码进行编程，这让我的开发效率大大提高。

开发过程：从后端到前端

1. 后端API开发：登录功能实现

作为整个系统的基础，登录功能是我首先要解决的问题。我通过浏览器开发者工具分析了学校教务系统的登录请求，发现登录过程包含获取验证码、账号密码加密提交等步骤。

我重点分析了请求参数的加密方式，发现系统使用base64加密账号密码，并以特定格式拼接。基于此，我编写了核心的登录验证函数和验证码获取函数，并使用Flask框架封装为RESTful API接口。

关键代码思路：

# 账号密码加密函数
def encode_args(user: str, pwd: str) -> str:
    # 使用base64加密账号和密码，并用特定分隔符连接
    ...

# 登录验证函数
def submit_login(session, user: str, pwd: str, captcha: str) -> tuple[bool, str]:
    # 构建请求数据，提交登录请求并处理响应
    ...

# Flask API接口
@app.route('/api/login', methods=['POST'])
def api_login():
    # 处理登录请求，验证参数，调用登录函数，返回结果
    ...

@app.route('/api/captcha', methods=['GET'])
def api_captcha():
    # 生成并返回验证码图片，同时返回session_id用于后续验证
    ...

2. 前端页面设计：AI助力开发

有了后端API，接下来需要开发前端页面。由于我对前端开发不太熟悉，主要依靠AI来完成页面设计和代码编写。

我向AI描述了登录页面、主页和用户页的需求和设计风格，AI很快生成了相应的代码。登录页面包含账号密码输入、验证码获取、记住密码等功能；主页设计为卡片式布局，展示个人信息和各项功能入口；用户页则以列表形式展示详细信息。

整个前端开发过程中，我主要负责功能需求的定义和页面布局的设计，具体的代码实现则由AI完成，这大大提高了开发效率。

3. 页面交互实现

页面交互逻辑主要包括登录成功后的页面跳转、功能按钮跳转、退出登录处理等。我向AI描述了这些交互需求，AI生成了相应的代码实现。

通过AI辅助开发，我快速完成了前端页面的设计和交互实现，为后续功能扩展奠定了基础。

遇到的问题与解决方案

在开发过程中，我遇到了不少问题，但通过查阅资料和AI辅助，都一一解决了：

1. 跨域请求问题

在测试前端请求后端API时，我遇到了跨域问题。浏览器的同源策略阻止了小程序从不同域名请求资源。为了解决这个问题，我在后端添加了跨域处理中间件：

@app.after_request
def add_cors_headers(response):
    """全局跨域响应头"""
    response.headers['Access-Control-Allow-Origin'] = '*'
    response.headers['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'
    response.headers['Access-Control-Allow-Headers'] = 'Content-Type, X-Session-Id'
    response.headers['Access-Control-Allow-Credentials'] = 'true'
    response.headers['Access-Control-Max-Age'] = '86400'
    return response

解决该问题有两种方式，我采用了第二种，因为我第一种一直失败：

• 使用 flask_cors 类库的 CORS
• 手动设置响应头（无依赖）

2. 验证码图片处理

验证码图片的处理是一个难点。最初，我尝试直接返回图片URL，但由于验证码是动态生成的，需要保持会话一致性。最终，我采用了以下方案：

1. 后端生成验证码并存储会话
2. 通过响应头返回session_id
3. 返回验证码图片二进制流
4. 登录时携带session_id和验证码

def get_captcha_png(session):
    """获取验证码图片（返回二进制流）"""
    ...
    
@app.route('/api/captcha', methods=['GET'])
def api_captcha():
    """
    获取验证码图片接口
    返回：验证码图片二进制流 + 响应头X-Session-Id
    """
    ...

3. 会话管理问题

为了确保登录状态的安全性，我设计了基于session_id和token的双重验证机制：

1. 每个验证码请求生成独立的会话
2. 登录成功后返回唯一token
3. 后续API请求需携带token进行身份验证
4. 实现了token过期自动失效机制

更多图文信息，请访问 【阅读原文】