一、项目前言

最近完成了一套Web 应用管理系统从零到上线的完整开发流程，包含定制登录首页页面开发、前端页面编写、SpringBoot 项目整合、服务器部署上线全流程。

很多刚学 Web 开发的同学都会困惑：HTML 页面放哪？怎么和 SpringBoot 结合？怎么放到服务器上用 IP 直接访问？本地能跑、服务器怎么部署？

今天把整个开发流程、踩坑点、完整步骤整理成一篇实战教程，新手也能跟着一步步复刻。

适合人群：JavaWeb 初学者、SpringBoot 入门、课程设计 / 实训项目、需要做 CSDN 作业博文的同学。

二、项目开发环境

• 开发工具：IDEA 2023 / VSCode
• 后端框架：SpringBoot 2.7.x/ 3.x
• 前端技术：HTML + CSS + JavaScript
• 服务器：云服务器 CentOS 7
• 部署方式：SpringBoot Jar 包直接部署 + 服务器 IP 访问
• 功能模块：自定义左右布局登录页、登录 / 注册切换、表单验证、服务器公网 IP 访问

三、项目需求分析

1. 设计左右分栏风格登录首页，左侧图片展示、右侧登录注册表单；
2. 实现登录、注册标签切换，前端表单非空验证、密码一致性校验；
3. 前端页面整合到 SpringBoot 项目中，可本地直接访问；
4. 项目打包部署到云服务器，通过服务器公网 IP外网直接打开；
5. 适合课程设计、实训提交，结构完整、流程规范。

四、前端登录页面开发

4.1 页面布局设计

采用经典企业级登录布局：

• 左侧：大图展示区域
• 右侧：登录 / 注册切换表单
• 底部：班级、姓名、考核日期信息栏
• 蓝色主题风格，圆角卡片、阴影美化，适配 PC 端

4.2 完整前端源码

页面包含布局样式、标签切换、登录注册表单校验，例如登录页面：

4.3 页面功能说明

1. 登录 / 注册选项卡无缝切换；
2. 输入框聚焦高亮样式优化；
3. 前端 JS 表单非空校验；
4. 底部预留班级、姓名、日期填写位置，直接可用于实训作业；
5. 图片只需和 html 同级放置，直接引用即可。

五、前端页面整合到 SpringBoot

5.1 存放目录（重点）

SpringBoot 静态资源固定放在：

plaintext

src/main/resources/static/

把以下文件全部放进 static 目录：

• index.html 登录首页
• library.jpg 背景图片

目录结构：

plaintext

src
└── main
    ├── java
    └── resources
        ├── static
        │   ├── index.html
        │   └── library.jpg
        └── application.yml

5.2 本地访问测试

启动 SpringBoot 项目，端口默认 8080，浏览器输入：

plaintext

http://localhost:8080/index.html

即可正常打开登录页面，图片、样式、切换功能全部生效。

六、项目打包与云服务器部署

6.1 SpringBoot 打包

1. IDEA 右侧打开 Maven → 项目 → Lifecycle → package
2. 打包完成后在 target 目录生成 xxx.jar 包

6.2 服务器上传部署

1. 登录云服务器，新建文件夹存放 jar 包；
2. 使用 FTP / 宝塔面板上传 jar 包到服务器；
3. 服务器运行命令：

bash

运行

java -jar 项目名.jar &

1. 放行服务器防火墙 8080 端口

6.3 公网 IP 访问

浏览器输入：

plaintext

http://服务器IP:8080/index.html

任意设备联网都可以访问项目首页，完成 Web 应用从开发到上线全过程。

七、开发总结与心得

1. Web 应用开发核心流程：前端页面编写 → 整合 SpringBoot → 本地测试 → 打包 → 服务器部署；
2. SpringBoot 静态页面必须放在 resources/static 下，这是新手最容易踩坑的点；
3. 前后端分离前，传统 Web 项目可以直接把 HTML 放在 static 下快速集成；
4. 部署到云服务器后，通过公网 IP 即可实现全网访问，完成课程设计实训要求；