基于springboot 快速搭建简单前后端分离项目-后台框架

springboot+spring DataJpa +mysql 搭建简单地前后端分离项目的后台框架

哈希深蹲

13658人浏览 · 2020-08-11 22:56:30

哈希深蹲 · 2020-08-11 22:56:30 发布

特别声明：本文百分之九十的内容是来自于B站上一位up主录制的前后端分离开发的视频，作者自己跟着手敲了一遍之后在这里记录了一下来。所以这篇文章的类型勉强算是翻译吧

原B站链接:【2020版】4小时学会Spring Boot+Vue前后端分离开发_哔哩哔哩_bilibili

本次实践我们选择springboot+spring DataJpa +mysql来完成一个简单的前后端分离开发项目的后台框架实现。将我们准备的数据库中book表中的图书信息从数据库查询出来，供前端页面展示。话不多说，直接开干

1、新建project

打开idea，依次点击file-new-project-spring initializr-next

输入如下信息：

2、选择依赖

next选择依赖，本次我们采用spring Data JPA 来进行实战，并勾选LmoBok表达式，MySQL驱动和springWeb启动器。

点击finish，创建完成之后，项目结构大概为这样的，

3、简单配置

我们采用yaml格式的配置文件，所以将application.properties改为yml后缀

并添加如下信息：

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

datasource：是数据库连接信息，注意要换成自己本地的实际数据库连接信息。

jpa：show-sql是打印SQL日志的开关，format_sql是SQL日志格式化开关

server：设置了项目启动的端口号

4、数据库准备

将如下脚本在自己的本地库中运行一遍，创建book表并插入数据。

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for book
-- ----------------------------
DROP TABLE IF EXISTS `book`;
CREATE TABLE `book` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) DEFAULT NULL,
  `author` varchar(20) DEFAULT NULL,
  `publish` varchar(20) DEFAULT NULL,
  `pages` int(10) DEFAULT NULL,
  `price` float(10,2) DEFAULT NULL,
  `bookcaseid` int(10) DEFAULT NULL,
  `abled` int(10) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `FK_ieh6qsxp6q7oydadktc9oc8t2` (`bookcaseid`)
) ENGINE=InnoDB AUTO_INCREMENT=119 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of book
-- ----------------------------
INSERT INTO `book` VALUES ('1', '解忧杂货店', '东野圭吾', '电子工业出版社', '102', '27.30', '9', '1');
INSERT INTO `book` VALUES ('2', '追风筝的人', '卡勒德·胡赛尼', '中信出版社', '330', '26.00', '1', '1');
INSERT INTO `book` VALUES ('3', '人间失格', '太宰治', '作家出版社', '150', '17.30', '1', '1');
INSERT INTO `book` VALUES ('4', '这就是二十四节气', '高春香', '电子工业出版社', '220', '59.00', '3', '1');
INSERT INTO `book` VALUES ('5', '白夜行', '东野圭吾', '南海出版公司', '300', '27.30', '4', '1');
INSERT INTO `book` VALUES ('6', '摆渡人', '克莱儿·麦克福尔', '百花洲文艺出版社', '225', '22.80', '1', '1');
INSERT INTO `book` VALUES ('7', '暖暖心绘本', '米拦弗特毕', '湖南少儿出版社', '168', '131.60', '5', '1');
INSERT INTO `book` VALUES ('8', '天才在左疯子在右', '高铭', '北京联合出版公司', '330', '27.50', '6', '1');
INSERT INTO `book` VALUES ('9', '我们仨', '杨绛', '生活.读书.新知三联书店', '89', '17.20', '7', '1');
INSERT INTO `book` VALUES ('10', '活着', '余华', '作家出版社', '100', '100.00', '6', '1');
INSERT INTO `book` VALUES ('11', '水浒传', '施耐庵', '三联出版社', '300', '50.00', '1', '1');
INSERT INTO `book` VALUES ('12', '三国演义', '罗贯中', '三联出版社', '300', '50.00', '2', '1');
INSERT INTO `book` VALUES ('13', '红楼梦', '曹雪芹', '三联出版社', '300', '50.00', '5', '1');
INSERT INTO `book` VALUES ('14', '西游记', '吴承恩', '三联出版社', '300', '60.00', '3', '1');

5、完成后台逻辑代码

5.1创建java实体对象

package com.liusx.entity;

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

@Entity //java实体类和数据库表的对应
@Data  //lombok的注解，自动帮我们生成get/set方法的。
public class Book {

    @Id //是指定当前实体的主键是哪一个属性，因为实体和数据库表绑定到一起了，所以说必须指定
    private Integer id;
    private String name;
    private String author;
    private String publish;
    private Integer pages;
    private float price;
}

因为我们使用了springData Jpa。所以只需要将实体类和数据库对象绑定起来就可以。通过@Entity注解。

5.2创建repository

package com.liusx.repository;

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


public interface BookRepository extends JpaRepository<Book,Integer> {
}

这个repository接口，直接继承JPARepository即可，不用定义任何方法，在JpaRepository的泛型中，需要传递两个参数，一个是实体类对象的类型，一个是实体类对象的主键。这样就可以，因为JpaRepository中已经定义好了我们需要用到的常用的所有方法。如下图所示：

到这一步我们的持久层代码就写完了，用SpringdataJpa的好处就是不用写mapper文件。

5.3单元测试

在我们日常的开发过程中，每写好一个持久层的方法，或者service层的方法，都应该写一个单元测试类测试一下这个方法返回的数据是否符合我们的预期，测试通过之后再在controller中调用它。

前后端分离项目，后端在写好一个接口的时候，也应该测试一下，不过不是写单元测试类测试了，而是用postman发送请求调用一下接口，测试接口的可用性

使用idea创建测试类比较简单，可以直接在BookRepository这个方法上右键创建测试类进行测试。在我们想要测试的接口或者类上右键，如图所示：

然后再弹出来的框中点击create new test。弹出的界面中什么都不用动，直接点击确定就会在test包中为我们生成一个测试类代码。

然后我们接着补全测试类的代码

package com.liusx.repository;

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

@SpringBootTest
class BookRepositoryTest {

    @Autowired
    BookRepository bookRepository;

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

运行测试类方法，观察控制台，我们可以看到格式化打印的SQL语句和查询出来的结果。

5.4编写controller

package com.liusx.controller;

import com.liusx.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;

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

    @Autowired
    private BookRepository bookRepository;

    @GetMapping("list")
    public Object listBook(){
        return bookRepository.findAll();
    }

}

启动后台项目，使用postman测试

5.5解决跨域

方法一：全局配置。创建一个配置类实现WebMvcConfigurer接口。重写addCorsMappings()方法。

package com.liusx.config;

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

/**
 * description: CrossOriginConfig <br>
 * author: Administrator <br>
 * version: 1.0 <br>
 */
@Configuration
public class CrossOriginConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .allowedHeaders("*")
                .maxAge(36000);

    }
}

addMapping：配置可以被跨域的路径，可以任意配置，可以具体到直接请求路径。
allowedOrigins：允许所有的请求域名访问我们的跨域资源，可以固定单条或者多条内容，如："http://www.baidu.com"，只有百度可以访问我们的跨域资源。

allowedMethods：允许输入参数的请求方法访问该跨域资源服务器，如：POST、GET、PUT、OPTIONS、DELETE等。
allowCredentials：响应头表示是否可以将对请求的响应暴露给页面。返回true则可以，其他值均不可以
allowedHeaders：允许所有的请求header访问，可以自定义设置任意请求头信息，如："X-YAUTH-TOKEN"
maxAge：配置客户端缓存预检请求的响应的时间（以秒为单位）。默认设置为1800秒（30分钟）

方法二：注解形式

Spring Boot 提供了一个@CrossOrigin 来解决跨域问题，这个注解可以实现方法级别的细粒度的跨域控制。

如果在类上添加该注解，该类下的所有接口都可以通过跨域访问

如果在方法上添加注解，那么仅仅只限于加注解的方法可以访问。

至此我们简单的一个前后端分离项目的后台框架就算搭建成功了。