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类

package com.lnu.pojo;

import lombok.Data;


@Data
public class User {
    private Long id;
    private String name;
    private Integer age;
    private String email;
}

2. 创建对应的Controller类

package com.lnu.controller;


import com.lnu.pojo.User;
import com.lnu.service.UserServer;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@RestController
public class UserController {
    @Resource
    private  UserServer userServer;

    @GetMapping("/user/list")
    public List<User> getUserInfo() {
        return userServer.getUserInfo();
    }

}

3. 创建Mapper类

package com.lnu.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.lnu.pojo.User;

public interface UserMapper extends BaseMapper<User> {
}

4. 创建Server接口

package com.lnu.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.lnu.pojo.User;

import java.util.List;

public interface UserServer extends IService<User> {
    List<User> getUserInfo();
}

5. 创建ServerImpl类

import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

@Service
public class UserServerImpl extends ServiceImpl<UserMapper, User> implements UserServer {
    @Resource
    private UserMapper userMapper;
    @Override
    public List<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>
  import axios 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>

2. 在App.vue中注册组件

<template>
  <div id="app">
    <UserInfo/>
  </div>
</template>

<script>
import UserInfo from './components/UserInfo.vue'

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

<style>
</style>

启动前后端

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

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

package com.lnu.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 跨域问题
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                //是否发送Cookie
                .allowCredentials(true)
                //放行哪些原始域
                .allowedOriginPatterns("*")
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}