Uniapp+Vue3与Flask构建微信小程序选课系统

1. 项目概述与技术栈选型

在大学英语学院的教学管理中，学生选课系统一直是教务工作的核心痛点。传统选课系统往往存在界面老旧、移动端适配差、高峰期系统崩溃等问题。我们团队基于Uniapp+Vue3和Python Flask技术栈，开发了一套轻量高效的微信小程序选课系统，完美解决了这些痛点。

这套系统最显著的特点是"三端协同"架构：

• 学生端：微信小程序提供随时随地选课能力
• 教师端：Web管理后台支持课程全生命周期管理
• 管理员端：PC端实现系统级配置与监控

技术选型上我们做了以下关键决策：

1. 前端跨平台方案：选用Uniapp+Vue3组合，一套代码可同时输出微信小程序和H5页面。实测开发效率比原生小程序开发提升40%，uView组件库的引入让UI开发时间缩短60%
2. 后端服务框架：Python Flask以其轻量灵活的特性胜出，配合Flask-RESTful扩展可快速构建RESTful API。相比Django，Flask更适合我们这个需要快速迭代的中小型项目
3. 数据库ORM：SQLAlchemy提供的声明式模型定义让数据操作变得直观，其会话管理机制天然支持事务处理，这对选课系统的数据一致性至关重要

关键提示：微信小程序开发必须提前在manifest.json中配置合法域名，否则无法调用后端API。我们曾因此耽误两天审核时间，建议开发初期就完成配置。

2. 核心功能模块设计

2.1 学生端功能实现

学生端功能设计遵循"最小交互路径"原则：

• 微信一键登录：通过wx.login()获取code，后端用appid+appsecret+code向微信服务器换取openid

python复制# Flask登录API示例
@app.route('/api/login', methods=['POST'])
def login():
    code = request.json.get('code')
    # 调用微信接口获取openid
    wechat_url = f"https://api.weixin.qq.com/sns/jscode2session?appid={APPID}&secret={SECRET}&js_code={code}&grant_type=authorization_code"
    resp = requests.get(wechat_url).json()
    openid = resp.get('openid')
    # 查询或创建用户
    student = Student.query.filter_by(wechat_openid=openid).first()
    if not student:
        student = Student(wechat_openid=openid)
        db.session.add(student)
    # 生成JWT令牌
    token = create_access_token(identity=student.id)
    return jsonify({'token': token})

• 智能课程筛选：支持多维度组合查询，后端采用SQLAlchemy的动态过滤技术：

python复制filters = []
if request.args.get('major'):
    filters.append(Course.major == request.args['major'])
if request.args.get('teacher'):
    filters.append(Course.teacher_id == request.args['teacher'])
courses = Course.query.filter(*filters).paginate(page=1, per_page=20)

• 选课并发控制：采用数据库事务+乐观锁方案，防止课程超选：

python复制@app.route('/api/enroll', methods=['POST'])
@jwt_required()
def enroll():
    student_id = get_jwt_identity()
    course_id = request.json.get('course_id')
    
    try:
        db.session.begin()
        # 检查课程余量
        course = Course.query.with_for_update().get(course_id)
        if course.current >= course.max_capacity:
            return jsonify({'error': '课程已满'}), 400
        # 创建选课记录
        enrollment = Enrollment(student_id=student_id, course_id=course_id)
        course.current += 1
        db.session.add(enrollment)
        db.session.commit()
        return jsonify({'success': True})
    except:
        db.session.rollback()
        return jsonify({'error': '选课失败'}), 500

2.2 教师端功能设计

教师端核心在于数据可视化与批量操作：

1. 课程管理看板：使用ECharts展示选课人数趋势
2. Excel导出：采用openpyxl库动态生成学生名单

python复制from openpyxl import Workbook

@app.route('/api/export/<int:course_id>')
@jwt_required()
def export_students(course_id):
    wb = Workbook()
    ws = wb.active
    ws.append(['学号', '姓名', '班级'])
    
    enrollments = Enrollment.query.filter_by(course_id=course_id).join(Student).all()
    for e in enrollments:
        ws.append([e.student.id, e.student.name, e.student.class_name])
    
    from io import BytesIO
    buffer = BytesIO()
    wb.save(buffer)
    buffer.seek(0)
    return send_file(buffer, mimetype='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')

2.3 管理员端关键功能

• RBAC权限控制：基于角色的访问控制模型设计

python复制class Role(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50), unique=True)
    permissions = db.Column(db.Integer)

class UserRoles(db.Model):
    user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
    role_id = db.Column(db.Integer, db.ForeignKey('role.id'))

• 系统配置热更新：使用Flask-Caching实现配置项缓存

python复制from flask_caching import Cache

cache = Cache(config={'CACHE_TYPE': 'SimpleCache'})

@app.route('/api/config', methods=['POST'])
@admin_required
def update_config():
    data = request.json
    cache.set('system_config', data)
    return jsonify({'success': True})

3. 数据模型与API设计

3.1 核心数据关系

系统采用经典的"学生-课程-选课"三元模型：

python复制class Student(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    wechat_openid = db.Column(db.String(50), unique=True)
    name = db.Column(db.String(20))
    enrollments = db.relationship('Enrollment', back_populates='student')

class Course(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100))
    teacher_id = db.Column(db.Integer, db.ForeignKey('teacher.id'))
    max_capacity = db.Column(db.Integer)
    current = db.Column(db.Integer, default=0)
    enrollments = db.relationship('Enrollment', back_populates='course')

class Enrollment(db.Model):
    student_id = db.Column(db.Integer, db.ForeignKey('student.id'), primary_key=True)
    course_id = db.Column(db.Integer, db.ForeignKey('course.id'), primary_key=True)
    grade = db.Column(db.Float)
    student = db.relationship('Student', back_populates='enrollments')
    course = db.relationship('Course', back_populates='enrollments')

3.2 RESTful API规范

API设计遵循以下原则：

1. 资源化URL：/api/<资源>/<id>
2. HTTP方法语义化：
   • GET：查询
   • POST：创建
   • PUT：全量更新
   • PATCH：部分更新
   • DELETE：删除

典型API示例：

code复制GET    /api/courses          # 课程列表
POST   /api/courses          # 创建课程
GET    /api/courses/1        # 课程详情
PUT    /api/courses/1        # 更新课程
DELETE /api/courses/1        # 删除课程
GET    /api/courses/1/students # 课程学生列表

4. 微信小程序适配实战

4.1 登录流程优化

微信登录流程有三个关键点：

1. 前端调用wx.login()获取临时code
2. 后端用code换取openid和session_key
3. 服务端维护登录状态（JWT方案）

javascript复制// 小程序登录示例
uni.login({
  provider: 'weixin',
  success: (res) => {
    uni.request({
      url: 'https://yourdomain.com/api/login',
      method: 'POST',
      data: { code: res.code },
      success: (resp) => {
        uni.setStorageSync('token', resp.data.token)
      }
    })
  }
})

4.2 支付功能实现

由于微信支付需要企业资质，我们采用了两阶段方案：

1. 开发阶段：模拟支付流程

python复制@app.route('/api/pay', methods=['POST'])
@jwt_required()
def mock_pay():
    return jsonify({
        'success': True,
        'payment_id': str(uuid.uuid4())
    })

2. 生产环境：接入真实微信支付

python复制from wechatpayv3 import WeChatPay

wxpay = WeChatPay(
    appid=APPID,
    mchid=MCHID,
    private_key=PRIVATE_KEY,
    cert_serial_no=CERT_SERIAL_NO,
    apiv3_key=APIV3_KEY
)

@app.route('/api/pay', methods=['POST'])
@jwt_required()
def create_payment():
    order = {
        'amount': 100,
        'description': '选课押金',
        'out_trade_no': str(uuid.uuid4()),
        'notify_url': 'https://yourdomain.com/api/pay/notify'
    }
    result = wxpay.pay(order)
    return jsonify(result)

5. 部署与性能优化

5.1 后端部署方案

推荐使用Nginx+Gunicorn组合：

bash复制# Gunicorn启动命令
gunicorn -w 4 -b 0.0.0.0:5000 wsgi:app

# Nginx配置示例
server {
    listen 80;
    server_name yourdomain.com;
    
    location / {
        proxy_pass http://127.0.0.1:5000;
        proxy_set_header Host $host;
    }
}

5.2 选课高峰期优化

我们实施了三级缓存策略：

1. 课程余量Redis缓存

python复制from redis import Redis

r = Redis()

def get_course_capacity(course_id):
    key = f"course:{course_id}:capacity"
    val = r.get(key)
    if not val:
        val = Course.query.get(course_id).current
        r.setex(key, 60, val)  # 60秒过期
    return int(val)

2. 数据库连接池配置

python复制from sqlalchemy.pool import QueuePool

engine = create_engine(
    'mysql+pymysql://user:pass@localhost/db',
    poolclass=QueuePool,
    pool_size=20,
    max_overflow=10
)

3. 静态资源CDN加速

6. 常见问题排查指南

6.1 微信登录失败

典型错误场景：

• 错误码40029：检查appid和secret是否正确
• 错误码40163：code已被使用，确保每次登录使用新code
• 错误码45011：API调用太频繁，需限制请求频率

6.2 选课事务异常

事务处理必须注意：

1. 确保所有写操作在同一个session中完成
2. 捕获异常后必须rollback
3. 避免在事务中执行耗时操作

6.3 小程序审核被拒

常见原因及解决方案：

• 缺少隐私政策：在小程序设置中添加合规的隐私说明
• 功能不完整：确保所有声明功能均可正常使用
• 页面加载超时：优化首屏加载速度，控制在2秒内

7. 扩展功能实现

7.1 智能推荐系统

基于协同过滤的课程推荐：

python复制from surprise import Dataset, KNNBasic

def train_recommend_model():
    # 加载用户-课程评分数据
    data = Dataset.load_from_df(ratings_df, reader)
    trainset = data.build_full_trainset()
    # 使用KNN算法
    algo = KNNBasic()
    algo.fit(trainset)
    return algo

def recommend_courses(user_id, n=5):
    algo = load_model()  # 加载预训练模型
    courses = Course.query.all()
    predictions = [algo.predict(user_id, c.id) for c in courses]
    return sorted(predictions, key=lambda x: x.est, reverse=True)[:n]

7.2 多语言支持

使用Flask-Babel实现i18n：

python复制from flask_babel import Babel, _

babel = Babel(app)

@app.route('/hello')
def hello():
    return _('Hello World')

# 翻译文件示例(messages.po)
msgid "Hello World"
msgstr "你好世界"

在Uniapp中通过全局变量管理语言切换：

javascript复制// i18n.js
export default {
  en: {
    course: 'Course'
  },
  zh: {
    course: '课程'
  }
}

// 使用示例
import i18n from './i18n'
const t = i18n[currentLang]
console.log(t.course)

8. 项目演进路线

8.1 技术债清理计划

1. API文档自动化：使用Swagger UI
2. 日志集中管理：接入ELK栈
3. 监控告警：Prometheus+Grafana

8.2 功能迭代方向

1. 移动端教师功能：开发教师版小程序
2. 选课冲突检测：基于时间矩阵算法
3. 语音搜索：集成ASR技术

经验之谈：在第二期开发中，我们过度追求新功能导致代码质量下降。建议采用"小步快跑"的迭代策略，每个版本聚焦1-2个核心功能，确保代码可维护性。