基于uni-app与SSM框架的微信小程序选课系统开发实践

1. 项目概述：基于uni-app的微信小程序选课系统

这个选课系统是我去年指导的一个计算机专业毕业设计项目，采用前后端分离架构，前端使用uni-app框架开发微信小程序，后端采用Java+SSM框架。系统主要面向高校学生选课场景，实现了课程浏览、选课退课、教学资源查看、师生互动等核心功能。

为什么选择这个技术栈？uni-app的跨平台特性让学生只需编写一套代码就能发布到多个平台，极大降低了开发成本。而后端选择SSM框架是因为它足够轻量且文档丰富，适合学生快速上手。数据库选用MySQL 5.7也是考虑到它在高校环境中的普及度和稳定性。

2. 系统架构与技术选型

2.1 前端技术栈解析

前端采用uni-app+Vue.js的组合，这是经过多方考量后的选择：

• uni-app的跨端能力可以覆盖微信小程序、H5等多平台
• Vue 2.x的响应式特性简化了数据绑定逻辑
• 使用Flex布局适配不同尺寸屏幕
• 通过微信原生API实现扫码、定位等小程序特有功能

提示：在实际开发中，我们发现uni-app的picker组件在iOS和Android上的表现不一致，最终通过自定义组件解决了这个问题。

2.2 后端技术实现

后端架构采用经典的MVC模式：

code复制SSM框架组成：
Spring - 控制反转和依赖注入
Spring MVC - 请求路由和视图解析
MyBatis - 数据库持久层

数据库设计遵循第三范式，主要表包括：

• 学生表(student_info)
• 教师表(teacher_info)
• 课程表(course_info)
• 选课记录表(selection_record)
• 论坛帖子表(forum_post)

3. 核心功能实现细节

3.1 学生选课流程实现

选课功能是系统的核心，我们实现了以下关键点：

1. 课程列表分页加载（每页10条）
2. 选课冲突检测（时间、人数限制）
3. 实时更新选课人数
4. 选课结果即时反馈

核心代码逻辑：

javascript复制// 选课API调用示例
function selectCourse(courseId) {
  uni.request({
    url: 'https://api.example.com/select',
    method: 'POST',
    data: {
      studentId: getApp().globalData.userId,
      courseId: courseId
    },
    success: (res) => {
      if(res.data.code === 0) {
        uni.showToast({title: '选课成功'});
      } else {
        uni.showToast({title: res.data.msg, icon: 'none'});
      }
    }
  });
}

3.2 教师管理功能

教师端实现了：

• 课程信息维护
• 学生名单导出
• 成绩录入
• 教学视频上传

特别要注意的是文件上传功能：

java复制// 文件上传Controller示例
@PostMapping("/upload")
public Result upload(@RequestParam("file") MultipartFile file) {
    if (file.isEmpty()) {
        return Result.error("请选择文件");
    }
    String fileName = file.getOriginalFilename();
    String filePath = "/uploads/";
    File dest = new File(filePath + fileName);
    try {
        file.transferTo(dest);
        return Result.ok("上传成功", filePath + fileName);
    } catch (IOException e) {
        e.printStackTrace();
    }
    return Result.error("上传失败");
}

4. 开发中的关键问题与解决方案

4.1 性能优化实践

在测试阶段发现课程列表加载缓慢，我们采取了以下优化措施：

1. 添加数据库索引：为课程表的查询字段创建索引
2. 引入Redis缓存：缓存热门课程数据
3. 前端懒加载：滚动到底部时再加载更多数据
4. 图片压缩：使用tinypng压缩教学资源图片

4.2 常见问题排查指南

1. 跨域问题：

   • 后端添加@CrossOrigin注解
   • 配置nginx反向代理

2. 微信登录失败：

   • 检查appid配置
   • 确认域名已加入微信白名单

3. 数据库连接超时：

   • 调整连接池参数
   • 检查MySQL最大连接数设置

5. 项目部署与上线

5.1 小程序发布流程

1. 开发环境配置：

   • 微信开发者工具
   • 配置合法域名

2. 打包发布步骤：

   bash复制# uni-app打包命令
   npm run build:mp-weixin
   

3. 提交微信审核注意事项：

   • 准备完整的功能说明文档
   • 测试账号要提前准备好
   • 隐私协议要完整

5.2 后端部署方案

我们提供了两种部署方式：

1. 传统部署：

   • Tomcat 9 + JDK 8
   • MySQL 5.7配置优化

2. Docker容器化部署：

   dockerfile复制FROM tomcat:9.0
   COPY ./webapps/ROOT.war /usr/local/tomcat/webapps/
   EXPOSE 8080
   CMD ["catalina.sh", "run"]
   

6. 项目扩展建议

在实际使用中，可以考虑以下扩展方向：

1. 增加选课策略配置（如优先级选课）
2. 接入学校统一身份认证
3. 开发教师端的移动审批功能
4. 加入选课数据分析看板

这个项目从技术选型到最终上线历时3个月，最大的收获是认识到良好的架构设计对后期维护的重要性。特别是在用户量增加后，最初的数据库设计就暴露出了一些性能问题，这也让我更加重视前期的需求分析和系统设计阶段。