前后端交互整合

最新推荐文章于 2023-12-13 08:37:52 发布
最新推荐文章于 2023-12-13 08:37:52 发布
阅读量602 收藏 1
点赞数
分类专栏： 数据库 文章标签： java intellij-idea maven spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sayhitoloverOvO/article/details/119894252
版权

框架

1.SpringBoot（框架的框架/工具）

2.Spring（整合第三方框架）

3.springMVC（实现前后端的交互）

4.mybatis/MP（实现持久化操作）

 在这里插入图片描述

spring框架流程：

1.主要流程依然不变，数据从网页端发送请求，

2，3.服务器收到请求，并参考pojo的对象类整理请求参数

4.从Controller模块中找到对应的方法.

5.加载对应服务类

6.加载对应接口的实现方法

7.加载映射文件（MyBatis）

8.实现DB

创建代码层

模型层（pojo），                @Component：将该类交给spring管理

持久层（mapper/dao），   @MapperScan：将该类交给spring管理

业务层（service），           @Service：将该类交给spring管理

控制层（controller），        @RestController=@Controller+@ResponseBody

        @ResponseBody：将服务器数据转化为JSON返回

        @Controller：         将该类交给spring管理

        public class UserController

        {

                @Autowired

                //编码规则：面向接口开发：解耦

                private UserService userService;使用接口

        }

项目层次

 在这里插入图片描述

 控制层（controller）

@RequestMapping可以接受get，post，put，delete请求

@GetMapping            只能接受get请求

@PostMapping           只能接受post的请求

@PutMapping             只能接受Put的请求

@DeleteMapping        只能接受Delete的请求

SpringMVC可以利用对象的方式接收

        底层实现：将参数“name=XXX”  拼接为setname，之后检查是否存在对应的Setname（），如果存在就为对象赋值。

1.参数名称必须与url中的名称一致

2.SpringMVC可以根据用户的需求，自动实现类型的转换 

        底层实现，SpringMVC可以根据用户的参数类型，自动实现类的转化，

//控制类UserController代码

//SpringMVC直接根据网页传输的数据整理成user对象，传输进方法中

@GetMapping("findByUser")
    public User findUserById(User user){
        return userService.findByUser(user);
    }

//服务层UserServiceImpl的代码

 //MP可以直接将对象中不为null的值作为where的条件

public User findByUser(User user) {

        //直接将user作为对象填入QueryWrapper中，MP会自动将对象中不为null的值作为where的条件

        QueryWrapper<User> queryWrapper = new QueryWrapper(user);

                //仅限关系为=时可以使用user封装

        return userMapper.selectOne(queryWrapper);

}

RestFul说明

Get请求：localhost:/8090/findUserByNS?王昭君/女

信息

  1. 用户不能了解请求的意图，
  2. 参数保密，只有后端服务器了解参数的意义
  3. 请求字节传输量少，简介

规定：

        请求的方法不能出现动词！只能写名词。

注意事项：

  1. url地址中的参数与参数之间使用/分隔
  2. 参数的位置但固定，不能轻易修改
  3. 用户发起请求时，应该按照restFull的结构执行
  4. restFul请求一般以get请求为主.put/delete/post

案列

前端数据

查询name=“sayhi” age<18岁的用户

URL:http://localhost:8090/user/sayhi/18     对应控制层：@GetMapping("/user/{name}/{age}")

URL:http://localhost:8090/user/sayhi,18     对应控制层：@GetMapping("/user/{name},{age}")

数值与数值之间的隔断关系如何，那么控制层获取数据的方式也要一一对应

后端接收

接受规则：

  1. 参数与参数之后使用/分隔
  2. 参数的位置一旦确定，一般不变
  3. 接受的参数使用{变量名}        
  4. 使用@PathVariable 接受
  5. 如果参数有多个，建议使用对象接受 参数必须与属性名一致

注意：如果名称不统一，@PathVariable（原名） String 别名,

public List<User> findUserById2(@PathVariable（name）String userName){}

URL:http://localhost:8090/user/sayhi/18

参数：name/age

返回值：list<User>

 编辑UserController

@GetMapping("/user/{name},{age}")

public List<User> findUserByNA(User user){

        return userService.findByUser(user);

}

 编辑UserServiceImpl

//参数有多个，参数必须与属性名一致，可以使用对象接收数据

public List<User> findByUser(User user) { 

        判定关系不都是"="的关系，包含比较关系"<",无法直接将user作为对象传入

        QueryWrapper queryWrapper = new QueryWrapper();

        //使用判断方法，如果为空，就不执行，增加了代码的耦合性，减少编程压力

        queryWrapper.eq(user.getId()!=null,"id",user.getId())

                        .eq(user.getName()!=null,     "name",      user.getName())

                        .gt(user.getAge()!=null,         "age"  ,       user.getAge() )

                        .eq(user.getSex()!=null,        "sex" ,         user.getSex() );

        直接将查询结果作为数据输出返回

        return userMapper.selectList(queryWrapper);

}

查询多个用户

URL：http://localhost:8090/findUserByIds?id=1,2,3,4,5,6

规则：如果参数使用“，”分割，则SpringMVC可以自动转化为数组

将数组转化为列表，就可以使用列表进行查找了

 编辑UserController
 

@GetMapping("/getUserByIds")

        //SpringMVC可以自动将多个数据转化为数组

        public List<User> getUserByIds(Integer[] ids){

        return userService.getUserByIds(ids);
    }

 编辑UserServiceImpl

@Override

public List<User> getUserByIds(Integer[] ids) {

        //将数组转化为列表，就可以使用列表进行查找了

         List<Integer> idList = Arrays.asList(ids);

         return userMapper.selectBatchIds(idList);

}

@RestController
@RequestMapping
public class UserController {
    @Autowired
    private UserService userService;
    @RequestMapping("findAll")
    public List<User> findAll(){
        return userService.findAll();
    }

    //1.参数名称必须与url中的名称一致
    //2.SpringMVC可以根据用户的需求，自动实现类型的转换
        //底层实现，SpringMVC可以根据用户的参数类型，自动实现类的转化，
    @GetMapping("findUserById")
    public User findUserById(Integer id){
        return userService.findUserById(id);
    }

    @GetMapping("findByUser")
    public User findUserById(User user){
        return userService.findByUser(user);
    }
}

jar包的继承/导入

   <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.3</version>
        <relativePath/>
    </parent>

    <properties>
        <!--指定JDK版本-->
        <java.version>1.8</java.version>
        <!--跳过测试类打包-->
        <skipTests>true</skipTests>
    </properties>

    <!--按需导入
        历史说明: 2010 原来SSM 需要手动的编辑大量的的配置文件
        思想: SpringBoot使用体现了"开箱即用"的思想
    -->
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <!--Springboot的启动器 在内部已经将整合的配置写好,实现拿来就用-->
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!--支持热部署 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>

        <!--引入插件lombok 自动的set/get/构造方法插件  -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <!--引入数据库驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!--springBoot数据库连接  -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

        <!--spring整合mybatis-plus 删除mybatis的包 -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.3</version>
        </dependency>

    </dependencies>

 配置文件application.yml

#是一个特殊的文件,特殊在这个文件将被springboot框架自动加载-开箱即用
#格式非常严格,k: v
#端口配置
server:
  port: 8090
#配置数据源

#SpringBoot配置mysql信息
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
    username: root
    password: root
#SpringBoot整合Mybatis配置
mybatis-plus:
  #定义别名包
  type-aliases-package: com.jt.pojo
  #指定UserMapper.xml文件的位置
  #地址位置要填入相对对应地址
  mapper-locations: classpath:/mappers/*.xml
  #mapper-locations: classpath*:/*.xml 强制扫描外面的包的配置文件

  #开启驼峰映射
  #mybatis 功能1：可以实现结果集和实体对象的映射
    #对象与表一一对应
    #对象中的属性对象与表中的字段 一一对应
    #User(userId,userName)
    #User表(user_id,user_name)
    #resulttype:不能映射
    #resultMap金可以映射
    #简化上述操作引入驼峰规则

    #思考，开启驼峰规则如下是否可以映射？
    #User(user_id,user_name)
    #ser表(user_id,user_name)

  configuration:
    map-underscore-to-camel-case: true
#打印sql语句
logging:  #日志
  level:  #等级
     com.jt.mapper: debug #为com.jt.mapper的执行打印日志

启动层RunApp

@SpringBootApplication
@MapperScan(value = "com.jt.mapper")
public class RunApp {
    public static void main(String[] args) {
        SpringApplication.run(RunApp.class, args);
    }
}

模型层（pojo）

//序列化作用，保证对象网络传输的有效性！！！！

//1.将对象与表进行关联
//规则，1.如果表名与类中的名一致，则可省略不写
//     2.对项名与属性名如果一直，则注解可以省略不写
@TableName("demo_user")
public class User implements Serializable{//固定写法

    //2.主键自增/非空/UUID
    //UUID生成唯一编号
    @TableId(type = IdType.AUTO,value = "id")
    private Integer id;

    //3.标识属性与字段的映射
    //@TableField("name")
    private String name;
    private Integer age;
    private String sex;
}

 持久层（mapper/dao）

//规则1：继承basemap时，不许添加面向目标的泛型对象
//规则2：自己的方法不要与接口方法重名
public interface UserMapper extends BaseMapper<User> {
    //@Mapper //将该接口交给Spring管理,spring创建对象
    User find(User user);
    List<User> find();
}

服务层（service）接口文件

@Service
public interface UserService {
    List<User> findAll();
}

 服务层（service）实现文件

@Service
public class UserServiceImpl implements UserService{
    @Autowired
    private UserMapper userMapper;


    @Override
    public List<User> findAll() {
        return userMapper.selectList(null);
    }
}

完成前后端的测试

查询案列

浏览器输入地址：http：//localhost：8090/findAll                                查询全部数据

                             http：//localhost：8090/findUserById?id=10            查询id=10的数据

要求利用mp查询数据库返回集合的JSON数据

sayhitoloverOvO
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Spring+Vue全栈实战i项目.pdf Spring和Vue.js是两个流行的开发框架，可以通过前后端分离的方式进行整合
07-25
创建Spring Boot项目：使用Spring Initializr或其他方式创建一个基于Spring Boot的项目。 设置后端API：在Spring Boot项目中，创建后端API接口，用于与前端进行数据交互。可以使用Spring MVC来创建控制器类，并定义接收请求和返回响应的方法。 搭建前端Vue.js环境：在项目中创建一个目录用于存放Vue.js相关文件（如 ​src/main/resources/static​），然后初始化Vue.js项目。使用Vue CLI可以帮助您初始化并管理Vue.js项目结构。 开发前端组件：使用Vue.js开发前端页面和组件。可以使用Vue的模板语法、指令和组件系统来创建交互式的前端界面。 发送API请求：在Vue.js组件中，使用Axios或其他HTTP库发送异步请求调用后端API。通过向后端发送请求并处理响应，实现前后端数据交互。 集成前后端：将前端Vue.js项目编译打包为静态资源（如HTML、JS、CSS文件等），然后将其复制到Spring Boot项目的静态资源目录中。在Spring Boot项目中配置好前端静态资源的访问路
前后端分离及整合
qq_46681199的博客
09-17 5603
在传统的 Java Web 开发模式中，前端写好HTML。 接着，后端在 前端写好的HTML中**“嵌入”**JSP代码，如果后端在开发的过程中遇到页面显示上的问题，就会去找前端询问。 但是前端看不懂JSP代码，往往造成效率低的情况。 后来就有了前后端分离的概念 前后端开发人员提前约定好接口文档（参数、数据类型），然后并行开发，最后完成前后端集成。 前端 HTML 页面通过 Ajax 调用后端API（方法函数） 进行数据交互，提高开发效率。 前后端整合 整合的思路有两种： 一：把前端的资源打包放入到spr
基于 SpringBoot 的 SSM(Spring + SpringMVC + MyBatis) 前后端分离的家政服务管理系统
06-15
基于 SpringBoot 的 SSM(Spring + SpringMVC + MyBatis) 前后端分离的家政服务管理系统，项目经过测试，确保可以运行！ 采用前后端分离架构，前端Vue.js,后端SpringBoot，各司其职。 前后端通过swagger API进行交互。 无需手写SQL，使用Mybatis-generator作为持久层orm框架。 使用travis完成自动构建、测试、推送镜像实现高度自动化。 开箱即用，没有复杂的业务，是学习拓展的不二之选。 目的 随着互联网行业的发展，开发技术也在不断更新，格式各样的技术体系层出不穷。作为一个开发人员，我们会不断的进行新技术的学习与实践。但如果每次只是单纯的学习，没有实际应用的话，则没有太大的意义。我们需要一个项目将日常中所用和所学整合起来，以便后续有需要可以直接上手。 如果忘记，也可以温故而知新，所以诞生了Lustre这个项目，这个项目没有复杂的业务为的是学习拓展更加方便。但“麻雀虽小，五脏俱全”，以真正的企业级项目作为标准，最终开发而成。 希望大家可以利用此项目更好的学习springboot、Vue.js等相关技术栈。
【抽奖平台开发（2）HTML+JS+PHP】抽奖结果的表单提交，实现Web前后端的数据交互.zip
08-22
配套文章地址：https://dengxj.blog.csdn.net/article/details/99729936；文章通过使用HTML+JS+PHP，记录了将抽奖结果通过表单方式提交至后台的方法，这里上传一份整合后的源码，以供学习参考。
基于 SpringBoot 的 SSM前后端分离的家政服务管理系统+源代码+文档说明
11-28
# 基于springboot家政服务管理系统 > 这是一款基于springboot 2.1.8.RELEASE，Vue.js的前后端分离的家政服务管理系统。 - 采用前后端分离架构，前端Vue.js,后端SpringBoot，各司其职。 - 前后端通过swagger API进行交互。 - 无需手写SQL，使用Mybatis-generator作为持久层orm框架。 - 使用travis完成自动构建、测试、推送镜像实现高度自动化。 - 开箱即用，没有复杂的业务，是学习拓展的不二之选。 ## 目的 > 随着互联网行业的发展，开发技术也在不断更新，格式各样的技术体系层出不穷。作为一个开发人员，我们会不断的进行新技术的学习与实践。但如果每次只是单纯的学习，没有实际应用的话，则没有太大的意义。我们需要一个项目将日常中所用和所学整合起来，以便后续有需要可以直接上手。 如果忘记，也可以温故而知新，所以诞生了Lustre这个项目，这个项目没有复杂的业务为的是学习拓展更加方便。但“麻雀虽小，五脏俱全”，以真正的企业级项目作为标准，最终开发而成。 希望大家可以利用此项目更好的学习springboot、Vue.js等相关技术栈。丰富前后端分离架构经验，更好的了解前后端分离项目的交互运作。 ## #### 后端： - spring-boot - spring-boot-actuator - undertow - swagger - MySQL - spring-Mybatis - travis CI - 流式、链式编程 - ... #### 前端:(待总结) ##快速上手 #### 使用前须知： 1. 本项目由于使用Mybatis作为持久层orm框架，所以并没有建表sql，项目目录中自然也就没有Sql脚本文件。 2. 默认配置使用的数据库为MySQL。MySQL是一款内存数据库，轻盈便利，适合轻量级项目使用，且方便测试。 #### 使用操作 ​ 即拿即用，操作简便。 ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
前后端交互详解(建议收藏)
热门推荐
Oriental_的博客
03-09 9万+
1.前后端认知 相信很多人心里都有一个疑惑：我⼀个前端， 为什么要学习后端？
【前后端结合】从 0 到 1 实现一个网站框架（一、注册 [1] ）
weixin_46836893的博客
11-20 958
【前端】从 0 到 1 实现一个网站框架！（一、注册 [1] ） 本篇文章主要完成了注册页面的样式搭建，可以接收用户输入的信息并判断是否合规。 有详细解释 & 超全代码哦！ 一只初二女生的代码日常呀~
最简单的前后端连接（新手小白）
m0_65380423的博客
11-16 9394
最最最简单的一个前后端连接，适合小白体验
nginx 实现 前后端代码整合
帮助他人让生命更有意义
12-05 3202
nginx 实现 前后端代码整合
从前后端分离到前后端整合的“退步”（一）项目结构
夜无星的博客
12-18 808
在前后端分离十分流行的现在，如何用Maven进行前后端分离的这整合，即使用Maven对Spring Boot + Vue进行前后端打为一个jar包，本文是对项目结构的一个配置。
springmvc+ajax+mybatis前后端整合珍藏版
01-08
springmvc +jquery springmvc+ mybatis 整合 实例 带数据库
基于abp vnext实现的前后端分离管理系统.zip
最新发布
04-13
用户界面与交互模块：提供友好的人机交互界面，方便用户操作使用。 二、主要类型与功能 管理系统根据所针对的管理对象和领域，可分为多种类型，如： 人力资源管理系统（HRM）：涵盖招聘、培训、绩效考核、薪酬...
HTML前端笔记Day9
小白猿想成为Simba
11-23 429
一,模拟Servlet解析请求参数 1,测试 package cn.tedu; //模拟Servlet解析请求参数的对象Request public class MyRequest { public static void main(String[] args) { //this是代表的本类对象,static里不能出现this,原因就是加载顺序 // this.getParamter(); MyRequest my = new MyRequest(
springboot+vue的前后端分离与合并方案
weixin_34008933的博客
03-01 309
pringboot和vue结合的方案网络上的主要有以下两种： 1. 【不推荐】在html中直接使用script标签引入vue和一些常用的组件，这种方式和以前传统的开发是一样的，只是可以很爽的使用vue的双向数据绑定，这种方式只适合于普通的全栈开发。 2.【推荐】使用vue官方的脚手架创建单独的前端工程项目，做到和后端完全独立开发和部署，后端单独部署一个纯restful的服务，而前端直接采用ng...
vue--nodejs整合前后端
2301_77664771的博客
07-15 422
Node.js 是一个开源、跨平台的 JavaScript 运行时环境可以cmd黑窗口命令查看自己的电脑是否安装了nodejs如果没有可以去官网下载注意：下载安装时，切记不要安装在中文目录下安装完成，可也使用命令，查看是否安装成功。
SpringBoot+Vue3前后端快速整合入门
Hi，我是sharkchili，CSDN Java领域博客专家，开源项目JavaGuide维护人员，我想写一些有意思的东西，希望对你有帮助。
12-13 4022
最近需要维护一个个人项目，由于笔者是一个大后端，所以借此机会把前端学习过程记录一下，方便后续回顾。node_modules:类似后端中maven在pom引入依赖后，导入的依赖一样，这个node_modules就是前端依赖引入的位置。public:存放静态文件的位置。assets:log文件存放处。components:编写自己的通用vue组件的文件夹。例如你的网站有通用的header和footer，就可以抽取一个组件，存放到这个位置，然后引入到需要的页面即可。
前后端合并
sunsgne_AC的专栏
02-28 7567
前后端分离开发是现在比较流行的一种方式，这样开发的前提是前端采取的是Ajax请求，前后端分离能省去很多不必要的麻烦，让开发者更关注与自己模块的开发。但是开发完成之后需要合并，我用后端用的是Springboot 合并其实挺简单这个是后端的文件目录     这个是前端的目录合并时将用到的文件复制到后端的Resources目录的static或resource文件夹下     就是要注意一下里面的坑1.合...
mybatis-plus的LambdaQueryWrapper中and、or的用法
qq_52199369的博客
12-11 1217
mybatis-plus的LambdaQueryWrapper中and、or的用法
前后端结合(三)
qq_35673187的博客
08-21 603
前言 从下午到晚上, 构建了springboot的后台然后将后台和前端关联起来, 前端发送请求后端接收, 完成简单的登录逻辑判断. 由于是新手花费了很多时间. 感觉后端分层并不是很清晰.同时很多技术问题,仅仅是复制黏贴, 先追求跑通代码, 没有理解运行细节, 如果错误希望大佬不吝赐教. 前端请求 疑问1: axios请求 前端发表单数据post请求,应该采用什么格式? form-data/form-urlencoded/json // 表单信息 loginForm: { username: 'adm
thymeleaf怎么实现前后端交互
04-04
Thymeleaf可以通过以下方式实现前后端交互： 1. 表单提交 通过表单提交，将表单中的数据传递到后端，后端进行处理后再将结果返回给前端页面。Thymeleaf可以通过表单标签和表达式来实现表单提交。 2. Ajax请求 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sayhitoloverOvO

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值