Vue多表案例（一）

注：由于此案例设计的代码较多，所以分为两个部分来上传。此文章为第一部分。

1.准备工作

1.1数据库

# 创建分类表 t_category , 主键，主表(1表)
CREATE TABLE t_category(
  cid INT PRIMARY KEY AUTO_INCREMENT,
  cname VARCHAR(50)
);
# 创建书籍表 t_book ， 外键，从表(多表)
CREATE TABLE t_book(
  bid INT PRIMARY KEY AUTO_INCREMENT,
  title VARCHAR(50),
  price DOUBLE(6,2),	#9999.99
  category_id INT 	#外键
);

# 使用主外键约束，描述一对多关系
ALTER TABLE t_book ADD CONSTRAINT FOREIGN KEY(category_id) REFERENCES t_category (cid);

# 插入若干条书籍
INSERT INTO t_category(cid,cname) VALUES(1,'小说');
INSERT INTO t_category(cid,cname) VALUES(2,'玄幻');
INSERT INTO t_category(cid,cname) VALUES(3,'人物传记');
INSERT INTO t_book(bid,title,price,category_id) VALUES(1,'坏蛋是怎么练成的',99.9,1);
INSERT INTO t_book(bid,title,price,category_id) VALUES(2,'武将是怎么练成的',99.9,1);
INSERT INTO t_book(bid,title,price,category_id) VALUES(3,'斗破苍穹',99.9,2);
INSERT INTO t_book(bid,title,price,category_id) VALUES(4,'凡人修仙传',99.9,2);
INSERT INTO t_book(bid,title,price,category_id) VALUES(5,'仙逆',99.9,2);
INSERT INTO t_book(bid,title,price,category_id) VALUES(6,'了不起的张焰烽',99.9,3);
INSERT INTO t_book(bid,title,price,category_id) VALUES(7,'田企锐那些年',99.9,3);
INSERT INTO t_book(bid,title,price,category_id) VALUES(8,'谢明安幸福生活III',99.9,3);

1.2后端：环境搭建

1.2.1创建项目

步骤一：使用Spring脚手架创建maven项目

1.2.2项目配置

步骤三：修改pom.xml文件，添加依赖

<!--确定spring boot的版本-->
<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.1.9.RELEASE</version>
</parent>
<dependencies>
    <!--web起步依赖-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!--通用mapper起步依赖-->
    <dependency>
        <groupId>tk.mybatis</groupId>
        <artifactId>mapper-spring-boot-starter</artifactId>
        <version>2.0.4</version>
    </dependency>
    <!--MySQL数据库驱动-->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>
    <!--mybatis分页插件-->
    <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper-spring-boot-starter</artifactId>
        <version>1.2.3</version>
    </dependency>

步骤四：创建 application.properties文件，配置数据库

#Tomcat
server.port=8090
#DB configuration
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/vue02?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=123456
#druid
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.druid.initial-size=1
spring.datasource.druid.min-idle=1
spring.datasource.druid.max-active=20
spring.datasource.druid.test-on-borrow=true
spring.datasource.druid.stat-view-servlet.allow=true

1.2.3工具类

步骤六：创建全局跨域配置类 GlobalCorsConfig.java

package com.czxy.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**  全局跨域配置类
 *  @author yxq
 */
@Configuration
public class GlobalCorsConfig {
   
    @Bean
    public CorsFilter corsFilter() {
   
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //放行哪些原始域
        config.addAllowedOrigin("*");
        //是否发送Cookie信息
        config.setAllowCredentials(true);
        //放行哪些原始域(请求方式)
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");     //get
        config.addAllowedMethod("PUT");     //put
        config.addAllowedMethod("POST");    //post
        config.addAllowedMethod("DELETE");  //delete
        config.addAllowedMethod("PATCH");
        config.addAllowedHeader("*");
        //2.添加映射路径
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

1.3分类模块：基本架构

步骤一：创建Java Category和Book

package com.czxy.domain;

import java.io.Serializable;
import java.util.List;
import javax.persistence.*;

@Table(name = "t_category")
public class TCategory implements Serializable {
   
    @Id
    @Column(name = "cid")
    @GeneratedValue(generator = "JDBC")
    private Integer cid;

    @Column(name = "cname")
    private String cname;

    private List<TBook> list;

    private static final long serialVersionUID = 1L;

    public List<TBook> getList() {
   
        return list;
    }

    public void setList(List<TBook> list) {
   
        this.list = list;
    }

    /**
     * @return cid
     */
    public Integer getCid() {
   
        return cid;
    }

    /**
     * @param cid
     */
    public void setCid(Integer cid) {
   
        this.cid = cid;
    }

    /**
     * @return cname
     */
    public String getCname() {
   
        return cname;
    }

    /**
     * @param cname
     */
    public void setCname(String cname) {
   
        this.cname = cname;
    }

    @Override
    public String toString() {
   
        StringBuilder sb = new StringBuilder