【Spring Boot + Vue 前後端分離 - 圖書管理Demo】——【一】環境準備

• SpringBoot + Vue + Element UI 簡單實現圖書的增刪改查操作
• 前後端分離就是將一個單體應用拆分成兩個獨立的應用，前後端通過JSON格式進行數據交換；
• 前端HTML -----> Ajax --------> Restful 後端數據接口
  👉 AJAX介紹
  👉 RESTful API 介紹

👉 GitHub源碼地址

---

---

Demo最終效果：

項目結構：

---

一、環境準備

• jdk 1.8

• maven 3.5.4
  👉 Maven配置教程

• IntelliJ IDEA 2019.1.2

  • 安裝vue.js插件
    

• SpringBoot 2.2.2 .RELEASE
  

• @vue/cli 4.2.2 (+ node.js)
  👉 Vue CLI3開發環境搭建

---

二、新建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 方法，省去手動生成。

• 在數據庫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;