一、引言
作为一名计算机专业的大三学生，我深刻感受到在线教育在学习中的重要性——无论是课后补学专业课、备考证书，还是兴趣学习编程教程，线上平台早已成为我们学习的重要载体。但在使用过程中，我发现很多主流在线教育平台存在“功能冗余”“操作复杂”的问题：比如想找一门编程课，却要在一堆广告和无关功能中翻找；提交作业后，老师批改反馈不及时，成绩查询也很麻烦。
恰逢课程设计作业要求完成一个“小型实用系统”，我便萌生了开发一款轻量化、贴合学生与老师真实需求的在线教育平台的想法。但作为编程基础不算顶尖的学生，我常因“不知道如何将想法转化为具体功能”“表结构设计混乱”“重复编写基础代码”而效率低下。直到老师推荐了飞算JavaAI——这款不仅能生成代码，还能引导学生梳理需求、细化设计的工具，让我重新找到了开发信心。接下来，我将以学生视角，记录用飞算JavaAI实现在线教育平台的完整过程。
二、环境准备
参考学长分享的电商系统开发流程，结合学生常用的Windows环境，我用3步就完成了环境搭建，全程没遇到复杂问题：
1. 下载并安装IntelliJ IDEA
作为学生，我选择IDEA社区版（免费且满足开发需求）：打开JetBrains中文官网（www.jetbrains.com.cn），选择“IntelliJ IDEA Community”，下载Windows版本。安装时勾选“添加到环境变量”“创建桌面快捷方式”，下一步默认安装即可——全程约5分钟，比安装大型软件简单多了。
2. 安装飞算JavaAI插件
打开IDEA后，点击顶部菜单栏“File → Settings → Plugins”，在搜索框输入“飞算JavaAI”，找到带“feisuanyz”标识的插件（评分4.5+），点击“Install”。等待1-2分钟后重启IDEA，插件就加载完成了。这里我遇到一个小问题：插件加载慢，刷新插件市场2次后就正常了，估计是校园网波动导致的。
3. 登录飞算JavaAI
重启IDEA后，右侧会出现“飞算JavaAI”面板，点击“立即登录”
三、模块设计与编码
在完成需求分析和环境搭建后，我借助飞算JavaAI的“自然语言转代码”能力，快速生成了平台核心模块代码，仅需对业务细节做微调，极大缩短了开发周期。以下是模块开发的完整过程：
1. 飞算JavaAI生成基础模块
飞算JavaAI最让我惊喜的是“无需专业术语，口语化需求也能精准转代码”。我在插件面板的“需求编辑器”中，直接用学生视角描述核心需求：
“生成在线教育平台基础模块，包含3类核心实体：用户（区分学生/老师角色，含学号/工号、姓名、角色、邮箱）、课程（课程ID、名称、分类、关联老师ID、视频地址、简介）、作业（作业ID、关联课程ID、标题、截止时间、要求）；实现核心功能：用户登录/注册（区分角色权限）、老师创建课程/上传视频/发布作业、学生浏览课程/报名/提交作业、作业批改与成绩展示；技术栈：Spring Boot 3.x + MyBatis-Plus + MySQL 8.0，前端用Thymeleaf+Bootstrap（适配学生端浏览器）。”
点击“提交需求”后，飞算JavaAI自动拆解需求
生成“实体设计→接口定义→表结构→源码”的开发链路，全程无需手动干预。
点击“开始生成”
最终生成的项目结构清晰，核心包与类已完整创建，省去了我手动建包、写基础类的麻烦：
com.student.education
├─ entity // 实体类（映射数据库表）
│ ├─ User.java // 用户实体（学生/老师）
│ ├─ Course.java // 课程实体
│ ├─ Video.java // 视频实体
│ ├─ Homework.java // 作业实体
│ └─ HomeworkSubmit.java // 作业提交实体
├─ dto // 数据传输对象（接收前端请求参数）
│ ├─ UserRegisterDTO.java // 注册请求DTO
│ ├─ CourseAddDTO.java // 课程创建DTO
│ ├─ HomeworkSubmitDTO.java // 作业提交DTO
│ └─ CourseQueryDTO.java // 课程查询DTO
├─ vo // 视图对象（向前端返回数据）
│ ├─ CourseDetailVO.java // 课程详情VO
│ ├─ HomeworkFeedbackVO.java // 作业批改反馈VO
│ └─ StudentCourseVO.java // 学生已报名课程VO
├─ mapper // 数据访问接口（MyBatis-Plus）
│ ├─ UserMapper.java
│ ├─ CourseMapper.java
│ └─ HomeworkMapper.java
├─ service // 业务逻辑层
│ ├─ UserService.java
│ ├─ CourseService.java
│ └─ HomeworkService.java
├─ controller // 接口控制层
│ ├─ UserController.java
│ ├─ CourseController.java
│ └─ HomeworkController.java
└─ config // 配置类（数据库、静态资源映射）
└─ WebConfig.java
打开项目
2. 核心代码展示
飞算JavaAI生成的代码不仅结构规范，还自带参数校验、事务控制和详细注释，我仅需根据实际场景补充少量业务逻辑，以下是关键模块的代码示例：
（1）entity包：核心实体类
User.java（用户实体，区分学生/老师角色）
package com.student.education.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.time.LocalDateTime;
/**
* <p>
* 用户实体类：映射user表，区分学生（role=0）和老师（role=1）角色
* </p>
* @author feisuan-javaai（学生开发者二次优化）
*/
@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName("user") // 关联数据库表名
public class User {
/**
* 用户ID：主键，自增
*/
@TableId(type = IdType.AUTO)
private Long id;
/**
* 账号：学生填学号，老师填工号，唯一非空
*/
private String account;
/**
* 密码：存储加密后的字符串（飞算提示：需用BCrypt加密）
*/
private String password;
/**
* 姓名：用户真实姓名
*/
private String name;
/**
* 角色：0=学生，1=老师（用于权限控制）
*/
private Integer role;
/**
* 邮箱：用于找回密码、接收作业提醒
*/
private String email;
/**
* 创建时间：用户注册时间，自动填充
*/
private LocalDateTime createTime;
}
Course.java（课程实体，关联老师与分类）
package com.student.education.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.time.LocalDateTime;
/**
* <p>
* 课程实体类：映射course表，关联创建老师
* </p>
* @author feisuan-javaai（学生开发者二次优化）
*/
@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName("course")
public class Course {
/**
* 课程ID：主键，自增
*/
@TableId(type = IdType.AUTO)
private Long id;
/**
* 课程名称：非空，如“Java编程基础”
*/
private String courseName;
/**
* 课程分类：如“编程类”“数学类”“英语类”
*/
private String category;
/**
* 关联老师ID：外键，关联user表（role=1）
*/
private Long teacherId;
/**
* 课程简介：描述课程内容、学习目标
*/
private String description;
/**
* 课程封面图地址：展示在课程列表页
*/
private String coverUrl;
/**
* 创建时间：课程发布时间
*/
private LocalDateTime createTime;
/**
* 状态：0=未发布，1=已发布（老师可草稿保存）
*/
private Integer status;
}
（2）dto包：数据传输对象（带参数校验）
CourseAddDTO.java（老师创建课程的请求DTO）
package com.student.education.dto;
import jakarta.validation.constraints.NotBlank;
import jakarta.validation.constraints.NotNull;
import lombok.Data;
/**
* <p>
* 课程创建请求DTO：接收老师前端传入的课程数据，含参数校验
* </p>
* @author feisuan-javaai
*/
@Data
public class CourseAddDTO {
/**
* 课程名称：必填，长度不超过50字
*/
@NotBlank(message = "课程名称不能为空")
private String courseName;
/**
* 课程分类：必填，只能是预设的分类（编程类/数学类/英语类）
*/
@NotBlank(message = "课程分类不能为空")
private String category;
/**
* 老师ID：必填，从登录态中获取（避免手动输入）
*/
@NotNull(message = "创建老师ID不能为空")
private Long teacherId;
/**
* 课程简介：非必填，但为空时默认填充“暂无简介”
*/
private String description;
/**
* 课程状态：必填，0=草稿，1=发布
*/
@NotNull(message = "课程状态不能为空")
private Integer status;
}
HomeworkSubmitDTO.java（学生提交作业的请求DTO）
package com.student.education.dto;
import jakarta.validation.constraints.NotBlank;
import jakarta.validation.constraints.NotNull;
import lombok.Data;
import org.springframework.web.multipart.MultipartFile;
/**
* <p>
* 作业提交请求DTO：接收学生上传的作业文件与关联信息
* </p>
* @author feisuan-javaai（学生开发者补充文件上传字段）
*/
@Data
public class HomeworkSubmitDTO {
/**
* 学生ID：必填，从登录态获取
*/
@NotNull(message = "学生ID不能为空")
private Long studentId;
/**
* 作业ID：必填，关联homework表
*/
@NotNull(message = "作业ID不能为空")
private Long homeworkId;
/**
* 作业文件：必填，支持PDF/Word，最大5MB
*/
@NotNull(message = "作业文件不能为空")
private MultipartFile homeworkFile;
/**
* 作业备注：非必填，学生补充说明
*/
private String remark;
}
（3）vo包：视图对象（向前端隐藏敏感字段）
CourseDetailVO.java（课程详情VO，给学生展示）
package com.student.education.vo;
import lombok.Data;
import java.time.LocalDateTime;
import java.util.List;
/**
* <p>
* 课程详情VO：封装学生查看课程时需要的所有信息，隐藏老师ID等敏感字段
* </p>
* @author feisuan-javaai
*/
@Data
public class CourseDetailVO {
/**
* 课程ID
*/
private Long courseId;
/**
* 课程名称
*/
private String courseName;
/**
* 课程分类
*/
private String category;
/**
* 老师姓名：展示老师姓名，而非老师ID
*/
private String teacherName;
/**
* 课程简介
*/
private String description;
/**
* 课程封面图地址
*/
private String coverUrl;
/**
* 课程视频列表：包含视频标题、播放地址、时长
*/
private List<VideoVO> videoList;
/**
* 课程关联作业：包含作业标题、截止时间
*/
private List<HomeworkSimpleVO> homeworkList;
/**
* 学生是否已报名：true=已报名（可看视频），false=未报名（需报名）
*/
private Boolean isEnrolled;
}
（4）service包：业务逻辑实现（含核心校验）
CourseServiceImpl.java（课程服务实现类，含报名校验）
package com.student.education.service.impl;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.student.education.dto.CourseAddDTO;
import com.student.education.entity.Course;
import com.student.education.entity.CourseEnroll;
import com.student.education.entity.User;
import com.student.education.mapper.CourseEnrollMapper;
import com.student.education.mapper.CourseMapper;
import com.student.education.mapper.UserMapper;
import com.student.education.service.CourseService;
import com.student.education.vo.CourseDetailVO;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.BeanUtils;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
/**
* <p>
* 课程服务实现类：处理课程创建、报名、详情查询等业务
* </p>
* @author feisuan-javaai（学生开发者补充报名逻辑）
*/
@Slf4j
@Service
@RequiredArgsConstructor
public class CourseServiceImpl extends ServiceImpl<CourseMapper, Course> implements CourseService {
private final CourseMapper courseMapper;
private final UserMapper userMapper;
private final CourseEnrollMapper courseEnrollMapper;
/**
* 老师创建课程
*/
@Override
@Transactional // 事务控制：确保课程创建失败时回滚
public Course addCourse(CourseAddDTO courseAddDTO) {
log.info("老师创建课程：老师ID={}，课程名称={}", courseAddDTO.getTeacherId(), courseAddDTO.getCourseName());
// 1. 校验老师身份（必须是role=1的用户）
User teacher = userMapper.selectById(courseAddDTO.getTeacherId());
if (teacher == null || teacher.getRole() != 1) {
throw new RuntimeException("无效的老师账号，无法创建课程");
}
// 2. DTO转实体，补充默认值
Course course = new Course();
BeanUtils.copyProperties(courseAddDTO, course);
// 课程封面图默认值：用平台默认封面
if (course.getCoverUrl() == null || course.getCoverUrl().isEmpty()) {
course.setCoverUrl("/static/images/default-course-cover.png");
}
// 创建时间自动填充（数据库用DEFAULT CURRENT_TIMESTAMP）
course.setCreateTime(LocalDateTime.now());
// 3. 保存课程
save(course);
log.info("课程创建成功：课程ID={}", course.getId());
return course;
}
/**
* 学生报名课程（核心逻辑：避免重复报名、校验课程状态）
*/
@Override
@Transactional
public void enrollCourse(Long studentId, Long courseId) {
log.info("学生报名课程：学生ID={}，课程ID={}", studentId, courseId);
// 1. 校验学生身份
User student = userMapper.selectById(studentId);
if (student == null || student.getRole() != 0) {
throw new RuntimeException("无效的学生账号，无法报名课程");
}
// 2. 校验课程状态（必须是已发布状态：status=1）
Course course = getById(courseId);
if (course == null) {
throw new RuntimeException("课程不存在");
}
if (course.getStatus() != 1) {
throw new RuntimeException("课程未发布，暂无法报名");
}
// 3. 校验是否已报名（避免重复报名）
CourseEnroll existingEnroll = courseEnrollMapper.selectByStudentAndCourse(studentId, courseId);
if (existingEnroll != null) {
throw new RuntimeException("已报名该课程，无需重复操作");
}
// 4. 保存报名记录
CourseEnroll courseEnroll = new CourseEnroll();
courseEnroll.setStudentId(studentId);
courseEnroll.setCourseId(courseId);
courseEnroll.setEnrollTime(LocalDateTime.now());
courseEnrollMapper.insert(courseEnroll);
log.info("学生报名成功：报名记录ID={}", courseEnroll.getId());
}
/**
* 查询课程详情（给学生展示，包含是否已报名）
*/
@Override
public CourseDetailVO getCourseDetail(Long studentId, Long courseId) {
// 1. 查询课程基础信息
Course course = getById(courseId);
if (course == null) {
throw new RuntimeException("课程不存在");
}
// 2. 组装VO（省略视频列表、作业列表的查询逻辑，用mapper关联查询）
CourseDetailVO detailVO = new CourseDetailVO();
detailVO.setCourseId(course.getId());
detailVO.setCourseName(course.getCourseName());
detailVO.setCategory(course.getCategory());
// 关联查询老师姓名
User teacher = userMapper.selectById(course.getTeacherId());
detailVO.setTeacherName(teacher.getName());
detailVO.setDescription(course.getDescription());
detailVO.setCoverUrl(course.getCoverUrl());
// 3. 判断学生是否已报名
CourseEnroll enroll = courseEnrollMapper.selectByStudentAndCourse(studentId, courseId);
detailVO.setIsEnrolled(enroll != null);
return detailVO;
}
}
3. 网页展示
系统前端采用Bootstrap框架实现响应式设计，适配学生常用的电脑、平板设备，核心页面功能如下（因无实际图片，用文字描述关键界面）：
（1）登录页
- 布局：左侧展示平台Logo与“AI驱动的轻量化在线教育平台”标语，右侧为登录表单；
- 功能：支持“学生登录”“老师登录”切换（切换时表单提示文字变化：学生提示“输入学号”，老师提示“输入工号”），带“忘记密码”链接（通过邮箱找回），底部有“注册账号”入口（区分学生/老师注册）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线教育平台 - 登录</title>
<!-- 引入Bootstrap样式（学生开发常用CDN） -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 简单自定义样式，贴合学生审美 */
.login-container {
margin-top: 80px;
max-width: 900px;
box-shadow: 0 0 15px rgba(0,0,0,0.05);
border-radius: 10px;
overflow: hidden;
}
.login-banner {
background: linear-gradient(135deg, #4361ee, #7209b7);
color: white;
padding: 60px 30px;
}
.login-form {
padding: 40px 30px;
}
.role-tab {
margin-bottom: 25px;
}
</style>
</head>
<body>
<div class="container">
<div class="login-container mx-auto">
<div class="row">
<!-- 左侧banner -->
<div class="col-md-5 d-none d-md-block login-banner">
<h2 class="mb-4">AI驱动的轻量化<br>在线教育平台</h2>
<p>专注学生学习与老师教学的高效工具</p>
<div class="mt-5">
<img src="/static/images/login-banner.png" alt="学习场景" class="img-fluid rounded">
</div>
</div>
<!-- 右侧登录表单 -->
<div class="col-md-7 login-form">
<div class="role-tab">
<!-- 角色切换按钮 -->
<button class="btn btn-primary px-4 py-2 me-2" id="studentRoleBtn">学生登录</button>
<button class="btn btn-outline-primary px-4 py-2" id="teacherRoleBtn">老师登录</button>
</div>
<!-- 登录表单 -->
<form id="loginForm">
<div class="mb-3">
<label for="account" class="form-label" id="accountLabel">学号</label>
<input type="text" class="form-control" id="account" placeholder="请输入学号" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码" required>
</div>
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="rememberMe">
<label class="form-check-label" for="rememberMe">记住我</label>
</div>
<a href="#" class="text-primary">忘记密码？</a>
</div>
<button type="submit" class="btn btn-primary w-100 py-2">登录</button>
<div class="text-center mt-3">
<span>还没有账号？</span>
<a href="#" class="text-primary" id="registerLink">立即注册</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- 引入jQuery和Bootstrap脚本 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 角色切换逻辑（学生/老师）
$(function() {
// 学生登录默认选中
let isStudentRole = true;
// 切换为老师角色
$("#teacherRoleBtn").click(function() {
isStudentRole = false;
$(this).removeClass("btn-outline-primary").addClass("btn-primary");
$("#studentRoleBtn").removeClass("btn-primary").addClass("btn-outline-primary");
$("#accountLabel").text("工号");
$("#account").attr("placeholder", "请输入工号");
$("#registerLink").text("老师注册");
});
// 切换为学生角色
$("#studentRoleBtn").click(function() {
isStudentRole = true;
$(this).removeClass("btn-outline-primary").addClass("btn-primary");
$("#teacherRoleBtn").removeClass("btn-primary").addClass("btn-outline-primary");
$("#accountLabel").text("学号");
$("#account").attr("placeholder", "请输入学号");
$("#registerLink").text("立即注册");
});
// 登录表单提交逻辑（模拟）
$("#loginForm").submit(function(e) {
e.preventDefault();
const account = $("#account").val();
const password = $("#password").val();
const role = isStudentRole ? 0 : 1; // 0=学生，1=老师
// 模拟接口请求（实际开发需对接后端）
console.log(`角色：${role === 0 ? '学生' : '老师'}，账号：${account}，密码：${password}`);
alert("登录请求已发送，后续将跳转至首页！");
// 模拟跳转（学生→学生首页，老师→老师首页）
if (isStudentRole) {
window.location.href = "/student/course-list";
} else {
window.location.href = "/teacher/course-manage";
}
});
});
</script>
</body>
</html>
（2）学生端核心页面
- 课程列表页：顶部有分类筛选栏（编程类/数学类/英语类），课程卡片展示封面图、名称、老师、简介，卡片右下角有“报名”按钮（已报名则显示“已报名”灰色按钮），支持分页（每页10门课程）；
- 课程详情页：左侧展示课程视频列表（按章节排序，已观看视频标蓝），中间是视频播放区（支持倍速、进度记忆），右侧是课程信息（老师、简介、关联作业），作业区域可直接点击“提交作业”上传文件；
- 我的成绩页：按课程分组展示作业成绩，包含作业名称、提交时间、批改状态、分数、老师评语，支持按“未批改”“已批改”筛选。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生中心 - 课程列表</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 课程卡片样式 */
.course-card {
border: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s;
margin-bottom: 25px;
}
.course-card:hover {
transform: translateY(-5px);
}
.course-cover {
height: 160px;
object-fit: cover;
}
.course-info {
padding: 15px;
}
.course-teacher {
color: #6c757d;
font-size: 0.9rem;
}
.course-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.9rem;
color: #495057;
margin: 8px 0;
}
/* 导航栏样式 */
.navbar {
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container">
<a class="navbar-brand text-primary" href="/student/course-list">在线教育平台</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="/student/course-list">课程列表</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/student/my-course">我的课程</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/student/my-score">我的成绩</a>
</li>
</ul>
<!-- 学生信息 -->
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
学号：2024001（张三）
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="/student/profile">个人中心</a></li>
<li><a class="dropdown-item" href="/login">退出登录</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- 主内容区 -->
<div class="container mt-4">
<!-- 筛选栏 -->
<div class="card mb-4">
<div class="card-body">
<div class="row align-items-center">
<div class="col-md-4 mb-3 mb-md-0">
<h5 class="mb-0">课程分类筛选</h5>
</div>
<div class="col-md-8">
<div class="d-flex flex-wrap gap-2">
<button class="btn btn-primary" id="allCourseBtn">全部课程</button>
<button class="btn btn-outline-primary" data-category="编程类">编程类</button>
<button class="btn btn-outline-primary" data-category="数学类">数学类</button>
<button class="btn btn-outline-primary" data-category="英语类">英语类</button>
<button class="btn btn-outline-primary" data-category="其他">其他</button>
</div>
</div>
</div>
</div>
</div>
<!-- 课程列表 -->
<div class="row" id="courseList">
<!-- 课程卡片1：编程类（未报名） -->
<div class="col-md-4 col-sm-6" data-category="编程类">
<div class="course-card">
<img src="/static/images/course-java.png" class="course-cover" alt="Java编程基础">
<div class="course-info">
<h6 class="course-name">Java编程基础</h6>
<div class="course-teacher">老师：李老师</div>
<div class="course-desc">从零开始学习Java语法，掌握面向对象编程思想，适合编程入门学生。</div>
<button class="btn btn-primary w-100 enroll-btn" data-course-id="1">立即报名</button>
</div>
</div>
</div>
<!-- 课程卡片2：数学类（已报名） -->
<div class="col-md-4 col-sm-6" data-category="数学类">
<div class="course-card">
<img src="/static/images/course-math.png" class="course-cover" alt="高等数学（上）">
<div class="course-info">
<h6 class="course-name">高等数学（上）</h6>
<div class="course-teacher">老师：王老师</div>
<div class="course-desc">讲解极限、导数、积分等核心知识点，配套课后习题与答疑。</div>
<button class="btn btn-secondary w-100" disabled>已报名</button>
</div>
</div>
</div>
<!-- 课程卡片3：英语类（未报名） -->
<div class="col-md-4 col-sm-6" data-category="英语类">
<div class="course-card">
<img src="/static/images/course-english.png" class="course-cover" alt="大学英语四级备考">
<div class="course-info">
<h6 class="course-name">大学英语四级备考</h6>
<div class="course-teacher">老师：张老师</div>
<div class="course-desc">针对四级听力、阅读、写作、翻译四大模块，提供应试技巧与真题训练。</div>
<button class="btn btn-primary w-100 enroll-btn" data-course-id="3">立即报名</button>
</div>
</div>
</div>
</div>
<!-- 分页控件 -->
<nav aria-label="Page navigation" class="mt-5">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">上一页</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(function() {
// 1. 课程分类筛选逻辑
$("[data-category]").click(function() {
const category = $(this).data("category");
// 切换按钮样式
$("[data-category]").removeClass("btn-primary").addClass("btn-outline-primary");
$(this).removeClass("btn-outline-primary").addClass("btn-primary");
// 筛选课程卡片
if (category === "全部课程") {
$("#courseList > div").show();
} else {
$("#courseList > div").hide();
$(`[data-category="${category}"]`).show();
}
});
// 2. 课程报名逻辑（模拟）
$(".enroll-btn").click(function() {
const courseId = $(this).data("course-id");
const courseCard = $(this).closest(".course-card");
const courseName = courseCard.find(".course-name").text();
// 模拟调用报名接口（实际开发需对接后端）
console.log(`学生报名课程：课程ID=${courseId}，课程名称=${courseName}`);
alert(`成功报名课程《${courseName}》，可在“我的课程”中查看！`);
// 切换按钮状态为“已报名”
$(this).removeClass("btn-primary").addClass("btn-secondary").text("已报名").prop("disabled", true);
});
});
</script>
</body>
</html>
（3）老师端核心页面
- 课程管理页：列表展示老师创建的所有课程，包含课程名称、分类、状态、报名人数，操作列有“编辑”“发布/下架”“查看报名名单”按钮；
- 作业批改页：按作业分组展示学生提交列表，包含学生姓名、学号、提交时间、文件下载链接，批改栏可输入分数、填写评语，支持“批量批改”和“单独批改”。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>老师中心 - 课程管理</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.navbar {
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.action-btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
margin: 0 2px;
}
.status-badge {
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.875rem;
}
.status-published {
background-color: #d1e7dd;
color: #0f5132;
}
.status-draft {
background-color: #fff3cd;
color: #664d03;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container">
<a class="navbar-brand text-primary" href="/teacher/course-manage">在线教育平台</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="/teacher/course-manage">课程管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/teacher/homework-manage">作业管理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/teacher/score-manage">成绩管理</a>
</li>
</ul>
<!-- 老师信息 -->
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
工号：T202401（李老师）
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="/teacher/profile">个人中心</a></li>
<li><a class="dropdown-item" href="/login">退出登录</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- 主内容区 -->
<div class="container mt-4">
<!-- 顶部操作栏 -->
<div class="d-flex justify-content-between align-items-center mb-4">
<h4>我的课程管理</h4>
<button class="btn btn-primary" id="createCourseBtn">
<<i class="bi bi-plus-circle"></</i> 新建课程
</button>
</div>
<!-- 课程管理表格 -->
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<<th>课程ID</</th>
<<th>课程名称</</th>
<<th>课程分类</</th>
<<th>状态</</th>
<<th>报名人数</</th>
<<th>创建时间</</th>
<<th>操作</</th>
</tr>
</thead>
<tbody>
<!-- 课程1：已发布 -->
<tr>
<td>1</td>
<td>Java编程基础</td>
<td>编程类</td>
<td><span class="status-badge status-published">已发布</span></td>
<td>28</td>
<td>2024-09-01</td>
<td>
<button class="btn btn-outline-primary action-btn edit-btn" data-course-id="1">编辑</button>
<button class="btn btn-outline-secondary action-btn offline-btn" data-course-id="1">下架</button>
<button class="btn btn-outline-info action-btn enroll-btn" data-course-id="1">查看报名</button>
</td>
</tr>
<!-- 课程2：草稿 -->
<tr>
<td>2</td>
<td>数据结构与算法</td>
<td>编程类</td>
<td><span class="status-badge status-draft">草稿</span></td>
<td>0</td>
<td>2024-09-10</td>
<td>
<button class="btn btn-outline-primary action-btn edit-btn" data-course-id="2">编辑</button>
<button class="btn btn-outline-success action-btn online-btn" data-course-id="2">发布</button>
<button class="btn btn-outline-info action-btn enroll-btn" data-course-id="2" disabled>查看报名</button>
</td>
</tr>
<!-- 课程3：已发布 -->
<tr>
<td>3</td>
<td>Python数据分析</td>
<td>编程类</td>
<td><span class="status-badge status-published">已发布</span></td>
<td>15</td>
<td>2024-08-25</td>
<td>
<button class="btn btn-outline-primary action-btn edit-btn" data-course-id="3">编辑</button>
<button class="btn btn-outline-secondary action-btn offline-btn" data-course-id="3">下架</button>
<button class="btn btn-outline-info action-btn enroll-btn" data-course-id="3">查看报名</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 分页控件 -->
<nav aria-label="Page navigation" class="mt-4">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">上一页</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
</div>
<!-- 引入图标库（Bootstrap Icons） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(function() {
// 1. 新建课程按钮（跳转至课程创建页）
$("#createCourseBtn").click(function() {
window.location.href = "/teacher/course-create";
});
// 2. 编辑课程按钮（跳转至编辑页）
$(".edit-btn").click(function() {
const courseId = $(this).data("course-id");
window.location.href = `/teacher/course-edit?courseId=${courseId}`;
});
// 3. 课程发布/下架逻辑（模拟）
// 发布课程
$(".online-btn").click(function() {
const courseId = $(this).data("course-id");
const $tr = $(this).closest("tr");
// 切换状态标签
$tr.find(".status-badge").removeClass("status-draft").addClass("status-published").text("已发布");
// 切换操作按钮
$(this).removeClass("btn-outline-success").addClass("btn-outline-secondary").text("下架").removeClass("online-btn").addClass("offline-btn");
$tr.find(".enroll-btn").prop("disabled", false);
alert("课程发布成功，学生可在课程列表中看到并报名！");
});
// 下架课程
$(".offline-btn").click(function() {
const courseId = $(this).data("course-id");
const $tr = $(this).closest("tr");
if (confirm("确定要下架该课程吗？下架后学生将无法报名，但已报名学生仍可正常学习。")) {
// 切换状态标签
$tr.find(".status-badge").removeClass("status-published").addClass("status-draft").text("草稿");
// 切换操作按钮
$(this).removeClass("btn-outline-secondary").addClass("btn-outline-success").text("发布").removeClass("offline-btn").addClass("online-btn");
alert("课程下架成功！");
}
});
// 4. 查看报名名单（模拟跳转）
$(".enroll-btn").click(function() {
const courseId = $(this).data("course-id");
const courseName = $(this).closest("tr").find("td:eq(1)").text();
// 模拟跳转至报名名单页
alert(`即将跳转到《${courseName}》的报名名单页（课程ID：${courseId}）`);
window.location.href = `/teacher/course-enroll?courseId=${courseId}`;
});
});
</script>
</body>
</html>
四、自我感想
作为一名计算机专业的学生，这次用飞算JavaAI开发在线教育平台，让我对“技术如何服务教育场景”有了更深刻的理解，也收获了远超“完成课程设计”的成长：
1. 从“会写代码”到“懂业务”的转变
最初我只关注“如何实现课程报名功能”，但在开发中发现，老师需要“限制未发布课程的报名权限”，学生需要“避免重复报名”——这些细节不是技术本身决定的，而是业务需求驱动的。飞算JavaAI在生成代码时，会通过注释提示“需校验课程状态”“需避免重复提交”，帮我跳出“纯技术思维”，学会从用户视角思考问题。比如作业提交模块，我原本只做了文件上传，后来根据飞算的提示添加了“截止时间校验”，避免学生提交过期作业，这正是老师实际教学中需要的功能。
2. 飞算JavaAI让我专注“核心价值”
以前开发时，我要花2天时间写Entity、Mapper层的重复代码（比如每个实体的get/set、每个Mapper的CRUD方法），现在飞算20分钟就能生成规范的基础代码，还自带参数校验和事务控制。这让我有更多精力投入到“提升用户体验”的细节上：比如为视频播放添加进度记忆（学生下次打开能接着看），为作业提交添加文件格式校验（只允许PDF/Word），这些功能虽小，却直接影响系统的实用性。我也终于明白，AI工具不是“代替开发者”，而是帮我们把时间花在更有价值的地方。
3. 解决问题的能力在实践中提升
开发中遇到的“视频无法播放”“作业重复提交”等问题，让我对技术的理解从“会用”变成“能用好”。比如视频播放问题，最初我把视频存在本地目录，浏览器因“跨域”无法访问，后来参考飞算生成的WebConfig.java，添加了静态资源映射（registry.addResourceHandler("/video/**").addResourceLocations("file:D:/education-videos/")），顺利解决问题；再比如作业重复提交，我通过在数据库添加“student_id+homework_id”的唯一索引，从根本上避免了重复数据——这些解决方法不是课本上的理论，而是实际开发中的经验积累。
总结
本次基于飞算JavaAI的在线教育平台开发，完整覆盖了“需求分析→环境搭建→模块开发→网页实现→问题优化”的全流程，最终实现了支持学生“选课-学习-提交作业-查成绩”、老师“建课-传视频-批作业-录成绩”的核心功能，切实解决了传统在线教育平台“功能冗余、操作复杂”的痛点。
系统的核心价值在于两点：一是效率提升，飞算JavaAI将开发周期从原本的2周缩短到5天，让学生开发者能快速落地想法；二是业务适配，通过精准的需求解析和业务逻辑生成，确保系统贴合学生与老师的实际使用场景。
后续我计划从两个方向优化系统：一是添加AI课程推荐，基于学生的选课记录和成绩数据，推荐适合的课程（比如给Java成绩差的学生推荐“Java基础补学课”）；二是对接学习社区，支持学生在课程下提问、分享笔记，增强互动性。这次开发让我坚信，只要选对工具、贴近需求，学生也能开发出有实际价值的系统。
转载自CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/yunjianyue1314/article/details/151718156
