SpringBoot前后端的交互过程

交互格式：json

1. 交互过程

1. 前端发送请求： ○ 前端使用 JavaScript 或其他前端框架（如 Vue.js、React 等）发送 HTTP 请求到后端。 ○ 请求可以包含数据，如请求参数、请求体（JSON、表单数据等）。
2. 后端接收请求： ○ 后端使用 Spring Boot 框架中的控制器（Controller）来接收前端发送的请求。 ○ @ResponseBody 等注解会将返回值转换为 JSON 格式 ○ 控制器根据请求路径、请求方法等信息来匹配对应的处理方法。
3. 后端处理请求： ○ 后端控制器中的处理方法会执行相应的业务逻辑，如查询数据库、处理业务逻辑等。 ○ 后端可以使用服务层（Service）来处理业务逻辑，访问数据层（Repository）来操作数据库。
4. 后端返回响应： ○ 后端处理完请求后，会生成相应的数据作为响应。 ○ 响应可以是数据对象、错误消息、HTML 页面等。 ○ 后端可以使用 Spring Boot 框架提供的 @ResponseBody 注解将返回值转换为 JSON 或其他格式的数据。
5. 前端处理响应： ○ 前端接收到后端返回的响应数据，可以通过 JavaScript 或前端框架进行处理。 ○ 前端可以解析响应数据，更新页面内容、显示错误消息等。

2. 实例

假设我们有如下数据表

若实现将数据读取到前端页面显示

后端部分

1. 创建User类

packagecom.lnu.pojo;importlombok.Data;@DatapublicclassUser{privateLong id;privateString name;privateInteger age;privateString email;}

1. 创建对应的Controller类

packagecom.lnu.controller;importcom.lnu.pojo.User;importcom.lnu.service.UserServer;importorg.springframework.web.bind.annotation.*;importjavax.annotation.Resource;importjava.util.List;@RestControllerpublicclassUserController{@ResourceprivateUserServer userServer;@GetMapping("/user/list")publicList<User>getUserInfo(){return userServer.getUserInfo();}}

1. 创建Mapper类

packagecom.lnu.mapper;importcom.baomidou.mybatisplus.core.mapper.BaseMapper;importcom.lnu.pojo.User;publicinterfaceUserMapperextendsBaseMapper<User>{}

1. 创建Server接口

packagecom.lnu.service;importcom.baomidou.mybatisplus.extension.service.IService;importcom.lnu.pojo.User;importjava.util.List;publicinterfaceUserServerextendsIService<User>{List<User>getUserInfo();}

1. 创建ServerImpl类

importorg.springframework.stereotype.Service;importjavax.annotation.Resource;importjava.util.List;@ServicepublicclassUserServerImplextendsServiceImpl<UserMapper,User>implementsUserServer{@ResourceprivateUserMapper userMapper;@OverridepublicList<User>getUserInfo(){List<User> users = userMapper.selectList(null);return users;}}

前端部分

1. 在components下创建UserInfo.vue，利用axios进行交互

<template><el-table
    :data="users"
    border
    style="width: 29%"><el-table-column
      prop="id"
      label="编号"
      width="100"></el-table-column><el-table-column
      prop="name"
      label="姓名"
      width="150"></el-table-column><el-table-column
      prop="age"
      label="年龄"
      width="100"></el-table-column><el-table-column
      prop="email"
      label="邮箱"
      width="200"></el-table-column></el-table></template><script>importaxios from "axios";

  export default{
    name:"UserInfo",data(){return{
        users:null}},mounted(){this.getUserInfo();},
    methods:{getUserInfo(){
        axios.get('/user/list').then(res=>{
            console.log(res)this.users = res.data
          }).catch(error =>{
            console.error(error);});}}}</script><style scoped></style>

1. 在App.vue中注册组件

<template><div id="app"><UserInfo/></div></template><script>importUserInfo from './components/UserInfo.vue'

export default{
  name:'App',
  components:{UserInfo}}</script><style></style>

启动前后端

由于前端运行在端口8082上而后端运行在8088端口上，Vue存在跨域问题

在后端编写CorsConfig 类解决跨域问题

packagecom.lnu.config;importorg.springframework.context.annotation.Configuration;importorg.springframework.web.cors.CorsConfiguration;importorg.springframework.web.servlet.config.annotation.CorsRegistry;importorg.springframework.web.servlet.config.annotation.WebMvcConfigurer;/**
 * 跨域问题
 */@ConfigurationpublicclassCorsConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")//是否发送Cookie.allowCredentials(true)//放行哪些原始域.allowedOriginPatterns("*").allowedMethods(newString[]{"GET","POST","PUT","DELETE"}).allowedHeaders("*").exposedHeaders("*");}}