前后端分离开发模式介绍

article/2025/9/25 0:39:24

1.1 什么是前后端分离

前后端分离是目前一种非常流行的开发模式，它使项目的分工更加明确：

  • 后端：负责处理、存储数据
  • 前端：负责显示数据

前端和后端开发人员通过 接口 进行数据的交换。
在这里插入图片描述

1.2 为什么要进行前后端分离

  • 前后端可以身心愉快地专注于各自擅长的领域
  • 避免后端写前端代码（基本上1天时间，20%写后端代码，80%写页面…）
  • 前端配置后端代码运行环境（简直是要疯… 装一堆环境，而且有些开发环境是windows，前端是macos，装环境就要装好几天）
  • 避免前后端打架，推诿，甩锅…
  • 提高开发效率
  • 分离有助于前端大放异彩，后端专注于三高(高并发、高性能、高可用)
  • 太多了…

1.3 前后端分离存在的问题

  1. 当接口改变的时候，非常麻烦–
  2. 需要前后端人员联调–联调开发的时间（开发+测试+联调）占项目的 15%–60%

1.4 如何分离

1.4.1 职责分离

  • 前后端仅仅通过异步接口(AJAX/JSONP)来编程
  • 前后端都各自有自己的开发流程，构建工具，测试集合
  • 关注点分离，前后端变得相对独立并解耦合
    在这里插入图片描述

1.4.2 开发流程

  • 后端编写和维护接口文档，在 API 变化时更新接口文档
  • 后端根据接口文档进行接口开发
  • 前端根据接口文档进行开发 + Mock平台
  • 开发完成后联调和提交测试

推荐几个接口规范工具：postman、eolinker

1.4.3 规范原则

  • 接口返回数据即显示：前端仅做渲染逻辑处理；
  • 渲染逻辑禁止跨多个接口调用；
  • 前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现；
  • 请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现；

1.5 数据格式

1.5.1 请求格式–统一的数据请求格式

get请求http://localhost:8080/user/1
http://localhost:8080/user?id=1
post请求http://localhost:8080/user
put请求http://localhost:8080/user
delete请求http://localhost:8080/user/1

1.5.2 响应格式–统一的返回结果

  • 基本格式
{"code": 20000,"msg": "success"
}

code : 请求处理状态（可以根据业务自行添加）

  • 20000 成功
  • 20001 失败
    msg：请求处理消息（可以根据业务自行添加）
    响应实体格式
{"code": 20000,"msg": "success","data": ["entity": {"id": 1,"name": "XXX","phone": "XXX"}]
}

响应列表格式

{"code": 20000,"msg": "success","data": {"list":[{"id": 1,"name": "XXX","code": "XXX"},{"id": 2,"name": "XXX","code": "XXX"},{"id": 3,"name": "XXX","code": "XXX"}]       }
}

响应分页格式

{"code": 200,"msg":"success","data": {"totalCount": 2,"totalPage": 1"pageNo": 1,"pageSize": 10,"list": [{"id": 1,"name": "XXX","code": "H001"},{"id": 1,"name": "XXX","code": "H001"},{"id": 1,"name": "XXX","code": "H001"}],}
}
  • data.totalCount: 总记录数
  • data.pageNo: 当前页码
  • data.pageSize: 每页大小
  • data.totalPage: 总页数

1.5.3 JAVA定义统一返回结果

Result

@Data
//@ApiModel(value = "全局统一返回结果")
public class Result {//@ApiModelProperty(value = "是否成功")private boolean success;//@ApiModelProperty(value = "返回码")private Integer code;//@ApiModelProperty(value = "返回消息")private String message;//@ApiModelProperty(value = "返回数据")private Map<String, Object> data = new HashMap<String, Object>();private Result(){}public static Result ok(){Result r = new Result();r.setSuccess(true);r.setCode(ResultCode.OK);r.setMessage("成功");return r;}public static Result error(){Result r = new Result();r.setSuccess(false);r.setCode(ResultCode.ERROR);r.setMessage("失败");return r;}public Result message(String message){this.setMessage(message);return this;}public Result code(Integer code){this.setCode(code);return this;}public Result data(String key, Object value){this.data.put(key, value);return this;}public Result data(Map<String, Object> map){this.setData(map);return this;}
}

2 商品管理系统

2.1 案例需求

完成商品的查询、新增、修改、删除等操作

后端（服务器端）：spring boot+spring mvc+mybatis

2.2 数据库设计与表结构

在这里插入图片描述

CREATE TABLE `t_goods` (`id` int(11) NOT NULL AUTO_INCREMENT,`name` varchar(255) DEFAULT NULL,`image` varchar(255) DEFAULT NULL,`price` double(20,0) DEFAULT NULL,PRIMARY KEY (`id`)
)

导入数据：

INSERT INTO `t_goods` VALUES ('1', '华为 G9 青春版 白色 移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '84900');
INSERT INTO `t_goods` VALUES ('2', '华为 G9 青春版 金色 移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '84900');
INSERT INTO `t_goods` VALUES ('3', '三星 Galaxy C5（SM-C5000）4GB+32GB 枫叶金 移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '119900');
INSERT INTO `t_goods` VALUES ('4', '三星 Galaxy C5（SM-C5000）4GB+32GB 蔷薇粉 移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '119900');
INSERT INTO `t_goods` VALUES ('5', '三星 Galaxy C5（SM-C5000）4GB+32GB 烟雨灰 移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '119900');
INSERT INTO `t_goods` VALUES ('6', '三星 Galaxy C5（SM-C5000）4GB+32GB 皎洁银 移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '119900');
INSERT INTO `t_goods` VALUES ('7', '华为 G9 Plus 32GB 月光银 移动联通4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '119900');
INSERT INTO `t_goods` VALUES ('8', '华为 麦芒5 全网通 4GB+64GB版 香槟金 移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '139900');
INSERT INTO `t_goods` VALUES ('9', '努比亚（nubia）Z11 百合金 4GB+64GB 全网通 移动联通电信4G手机双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '159900');
INSERT INTO `t_goods` VALUES ('10', '华为 HUAWEI nova 4GB+64GB版 香槟金（白）移动联通电信4G手机 双卡双待', 'https://img12.360buyimg.com/n1/jfs/t17050/106/1124838205/250590/7e63050a/5abb6be2N853106d9.jpg', '139900');

2.3 服务器端

2.3.1 创建SpringBoot项目

在这里插入图片描述

2.3.2 导入jar包

pom.xml

<!-- 统一版本维护 -->
<properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><java.version>1.8</java.version><mybatis.starter.version>1.3.2</mybatis.starter.version><mapper.starter.version>2.0.2</mapper.starter.version><mysql.version>5.1.32</mysql.version><pageHelper.starter.version>1.2.5</pageHelper.starter.version><durid.starter.version>1.1.10</durid.starter.version>
</properties>
<dependencies><!-- SpringBoot整合SpringMVC的启动器 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- SpringBoot整合jdbc和事务的启动器 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><!-- mybatis启动器 --><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>${mybatis.starter.version}</version></dependency><!-- 通用Mapper启动器 --><dependency><groupId>tk.mybatis</groupId><artifactId>mapper-spring-boot-starter</artifactId><version>${mapper.starter.version}</version></dependency><!-- 分页助手启动器 --><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>${pageHelper.starter.version}</version></dependency><!-- mysql驱动 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>${mysql.version}</version></dependency><!-- Druid连接池 --><dependency><groupId>com.alibaba</groupId><artifactId>druid-spring-boot-starter</artifactId><version>${durid.starter.version}</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.10</version></dependency>
</dependencies>

2.3.3 配置文件（application.properties）

application.properties文件

#Tomcat
server.port=8090
#DB configuration
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/vue01?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=123456
#druid
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.druid.initial-size=1
spring.datasource.druid.min-idle=1
spring.datasource.druid.max-active=20
spring.datasource.druid.test-on-borrow=true
spring.datasource.druid.stat-view-servlet.allow=true

2.3.4 **创建springboot引导类

@SpringBootApplication
public class UserManagementApplication {public static void main(String[] args) {SpringApplication.run(UserManagementApplication.class, args);}
}

2.3.5 创建实体
在这里插入图片描述
创建包com.czxy.pojo，创建类User.java

@Table(name="t_goods")
@Data
public class Goods {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)public Integer id;private String name;private String image;private Double price;
}

2.3.6 创建Dao

创建包com.czxy.dao，创建接口GoodsMapper.java

@org.apache.ibatis.annotations.Mapper
public interface GoodsMapper extends Mapper<Goods> {}

2.3.7 创建Service

创建包com.czxy.service，创建接口GoodsService.java

@Service
@Transactional
public class GoodsService {@Autowiredprivate GoodsMapper goodsMapper;}

2.3.8 创建Controller

创建包com.czxy.controller，创建类GoodsController.java

@RestController
@RequestMapping("/goods")
public class GoodsController {@Autowiredprivate GoodsService goodsService;
}

http://chatgpt.dhexx.cn/article/h2WS3ux8.shtml

相关文章

敏捷开发模式

敏捷开发模式

1、敏捷开发的概念 从1990年代开始逐渐引起广泛关注&#xff0c;是一种以人为核心、迭代、循序渐进的开发方法。强调以人为本&#xff0c;专注于交付对客户有价值的软件。是一个用于开发和维持复杂产品的框架。 2、敏捷开发的流程 (图为禅道敏捷开发流程管理) 2.1 产品负责人将…
阅读更多...
Django开发模式与流程

Django开发模式与流程

Python的WEB框架有Django、Tornado、Flask 等多种&#xff0c;Django相较与其他WEB框架其优势为&#xff1a;大而全&#xff0c;框架本身集成了ORM、模型绑定、模板引擎、缓存、Session等诸多功能。 一.Django的MTV开发模式与一般的MVC开发模式区别 1.MVC模式 在MVC模式中&am…
阅读更多...
【面向对象】DDD（一）：传统开发模式 VS DDD 开发模式

【面向对象】DDD（一）：传统开发模式 VS DDD 开发模式

我们都知道&#xff0c;很多业务系统都是基于 MVC 三层架构来开发的。实际上&#xff0c;更确切点讲&#xff0c;这是一种基于贫血模型的 MVC 三层架构开发模式。虽然这种开发模式已经成为标准的 Web 项目的开发模式&#xff0c;但它却违反了面向对象编程风格&#xff0c;是一种…
阅读更多...
MVC开发模式

MVC开发模式

一.MVC设计模式 1.MVC模式&#xff08;Model-View-Controller&#xff09;是软件工程中的一种软件架构模式&#xff0c;把软件系统分为三个基本部分&#xff1a;模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和控制器&#xff08;Controller&#xff0…
阅读更多...
项目的开发模式

项目的开发模式

开发模式大概可以分为两种&#xff1a; 1、大公司的开发模式&#xff1b; 2、外包的开发模式&#xff1b; 一、大公司的开发模式&#xff1b; 1. 市场调研 2. 项目需求会&#xff08;人员&#xff09; 产品市场运营UI开发后端前端项目经理测试–>web/ios/安卓安全 3. …
阅读更多...
什么是DDD开发模式

什么是DDD开发模式

DDD尝试解决业务系统(逻辑CRUD)开发的复杂性问题&#xff0c;这种复杂性是由于复杂的业务规则&#xff0c;业务逻辑变化。 一般系统的业务逻辑、复杂性在于&#xff1a;流转判断多&#xff0c;专业规则多&#xff0c;计算量大。而DDD模式的解决的方式是通过分层&#xff0c;即业…
阅读更多...
Scrum敏捷开发模式介绍与实践

Scrum敏捷开发模式介绍与实践

文章目录 前言一、开发模式1. 瀑布流开发模式2. 迭代开发模式3. 螺旋开发模式4. 敏捷开发模式 二、敏捷开发模式三、敏捷模式1. Scrum2. Kanban3. XP4. Lean Startup 四、Scrum 敏捷开发模式1. 框架图2. 角色Scrum Master&#xff0c;SMProduct Owners&#xff0c; POSoftware …
阅读更多...
什么是软件开发模式？

什么是软件开发模式？

软件开发模式简介 1. 边做边改模型&#xff08;Build-and-Fix Model&#xff09; 好吧&#xff0c;其实现在许多产品实际都是使用的“边做边改”模型来开发的&#xff0c;特别是很多小公司产品周期压缩的太短。在这种模型中&#xff0c;既没有规格说明&#xff0c;也没有经过设…
阅读更多...
T58 Office开发模式

T58 Office开发模式

加Check box https://www.howtogeek.com/204036/how-to-add-check-boxes-to-word-documents/ 点击设计模式激活。
阅读更多...
C# 软件开发模式、设计模式、设计原则和架构

C# 软件开发模式、设计模式、设计原则和架构

一、怎样做好软件开发&#xff1f; 软件是数据算法的集合体&#xff0c;是利用一定方法将数据进行合理的组合和分配的产物。其实在人们的生活当中&#xff0c;处处都充满着资源(数据)和方法(算法)&#xff0c;成功的人都是善于使用他们总结的方法来使用资源的。软件开发也不例外…
阅读更多...
螺旋式开发模式

螺旋式开发模式

螺旋模型是一种演化 软件开发过程模型&#xff0c;它兼顾了 快速原型的 迭代的特征以及 瀑布模型的系统化与严格监控。螺旋模型最大的特点在于引入了其他模型不具备的风险分析&#xff0c;使软件在无法排除重大风险时有机会停止&#xff0c;以减小损失。同时&#xff0c;在每个…
阅读更多...
常见的开发模式和不常见的开发模式

常见的开发模式和不常见的开发模式

1. 瀑布式开发 瀑布模型的优点&#xff1a; 1、为项目提供了按阶段划分的检查点。 2、当前一阶段完成后&#xff0c;您只需要去关注后续阶段。 3、可在迭代模型中应用瀑布模型。增量迭代应用于瀑布模型。迭代1解决最大的问题。每次迭代产生一个可运行的版本,同时增加更多的…
阅读更多...
软件开发的11种模式

软件开发的11种模式

软件开发的11种模式 1&#xff0c;边做边改模型&#xff08;Build-and-Fix-Model&#xff09; 在这种模型中&#xff0c;既没有规格说明&#xff0c;也没有经过设计&#xff0c;软件随着客户的需要一次又一次地不断被修改。在这个模型中&#xff0c;开发人员拿到项目立即根据…
阅读更多...
常见的开发模式模式

常见的开发模式模式

前言 主要是了解常见的开发模式&#xff0c;从而理解测试贯穿在整个软件研发过程中的定位。 一、常见的开发模式 引用林子老师梳理的开发模式&#xff0c;主要包括以下几种&#xff1a; 测试流程通常跟软件开发流程紧密相关&#xff0c;需要基于开发流程来定义。基于企业不同…
阅读更多...
云手机虚拟服务器地址和端口,手机服务器地址端口号

云手机虚拟服务器地址和端口,手机服务器地址端口号

手机服务器地址端口号 内容精选 换一换 当后台重新配置邮箱服务器等信息后，手机端WeLink一定要退出重新登录一次。我们常用的邮箱，比如：QQ邮箱、163邮箱、腾讯企业邮箱、网易企业邮箱、263企业邮箱等常见邮箱，可以参考常见问题 > 客户端-邮件里的“常见的IMAP邮箱配置方…
阅读更多...
使用正则表达式验证手机号码

使用正则表达式验证手机号码

使用正则表达式验证手机号码 开发工具与关键技术&#xff1a;VS2015、正则表达式 作者&#xff1a;易金亮 撰写时间&#xff1a;2019.07.07在项目中&#xff0c;总会涉及到数据的新增&#xff0c;比如新增用户信息等&#xff0c;而说到新增用户信息&#xff0c;就离不开用户的…
阅读更多...
安卓搭建虚拟服务器,安卓手机搭建云服务器

安卓搭建虚拟服务器,安卓手机搭建云服务器

安卓手机搭建云服务器 内容精选 换一换 本文介绍使用云手机服务时需要了解的基本概念。云手机是一台包含原生安卓操作系统，具有虚拟手机功能的云服务器，简单来说，云手机=云服务器+Android OS。您可以远程实时控制云手机，实现安卓APP的云端运行；也可以基于云手机的基础算力…
阅读更多...
JS判断输入手机号码是否正确

JS判断输入手机号码是否正确

JS判断输入手机号码是否正确 现在中国地区的号码 中国电信号段133、149、153、173、177、180、181、189、190、191、193、199 中国联通号段130、131、132、145、155、156、166、167、171、175、176、185、186、196 中国移动号段134(0-8)、135、136、137、138、139、1440、147、…
阅读更多...
android qq账号登陆验证手机号码,注册QQ号如何跳过手机验证

android qq账号登陆验证手机号码,注册QQ号如何跳过手机验证

QQ的安全性在逐步提高&#xff0c;而我们申请QQ的过程也越来越复杂了。许多用户不希望申请QQ时透露手机号码这类隐私信息。所以很少人使用需要手机验证的手机申请方式&#xff0c;所以电脑申请QQ成为主流&#xff0c;但电脑申请方式在申请过一次QQ号码之后(不论成功与否)就不能…
阅读更多...
虚拟号码怎么开通？

虚拟号码怎么开通？

虚拟码号的开通方式基本一样 一、首先是企业实名&#xff0c;上传企业的证明文件&#xff0c;法人证件。 二、然后是提出开号需求&#xff0c;号码数量&#xff0c;号码区域 三、然后缴纳费用 四、等待3-8个工作日开号 通过API或者SDK接口接入自己的系统&#xff0c;要不就…
阅读更多...
推荐文章

Copyright @ 2022~2023