前后端分离开发模式介绍

最新推荐文章于 2024-07-03 10:43:28 发布
最新推荐文章于 2024-07-03 10:43:28 发布
阅读量4.9w 收藏 351
点赞数 57
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45774195/article/details/107938967
版权

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 {

    @Autowired
    private GoodsMapper goodsMapper;

}

2.3.8 创建Controller

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

@RestController
@RequestMapping("/goods")
public class GoodsController {
    @Autowired
    private GoodsService goodsService;
}
dakesong
关注
  • 57
    点赞
  • 踩
  • 351
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
前后端分离开发模式介绍.pptx
05-19
前后端分离开发模式介绍ppt，是我在公司的分享会上的分享的内容。主要讲解了前后端分离介绍及优缺点
前后端分离开发架构
qq_54525448的博客
06-07 4141
前后端分离
前后端分离详解
~~~的博客
04-19 1436
至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，App有App的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可。现有的搜索引擎都是通过爬虫工具来爬取各个网站的信息，这些爬虫工具一般只能爬取页面上(HTML)的内容，而前后端分离，前端的数据基本上都是存放在行为逻辑（JavaScript）文件中，爬虫工具无法爬取，无法分析出你网站到底有什么内容，无法与用户输入的关键词做关联，最终排名就低。2】开发准备与接口定义。
到底什么是前后端分离
顺其自然~专栏
08-16 3万+
1.到底什么是前后端分离？ 前后端分离的"前"特指浏览器端(或客户端)，直接呈现给用户的；后端是服务器端，处理业务逻辑和数据，不呈现给用户。 Java服务器端初学者最容易引起误解的一个概念就是：JSP是前端技术。 JSP一定一定一定要知道全称：Java Server Page。是运行在服务器端JVM之上Servlet容器里的，只是执行的结果是HTML，响应给浏览器。 Java EE先有的Servlet，那时候已经有了ASP(同样要知道是Active Server Page的意思)。 由于要在Ser
二十分钟秒懂：实现前后端分离开发（vue+element+spring boot+mybatis+MySQL）
小淼淼的博客
05-29 1万+
二十分钟秒懂：实现前后端分离开发（vue+element+spring boot+mybatis+MySQL）
Web开发8：前后端分离开发
jiet_h的博客
01-29 1520
前后端分离开发是一种架构模式，将前端和后端的开发过程分离。在传统的 Web 开发中，前端和后端的逻辑通常紧密耦合在一起，后端负责渲染页面并提供数据，前端负责展示页面和与用户交互。而在前后端分离开发中，前端和后端是独立的两个应用，通过 API 进行通信。前端应用负责展示页面和用户交互，后端应用则负责处理业务逻辑和数据处理。前后端分离开发是一种强大的架构模式，可以提高开发效率、可扩展性和灵活性。通过独立开发和通过 API 进行通信，前后端可以更好地协同工作。
前后端分离开发模式 drf
Tao.的博客
09-23 828
前后端分离开发模式 restrfu drf
何为前后端分离？一文搞懂前后端分离发展史
Java之路艰难，要以高内聚低耦合的目标去设计
12-16 8335
简单讲解前后端分离技术，前后端分离技术的演进过程。
什么是前后端分离
weixin_45735511的博客
11-09 7847
1、前端：泛指内容展示和与用户交互的部分（客户端）① 内容展示：在网页上能看到的图片、文字、视频、数字等信息② 交互：用户在页面上通过点击按钮、输入文字等等动作，对网站提供数据输入，然后前端对用户的输入做出响应，比如更新页面上的内容HTML：网页内容CSS：视觉效果JS：用户交互2、后端：泛指控制软件输出的部分 [开发数据访问服务]（服务端）前端可以通过调用后端的服务对数据进行增删查改。
前后端分离架构，超全面详解~
独行侠梦的博客
12-28 1万+
此文通俗易懂，全面讲解前后端分离架构核心思想与作用，对学习微服务、开发企业项目大有裨益，建议收藏细品，好好领悟！~一、简介前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+...
前后端分离模式研究
wuyang19920226的博客
08-10 3543
一、前言 对目前的web来说，前后端分离已经变得越来越流行了，越来越多的企业/网站都开始往这个方向靠拢。前后端分离概念在今天其实并不新鲜，自以MVC模型为主的开发模式流行之初，前后端分离思想就被提出来了，但是经历了几十年的发展，前后端分离并没有得到实质的进步和应用。得益于前后端框架的丰富和发展以及接口文档自动化技术的出现，前后端分离于最近几年在很多的实践中得到了越来越好的应用和...
传统MVC架构和前后端分离架构模式对比
02-25
通过多维度对传统的MVC和前后端分离架构进行对比，深入对比了两种架构方式的优缺点，还有MVC和MVVM的区别与联系。
基于Swagger的前后端分离开发实践
02-24
前后端分离开发已经是很流行的一个开发模式。前端开发不需要部署后端语言的环境，后端开发也不需要前端写好的任何程序。后端只管暴露各种API接口供给前端进行数据的增、删、改、查，不负责生成HTML页面，这种方式...
前后端分离开发的相关介绍
01-02
"前后端分离开发的相关介绍" 前后端分离开发是指将 Web 开发中的前端和后端分离 thành两个独立的部分，以提高开发效率和灵活...前后端半分离和前后端完全分离是两种常见的前后端分离开发模式，每种模式都有其优缺点。
前后端分离开发模式下后端质量的保证——单元测试
02-26
而在前后端分离开发模式下，特别是两者交付时间差别很大的情况时，后端可能需要更加地依赖于单元测试来保证代码的正确性。本文主要围绕单元测试展开，从单元测试的基础概念说起，对比单元测试和集成测试，同时我们还...
一文讲通：前后端分离的四种开发模式，及其优缺点。
贝格前端工场的博客
06-15 1164
前后端分离已经成为了开发的主流模式，很多老铁认为前后端分离就是各干各的，其实不然。前后端分离有多种模式，贝格前端工场为大家一一详解。
前后端分离：四种开发模式与实践指南
最新发布
No_Name_Cao_Ni_Mei的博客
07-03 1517
前端使用框架实现用户界面，通过API调用后端接口获取数据和进行业务逻辑处理。后端处理数据存储和业务逻辑。
轻松理解前后端分离（通俗易懂）
热门推荐
Coder Xu
03-28 11万+
文章目录一、前言二、前后端分离本质三、1.前后端分离2.不使用前后端分离会有什么问题 一、前言 该技术博客是关于楠哥教你学Java的前后端分离课程笔记总结，希望可以为大家带来帮助！ 二、前后端分离本质 大家往往会陷入一个误区，试图用具体的技术来描述什么是前后端分离这个一个概念，这是答非所问的。一提到前后端分离就是SpringBoot + Vue，这并不是正确的理解！ 我们问的是：你为什么采用这种方式解决问题 回答却是：你是如何去具体做这件事 前后端分离是：软件技术和业务发展到一定程度，在项目管理工作上必须进
前后端分离开发模式
qq_38991247的博客
03-24 3452
在做任何项目或者架构之前，我们都需要去先确定几件事情，比如技术选型、开发模式等，都是需要去做斟酌和确定的。本期我们来探讨一下前后端分离的这种开发模式。 早期传统 Java Web 开发 在探讨前后端分离开发模式之前，我们先来看一看早期传统 Java Web 的一种开发模式。 首先我们有用户，用户会访问浏览器，随后请求才会到达我们的后端。在我们的后端里面，那么这是一个单体项目，并且它是一个 war 包。在这个包里面它包含了一些相应的内容，比如 Servlet，也就是 MVC 的这一层架构的后端代码。当然也包含
前后端分离开发模式图片
04-27
前后端分离开发模式是一种将前端和后端的开发过程分离的软件开发模式。在这种模式下，前端和后端分别独立开发，通过接口进行数据交互，实现前后端的解耦和并行开发。 以下是一张示意图，展示了前后端分离开发模式的架构： ![前后端分离开发模式](https://example.com/image.png) 在这个示意图中，前端和后端分别由不同的团队或开发者进行开发。前端主要负责用户界面的设计和交互逻辑的实现，使用HTML、CSS和JavaScript等技术进行开发。后端主要负责业务逻辑的处理和数据的存储与管理，使用服务器端语言（如Java、Python、Node.js等）进行开发。 前后端之间通过接口进行数据的传输和交互。前端通过发送HTTP请求调用后端提供的接口，后端接收请求并处理相应的业务逻辑，最后将结果返回给前端。这种方式可以实现前后端的解耦，使得前后端可以独立开发和部署，并且可以灵活地替换前端或后端的实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值