利用springboot连接数据库

利用springboot连接数据库：

整个过程可以分为两步：

第一步是将数据库的表格数据提取到后端，通过测试抓取数据，判断数据是否已经从数据库传递到后端。

第二步是将数据从后端通过接口传到前端，因为前后端接口不一致，因此需要通过解决跨域问题将后端数据传到前端，实现数据的呈现。

第一步：

一、首先在resources中创建配置文件application.yml（一定要注意缩进，缩进不当会报错）：

作用：配置数据库，连接数据库（地址、用户名、密码等）。

spring:
  datasource:
     url: jdbc:mysql://localhost:3306/mysql                   #数据库地址
     username: root                                           #<!--用户名-->
     password:
     driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
     show-sql: true
     properties:
      hibernate:
       format_sql: true                                      #//数据库查询语句不换行，格式清晰
server:
  port: 8181

二、创建car类，属性定义id，type，style。

package com.car.springboottest.entity;

import lombok.Data;
import javax.persistence.Entity;
import javax.persistence.Id;

@Entity
@Data
public class Car {
    @Id
    private Integer id;
    private String type;
    private String style;
}

三、创建CarRespository接口，继承JpaRepository，JpaRepository是简单查询：

package com.car.springboottest.repository;

import com.car.springboottest.entity.Car;
import org.springframework.data.jpa.repository.JpaRepository;

public interface CarRepository extends JpaRepository<Car,Integer> {
}

四、创建测试类：

package com.car.springboottest.repository;

import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

import java.sql.SQLOutput;

import static org.junit.jupiter.api.Assertions.*;
@SpringBootTest
class CarRepositoryTest {

    @Autowired
    private CarRepository carRepository;

    @Test
    void findAll(){
        System.out.println(carRepository.findAll());
    }

}

测试结果：

Hibernate: 
    select
        car0_.id as id1_0_,
        car0_.style as style2_0_,
        car0_.type as type3_0_ 
    from
        car car0_
[Car(id=1, type=卡罗拉, style=2021), Car(id=2, type=雷凌, style=2021), Car(id=3, type=亚洲龙, style=2021), Car(id=4, type=朗逸, style=2020), Car(id=5, type=帕萨特, style=2020), Car(id=6, type=捷达, style=2121)]

Process finished with exit code 0

以上测试结果说明数据已经从数据库传到后端，接下来需要把后端的数据传到前端。

第二步：

一、创建controller类

package com.car.springboottest.controller;

import com.car.springboottest.entity.Car;
import com.car.springboottest.repository.CarRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.RestControllerAdvice;

import java.util.List;

@RestController
@RequestMapping("/car")
public class CarHandler {
    @Autowired
    private CarRepository carRepository;


    @GetMapping("/findAll")
    public List<Car> findAll(){
        return carRepository.findAll();

    }
}

二、前端代码（.vue）：

<template>
      <div>
        <table>
          <tr>
            <td>品牌</td>
            <td>车型</td>
            <td>款式</td>
          </tr>
          <tr v-for="item in cars" >               <!--遍历cars数组中的对象-->
            <td>{{item.brand}}</td>
            <td>{{item.type}}</td>
            <td>{{item.style}}</td>
          </tr>
        </table>
        {{msg}}
      </div>
</template>

<script>
export default {
  name: "Car",
  data() {
    return {
      msg: '欢迎进入易车',
      cars: []
    }
  },
  created() {
    const _this=this
      axios.get('http://localhost:8181/car/findAll').then(function (resp) {
        _this.cars =resp.data
      })
  }
}
</script>

<style scoped>

</style>