返回首页
published
healthy

学智 AI 平台

基于 Next.js 14 + Ant Design 的全栈教育平台前端,集成数据可视化、权限管理和数据库直连。

https://work-five-black.vercel.app

访问 Bob
Education
Next.js
Full-stack
Dashboard

-

项目说明

学智 AI 平台前端应用

一句话介绍

基于 Next.js 14 + React 18 + Ant Design 构建的全栈教育平台前端,集成数据可视化、身份认证和 PostgreSQL 数据库直连。

项目定位

本项目是学智 AI 教育平台的前端应用层,采用现代化的技术栈构建完整的教育管理界面。通过 React Server Components 实现服务端渲染和数据库直连,配合 Ant Design 企业级组件库,提供高性能、高可用的教育管理平台。

主要功能

1. 技术架构

采用 Next.js App Router 架构,充分利用服务端组件能力。

技术选型:

  • Next.js 14 App Router 架构
  • React 18 + React Server Components
  • Ant Design 5 企业级 UI 组件库
  • PostgreSQL 16 数据库直连
  • ECharts 6 + Recharts 数据可视化
  • Axios HTTP 客户端

2. 数据可视化

内置丰富的图表组件,支持教育数据的多维度展示。

图表能力:

  • ECharts 复杂交互图表
  • Recharts 响应式图表
  • 数据看板与统计分析
  • 实时数据更新

3. 身份认证与权限

完整的登录和权限管理系统。

权限功能:

  • 用户登录/注册
  • 角色权限控制
  • 会话管理
  • 路由守卫

4. 数据库直连

Server Components 直接查询 PostgreSQL,减少 API 中间层。

直连优势:

  • 减少请求链路
  • 服务端渲染数据预取
  • SQL 查询灵活高效
  • 类型安全的数据库操作

应用场景

在线教育平台

提供课程管理、学生管理、成绩统计等核心功能的前端界面。

教育数据看板

通过丰富的图表展示教学数据、学生行为分析和运营指标。

培训机构管理系统

管理学员信息、课程安排、教师资源和财务数据。

企业内部培训

为员工培训提供学习进度追踪、考核管理和证书发放功能。

产品价值

  • Server Components 直连数据库,性能优异
  • Ant Design 组件成熟稳定,开发效率高
  • 双图表库覆盖各类可视化需求
  • 完整权限体系支持多角色管理
  • Next.js 部署便捷,Vercel 一键上线