Spring Boot+Vue前后端分离开发03-----创建SpringBoot工程项目

标签 ： Java Vue Sring JPA ELementUI

作者 ： Maxchen(志)

版本 ： V1.0.0

日期 ： 2020/2/27

通过idea搭建SpringBoot

新建一个SpringBoot项目，idea中直接提供了SpringBoot工程的模板

此处填写项目包信息Group和Artifact

勾选Lomhok、Spring Web、Spring Data JPA、MySQL Driver

最后选择好项目创建的目录后点击finish

由于官方的repository下载速度很慢，这里个人建议将源切换为阿里云

<repositories>
	<repository>
		<id>aliyun</id>
		<name>aliyun</name>
		<url>http://maven.aliyun.com/nexus/content/repositories/central</url>
	</repository>
</repositories>

---

SpringBoot开发指南

1. 创建一个简单的接口
2. 跨域问题解决

1、创建一个简单的接口

配置application.yml分别添加数据库连接、jpa、port

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

创建一个Book实体类

package com.maxchen.springboottest.entity;

import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.Id;

@Entity
@Data //getter and setter方法
public class Book {

    @Id //主键
    private Integer id;
    private String name;
    private String author;

}

接着创建BookRepository，这里JPA自带了一些方法，我们可以继承它

package com.maxchen.springboottest.repository;

import com.maxchen.springboottest.entity.Book;
import org.springframework.data.jpa.repository.JpaRepository;

public interface BookRepository extends JpaRepository<Book,Integer> {

}

到了这一步我们可以内部测试下代码，在src/test/java/目录下新增一个测试类，如果控制台打印如下信息则说明方法正确

package com.maxchen.springboottest;

import com.maxchen.springboottest.repository.BookRepository;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

@SpringBootTest
class SpringboottestApplicationTests {

    @Autowired
    private BookRepository bookRepository;

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

}

接着创建一个BookController

package com.maxchen.springboottest.controller;

import com.maxchen.springboottest.entity.Book;
import com.maxchen.springboottest.repository.BookRepository;
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 java.util.List;

@RestController
@RequestMapping("/book")
public class BookController {

    @Autowired
    private BookRepository bookRepository;

    //GET方法返回list
    @GetMapping("findAll")
    List<Book> findAll(){
       return bookRepository.findAll();
    }

}

最后在浏览器访问http://localhost:8181/book/findAll即可返回JSON数据

回到索引

2、跨域问题解决

当我们Vue与SpringBoot所开发的接口进行联调时，我们发现了Vue虽然成功调用了接口且语法正确，但是却没有数据返回

这个问题属于跨域问题，因此我们SpringBoot工程项目需要增加以下方法

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

@Configuration
public class CrosConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

再次调用接口发现可以返回数据

回到索引

---