SpringBoot+Vue项目快速入门

最新推荐文章于 2024-07-26 19:50:42 发布

用户昵称23

最新推荐文章于 2024-07-26 19:50:42 发布

阅读量93

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： vue.js spring boot elementui javascript 分布式

本文链接：https://blog.csdn.net/m0_67402914/article/details/125243571

版权

本文介绍了一个SpringBoot+Vue的前后端分离项目，涵盖了技术选型（Springboot, MyBatis-Plus, Vue, Element-UI, Echarts）、数据库设计、后台搭建（包括依赖引入、Swagger配置、实体类、Mapper、Service、Controller）和前端搭建（Node环境配置、项目构建、安装插件、路由搭建、Echarts和Element-UI的使用）。通过这个小案例，作者分享了学习前端技术的心得。" 133394904,19687569,图形用户界面（GUI）编程入门与应用,"['前端开发', 'Python', '开发语言', 'GUI框架']

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

前言：本人目前从事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>
        </dependen