全栈项目整体拆分

主流部署的全栈项目分为三个部分，各司其职：

• 前端项目：用户浏览器能看到的页面、按钮、样式
• 后端项目：接口、数据处理、数据库读写、权限校验
• 数据库：存储账号、内容、日志等所有项目数据

数据流向：

请求进来：routes路由 → controller控制台 → service业务层 → model数据模型 → 数据库
响应返回：数据库 → model →service → controller → routes → 前端

逐层讲解：

• routes 路由（门卫）

用户在前端点【登录 / 查询列表】，发送接口请求。
routes 的作用：识别这个请求是谁的，转发给对应控制器。只负责分发，不处理业务。

• controller 控制器（前台接待）

接收路由转发的请求，拿到前端传的参数（账号、密码、页码等）。
只做两件事：接收参数、调用 service、等待结果返回。不写复杂逻辑，纯中转。

• service 业务层（真正干活的员工）

整个项目的大脑判断密码对不对、筛选数据、计算金额、判断权限、处理所有逻辑。
controller 只是传话，真正的功能全在 service。

• model 数据模型（数据说明书）

规定：数据库里的字段叫什么、是什么类型。
service 要操作数据，必须通过 model，不能直接操作数据库。

• 数据库（仓库）

最终存储数据的地方，被 model 调取数据、写入数据。

前端项目结构（Vue/React 通用）

以最常用的 Vue 项目为例，目录结构如下：

frontend/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── router/
│   ├── store/
│   ├── api/
│   ├── utils/
│   ├── App.vue
│   └── main.js
├── .env / .env.production
├── package.json
├── vite.config.js / vue.config.js
└── README.md

逐个文件 / 文件夹作用：
1.public：存放不会被编译的静态资源：网站图标 favicon、纯静态 html 文件，打包后会直接原封不动放到部署目录。
2.src：前端源代码根目录，所有开发代码都在这里：

• assets：图片、字体、全局样式 CSS
• components：公共小组件，如按钮、导航栏、弹窗，多个页面可复用
• views：完整页面，如登录页、首页、个人中心
• router：路由配置，控制输入网址后跳转的对应页面
• store：全局状态管理，存储登录账号、全局配置等所有页面共用的数据
• api：接口请求文件，统一编写后端接口的调用地址
• utils：工具函数，如时间格式化、数据加密
• App.vue：项目根组件，所有页面都在这个文件内展示
• main.js：项目入口文件，启动前端项目的核心入口

3..env / .env.production：环境配置文件，区分开发 / 生产环境：开发时用本地后端地址，部署上线后用服务器后端地址。
4.package.json：核心依赖清单，记录项目需要安装的第三方工具、启动命令、打包命令。部署时执行npm install，会根据该文件自动下载所有依赖。
5.vite.config.js / vue.config.js：前端工程配置，可设置项目端口、跨域代理、打包路径、别名等参数。
6.README.md：项目说明文档，标注启动命令、依赖版本、注意事项。

前端部署核心原理

• 开发环境：执行npm run dev，启动本地开发服务，本地预览项目
• 上线部署：执行npm run build，将源代码编译打包，生成dist静态文件夹

打包后的 dist 实际上只有一个 index.html + 一个 JS 文件 + 一个 CSS 文件（其他图片/font等）。所有组件、路由、状态都在那个 JS 里了。

• 服务器部署：把 dist 文件夹放到 Nginx 站点目录中，配置域名指向，用户访问域名即可加载页面

后端项目结构（以 Node，Java，Python 通用版举例）

后端主流技术栈：Node (Express/Nest)、Java (SpringBoot)、Python (Django/Flask)，核心目录逻辑一致，以通用结构为例：

backend/
├── controller/
├── service/
├── model/
├── config/
├── utils/
├── routes/
├── static/
├── .env
├── package.json / pom.xml / requirements.txt
├── app.js / main.py / Application.java
└── README.md

逐个文件 / 文件夹作用：
1.controller接口控制器：接收前端发来的请求，明确前端调用的接口，是前后端数据交互的第一层入口。
2.service业务逻辑层：核心逻辑处理位置，如登录密码校验、订单计算、数据筛选，controller 仅调用该层，不写复杂逻辑。
3.model数据模型层：定义数据库表的对应结构，规定数据的字段名称、数据类型。
4.config配置文件：存放数据库地址、账号密码、项目端口、密钥、跨域配置等核心配置。
5.utils工具库：封装通用能力，如日志打印、数据加密、文件上传、格式处理。
6.routes路由列表：登记所有后端接口地址，例如/login、/getList，实现接口路径和 controller 的绑定。
7.static后端静态资源：存放后端提供的图片、文件等资源。
8..env：后端环境变量，配置数据库账号、服务器端口、第三方服务密钥等敏感信息。
9.依赖配置文件：

• Node：package.json
• Java：pom.xml
• Python：requirements.txt 作用一致：记录项目所需的所有第三方依赖包。

10.app.js / main.py / Application.java：后端项目入口文件，启动该文件即可运行后端服务，开启接口监听。

后端部署核心原理

• 后端启动后，会固定监听一个端口，如 3000、8080
• 前端通过接口地址http://服务器IP:端口/接口路径向后端发送请求
• 后端接收请求→执行业务逻辑→操作数据库→将结果返回给前端
• 部署方式：服务器安装对应运行环境（Node/JDK/Python），安装依赖后启动项目，搭配 pm2、systemd 实现项目后台常驻运行

启动方式：① Java SpringBoot 项目：

启动命令：nohup java -jar 项目名.jar 
作用：后台常驻运行，关闭窗口项目也不挂

② Node.js 项目

安装依赖：npm install
启动命令：pm2 start app.js

③ Python Django/Flask 项目

安装依赖：pip install -r requirements.txt
启动命令：pm2 start main.py

浏览器访问：服务器IP:端口，如果能访问、不报错、有接口返回ze后端部署成功

数据库目录（无代码文件，理解逻辑即可）

常见数据库：MySQL、PostgreSQL、MongoDB核心文件 / 脚本：

• sql 脚本：项目初始化数据库表结构、默认数据的脚本
• 数据库存储目录：数据库真实数据的存放位置，无需手动修改

数据库部署原理

• 服务器安装数据库软件
• 新建专属数据库，导入项目提供的 sql 初始化脚本
• 在后端.env 配置文件中填写数据库 IP、账号、密码、库名

具体步骤：找到项目的配置文件：.env / application.yml / application.properties / config.py，修改这4项：数据库地址：改为 127.0.0.1，数据库用户名，数据库密码，数据库名称

• 后端成功连接数据库后，即可正常读写项目数据

服务器部署必备工具

1.Nginx核心作用：反向代理、静态资源托管、域名绑定、SSL 证书配置 https，是前端部署的核心工具。

server {
    listen 80;
    server_name 你的域名或IP;

    root /你的dist路径;
    index index.html;

    # 解决前端刷新404
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 所有接口请求转发给后端
    location /api/ {
        proxy_pass http://127.0.0.1:后端端口/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

2.pm2：Node项目常用，实现后端进程守护，项目意外崩溃后可自动重启。
3.防火墙：开放服务器对应端口，保证外部设备可正常访问项目。
4.域名 DNS 解析：将域名指向服务器公网 IP，实现域名访问项目。

完整全栈项目运行整体流程

梳理一遍端到端的请求链路，彻底理解运行原理：
1.用户在浏览器输入域名 → 解析到服务器 Nginx
2.Nginx 识别请求类型：静态页面请求→直接返回前端 dist 资源；接口请求→转发给后端服务
3.后端接收接口请求 → 调用业务逻辑 → 读写数据库获取数据
4.后端将处理结果返回给前端
5.前端接收数据后，渲染展示到页面上

部署步骤

• 服务器安装运行环境：Nginx、MySQL、Node/JDK/Python
• 导入数据库 sql 脚本，完成数据库初始化
• 上传后端代码至服务器，安装依赖、配置.env 数据库信息，后台启动后端服务
• 前端本地执行打包命令，生成 dist 文件夹
• 将 dist 上传至服务器，配置 Nginx 文件，绑定域名 / 端口
• 放行服务器防火墙对应端口，完成部署，域名即可正常访问项目