feat: 完成智能开发订单班展示页面
订单班: 智能开发 (Developer) 项目主题: 在线教育平台全栈开发项目 设计主题: 紫罗兰科技风格 (#8b5cf6, #a855f7, #c084fc) ✅ 完成内容: - 创建完整HTML展示页面 (34KB, 672行) - 创建紫罗兰主题CSS文件 (24KB, 962行) - 创建交互JavaScript文件 (8.6KB, 268行) - 配置4个专家代理与内容区块 - 实现明暗主题切换功能 - 实现图片懒加载与动画效果 📊 核心数据展示: - 支持并发: 10万+在线用户 - 功能模块: 6大核心模块 - 微服务数量: 8个 - Redis节点: 6节点集群 - 直播延迟: <3秒 - 数据库QPS: 5000 - 消息TPS: 10000 🎯 技术栈: - 前端: React 18 + TypeScript + Vite - 后端: Spring Boot 微服务 - 数据库: MySQL主从 + Redis集群 - 直播: 阿里云视频直播 - 部署: Docker + K8s 💻 项目进度: - ✅ 食品 (完成) - ✅ 财经商贸 (完成) - ✅ 环保 (完成) - ✅ 化工 (完成) - ✅ 交通物流 (完成) - ✅ 智能制造 (完成) - ✅ 智能开发 (完成) ← 当前 - ⏳ 大健康 (待开发) - ⏳ 能源 (待开发) - ⏳ 视觉设计 (待开发) - ⏳ 土木 (待开发) - ⏳ 文旅 (待开发) 总进度: 7/12 订单班完成
This commit is contained in:
Yep_Q
672
web_frontend/web_result/order-classes/developer/index.html
Normal file
672
web_frontend/web_result/order-classes/developer/index.html
Normal file
@@ -0,0 +1,672 @@
|
||||
<!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 rel="stylesheet" href="css/styles.css">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
</head>
|
||||
<body class="dark-theme">
|
||||
<!-- 主题切换按钮 -->
|
||||
<div class="theme-toggle">
|
||||
<button id="themeToggleBtn" class="theme-toggle-btn">
|
||||
<i data-lucide="sun" class="theme-icon theme-icon-light"></i>
|
||||
<i data-lucide="moon" class="theme-icon theme-icon-dark"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Hero 区域 -->
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">💻 智能开发订单班</div>
|
||||
<h1 class="hero-title">在线教育平台<br>全栈开发项目</h1>
|
||||
<h2 class="hero-subtitle">K12直播教学与智能学习管理系统</h2>
|
||||
<p class="hero-description">
|
||||
<i data-lucide="video"></i> 实时直播互动教学<br>
|
||||
<i data-lucide="play-circle"></i> 智能回放与点播<br>
|
||||
<i data-lucide="brain"></i> AI学习进度追踪
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<div class="nav-item active">
|
||||
<i data-lucide="target"></i>
|
||||
<span>项目概述</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<i data-lucide="layout"></i>
|
||||
<span>系统架构</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<i data-lucide="package"></i>
|
||||
<span>核心功能</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<i data-lucide="code"></i>
|
||||
<span>技术实现</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Section 1: 项目概述与目标 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img src="agent-avatars/产品经理.jpg" alt="产品经理" class="agent-avatar">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">
|
||||
<i data-lucide="briefcase"></i> 产品经理
|
||||
</div>
|
||||
<h2 class="section-title">项目概述与目标</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="lightbulb"></i> 项目背景</h3>
|
||||
<p>随着互联网教育的快速发展，K12教育领域对于在线学习的需求日益增长，尤其是直播和回放课程的需求不断上升。本项目旨在开发一个高效、稳定、互动性强的在线教育平台，支持直播教学、直播回放、课后作业管理、学生进度追踪、在线考试与反馈等功能。平台通过实时互动与多样化学习方式，提升学生的学习体验，帮助教师更好地管理课程和学生。</p>
|
||||
</div>
|
||||
|
||||
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
|
||||
<img data-src="images/首页.jpg" alt="平台首页" loading="lazy">
|
||||
<div class="image-caption">在线教育平台首页展示</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">核心目标</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="video"></i> 直播教学与回放:实时互动、连麦举手</li>
|
||||
<li><i data-lucide="file-text"></i> 作业与考试管理:自动批改、实时反馈</li>
|
||||
<li><i data-lucide="trending-up"></i> 学习进度追踪:AI分析、个性化建议</li>
|
||||
<li><i data-lucide="zap"></i> 高并发支持:10万+在线、流畅无延迟</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">项目范围</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="user"></i> 学生端:直播观看、作业提交、进度查看</li>
|
||||
<li><i data-lucide="user-check"></i> 教师端:课程管理、作业批改、学员互动</li>
|
||||
<li><i data-lucide="building"></i> 机构端:课程发布、资源调度、财务管理</li>
|
||||
<li><i data-lucide="settings"></i> 运维端:权限管理、数据监控、系统维护</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3" style="margin-top: var(--spacing-xl);">
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/课程直播间.jpg" alt="直播间" loading="lazy">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">直播教学</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>实时直播互动，支持举手连麦、聊天问答、白板演示等多种互动方式。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/课程内容.jpg" alt="课程内容" loading="lazy">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">课程管理</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>完善的课程创建、编辑、发布流程，支持多种课程形式和资料上传。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/智能学习数据分析.jpg" alt="数据分析" loading="lazy">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">智能分析</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>AI驱动的学习数据分析，提供个性化学习路径和智能推荐。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">支持并发</div>
|
||||
<div class="stat-value concurrent-users">0万</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">开发周期</div>
|
||||
<div class="stat-value">9个月</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">功能模块</div>
|
||||
<div class="stat-value feature-modules">0个</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">用户角色</div>
|
||||
<div class="stat-value">4种</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 2: 系统架构设计 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img src="agent-avatars/平台架构师.jpg" alt="平台架构师" class="agent-avatar">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">
|
||||
<i data-lucide="layers"></i> 平台架构师
|
||||
</div>
|
||||
<h2 class="section-title">系统架构设计</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="box"></i> 技术架构</h3>
|
||||
<p>平台采用前后端分离架构，使用微服务设计模式，确保系统的高可用性、可扩展性和高并发处理能力。前端使用React构建，后端基于Spring Boot微服务框架，数据库采用MySQL主从复制+Redis缓存，直播服务使用阿里云/腾讯云视频直播解决方案。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3" style="margin-bottom: var(--spacing-xl);">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">前端技术栈</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>React + TypeScript</strong></p>
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="layout"></i> React 18 + Hooks</li>
|
||||
<li><i data-lucide="database"></i> Redux Toolkit状态管理</li>
|
||||
<li><i data-lucide="palette"></i> Ant Design UI组件库</li>
|
||||
<li><i data-lucide="zap"></i> Vite构建工具</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">后端技术栈</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>Spring Boot微服务</strong></p>
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="server"></i> Spring Boot 2.7</li>
|
||||
<li><i data-lucide="shield"></i> Spring Security + JWT</li>
|
||||
<li><i data-lucide="database"></i> MyBatis Plus ORM</li>
|
||||
<li><i data-lucide="cloud"></i> Spring Cloud微服务</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">基础设施</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>云原生部署</strong></p>
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="database"></i> MySQL 8.0主从复制</li>
|
||||
<li><i data-lucide="zap"></i> Redis 6.0缓存集群</li>
|
||||
<li><i data-lucide="video"></i> 阿里云视频直播</li>
|
||||
<li><i data-lucide="box"></i> Docker + K8s部署</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>架构层次</th>
|
||||
<th>技术选型</th>
|
||||
<th>核心功能</th>
|
||||
<th>性能指标</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>前端层</td>
|
||||
<td>React + TypeScript + Vite</td>
|
||||
<td>用户界面、交互逻辑</td>
|
||||
<td>首屏加载<2s</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>网关层</td>
|
||||
<td>Spring Cloud Gateway</td>
|
||||
<td>路由转发、负载均衡</td>
|
||||
<td>QPS>10000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>服务层</td>
|
||||
<td>Spring Boot微服务</td>
|
||||
<td>业务逻辑处理</td>
|
||||
<td>响应时间<200ms</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数据层</td>
|
||||
<td>MySQL + Redis</td>
|
||||
<td>数据存储与缓存</td>
|
||||
<td>读写分离，缓存命中率>80%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>直播层</td>
|
||||
<td>阿里云视频直播</td>
|
||||
<td>直播推流、拉流</td>
|
||||
<td>延迟<3s，支持10万并发</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>存储层</td>
|
||||
<td>阿里云OSS</td>
|
||||
<td>视频、文件存储</td>
|
||||
<td>CDN加速，全球可用</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">微服务数量</div>
|
||||
<div class="stat-value microservices-count">0个</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">数据库节点</div>
|
||||
<div class="stat-value">3个</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">缓存集群</div>
|
||||
<div class="stat-value redis-nodes">0节点</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">CDN节点</div>
|
||||
<div class="stat-value">100+</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 3: 核心功能模块 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img src="agent-avatars/前端开发工程师.jpg" alt="前端开发工程师" class="agent-avatar">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">
|
||||
<i data-lucide="code"></i> 前端开发工程师
|
||||
</div>
|
||||
<h2 class="section-title">核心功能模块</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="blocks"></i> 功能模块</h3>
|
||||
<p>平台包含用户系统、课程管理、直播系统、作业考试、支付订单、数据分析等6大核心模块。每个模块都经过精心设计，确保用户体验流畅、功能完善、数据安全。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-4" style="margin-bottom: var(--spacing-xl);">
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/注册界面.jpg" alt="用户注册" loading="lazy">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">用户系统</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="user-plus"></i> 多方式注册登录</li>
|
||||
<li><i data-lucide="shield"></i> JWT身份认证</li>
|
||||
<li><i data-lucide="users"></i> RBAC权限管理</li>
|
||||
<li><i data-lucide="key"></i> Token自动刷新</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/热门课程.jpg" alt="课程展示" loading="lazy">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">课程管理</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="plus-circle"></i> 课程创建编辑</li>
|
||||
<li><i data-lucide="search"></i> 智能搜索推荐</li>
|
||||
<li><i data-lucide="upload"></i> 资料上传管理</li>
|
||||
<li><i data-lucide="calendar"></i> 课程安排调度</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/课程直播间.jpg" alt="直播间" loading="lazy">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">直播系统</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="video"></i> 实时直播推流</li>
|
||||
<li><i data-lucide="message-circle"></i> 互动聊天问答</li>
|
||||
<li><i data-lucide="hand"></i> 举手连麦功能</li>
|
||||
<li><i data-lucide="play"></i> 直播回放点播</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/智能学习数据分析.jpg" alt="数据分析" loading="lazy">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">数据分析</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="bar-chart"></i> 学习进度统计</li>
|
||||
<li><i data-lucide="pie-chart"></i> 成绩数据分析</li>
|
||||
<li><i data-lucide="brain"></i> AI智能推荐</li>
|
||||
<li><i data-lucide="trending-up"></i> 个性化建议</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">作业考试模块</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>智能批改与反馈</strong></p>
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="file-text"></i> 作业在线布置与提交</li>
|
||||
<li><i data-lucide="check-circle"></i> 自动批改客观题</li>
|
||||
<li><i data-lucide="edit"></i> 教师批改主观题</li>
|
||||
<li><i data-lucide="award"></i> 成绩反馈与统计</li>
|
||||
<li><i data-lucide="calendar-check"></i> 在线考试与监考</li>
|
||||
<li><i data-lucide="clock"></i> 限时答题与自动提交</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">支付订单模块</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>安全便捷支付</strong></p>
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="credit-card"></i> 支付宝/微信支付</li>
|
||||
<li><i data-lucide="shopping-cart"></i> 购物车与订单管理</li>
|
||||
<li><i data-lucide="ticket"></i> 优惠券与促销活动</li>
|
||||
<li><i data-lucide="file-spreadsheet"></i> 订单状态追踪</li>
|
||||
<li><i data-lucide="repeat"></i> 退款与售后处理</li>
|
||||
<li><i data-lucide="bar-chart-2"></i> 财务报表统计</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">用户注册方式</div>
|
||||
<div class="stat-value">3种</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">直播延迟</div>
|
||||
<div class="stat-value live-latency">0秒</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">支付方式</div>
|
||||
<div class="stat-value">2种</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">首屏加载</div>
|
||||
<div class="stat-value">2秒</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 4: 技术实现与优化 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img src="agent-avatars/后端开发工程师.jpg" alt="后端开发工程师" class="agent-avatar">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">
|
||||
<i data-lucide="server"></i> 后端开发工程师
|
||||
</div>
|
||||
<h2 class="section-title">技术实现与优化</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="code-2"></i> 技术实现</h3>
|
||||
<p>平台采用多项优化技术确保高性能和高可用性。包括数据库读写分离、Redis缓存优化、CDN加速、消息队列异步处理、微服务治理等。通过合理的架构设计和技术选型，平台能够稳定支撑10万+并发用户同时在线。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3" style="margin-bottom: var(--spacing-xl);">
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/API配置界面.jpg" alt="API配置" loading="lazy">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">API网关</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="shield-check"></i> 统一鉴权认证</li>
|
||||
<li><i data-lucide="gauge"></i> 流量限流熔断</li>
|
||||
<li><i data-lucide="route"></i> 动态路由转发</li>
|
||||
<li><i data-lucide="activity"></i> 实时监控告警</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/用户信息后台数据.jpg" alt="数据管理" loading="lazy">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">数据优化</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="database"></i> 读写分离架构</li>
|
||||
<li><i data-lucide="zap"></i> Redis多级缓存</li>
|
||||
<li><i data-lucide="hard-drive"></i> 分库分表设计</li>
|
||||
<li><i data-lucide="archive"></i> 冷热数据分离</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/课程信息后台数据.jpg" alt="课程数据" loading="lazy">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">性能优化</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="cloud"></i> CDN全球加速</li>
|
||||
<li><i data-lucide="layers"></i> 静态资源压缩</li>
|
||||
<li><i data-lucide="repeat"></i> 消息队列异步</li>
|
||||
<li><i data-lucide="trending-up"></i> 负载均衡优化</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>优化项</th>
|
||||
<th>技术方案</th>
|
||||
<th>实现效果</th>
|
||||
<th>性能指标</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>数据库优化</td>
|
||||
<td>MySQL主从复制+读写分离</td>
|
||||
<td>读写性能提升3倍</td>
|
||||
<td>QPS>5000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>缓存优化</td>
|
||||
<td>Redis集群+多级缓存</td>
|
||||
<td>响应时间降低80%</td>
|
||||
<td>缓存命中率>85%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>直播优化</td>
|
||||
<td>阿里云CDN+智能调度</td>
|
||||
<td>全球流畅观看</td>
|
||||
<td>延迟<3s</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>前端优化</td>
|
||||
<td>Webpack分包+懒加载</td>
|
||||
<td>首屏加载提速50%</td>
|
||||
<td>FCP<1.5s</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>异步处理</td>
|
||||
<td>RabbitMQ消息队列</td>
|
||||
<td>系统吞吐量提升5倍</td>
|
||||
<td>TPS>10000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>服务治理</td>
|
||||
<td>Nacos+Sentinel</td>
|
||||
<td>服务高可用99.9%</td>
|
||||
<td>故障自愈<30s</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">API响应时间</div>
|
||||
<div class="stat-value">200ms</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">系统可用性</div>
|
||||
<div class="stat-value">99.9%</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">数据库QPS</div>
|
||||
<div class="stat-value db-qps">0</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">消息TPS</div>
|
||||
<div class="stat-value message-tps">0万</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer: 项目成果总结 -->
|
||||
<section class="section" style="background: var(--bg-semi-dark); padding: var(--spacing-3xl) 0;">
|
||||
<div class="container">
|
||||
<h2 class="section-title text-center" style="margin-bottom: var(--spacing-2xl);">
|
||||
<i data-lucide="award"></i> 项目成果总结
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-3">
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h3 class="card-title">💻 技术架构</h3>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="layout"></i> React 18 + TypeScript前端</li>
|
||||
<li><i data-lucide="server"></i> Spring Boot微服务后端</li>
|
||||
<li><i data-lucide="database"></i> MySQL主从+Redis集群</li>
|
||||
<li><i data-lucide="video"></i> 阿里云视频直播服务</li>
|
||||
<li><i data-lucide="cloud"></i> Spring Cloud微服务治理</li>
|
||||
<li><i data-lucide="box"></i> Docker + K8s容器化</li>
|
||||
<li><i data-lucide="shield"></i> JWT认证+RBAC权限</li>
|
||||
<li><i data-lucide="zap"></i> RabbitMQ消息队列</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h3 class="card-title">⚡ 核心功能</h3>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="video"></i> 实时直播互动教学</li>
|
||||
<li><i data-lucide="play-circle"></i> 直播回放智能点播</li>
|
||||
<li><i data-lucide="file-text"></i> 作业考试自动批改</li>
|
||||
<li><i data-lucide="brain"></i> AI学习进度追踪</li>
|
||||
<li><i data-lucide="credit-card"></i> 在线支付订单管理</li>
|
||||
<li><i data-lucide="bar-chart"></i> 数据分析智能推荐</li>
|
||||
<li><i data-lucide="users"></i> 多角色权限管理</li>
|
||||
<li><i data-lucide="settings"></i> 系统监控运维管理</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h3 class="card-title">🎯 性能指标</h3>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="users"></i> 支持10万+并发在线</li>
|
||||
<li><i data-lucide="gauge"></i> API响应<200ms</li>
|
||||
<li><i data-lucide="zap"></i> 首屏加载<2秒</li>
|
||||
<li><i data-lucide="video"></i> 直播延迟<3秒</li>
|
||||
<li><i data-lucide="database"></i> 数据库QPS>5000</li>
|
||||
<li><i data-lucide="repeat"></i> 消息TPS>10000</li>
|
||||
<li><i data-lucide="shield-check"></i> 系统可用性99.9%</li>
|
||||
<li><i data-lucide="cloud"></i> CDN全球加速</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center" style="margin-top: var(--spacing-2xl); color: var(--text-gray);">
|
||||
<p>💻 在线教育平台全栈开发项目圆满完成!</p>
|
||||
<p style="margin-top: var(--spacing-sm);">© 2024 智能开发订单班 | K12在线教育解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user