SpringBoot+Vue前后端分离项目的搭建及简单开发（这次保证看明白~）

文章目录

• 概述
• 一、搭建SpringBoot后端
• • 1.sql脚本
  • 2.新建SpringBoot项目
  • 3.MP代码生成
  • 4.编写Controller
• 二、搭建Vue前端
• • 1.IDEA安装Vue.js插件
  • 2.IDEA启动Vue项目
  • 3.编写Vue代码
  • 4.接收后端数据
• 三、Element UI使用
• • 1.简单的数据展示
  • 2.Element-ui更多…

---

参看：https://www.bilibili.com/video/BV137411B7vB

概述

vue+springboot+mybatisplus+mysql演示，搭建起来的是一整个项目架构，可直接增加对应的代码，实现更多功能

这次搭建的是一个前后端分离的示例，前端只需要独立编写客户端代码，后端也只需要独立编写服务端代码提供数据接口即可。

• 前端通过AJAX访问后端接口，将Model展示到View即可。

• 前后端提前约定好接口文档（URL、参数、数据类型…），独立开发即可。解耦。

• 前端 HTML -》ajax -》 RESTful后端数据接口。

---

一、搭建SpringBoot后端

后端需要的环境是：jdk1.8+、IDEA、Maven、Mysql，等等。

借助于Mybatis-plus的自动化配置（代码生成）。

1.sql脚本

DROP TABLE IF EXISTS `mp_book`;

CREATE TABLE `mp_book` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `book_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,
  PRIMARY KEY (`id`),
	UNIQUE KEY (`name`)
) ENGINE=InnoDB AUTO_INCREMENT=1;

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

2.新建SpringBoot项目

引入Mybatis-plus代码生成