创建过程：

一、创建前端应用

提前安装好 NodeJS 和 Vue 3.0

打开command命令行，输入vue ui

如果始终command命令行没反应的话，就安装一下cli，命令是： npm install -g @vue/cli

如果始终command命令行没反应的话，就安装一下cli，命令是： npm install -g @vue/cli

创建完成

二、测试创建的前端应用是否正常（可忽略）

三、使用IDEA进行调试

新建Spring Boot 项目

删除application.properties文件，新建application.yml文件，内容如下：

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/library_demo?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true
server:
  port: 8181

图书的查询测试：数据库表信息如下

/*
 Navicat MySQL Data Transfer

 Source Server         : 本地
 Source Server Type    : MySQL
 Source Server Version : 80021
 Source Host           : localhost:3306
 Source Schema         : library_demo

 Target Server Type    : MySQL
 Target Server Version : 80021
 File Encoding         : 65001

 Date: 13/10/2022 13:46:46
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for book
-- ----------------------------
DROP TABLE IF EXISTS `book`;
CREATE TABLE `book`  (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '图书表主键',
  `name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '书名',
  `autor` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '作者',
  `publish` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '出版社',
  `pages` int NULL DEFAULT NULL COMMENT '总页码',
  `price` decimal(10, 2) NULL DEFAULT NULL COMMENT '价格',
  `publish_date` datetime NULL DEFAULT NULL COMMENT '发行日期',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of book
-- ----------------------------
INSERT INTO `book` VALUES (1, '解忧杂货店', '东野圭吾', '电子工业出版社', 102, 27.30, '2012-03-01 21:43:02');
INSERT INTO `book` VALUES (2, '追风筝的人', '卡勒德·胡塞尼', '上海人民出版社', 230, 33.50, '2003-05-12 21:44:54');
INSERT INTO `book` VALUES (3, '人间失格', '太宰治', '作家出版社', 150, 17.30, '1948-10-12 21:46:18');
INSERT INTO `book` VALUES (4, '白夜行', '东野圭吾', '南海出版公司', 300, 27.30, '1997-10-12 21:47:57');

SET FOREIGN_KEY_CHECKS = 1;

新建controller包，entity包和repository包，这里省略service包

Entity实体类：这样数据库book表就有了映射的JavaBean了

BookRepository接口继承Jpa接口，泛型第一个参数写实体类，第二个写实体类的主键类型

测试Jpa接口是否集成

运行测试方法，查询所有字段

使用RestFul风格编写后端controller层接口

四、前后端接口集成

在前端views包下面，新建BookView.vue文件

在<template>下添加一个table 标签

<table border="1px">
    <tr>
        <td>图书编号</td>
        <td>图书名称</td>
        <td>图书作者</td>
        <td>出版社</td>
        <td>总页码</td>
        <td>图书价格</td>
        <td>发行日期</td>
    </tr>
</table>

制造假数据填充table

获取假数据并显示在table中

在router/index.js里面添加路由

运行访问获取假数据

获取数据库中的真数据

1.安装axios，执行 npm install axios --save

2.在src下新建src\plugins\axios.js，内容如下

3.导入axios到全局

4.两种方法获取resp.data并传给books

5.配置跨域

在Spring Boot项目下创建config包，包的内容如下： 

最后 ，重启后端项目，访问前端的/book路由,成功！