【Spring Boot + Vue 前后端分离 - 图书管理Demo】——【一】环境准备

标签: # Spring Boot  vue  java  spring boot


  • SpringBoot + Vue + Element UI 简单实现图书的增删改查操作
  • 前后端分离就是将一个单体应用拆分成两个独立的应用,前后端通过JSON格式进行数据交换;
  • 前端HTML -----> Ajax --------> Restful 后端数据接口


Demo最终效果:

在这里插入图片描述
在这里插入图片描述

项目结构:

在这里插入图片描述
在这里插入图片描述


一、环境准备


二、新建Vue工程

  1. 命令行输入vue ui ( vue3+版本才有)
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  2. 项目创建完成后添加插件element UI
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  3. 用IDEA打开刚才创建的Vue项目,在IDEA的命令行终端输入npm run serve启动Vue ( ctrl + c 停止vue )

    即可访问项目首页 http://localhost:8080
    在这里插入图片描述


三、新建Spring Boot工程

  • 创建Spring Boot工程需要的组件:
    在这里插入图片描述
    Lombok用于自动生成各种属性的 Setter 和 Getter 方法,省去手动生成。

  • 连接数据库Mysql
    application.yml

spring:
  datasource:
  	# 连接数据库library
    url: jdbc:mysql://localhost:3306/library?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
    username: root
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    # 打印sql
    show-sql: true
    properties:
      hibernate:
        # 格式化sql
        format_sql: true
        
server:
  port: 8181

vue已经默认占用了8080端口,修改springboot的端口为8181防止冲突

  • 在数据库library中创建book表
DROP TABLE IF EXISTS `book`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
 SET character_set_client = utf8mb4 ;
CREATE TABLE `book` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) DEFAULT NULL,
  `author` varchar(20) DEFAULT NULL,
  `publish` varchar(20) DEFAULT NULL,
  `pages` int(10) DEFAULT NULL,
  `price` float(10,2) DEFAULT NULL,
  `bookcaseid` int(10) DEFAULT NULL,
  `abled` int(10) DEFAULT NULL,
  PRIMARY KEY (`id`),
) ENGINE=InnoDB AUTO_INCREMENT=119 DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `book`
--

LOCK TABLES `book` WRITE;
/*!40000 ALTER TABLE `book` DISABLE KEYS */;
INSERT INTO `book` VALUES (1,'解忧杂货店','东野圭吾','电子工业出版社',102,27.30,9,1),
(2,'追风筝的人','卡勒德·胡赛尼','中信出版社',330,26.00,1,1),
(3,'人间失格','太宰治','作家出版社',150,17.30,1,1),
(4,'这就是二十四节气','高春香','电子工业出版社',220,59.00,3,1),
(5,'白夜行','东野圭吾','南海出版公司',300,27.30,4,1),
(6,'摆渡人','克莱儿·麦克福尔','百花洲文艺出版社',225,22.80,1,1),
(7,'暖暖心绘本','米拦弗特毕','湖南少儿出版社',168,131.60,5,1),
(8,'天才在左疯子在右','高铭','北京联合出版公司',330,27.50,6,1),
(9,'我们仨','杨绛','生活.读书.新知三联书店',89,17.20,7,1),
(10,'活着','余华','作家出版社',100,100.00,6,1),
(11,'水浒传','施耐庵','三联出版社',300,50.00,1,1),
(12,'三国演义','罗贯中','三联出版社',300,50.00,2,1),
(13,'红楼梦','曹雪芹','三联出版社',300,50.00,5,1),
(14,'西游记','吴承恩','三联出版社',300,60.00,3,1);
/*!40000 ALTER TABLE `book` ENABLE KEYS */;
UNLOCK TABLES;
原文链接:加载失败,请重新获取