SpringBoot+Vue项目快速入门

文章目录

• 1. 项目技术选型
• 2.数据库设计
• 3. 后台搭建
• • 3.1 引入依赖
  • 3.2 swagger配置
  • 3.3实体类
  • 3.4 自动填充配置
  • 3.5 Mapper
  • 3.6 service
  • 3.7 controller
• 4. 前端搭建
• • 4.1 环境搭建
  • • 4.1.1 Node环境
    • 4.1.2 项目构建
    • 4.1.3 安装插件
    • 4.1.4 引入插件
  • 4,2.搭建路由
  • 4.3. echarts使用
  • 4.4 element-ui使用

前言：本人目前从事java开发，但同时也在学习各种前端技术，下面是我做的一个前后端分离项目的一个小案例，不足之处请多多指教

1. 项目技术选型

Springboot+MyBatis-Plus+vue+element-ui+echarts

2.数据库设计

SET FOREIGN_KEY_CHECKS=0;
DROP TABLE IF EXISTS `fruit`;
CREATE TABLE `fruit` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL COMMENT '名称',
  `sale` double DEFAULT NULL COMMENT '价格',
  `num` int(11) DEFAULT NULL COMMENT '库存',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `del_flag` tinyint(4) DEFAULT '0' COMMENT '删除标记',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=16 DEFAULT CHARSET=utf8;

3. 后台搭建

3.1 引入依赖

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot<