东莞单位网站建设网页设计样图
一、前期准备
✅前后端分离开发
页面原型＋需求文档 -> 接口文档
1．什么是前后端分离开发？
前端项目、后端项目开发和部署都是分开的。
2．具体的开发流程？
需求分析 -> 接口设计 -> 前后端并行开发 -> 接口测试 -> 联调部署
| 对比 | 前后端混合开发 | 前后端分离开发（推荐） |
|---|---|---|
| 部署模式 | 前后端一体 | 前后端独立部署 |
| 维护性 | 差，不易扩展 | 高，职责清晰，接口对接规范 |
| 开发流程 | 串行 | 并行（前后端各自独立、通过接口联调） |
✅Restful 风格
REST（REpresentationalStateTransfer），表述性状态转换，它是一种软件架构风格。
📌REST是风格，是约定方式，约定不是规定，可以打破。
📌描述功能模块通常使用复数形式（加s），表示此类资源，而非单个资源。如：users、books..
✅接口测试工具：Apifox
-
官网：https://apifox.com/
-
作用：
- 编写和管理 API 文档
- 调试 API 请求（支持 GET/POST/PUT/DELETE）
- 生成 Mock 数据
✅ 手动映射方式：
- 使用 @Results + @Result
- 或在 SQL 中起别名
- 或在配置中开启驼峰映射开关（推荐）
✅前后端联调：Nginx 反向代理
概念
反向代理是一种网络架构，通过代理服务器为后端的服务器做代理，客户端的请求直接请求代理服务器，然后转发给后端的服务器。（安全、灵活、负载均衡）
场景
前端访问地址：http://localhost:90/api/depts
后端接口地址：http://localhost:8080/depts
server {listen 90;location ^~ /api/ {rewrite ^/api/(.*)$ /$1 break;proxy_pass http://localhost:8080;}
}原理
客户端请求 Nginx → Nginx 转发到后端 → 后端返回响应 → Nginx 返回前端
二、开始项目
✅基本步骤
- 创建空项目，Structure中设置 jdk，设置中检查maven、设置字符集UTF-8
- 添加SpringBoot模块，引入lombok、SpringWeb、Mybatis、MySQL依赖 自动放入pom文件中
- 添加application.yml文件，创建数据库，在前者中配置数据库基本信息
spring:application:name: tlias-web-management#配置数据库的连接信息datasource:url: jdbc:mysql://localhost:3306/tliasdriver-class-name: com.mysql.cj.jdbc.Driverusername: rootpassword: 123456#Mybatis的相关配置
mybatis:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImpl#驼峰命名映射开关map-underscore-to-camel-case: true✅项目结构
| 层 | 职责说明 |
|---|---|
| Controller | 接收请求，参数绑定，响应数据 |
| Service | 处理业务逻辑 |
| Mapper | 访问数据库，执行 SQL |
tlias-web-management/ ← 项目根目录
├─ .idea/ ← IntelliJ IDEA 的项目配置（.iml、workspace 等）
├─ .mvn/ ← Maven Wrapper，用于锁定 Maven 版本并保证每个人用同一版本构建
├─ pom.xml ← Maven 项目描述文件
├─ src/
│ ├─ main/
│ │ ├─ java/
│ │ │ └─ com.example/ ← 基础包
│ │ │ ├─ TliasWebManagementApplication.java
│ │ │ │ // Spring Boot 启动类，带 @SpringBootApplication
│ │ │ ├─ controller/ ← Web 层：接收 HTTP 请求、组装参数、返回结果
│ │ │ │ └─ DeptController.java
│ │ │ ├─ service/ ← 业务层接口，定义系统要做的事情
│ │ │ │ └─ DeptService.java
│ │ │ ├─ service/impl/ ← 业务层接口的实现，写具体的业务逻辑
│ │ │ │ └─ DeptServiceImpl.java
│ │ │ ├─ mapper/ ← MyBatis 层：定义数据库操作接口（@Mapper）
│ │ │ │ └─ DeptMapper.java
│ │ │ └─ pojo/ ← 用于封装数据的简单 Java 对象（实体／DTO）
│ │ │ ├─ Dept.java
│ │ │ └─ Result.java
│ │ └─ resources/
│ │ └─ application.yml ← YAML 格式，Spring Boot + 数据库 + MyBatis 等的配置
│ └─ test/ ← 单元测试代码目录
└─ target/ ← 构建产物（class、jar 等，由 mvn 自动生成）✅查询所有部门
请求路径：/depts
请求方式：get
请求参数：无
✅删除部门
请求路径：/depts
请求方式：delete
请求参数：id
参数获取方式（推荐使用最后一种）
| 方式 | 示例代码 |
|---|---|
| HttpServletRequest | request.getParameter("id") |
| @RequestParam | @RequestParam("id") Integer id |
| 同名绑定 | public Result delete(Integer id) ✅ 推荐 |
✅添加部门
请求路径：/depts
请求方式：post
请求参数：application/json
参数绑定
- 使用实体类接收 JSON 格式请求体
- 配合
@RequestBody注解
✅修改部门
1.根据 ID 查询回显
请求路径：/depts/{id}
请求方式：get
请求参数：路径参数
@PathVariable 注解来声明获取的是路径参数
2.修改后提交
请求路径：/depts
请求方式：put
请求参数：application/json
📌@RequestMapping 抽取Controll类的路径
三、日志技术
✅ 日志的作用：
- 排查 bug、记录运行状态、记录用户行为等
✅ 常见日志框架对比
| 框架 | 特点 |
|---|---|
| JUL | Java 自带，性能较弱 |
| Log4j | 配置灵活，主流使用 |
| Logback | Log4j 的升级版，SpringBoot 默认 |
| SLF4J | 日志门面（统一日志接口标准） |
✅ SpringBoot 默认使用 Logback
<?xml version="1.0" encoding="UTF-8"?>
<configuration><!-- 控制台输出 --><appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender"><encoder class="ch.qos.logback.classic.encoder.PatternLayoutEncoder"><!--格式化输出：%d 表示日期，%thread 表示线程名，%-5level表示级别从左显示5个字符宽度，%logger显示日志记录器的名称， %msg表示日志消息，%n表示换行符 --><pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50}-%msg%n</pattern></encoder></appender><!-- 系统文件输出 --><appender name="FILE" class="ch.qos.logback.core.rolling.RollingFileAppender"><rollingPolicy class="ch.qos.logback.core.rolling.SizeAndTimeBasedRollingPolicy"><!-- 日志文件输出的文件名, %i表示序号 --><FileNamePattern>D:/tlias-%d{yyyy-MM-dd}-%i.log</FileNamePattern><!-- 最多保留的历史日志文件数量 --><MaxHistory>30</MaxHistory><!-- 最大文件大小，超过这个大小会触发滚动到新文件，默认为 10MB --><maxFileSize>10MB</maxFileSize></rollingPolicy><encoder class="ch.qos.logback.classic.encoder.PatternLayoutEncoder"><!--格式化输出：%d 表示日期，%thread 表示线程名，%-5level表示级别从左显示5个字符宽度，%msg表示日志消息，%n表示换行符 --><pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50}-%msg%n</pattern></encoder></appender><!-- 日志输出级别 --><root level="ALL"><appender-ref ref="STDOUT" /><appender-ref ref="FILE" /></root>
</configuration>
✅ 日志级别（从低到高）
| 日志级别 | 说明 | 记录方式 |
|---|---|---|
| trace | 追踪，记录程序运行轨迹 | log.trace("...") |
| debug | 调试，记录程序调试过程中的信息，实际应用中一般将其视为最低级别 | log.debug("...") |
| info | 记录一般信息，描述程序运行的关键事件，如：网络连接、io操作 | log.info("...") |
| warn | 警告信息，记录潜在有害的情况 | log.warn("...") |
| error | 错误信息 | log.error("...") |
✅ 使用方式
@Slf4j
public class DeptController {log.info("正在查询所有部门...");log.error("发生异常：{}", e.getMessage());
}✅ 总结表
| 模块 | 学习目标与关键点 |
|---|---|
| 项目架构 | 理解前后端分离与三层结构分工 |
| 接口设计 | 掌握 RESTful 风格设计规范（路径 + 方法） |
| 参数绑定 | 理解 RequestParam、PathVariable、RequestBody 的使用 |
| 数据封装 | 掌握 MyBatis 自动/手动映射字段的方式 |
| 反向代理 | 能配置 Nginx 实现前后端联调 |
| 日志技术 | 掌握 Logback 配置、使用与日志级别管理 |