广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 后端开发 > JAVA >Spring Boot前后端分离之后端开发
  • 870

0
分享到

Spring Boot前后端分离之后端开发

springboot后端java 2023-09-04 16:09:49 870人浏览 泡泡鱼
摘要

Spring Boot前后端分离开发之后端开发 前后端分离开发概述相关术语前后端分离开发概述 接口规范RESTful API的理解RESTful风格的特点URI规范路径请求方式

Spring Boot前后端分离开发之后端开发


📃个人主页: 不断前进的皮卡丘
🌞博客描述: 梦想也许遥不可及，但重要的是追梦的过程，用博客记录自己的成长，记录自己一步一步向上攀登的印记
🔥系列专栏: Spring Boot专栏

前后端分离开发概述

相关术语

前端和后端:
前端和后端是针对于技术来说的。
前端: 负责页面展示相关的技术，比如html,css,js,jquery,vue,bookstrap等
后端:与数据，还有业务逻辑相关，比如Java，MySQL等
移动端:移动设置相关的技术，比如Android(java,kotilin)，iOS(swift)
全栈工程师:前端，后端，移动端
全过程工程师:产品设计，代码开发，测试，运维

前台和后台
前台和后台是相对于使用者来说的
前台：它是相对于普通用户来说，比如用户可以看到的网站
后台:它是对应程序的管理人员和运维人员而言的，后台也包括前端(页面)和后端(数据和业务)

前后端分离开发概述

前后端分离模式概述

早期的时候，web应用中的数据，页面，渲染都在服务端完成，但是随着时代的发展，前端设备越来越多(手机，平板，桌面电脑等),后来就慢慢兴起前后端分离的思想:后端负责数据处理，前端负责数据渲染，前端静态页面调用指定api获取固定格式的数据
为了实现前后端分离，必须要有一种统一的机制，方便不同的前端设备和后端进行通信
image.png
image.png

接口规范

RESTful api的理解

  • RESTful是什么
    • RESTful是当前比较流行的一种互联网软件架构模型，通过统一的规范来完成不同终端的数据访问和交换，REST全称是Representaional State Transfer(资源表现层状态转换)
    • RESTful的优点：结构清晰，有统一的标准、扩展性好
    • 是前后端交互的规范
  • Resources
    • 资源指的是网络中的某一个具体文件，类型不限，可以是文本、图片、音频、视频、数据流等，也可能是一个学生的信息，添加，删除，查询等都被看成是不同资源操作。
    • 如何获取？可以通过统一资源标识符找到这个实体，URI，每一个资源都有特定的URI，通过URL可以找到一个具体的资源HTTP 协议详解 —— URI、HTTP protocol、HTTP headers
    • image.png
  • Pepresentation
    • 资源表现层，资源的具体表现形式，比如一段文字，可以使用TXT,JSON,html,XML等不同的形式来描述
    • 对互联网的任何操作，都看成是对资源的操作
  • State Transfer
    • 状态转化是指客户端和服务端之间的数据交换，因为Http请求不能传输数据的状态(HTTP协议是无状态请求)，所有的状态都保存在服务端，如果客户端希望访问服务端的数据，就需要使其发生状态改变，同时这种状态转化是建立在表现层，完成转换就表示资源的表现形式发生了改变
    • 对于资源的操作行为的表现方式称为转换
    • 状态指的是对资源的操作行为

RESTful风格的特点

URL传参更加简洁

完成不同终端之间的资源共享，RESTful提供了一套规范，不同终端之间只要遵守这个规范，就可以实现数据交互。

RESTful具体来说是四种表现形式，HTTP请求中四种请求类型(GET、POST、PUT、DELETE)分别表示四种常规操作，CRUD。通过不同的请求方式来完成不同的操作

  • GET用来获取资源
  • POST用来创建资源
  • PUT用来修改资源
  • DELETE用来删除资源

两个终端要完成数据交互，基于RESTful的方式，增删改查操作分别需要使用不同的HTTP请求类型来访问。
传统的web开发中fORM表单只支持GET和POST请求，如何解决呢？我们可以通过添加HiddenHttpMethodFilter过滤器，可以把POST请求转为PUT或者DELETE
RESTful风格的话，响应的数据格式要求是json

URI规范

  • uri是统一资源标识符

路径

  • 只能有名词，要求和数据库中的表名对应
  • 建议名词使用复数
  • 在URI中使用小写字母
  • 不要在末尾使用/
  • 使用连字符(-),每个公司可能要求不一样
http://api.example.com/school/studentshttp://api.example.com/school/students/{100}

请求方式

  • GET用来获取资源
  • POST用来创建资源
  • PUT用来修改资源
  • DELETE用来删除资源
GET    http://api.example.com/school/students 查询所有学生信息GET    http://api.example.com/school/students/{id} 查询指定id的学生信息POST   http://api.example.com/school/students 添加学生信息PUT    http://api.example.com/school/students/{id} 修改指定id的学生信息DELETE http://api.example.com/school/students/{id} 删除指定id的学生信息

过滤条件

如果记录数量很多，服务器不可能返回所有信息给用户，API需要提供参数，来过滤返回的结果

?limit=10 指定返回记录的数量?offset=10 指定返回记录的开始位置?page=2&pageCount=100 指定第几页，以及每页的记录数?orderby=name&order=asc 指定返回结果按照哪一个属性排序，以及排序顺序?age>=20指定筛选条件

其他说明

有的公司的请求方式还是使用GET和POST请求，然后通过路径来区分目的

/stus/query  查询操作/stus/delete/{sid} 根据id删除

返回结果

返回数据的格式必须要使用json格式，返回结果建议包含三个部分的信息，状态码，提示信息和真实数据

状态码和信息

常见的HTTP状态码

json介绍

JSON(javascript Object Notation, JS对象标记)是一种轻量级的数据交换格式，目前使用特别广泛。
json的数据格式分成json Object(json对象)和json array(json数组)

json Object数据格式:

  • 外层加大括号
  • 内层是k:v的形式(属性名:属性值的格式），属性之间用逗号间隔
  • 属性名必须是字符串
  • 比如{“id”:100,“name”:“tom”}
  • 数值支持的数据类型:数值，字符串，布尔，null，json对象，json数组
学生信息:{"id":100,"name":"tom","cls":{"id":1,"name":"计算机一班"    }}

json array数据格式

  • 外层中括号
  • 数组元素的数据类型:数值，字符串，布尔，null，json对象，json数组
所有班级信息的数组:["计算机一班","计算机二班","软件一班", "软件二班"]

在线json校验

image.png
image.png

postman

我们知道浏览器它只能发送GET请求，这样的话，其他的请求方式，我们是没法测试的。
接下来就介绍前后端分离开发，经常用到的工具postman

安装

官网地址:https://www.postman.com/downloads/
image.png
我们可以选择把exe文件放在指定文件家，然后双击
image.png

image.png
然后可以去登录，或者跳过登录
image.png

使用

image.png
image.png
image.png

点击send(代码实现在后面介绍)
image.png

spring mvc的restful实现

查询所有班级信息

restful风格要求返回的字符串是json格式
@ResponseBody可以把Java对象转化为json对象，并返回给客户端
我们写一个小demo测试一下(数据是从数据库中查询出来的)
实体类(班级表对应的实体类)

@Data@NoArgsConstructor@AllArgsConstructorpublic class Cls {    private Integer id;    private String name;}

Controller(可以直接用@RestController)
image.png

@Controller@ResponseBodypublic class ClsController {    @Autowired    private ClsService clsService;        @GetMapping("/school/cls")    public List<Cls> queryAllCls() {        try {            List<Cls> clsList = clsService.queryAllCls();            return clsList;        } catch (Exception e) {            e.printStackTrace();        }        return null;    }}

Service

public interface ClsService {        List<Cls> queryAllCls() throws Exception;}

Service实现类

@Servicepublic class ClsServiceImpl implements ClsService {    @Autowired    private ClsMapper clsMapper;    @Override    public List<Cls> queryAllCls() throws Exception {        return clsMapper.queryAllCls();    }}

Mapper

@Mapperpublic interface ClsMapper {      @Select("select * from cls")   List<Cls> queryAllCls() throws Exception;}

image.png
下面这张图片显示的数据和上面图片的不一样，是因为后来我把格式进行修改了，也就是对代码进行了修改，后面会进行说明
image.png

单元测试

@SpringBootTestclass ClsMapperTest {    @Autowired    private ClsMapper clsMapper;    @Test    public void testQueryAllCls() throws Exception {        List<Cls> cls = clsMapper.queryAllCls();        for (Cls c:cls){            System.out.println(c);        }    }}

输出内容:

Cls(id=1, name=计科1班)Cls(id=2, name=计科2班)Cls(id=3, name=软工1班)Cls(id=4, name=软工2班)

查询指定班级信息

@PathVariable:把请求路径的变量和形参名进行绑定
Controller

@RestControllerpublic class ClsController {    @Autowired    private ClsService clsService;        @GetMapping("/school/cls")    public List<Cls> queryAllCls() {        try {            List<Cls> clsList = clsService.queryAllCls();            return clsList;        } catch (Exception e) {            e.printStackTrace();        }        return null;    }         @GetMapping("/school/cls/{id}")    public Cls queryClsById(@PathVariable("id") Integer id){        Cls cls= null;        try {            cls = clsService.queryClsById(id);        } catch (Exception e) {            e.printStackTrace();        }        return cls;    }}

Service

public interface ClsService {        List<Cls> queryAllCls() throws Exception;        Cls queryClsById(Integer id) throws Exception;}

Service实现类

@Servicepublic class ClsServiceImpl implements ClsService {    @Autowired    private ClsMapper clsMapper;    @Override    public List<Cls> queryAllCls() throws Exception {        return clsMapper.queryAllCls();    }    @Override    public Cls queryClsById(Integer id) throws Exception {        return clsMapper.queryClsById(id);    }}

Mapper

@Mapperpublic interface ClsMapper {      @Select("select * from cls")   List<Cls> queryAllCls() throws Exception;      @Select("select * from  cls where id=#{id}")   Cls queryClsById(@Param("id") Integer id);}

image.png
image.png

关于格式的说明

:::info
接口返回类型:
json格式
------code:状态码
------message:状态信息
------data:真实数据
:::
我们如果想要达到这样的效果的话，有两种方法，第一种就是我们写一个实体类，第二种方法就是通过map来存数据
通过定义实体类
image.png
通过map
image.png
image.png
image.png
image.png

根据id删除班级信息

    @RequestMapping(value = "/school/cls/{id}" ,method = RequestMethod.DELETE)    public ResultInfo deleteById(@PathVariable("id") Integer id){        ResultInfo info = new ResultInfo();        try {            clsService.deleteById(id);            info.setOk();        } catch (Exception e) {            e.printStackTrace();            info.setError();        }        return info;    }

插入数据

默认是接收key-value格式的数据，如果前端传入的是json格式的数据，那么数据就会接收失败，如果我们希望前端传送的数据是json格式的数据，那么，我们就需要在Controller中，在参数前面加上@RequestBody注解(把请求体中的json格式转换为对应Java实体类格式)
Controller

     @PostMapping("/school/cls")    public ResultInfo addCls(Cls cls){        ResultInfo info = new ResultInfo();        try {            clsService.insert(cls);            info.setOk();            info.setData(cls);        } catch (Exception e) {            e.printStackTrace();            info.setError();        }        return info;    }

Service

public interface ClsService {        List<Cls> queryAllCls() throws Exception;        Cls queryClsById(Integer id) throws Exception;    void deleteById(Integer id) throws Exception;    void insert(Cls cls) throws Exception;}

Service实现类

@Servicepublic class ClsServiceImpl implements ClsService {    @Autowired    private ClsMapper clsMapper;    @Override    public List<Cls> queryAllCls() throws Exception {        return clsMapper.queryAllCls();    }    @Override    public Cls queryClsById(Integer id) throws Exception {        return clsMapper.queryClsById(id);    }    @Override    public void deleteById(Integer id) throws Exception {        clsMapper.deleteById(id);    }    //添加数据    @Override    public void insert(Cls cls) throws Exception {        clsMapper.insert(cls);    }}

Mapper

@Mapperpublic interface ClsMapper {      @Select("select * from cls")   List<Cls> queryAllCls() throws Exception;      @Select("select * from  cls where id=#{id}")   Cls queryClsById(@Param("id") Integer id);      @Delete("delete from  cls where id=#{id}")    void deleteById(@Param("id") Integer id);      @Insert("insert into cls values(default,#{name})")   @Options(useGeneratedKeys = true,keyColumn = "id",keyProperty = "id")   void insert(Cls cls);}

image.png
通过数据库查询的前后两次对比可以很清楚的发现，插入数据成功了
image.png

根据班级编号修改数据

Controller

 @PutMapping("/school/cls/{id}")    public ResultInfo updateById(@PathVariable("id") Integer id,String name){        ResultInfo info = new ResultInfo();        try {            clsService.updateById(id,name);            info.setOk();            info.setData(new Cls(id,name));        } catch (Exception e) {            e.printStackTrace();            info.setError();        }        return info;    }

Service

public interface ClsService {        List<Cls> queryAllCls() throws Exception;        Cls queryClsById(Integer id) throws Exception;    void deleteById(Integer id) throws Exception;    void insert(Cls cls) throws Exception;    void updateById(Integer id, String name) throws Exception;}

Service实现类

@Servicepublic class ClsServiceImpl implements ClsService {    @Autowired    private ClsMapper clsMapper;    @Override    public List<Cls> queryAllCls() throws Exception {        return clsMapper.queryAllCls();    }    @Override    public Cls queryClsById(Integer id) throws Exception {        return clsMapper.queryClsById(id);    }    @Override    public void deleteById(Integer id) throws Exception {        clsMapper.deleteById(id);    }    @Override    public void insert(Cls cls) throws Exception {        clsMapper.insert(cls);    }    @Override    public void updateById(Integer id, String name) throws Exception {        clsMapper.updateById(id,name);    }}

Mapper

@Mapperpublic interface ClsMapper {      @Select("select * from cls")   List<Cls> queryAllCls() throws Exception;      @Select("select * from  cls where id=#{id}")   Cls queryClsById(@Param("id") Integer id);      @Delete("delete from  cls where id=#{id}")    void deleteById(@Param("id") Integer id);      @Insert("insert into cls values(default,#{name})")   @Options(useGeneratedKeys = true,keyColumn = "id",keyProperty = "id")   void insert(Cls cls);      @Update("update cls set name=#{name} where id=#{id} ")   void updateById(@Param("id") Integer id, @Param("name") String name);}

image.png
通过查询数据库中的数据，也可以发现数据改变了
image.png

结束语

在下一篇文章中会讲到跨域处理
在这里插入图片描述

来源地址：https://blog.csdn.net/qq_52797170/article/details/126314252

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Spring Boot前后端分离之后端开发

本文链接: https://www.lsjlt.com/news/393895.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • Spring Boot前后端分离之后端开发
    Spring Boot前后端分离开发之后端开发 前后端分离开发概述相关术语前后端分离开发概述 接口规范RESTful API的理解RESTful风格的特点URI规范路径请求方式...
    99+
    2023-09-04
    spring boot 后端 java
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【二】
    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【二】的，希望你能够喜欢 ...
    99+
    2023-09-03
    spring boot 后端 java
  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】
    😀前言 本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】，希望你能够喜欢 &...
    99+
    2023-09-10
    spring boot 后端 java
  • 分享两个开源的Spring Boot + Vue前后端分离项目
    这篇文章主要介绍“分享两个开源的Spring Boot + Vue前后端分离项目”，在日常操作中，相信很多人在分享两个开源的Spring Boot + Vue前后端分离项目问题上存在疑惑，小编查阅了各式资料...
    99+
    2022-10-19
  • 前后端分离之VueJS前端的示例分析
    这篇文章给大家分享的是有关前后端分离之VueJS前端的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。前言前端用什么框架都可以，这里选择小巧的vuejs。要实现的功能很简单...
    99+
    2022-10-19
  • python开发前后端分离的好处
    这篇文章主要介绍“python开发前后端分离的好处”，在日常操作中，相信很多人在python开发前后端分离的好处问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”python开发前后端分离的好处”的疑惑有所帮助！...
    99+
    2023-06-02
  • 前后端分离djangorestframe
    关于验证码部分，在我这篇文章里说的挺详细的了：Python高级应用（3）—— 为你的项目添加验证码   这里还是再给一个前后端分离的实例，因为极验官网给的是用session作为验证的，而我们做前后端分离的用的是token，而不是sessi...
    99+
    2023-01-30
    后端 djangorestframe
  • thinkPHP5前后端分离
    thinkPHP5前后端分离 环境配置并运行起thinkphp安装小皮面板安装phpstorm配置thinkPHP5将文件放入适当位置修改Nginx配置修改配置和伪静态 跨域前端 ...
    99+
    2023-10-11
    php 前端 nginx 1024程序员节
  • Vue之前端体系与前后端分离详解
    目录概述前端知识体系前端三要素表现层（CSS）行为层（JavaScript）JavaScript 框架 UI框架JavaScript 构建工具三端统一混合开发（Hybrid...
    99+
    2022-11-12
  • 前后端分离架构
    前后端分离在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，App有App的处理方式，但无论哪种...
    99+
    2023-01-31
    架构 后端
  • node vue项目开发之前后端分离的示例分析
    这篇文章主要介绍node vue项目开发之前后端分离的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！node vue项目开发最近看了近一周的vue开发，有诸多感触，我之前接触...
    99+
    2022-10-19
  • Spring Boot和Vue前后端分离项目架构的全过程
    目录Spring Boot+Vue 前后端分离项目架构1. SpringBoot 后端项目2. Vue 前端项目总结Spring Boot+Vue 前后端分离项目架构 项目流程： ...
    99+
    2022-11-13
  • web前后端分离与前后端不分离的区别是什么
    本篇内容主要讲解“web前后端分离与前后端不分离的区别是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“web前后端分离与前后端不分离的区别是什么”吧!前后端...
    99+
    2022-10-19
  • thinkphp怎么实现前后端分离的开发
    这篇文章主要讲解了“thinkphp怎么实现前后端分离的开发”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“thinkphp怎么实现前后端分离的开发”吧！跨域访问在前后端分离的开发中，前端通常...
    99+
    2023-07-05
  • Spring Boot和Vue前后端分离中如何实现文件上传
    本篇内容介绍了“Spring Boot和Vue前后端分离中如何实现文件上传”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！准备工作首先我们需要...
    99+
    2023-07-04
  • spring boot+vue 的前后端分离与合并方案实例详解
    springboot和vue结合的方案网络上的主要有以下两种： 【不推荐】在html中直接使用script标签引入vue和一些常用的组件，这种方式和以前传统的开发是一样的，只是可以很爽的使用vue的双向数据绑定，这种方式只适合于普通的全栈开...
    99+
    2023-05-30
    spring boot vue
  • Web前后端分离开发的方法是什么
    本篇内容主要讲解“Web前后端分离开发的方法是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Web前后端分离开发的方法是什么”吧!在传统的Web应用开发中，大多数的程序员会将浏览器作为前后端...
    99+
    2023-06-01
  • Python学习教程：前后端分离开发入门
    今天的Python学习教程跟大家讲讲关于：前后端分离开发入门的相关内容！在传统的Web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有...
    99+
    2023-06-02
  • git前后端分离怎么用
    随着前端技术的繁荣发展，前端领域出现了越来越多的框架和技术，前后端分离也成为了现阶段 web 开发的一种趋势。其中，git 的使用对于前后端分离的管理起到了至关重要的作用。本文将介绍 git 前后端分离的使用方法。一、前后端分离的基本概念前...
    99+
    2023-10-22
  • 前后端分离架构+k8s+ingress
    在前面几篇文章中，已经讲到了前后端分离架构和ingress，链接如下：https://www.cnblogs.com/xiao987334176/p/12195722.htmlhttps://www.cnblogs.com/xiao9873...
    99+
    2023-01-31
    架构 后端 ingress
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作