Web实战：开发规范与工程搭建

前后端分离开发

Web 项目早期可以采用前后端混合开发，但随着项目规模增大，会出现前后端代码混杂、分工不明确、难以维护等问题。

现在更常见的是前后端分离开发：前端和后端分别作为独立项目开发、测试和部署，通过 HTTP 接口进行通信。

前端项目
Vue / HTML / CSS / JavaScript
        ↓ HTTP
      API接口
        ↓
Spring Boot后端
        ↓
      MySQL

前后端之间最重要的约定就是接口文档。

开发流程

前后端分离项目通常按照以下流程推进：

需求分析
   ↓
接口设计
   ↓
前后端并行开发
   ↓
前端测试 / 后端测试
   ↓
前后端联调

需求分析

根据原型和需求文档明确：

页面需要展示什么数据
用户能够执行什么操作
后端需要提供哪些接口

接口设计

前后端共同约定：

请求路径
请求方式
请求参数
响应数据格式

接口确定后，前端和后端就可以并行开发。

RESTful风格

REST 全称 REpresentational State Transfer，即表述性状态转换。

REST 是一种软件架构风格，并不是强制标准。

核心思想：

URL 用于定位资源
HTTP 请求方式描述对资源的操作

传统写法：

GET  /user/getById?id=1
POST /user/saveUser
POST /user/updateUser
GET  /user/deleteUser?id=1

REST 风格：

GET    /users/1
POST   /users
PUT    /users
DELETE /users/1

对应关系：

请求方式	常见含义
GET	查询
POST	新增
PUT	修改
DELETE	删除

功能模块通常使用复数形式表示一类资源，例如：

/users
/books
/depts

Apifox

前后端并行开发时会遇到两个问题：

后端接口开发完成后，如何自己发送请求测试接口？
前端接口尚未完成时，如何拿到模拟数据开发页面？

Apifox 可以用于：

API 文档管理
API 请求调试
Mock 数据
API 测试

浏览器地址栏主要用于 GET 请求，而后端还需要测试 POST、PUT、DELETE 等请求，因此通常需要 Apifox、Postman 等接口调试工具。

工程搭建

Tlias 后端工程基于 Spring Boot。

核心依赖包括：

Spring Web
MyBatis
MySQL Driver
Lombok

数据库配置示例：

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/tlias
    username: root
    password: 1234

mybatis:
  configuration:
    map-underscore-to-camel-case: true

基础代码结构

项目采用三层架构：

controller
    ↓
service
    ↓
mapper
    ↓
database

典型目录：

com.itheima
├── controller
├── service
│   └── impl
├── mapper
├── pojo
└── TliasApplication

部门实体类

@Data
public class Dept {

    private Integer id;

    private String name;

    private LocalDateTime createTime;

    private LocalDateTime updateTime;
}

数据库字段可能是：

id
name
create_time
update_time

Java 属性通常采用驼峰命名。

统一响应结果

如果每一个接口都返回不同的数据结构，前端处理会很麻烦，因此项目中可以统一响应格式。

成功：

{
  "code": 1,
  "msg": "操作成功",
  "data": {}
}

失败：

{
  "code": 0,
  "msg": "操作失败",
  "data": null
}

统一结果类：

@Data
public class Result {

    private Integer code;
    private String msg;
    private Object data;

    public static Result success() {
        Result result = new Result();
        result.setCode(1);
        result.setMsg("操作成功");
        return result;
    }

    public static Result success(Object data) {
        Result result = success();
        result.setData(data);
        return result;
    }

    public static Result error(String msg) {
        Result result = new Result();
        result.setCode(0);
        result.setMsg(msg);
        return result;
    }
}

这样前端无论调用哪个接口，都可以按照统一结构处理响应。

小结

这一阶段完成的核心工作：

前后端分离
    ↓
统一接口规范
    ↓
RESTful设计
    ↓
Apifox调试
    ↓
Spring Boot工程搭建
    ↓
三层架构
    ↓
统一Result响应