InsightEdu - 轻量智能学习平台

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)

核心功能

python 复制代码

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)

python 复制代码

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)

python 复制代码

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)

python 复制代码

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)

python 复制代码

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)

python 复制代码

@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)

核心功能

python 复制代码

// 统一请求拦截 - 自动添加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)

角色权限装饰器

python 复制代码

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解析器

javascript 复制代码

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变量系统

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：高性能后端服务

技术亮点

FastAPI异步架构：高性能Web服务
SQLAlchemy 2.0 ORM：类型安全的数据库操作
JWT认证：无状态身份验证
Dify AI集成：快速接入智能问答
API分层封装：统一请求管理
CSS变量系统：全局样式统一
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平台

如有疑问，欢迎交流！