前后分离登录系统（Vue3+SpringBoot）完整流程（可直接上线）

需求：比如说哈，我现在要做一个登录页面，上面要输入用户名，输入密码，输入错误 10 次就 6 小时不准输入了。那么我用 JAVA 写后端，我用 VUE3 写前端，前后分离，域名 + 服务器已备好，整理全套可落地流程，新手也能照着做！

流程链小标题（核心节点速览）

1. 后端Java：6个核心文件（4类核心+2个补充）

1. 前端Vue3：1个页面文件+1个必备请求工具

1. 服务器准备：安装3个核心软件+开放4个必备端口

1. 数据库部署：服务器建库建表+配置访问权限

1. 后端部署：配置服务器数据库+打包上传+常驻启动

1. 前端部署：打包静态文件+上传Nginx+配置域名/反向代理

1. 前后联调：配置接口地址+全场景测试验证

1. 可选完善：配置HTTPS+安全加固+日志记录

一、核心技术栈（先定基调）

后端

• 编程语言：Java

• 开发框架：SpringBoot

• 必备工具：Result（统一返回）、PasswordUtil（密码加密）

前端

• 开发框架：Vue3

• 核心技术：HTML（骨架）+ CSS（样式）+ JavaScript（交互）

• 必备工具：Axios（前后端通信）

服务器 + 域名

• 服务器公网 IP：[47.116.**.199](47.116.**.199)

• 域名：www.wslanst.com（已解析指向上述 IP）

二、核心文件（共 8 个，缺一不可）

后端 Java 文件（7 个角色，4 类核心）

1. 实体类（UserLogin.java）
   作用：数据模板图纸，专门封装 4 个核心数据（用户名、密码、错误次数、锁定截止时间），与数据库表一一对应，加注解标识字段。

1. Mapper/DAO（UserLoginMapper.java）
   作用：专门操作数据库，只干 2 件事，不写任何业务逻辑：

1. 根据用户名查询用户完整信息

1. 更新登录错误次数、账号锁定截止时间

1. Service 业务层（LoginService.java）
   作用：核心逻辑中枢，所有规则全在这里，负责 "脑子判断"：

1. 先判断账号是否处于 6 小时锁定期内

1. 校验用户名 + 密码是否匹配

1. 登录失败：错误次数 + 1

1. 错误次数满 10 次：设置 6 小时锁定时间

1. Controller 控制器（LoginController.java）
   作用：前后端中转站，只做 3 件事：

1. 接收 Vue3 前端传过来的用户名、密码

1. 调用 Service 层执行业务逻辑

1. 将结果（成功 / 密码错 / 已锁定）返回给前端

1. 补充：统一返回实体类（Result.java）
   作用：规范后端返回格式，给前端统一响应模板，避免格式混乱，固定返回 3 样东西：状态码、提示文案、携带数据。

1. 补充：密码加密工具类（PasswordUtil.java）
   作用：保障密码安全，只干 2 件事：

1. 对密码进行加密处理（数据库不存明文）

1. 登录时比对前端传参密码与数据库加密密码是否一致

前端 Vue3 相关（1 个页面 + 1 个工具）

1. 登录页面（Login.vue）
   作用：只管页面展示和传参，不做任何逻辑判断，内部包含 3 部分（缺一不可）：

1. HTML：用户名输入框、密码输入框、登录按钮、提示文字（还能输几次、已锁定请 6 小时后再试）

1. CSS：页面排版、配色、按钮样式、居中美化

1. JavaScript：按钮点击事件、请求发送、后端结果展示

1. 补充：前端请求工具（Axios）
   作用：Vue3 专属通信工具，唯一作用：帮 Login.vue 把账号密码发给后端接口，同时接收后端返回结果，没有它前后端无法通信。

三、极简汇总（快速记重点）

• 实体类：存数据的模板图纸

• Mapper：只管读写数据库，不做判断

• Service：核心规则（错 10 次锁 6 小时）

• Controller：对接前端，收参、返结果

• Result 类：统一后端返回格式，前端好解析

• PasswordUtil 类：密码加密，保障安全

• Vue 页面：界面展示、用户输入、传参

• Axios：前后端通信的 "桥梁"

四、服务器必备环境（已补全细节）

1. 必须安装 3 个核心软件：

1. JDK：运行 SpringBoot 后端

1. MySQL：存储账号、错误次数、锁定时间

1. Nginx：绑定域名、托管 Vue3 前端、实现反向代理

1. 防火墙必须开放 4 个端口（说明清晰，避免踩坑）：

1. 80 端口：http 协议域名访问（基础）

1. 443 端口：https 协议安全访问（正规网站必备）

1. 后端端口：供 SpringBoot 后端使用

1. MySQL 端口：建议限制内网访问（提升安全性，防止恶意攻击）

五、分步落地流程（可直接照做）

第一步：服务器端数据库准备

1. 在服务器 MySQL 中新建专属数据库

1. 新建登录数据表，字段固定 4 个：用户名、加密密码、错误次数、锁定截止时间（重点：密码不存明文）

1. 设置 MySQL 账号密码，配置权限，允许 SpringBoot 后端连接数据库

第二步：SpringBoot 后端处理 + 部署

1. 修改 SpringBoot 配置，将数据库连接改为服务器 MySQL 地址（脱离本地数据库）

1. 定义固定登录接口地址：/api/login（供前端 Vue3 统一调用）

1. 将后端项目打包成可运行文件

1. 上传至云服务器，设置后台常驻启动（关闭终端也能正常运行，不影响接收前端请求）

第三步：Vue3 前端打包 + Nginx 配置

1. 将 Vue3 项目打包成静态文件（包含 HTML、CSS、JavaScript）

1. 把打包文件上传到服务器 Nginx 指定目录

1. Nginx 核心 4 项配置（必做）：

1. 绑定域名www.wslanst.com

1. 配置域名默认访问登录首页（输入域名直接显示登录页）

1. 反向代理：将前端/api开头的请求，转发到后端端口

1. 配置跨域，解决前后端通信报错问题

第四步：前后端联调打通（验证全流程）

1. 前端 Axios 请求地址改为域名访问，统一路径：www.wslanst.com/api/login

1. 确认 Nginx 跨域、反向代理配置生效，前后端通信无报错

1. 全场景测试（必测，避免上线出问题）：

1. 登录成功：正常跳转、错误次数清空

1. 密码错误：提示错误、错误次数累加

1. 错误满 10 次：触发锁定、提示 6 小时后再试

1. 锁定期间登录：直接提示锁定，无法提交请求

第五步：可选完善（做成正规商用网站）

1. 配置 HTTPS ssl 证书，让网址显示绿色安全锁（提升可信度）

1. 设置后端开机自启、意外崩溃自动重启（服务器重启后不影响使用）

1. 服务器安全加固：关闭不必要端口、限制 MySQL 外网访问

1. 新增登录日志记录（记录登录时间、登录状态、锁定记录，方便后续排查问题）

最后总结

这套流程是完整闭环，从核心文件、环境准备，到部署上线、联调测试，每一步都写清楚了，新手照着做就能做出可上线、可访问、功能完整的登录系统，没有任何疏漏，直接用域名www.wslanst.com就能访问！