SpringBoot+vue+JPA实现前后端分离简单流程（后端）

一、准备数据源

在mysql创建下表university：

二、后端

1、持久化

 （1）创建实体类

因为持久层采用的JPA，所以注意类名和表名对应，类属性和表属性对应。如下UniversityList：

@Data
@Entity
public class University {
    @Id
    private String universityId;
    private String universityName;
    private String universityLevel;
    private Integer interest;
    private String universityIma;
}

（2）JPA关联实体类

public interface UniversityRepository extends JpaRepository<University, String> {
    
}

（3）配置数据库连接环境

在resources下的application.yml（没有就自己创建）配置

server:
  port: 8181
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/gaagle?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
    username: root
    password:
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true

建立测试类测试是否联通

@SpringBootTest
class UniversityRepositoryTest {
    @Autowired
    private UniversityRepository universityRepository;

    @Test
    void findAll(){
        List<University> lists = universityRepository.findAll();
        for (University list : lists) {
            System.out.println(list);
        }
    }
}

打印出数据库信息说明成功：

JPA只提供了一些通用的数据库方法，需要某些独特的CRUD还得自己写，比如想根据学校类别查询，需要在repository接口写一个方法，注意要与数据字段对应。

public interface UniversityRepository extends JpaRepository<University, String> {
    public List<University> findUniversityByUniversityLevel(String universityLevel);
}

测试：

 @Test
void findByLevel(){
        List<University> lists =         
           universityRepository.findUniversityByUniversityLevel("211");
        for (University list : lists) {
            System.out.println(list);
        }
    }
}

结果如下：

所有的sql操作JPA都提供了API调用即可。

 

2、Service层

以读取所有学校信息为例，其返回的数据格式如下，主要是array的内容：

确定视图对象，即最后返回前端的对象，是对持久层相应（UniversityVO）实体类的封装

@Data
@AllArgsConstructor
public class UniversityVO {
    @JsonProperty("id")
    private String universityId;
    @JsonProperty("name")
    private String universityName;
    @JsonProperty("level")
    private String universityLevel;
    @JsonProperty("interest")
    private Integer interest;
    @JsonProperty("ima")
    private String universityIma;

    public UniversityVO() {
        //@AllArgsConstructor失效，手动添加无参构造
    }
}

再对UniversityVO进行封装为DataVO

@Data
public class DataVO {
    private List<UniversityVO> universities;
}

编写service层接口返回dataVO对象

public interface UniversityService {
    public DataVO findDataVO();
}

实现接口

@Service
public class UniversityServiceImpl implements UniversityService {

    @Autowired
    private UniversityRepository universityRepository;

    @Override
    public DataVO findDataVO() {
        DataVO dataVO = new DataVO();
        List<University> list = universityRepository.findAll();
        List<UniversityVO> lists = new ArrayList<>();

        //将实体复制到对应的vo
        for (University university : list) {
            UniversityVO universityVO = new UniversityVO();
            BeanUtils.copyProperties(university, universityVO);
            lists.add(universityVO);
        }
        dataVO.setUniversities(lists);
        return dataVO;
    }
}

debug下测试接口结果如下结果成功取出：

再对dataVO做封装，加上code和msg两个属性封装为ResultVO：

@Data
public class ResultVO<T> {
    private String code;
    private String msg;
    private T data;
}

 

3、Controller层

@RestController
@RequestMapping("/university")
public class UniversityController {

    @Autowired
    private UniversityService universityService;

    @GetMapping("/index")
    public ResultVO index(){//所有学校信息
        return ResultVOUtil.success(universityService.findDataVO());
    }

    @GetMapping("/index/{level}")
    public ResultVO findByLevel(@PathVariable("level") String level){//带参查询
        return ResultVOUtil.success(universityService.findDataVOByLevel(level));
    }
}

其中 ResultVOUtil代码如下：

public class ResultVOUtil {
    public static ResultVO success(Object data){
        ResultVO resultVO = new ResultVO();
        resultVO.setCode("0");
        resultVO.setMsg("成功");
        resultVO.setData(data);
        return resultVO;
    }

    public static ResultVO error(String error){
        ResultVO resultVO = new ResultVO();
        resultVO.setCode("1");
        resultVO.setMsg(error);
        resultVO.setData(null);
        return resultVO;
    }
}

 

在浏览器输入http://localhost:8181/university/index，结果如下则说明成功

其他功能依样画葫芦吧，下面只需要在前端负责显示即可。