Spring Boot+Vue 前后端分离项目架构

最新推荐文章于 2024-08-09 10:08:13 发布

drhrht

最新推荐文章于 2024-08-09 10:08:13 发布

阅读量4k

点赞数 6

分类专栏：面试学习路线阿里巴巴文章标签： spring boot vue.js 架构 java 算法

本文链接：https://blog.csdn.net/drhrht/article/details/125243082

版权

本文详细介绍了使用 Spring Boot 和 Vue.js 构建前后端分离项目的流程。在后端，通过 SpringBoot 设置数据源、创建实体类、Mapper、Service 和 Controller。在前端，涵盖主页面、数据列表、新增、编辑视图以及路由配置，实现功能交互。

摘要由CSDN通过智能技术生成

Spring Boot+Vue 前后端分离项目架构

项目流程：

1. SpringBoot 后端项目

1、新建一个 SpringBoot 工程，并添加项目开发过程中需要的相关依赖；

在这里插入图片描述

2、数据库新建 book 数据表；

-- ----------------------------
-- Table structure for book
-- ----------------------------
DROP TABLE IF EXISTS `book`;
CREATE TABLE `book`  (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `title` varchar(55) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `publish` varchar(55) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `authors` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `createTime` datetime(0) NOT NULL DEFAULT CURRENT_TIMESTAMP(0),
  `updateTime` datetime(0) NOT NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0),
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 14 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of book
-- ----------------------------
INSERT INTO `book` VALUES (2, '数据结构', '浙江出版社', '严威', '2022-03-18 14:38:22', '2022-03-18 14:38:25');
INSERT INTO `book` VALUES (5, '计算机组成原理', '机械工业出版社', '唐朔飞', '2022-03-14 14:38:28', '2022-03-15 14:38:36');
INSERT INTO `book` VALUES (6, '机器学习', '人民邮电出版社', '周志华', '2022-03-16 14:38:41', '2022-03-16 14:38:45');
INSERT INTO `book` VALUES (7, '图论及其应用', '科学技术出版社', '徐俊明', '2022-03-03 14:38:49', '2022-03-18 18:33:57');
INSERT INTO `book` VALUES (8, '推荐系统开发实战', '电子工业出版社', '高团阳', '2022-03-14 14:38:57', '2022-03-16 14:39:02');
INSERT INTO `book` VALUES (9, '大数据导论', '机械工业出版社', '曾诚', '2022-03-10 14:39:06', '2022-03-12 14:39:09');
INSERT INTO `book` VALUES (13, 'Java从零基础到实战', '中国工信出版集团', '宁楠', '2022-03-18 17:05:18', '2022-03-18 17:05:18');

3、application.yml 配置数据源和项目启动的端口号；

# 修改服务启动的端口
server:
  port: 8181
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/book?useUnicode=true&characterEncoding=UTF-8
    username: root
    password: 123456
    driver-class-name: com.mysql.jdbc.Driver
# 配置日志，打印执行的sql语句
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

项目整体的目录结构如下：

4、创建实体类 Book.java；

@AllArgsConstructor
@NoArgsConstructor
@Data
@TableName(value = "book")
public class Book {
    @TableId(type = IdType.AUTO)
    private Long id;
    private String title;
    private String publish;
    private String authors;

    @TableField(value = "createTime", fill = FieldFill.INSERT)
    private Date createTime;
    @TableField(value = "updateTime", fill = FieldFill.INSERT_UPDATE)
    private Date updateTime;
}

5、添加 MyBatis Plus 自动填充的处理器 config/DataHandler.java；

import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler;
import org.apache.ibatis.reflection.MetaObject;
import org.springframework.stereotype.Component;

import java.util.Date;

@Component
public class DataHandler implements MetaObjectHandler{
    //插入时的填充策略
    @Override
    public void insertFill(MetaObject metaObject) {
        this.setFieldValByName("createTime", new Date(), metaObject);
        this.setFieldValByName("updateTime", new Date(), metaObject);
    }
    //更新时的填充策略
    @Override
    public void updateFill(MetaObject metaObject) {
        this.setFieldValByName("updateTime&