纯代码重构 MBA 培训管理系统 (一)：架构选型与全栈脚手架搭建

前言
[一、系统全貌与架构选型](#一、系统全貌与架构选型)
[二、在 Trae 中初始化项目脚手架](#二、在 Trae 中初始化项目脚手架)
[三、安装核心依赖](#三、安装核心依赖)
[四、核心架构：构建目录树](#四、核心架构：构建目录树)
[五、跑通第一行代码](#五、跑通第一行代码)

前言

本教程将带你从零开始，使用现代主流技术栈构建一个完整的 MBA 培训管理系统。我们将涵盖系统管理、CRM 客户管理、课程管理等核心功能模块。

通过本教程，你将掌握如何使用 Next.js + Prisma + PostgreSQL 构建生产级的全栈应用，从数据库设计到前端界面，从权限控制到业务逻辑，完整地走一遍现代 Web 开发的完整流程。

一、系统全貌与架构选型

我们将要构建的，不仅仅是一个增删改查的后台，而是一个包含L2C（线索到现金）完整流转、细粒度 RBAC 权限控制、多端适配的现代 Web 应用。

为了支撑这个目标，不引入过多的复杂度，我们采用全栈一体化架构。

核心技术栈：

核心框架： Next.js (App Router) ------ 提供极致的渲染性能与统一的前后端路由体验。
数据引擎： PostgreSQL + Prisma ORM ------ 强类型数据库与开箱即用的关系建模，完美契合 CRM 业务。
UI 基建： Tailwind CSS + shadcn/ui ------ 不被庞大组件库绑架，拥有像素级的界面掌控力。
身份认证： NextAuth.js ------ 标准化处理登录态与基础鉴权。

二、在 Trae 中初始化项目脚手架

工欲善其事，必先利其器。本次开发我们将全程在 Trae中完成。

打开cmd，我们使用 Next.js 官方提供的脚手架一键生成项目。

在终端中输入以下命令：

bash 复制代码

npx create-next-app@latest mba-system

三、安装核心依赖

初始化成功后，需要按照项目必要的依赖型。打开我们的trae，点击文件-》打开文件夹，选择我们的工程目录

点击导航栏的终端，点击新建终端

依次在终端中执行一下命令，来安装依赖

1. 安装 Prisma 与 PostgreSQL 驱动

bash 复制代码

npm install prisma --save-dev
npm install @prisma/client
# Prisma 7+ 需要使用适配器连接 PostgreSQL
npm install @prisma/adapter-pg pg
npm install -D @types/pg

注：本地需要已安装并启动 PostgreSQL 数据库。

2. 安装身份认证与密码加密模块

bash 复制代码

npm install next-auth bcryptjs
npm install @types/bcryptjs --save-dev

3. 初始化 shadcn/ui

这套 UI 方案无需安装庞大的 npm 包，而是将代码直接注入到项目中。

bash 复制代码

npx shadcn@latest init

四、核心架构：构建目录树

依赖安装好了之后，需要构思一下文件夹。目前的文件夹规划如下

text 复制代码

/src
  /app                # 【路由与 UI 层】只负责"长什么样"和接收请求
    /api              # 提供给外部或客户端的接口
    /(dashboard)      # 系统后台的页面路由
    /login            # 登录页面

  /components         # 【公共 UI 层】
    /ui               # shadcn 自动生成的原子组件 (Button, Input等)
    /shared           # 跨业务模块的通用组件 (如顶部导航、侧边栏)

  /modules            # 【🌟 核心业务领域层】业务逻辑的唯一归属地
    /auth             # 登录、认证相关逻辑
    /lead             # 线索领域：lead.schema.ts(校验), lead.service.ts(逻辑), lead.actions.ts(前后端桥梁)
    /customer         # 客户领域
    /opportunity      # 商机领域

  /core               # 【底层基建层】
    rbac.ts           # 角色与权限拦截逻辑
    exceptions.ts     # 全局异常与错误码统一定义

  /lib                # 【第三方工具实例】
    prisma.ts         # Prisma 单例连接池
    utils.ts          # 通用帮助函数 (如 cn 拼接类名)

默认安装后，app目录是在根目录，我们先创建一个src文件夹

将app、components、lib文件夹移入到src下，修改一下tsconfig.json 的 paths，改为

bash 复制代码

"paths": {
  "@/*": ["./src/*"]
}

五、跑通第一行代码

在 Trae 终端中，启动开发服务器测试我们的成果：

bash 复制代码

npm run dev

打开浏览器访问 http://localhost:3000，看到 Next.js 的初始页面，说明全栈脚手架已稳稳落地。

纯代码重构 MBA 培训管理系统 (一)：架构选型与全栈脚手架搭建

目录

前言

一、 系统全貌与架构选型

二、 在 Trae 中初始化项目脚手架

三、 安装核心依赖

四、 核心架构：构建目录树

五、 跑通第一行代码

一、系统全貌与架构选型

二、在 Trae 中初始化项目脚手架

三、安装核心依赖

四、核心架构：构建目录树

五、跑通第一行代码