InsightEdu - 轻量智能学习平台

目录

一、项目背景

在线教育的发展趋势

现有平台的痛点

我们的解决方案

二、项目业务需求

核心功能模块

1. 用户系统

2. 课程系统

3. AI智能助手

4. 管理后台

三、业务流程

学生学习流程

教师管理流程

管理员流程

四、项目架构

全栈项目结构

技术架构图

五、项目技术栈

前端技术栈

后端技术栈

数据库

开发特性

六、核心模块技术讲解

1. 后端架构 - FastAPI应用 (main.py)

核心功能

技术亮点

2. 数据库模型设计

用户模型 (users.py)

课程模型 (course.py)

ER关系图

3. JWT认证系统

Token生成 (jwt_token.py)

用户认证流程

4. AI服务集成 (Dify)

AI聊天服务 (dify_service_chat.py)

章节学习助手 (ai.py)

5. 前端请求封装 (request.js)

核心功能

6. 权限控制 (permission.py)

角色权限装饰器

7. 前端AI聊天模块 (ai_chat.html)

功能特性

Markdown解析器

9. 全局样式设计 (global.css)

CSS变量系统

动画效果

七、项目总结展望

项目成果

技术亮点

未来展望

短期规划

长期规划

感谢观看本博客

项目信息

技术栈总结

---

项目gitee仓库：https://gitee.com/yi-tianxin/edu

一、项目背景

在线教育的发展趋势

• 在线学习需求激增：数字化转型加速，在线教育用户规模持续增长
• 个性化学习需求：传统教育难以满足个性化学习需求
• AI技术赋能：人工智能技术为教育创新提供新可能

现有平台的痛点

• 缺乏智能化学习辅助
• 学习体验单一化
• 缺乏个性化推荐

我们的解决方案

打造一个轻量、智能、易用的全栈在线学习平台，结合AI技术提供个性化学习体验

二、项目业务需求

核心功能模块

1. 用户系统

• 用户注册/登录
• 三种角色权限：学生、教师、管理员
• 个人中心管理
• 密码修改

2. 课程系统

• 课程浏览与搜索
• 课程分类筛选
• 课程详情查看
• 课程报名学习
• 学习进度追踪
• 课程收藏功能
• 浏览历史记录

3. AI智能助手

• AI问答交互
• Markdown格式支持
• 章节专属学习助手
• 清空历史记录

4. 管理后台

• 数据统计看板
• 用户管理（增删改查）
• 课程管理（课程、章节、分类）
• 权限控制

三、业务流程

四、项目架构

全栈项目结构

前端文件结构

Education_frontend/ ├── admin/ # 管理后台页面 ├── pages/ # 用户端页面 ├── assets/ # 静态资源文件夹 ├── css/ # 样式文件 └── js/ ├── api/ # API接口 ├── pages/ # 页面JS逻辑 ├── auth.js # 认证管理模块 ├── config.js # API基础配置 ├── request.js # Axios请求封装 └── utils.js # 前端工具函数集合

后端文件结构

Education_backend/ # 后端项目 ├── main.py # 主入口 ├── config/ # 配置文件 ├── models/ # orm数据模型 ├── schemas/ # Pydantic模型 ├── crud/ # 数据库操作 ├── routers/ # 路由 ├── services/ # AI业务服务 └── utils/ # 工具函数

技术架构图

五、项目技术栈

前端技术栈

技术	用途
HTML5	页面结构
CSS3	样式展示（含CSS变量、动画）
JavaScript (ES6+)	业务逻辑
Axios	HTTP请求库
LocalStorage	本地存储（Token）

后端技术栈

技术	用途
Python 3.11+	编程语言
FastAPI	Web框架
SQLAlchemy 2.0	ORM框架（异步）
aiomysql	MySQL异步驱动
PyJWT	JWT认证
httpx	HTTP客户端（调用AI服务）
Dify	AI应用平台

数据库

• MySQL：主数据库
• 数据表：users、courses、chapters、categories、favorites、histories

开发特性

• 模块化设计：前后端分离、API分层封装
• 响应式布局：适配不同屏幕尺寸
• 现代化UI：渐变色彩、毛玻璃效果、平滑动画
• 统一错误处理：请求拦截器统一处理
• Token认证：JWT机制
• 异步IO：FastAPI + SQLAlchemy异步
• 骨架屏加载：提升用户体验

六、核心模块技术讲解

1. 后端架构 - FastAPI应用 (main.py)

核心功能

from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware app = FastAPI(title="InsightEdu") # 跨域配置 app.add_middleware( CORSMiddleware, allow_origins=["*"], allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) # 路由注册 app.include_router(users_router) app.include_router(course_router) app.include_router(ai_router) app.include_router(admin_dashboard_router)

技术亮点

• 自动生成API文档（/docs）
• 异步请求处理
• 内置数据验证（Pydantic）
• 依赖注入系统

2. 数据库模型设计

用户模型 (users.py)

class UserRole(str, enum.Enum): student = "student" teacher = "teacher" admin = "admin" class User(Base, TimestampMixin): __tablename__ = "users" id: Mapped[int] = mapped_column(primary_key=True) username: Mapped[str] = mapped_column(unique=True) password_hash: Mapped[str] role: Mapped[UserRole] = mapped_column(default=UserRole.student) # 关系 courses = relationship("Course", back_populates="teacher") favorites = relationship("Favorite", back_populates="user")

课程模型 (course.py)

class Course(Base, TimestampMixin): __tablename__ = "courses" id: Mapped[int] = mapped_column(primary_key=True) title: Mapped[str] intro: Mapped[str | None] teacher_id: Mapped[int] = mapped_column(ForeignKey("users.id")) view_count: Mapped[int] = mapped_column(default=0) favorite_count: Mapped[int] = mapped_column(default=0)

ER关系图

3. JWT认证系统

Token生成 (jwt_token.py)

from jose import jwt from datetime import datetime, timedelta, timezone def create_access_token(user_id: int, role: str): expire = datetime.now(timezone.utc) + timedelta(minutes=60 * 24) payload = { "sub": str(user_id), "role": role, "exp": expire } return jwt.encode(payload, SECRET_KEY, algorithm=ALGORITHM)

用户认证流程

flowchart TD A[用户登录] --> B[验证用户名密码] B --> C[生成JWT Token] C --> D[返回Token给前端] D --> E[前端存储Token] E --> F[后续请求携带Token] F --> G[后端验证Token] G --> H[获取当前用户信息]

4. AI服务集成 (Dify)

AI聊天服务 (dify_service_chat.py)

import httpx async def chat_with_dify(message: str): headers = { "Authorization": f"Bearer {DIFY_API_KEY_CHAT}", "Content-Type": "application/json" } data = { "inputs": {}, "query": message, "response_mode": "blocking", "user": "user-1" } async with httpx.AsyncClient(timeout=60) as client: response = await client.post(DIFY_URL_CHAT, headers=headers, json=data) result = response.json() return result.get("answer")

章节学习助手 (ai.py)

@ai_router.post("/workflow") async def workflow( user_data: AIWorkFlowRequest, db: AsyncSession = Depends(get_db), user: User = Depends(get_current_user) ): # 查询章节和课程信息 chapter = await get_chapter_by_id(db, user_data.chapter_id) course = await get_course_by_id(db, chapter.course_id) # 调用 Dify Workflow ai_result = await chapter_ai_workflow( course_title=course.title, chapter_title=chapter.title, chapter_content=chapter.content, question=user_data.question ) return {"code": 200, "data": ai_result}

5. 前端请求封装 (request.js)

核心功能

// 统一请求拦截 - 自动添加Token axiosInstance.interceptors.request.use((config) => { const token = localStorage.getItem(CONFIG.STORAGE_KEYS.TOKEN); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }); // 统一响应拦截 - 错误处理 axiosInstance.interceptors.response.use( (response) => { // 业务逻辑处理 return response.data; }, (error) => { // 401自动跳转登录 if (error.response?.status === 401) { localStorage.removeItem(CONFIG.STORAGE_KEYS.TOKEN); if (!window.location.pathname.includes('login.html')) { window.location.href = CONFIG.ROUTES.LOGIN; } } return Promise.reject(error); } );

6. 权限控制 (permission.py)

角色权限装饰器

from fastapi import Depends, HTTPException, status from models.users import User, UserRole from utils.auth import get_current_user def require_role(required_role: str): async def role_checker(current_user: User = Depends(get_current_user)): if current_user.role != required_role: raise HTTPException( status_code=status.HTTP_403_FORBIDDEN, detail="权限不足" ) return current_user return role_checker # 使用示例 @admin_dashboard_router.get("/stats") async def get_statistics( user = Depends(require_role("admin")), db: AsyncSession = Depends(get_db) ): stats = await get_stats(db) return {"code": 200, "data": stats}

7. 前端AI聊天模块 (ai_chat.html)

功能特性

• 实时对话交互
• Markdown格式渲染
• 加载动画效果
• 清空历史记录

Markdown解析器

function parseMarkdown(text) { if (!text) return ''; let html = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); // 处理代码块 html = html.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>'); // 处理行内代码 html = html.replace(/`([^`]+)`/g, '<code>$1</code>'); // 处理标题 html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>'); html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>'); html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>'); // 处理粗体、斜体、列表等... return html; }

9. 全局样式设计 (global.css)

CSS变量系统

:root { --primary: #6366f1; --secondary: #8b5cf6; --accent: #f59e0b; --success: #10b981; --danger: #ef4444; --text-primary: #1f2937; --bg-primary: #ffffff; --border: #e5e7eb; }css

动画效果

• 骨架屏加载动画
• 卡片悬停上浮
• 按钮点击反馈
• Hero区域脉冲效果
• 聊天加载圆点动画

七、项目总结展望

项目成果

• 完整的全栈系统：前后端分离架构
• 代化UI设计：美观、流畅的用户体验
• 模块化架构：代码结构清晰，易于维护扩展
• AI功能集成：Dify平台智能问答 + 章节学习助手
• 响应式布局：多端适配
• 权限管理：三级角色权限控制
• 异步IO：高性能后端服务

技术亮点

1. FastAPI异步架构：高性能Web服务
2. SQLAlchemy 2.0 ORM：类型安全的数据库操作
3. JWT认证：无状态身份验证
4. Dify AI集成：快速接入智能问答
5. API分层封装：统一请求管理
6. CSS变量系统：全局样式统一
7. Markdown渲染：AI回答格式化

未来展望

短期规划

• 增加视频课程播放功能
• 添加学习笔记功能
• 完善课程评价系统
• 增加学习数据分析
• 优化AI回答质量

长期规划

• 引入更多AI功能（智能推荐、自动出题）
• 支持实时直播课程
• 增加社区互动功能
• 移动端App开发
• 微服务架构升级
• Redis缓存优化
• 消息队列异步处理

感谢观看本博客

项目信息

• 项目名称：轻量智能学习平台
• 技术方向：全栈开发（Python FastAPI + 原生JavaScript）
• 主要功能：在线学习 + AI智能助手
• 项目规模：前后端分离全栈项目

技术栈总结

• 前端：HTML5 + CSS3 + JavaScript ES6+ + Axios
• 后端：Python 3.11+ + FastAPI + SQLAlchemy 2.0
• 数据库：MySQL 8.0
• AI服务：Dify平台

如有疑问，欢迎交流！