文章目录

概述
一、搭建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代码生成等所需要的依赖，使用代码生成器生成代码，之后测试数据，把数据传输到vue即可实现。

pom.xml中的mp依赖：

mysql、web、lombok依赖自行导入

<!-- mp -->
<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.3</version>
</dependency><!-- mp代码生成器 -->
<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-generator</artifactId><version>3.4.1</version>
</dependency><!-- velocity -->
<dependency><groupId>org.apache.velocity</groupId><artifactId>velocity</artifactId><version>1.7</version>
</dependency>

配置application.yml：

server:port: 8082spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8username: rootpassword:mybatis-plus:mapper-locations: classpath*:com/pdh/mapper/*.xmlconfiguration:# 打印sqllog-impl: org.apache.ibatis.logging.stdout.StdOutImpl

3.MP代码生成

需要编写代码生成器Generate，运行它

public class Generate {public static void main(String[] args) {// 创建generate对象AutoGenerator autoGenerator = new AutoGenerator();// 数据源DataSourceConfig dataSourceConfig = new DataSourceConfig();dataSourceConfig.setDbType(DbType.MYSQL);dataSourceConfig.setUrl("jdbc:mysql://localhost:3306/test?useUnicode=true&useSSL=false&characterEncoding=utf8");dataSourceConfig.setDriverName("com.mysql.cj.jdbc.Driver");dataSourceConfig.setUsername("root");dataSourceConfig.setPassword("");autoGenerator.setDataSource(dataSourceConfig);// 全局配置GlobalConfig globalConfig = new GlobalConfig();globalConfig.setOutputDir(System.getProperty("user.dir") + "/src/main/java");globalConfig.setOpen(false);globalConfig.setAuthor("彭_德华");globalConfig.setServiceName("%sService"); // 去掉service的前缀autoGenerator.setGlobalConfig(globalConfig);// 包信息PackageConfig packageConfig = new PackageConfig();packageConfig.setParent("com.pdh");packageConfig.setController("controller");packageConfig.setService("service");packageConfig.setServiceImpl("service.impl");packageConfig.setMapper("dao.mapper");packageConfig.setXml("dao.mapper.xml");packageConfig.setEntity("entity");autoGenerator.setPackageInfo(packageConfig);// 配置策略StrategyConfig strategyConfig = new StrategyConfig();strategyConfig.setTablePrefix("mp_");strategyConfig.setInclude(scanner("表名，多个英文逗号分割").split(","));strategyConfig.setEntityLombokModel(true);strategyConfig.setNaming(NamingStrategy.underline_to_camel);strategyConfig.setColumnNaming(NamingStrategy.underline_to_camel); // 下划线转驼峰autoGenerator.setStrategy(strategyConfig);// 执行autoGenerator.execute();}/*** 接收用户输入的方法* @param str* @return*/private static String scanner(String str){Scanner sc = new Scanner(System.in);System.out.println("请输入"+str+":");if(sc.hasNext()){String tableNames = sc.next();if(StringUtils.isNotBlank(tableNames)){return tableNames;}}throw new MybatisPlusException("请输入正确的" + str + "!");}
}

启动以后输入对应的数据库表名 mp_book，就会生成对应的dao、service、contorller、entity等。

生成之后，可以根据项目，添加指定的包（简单的测试就不添加了）。

4.编写Controller

在controller中编写一个测试：

@Controller
@RequestMapping("/book")
public class BookController {@Autowiredprivate BookService bookService;@GetMapping("/list")public List<Book> findAll(){return bookService.list();}
}

启动项目，浏览器发起对应的请求，idea控制台能看见打印了对应的语句和数据，说明前面的操作成功。之后，就是使用vue接收后端发送的数据，进行简单的数据展示。

二、搭建Vue前端

搭建Vue前端项目需要在 命令行或 Vue-cli下 搭建，我使用的是最简单的搭建方法，即【使用Vue可视化工具搭建（点击我跳转）】。

之后，使用 IDEA 打开Vue项目（无法使用IDEA创建Vue项目，只能是在里面编写它）。

1.IDEA安装Vue.js插件

2.IDEA启动Vue项目

IDEA自带有Vue客户端，我试过，mac直接在idea终端输入 npm run server 能启动，但是windows下，就得进行简单的配置

配置完成之后，点击运行，成功访问 localhost:8080 即可。

3.编写Vue代码

我们都是在src包下进行前端代码编写。

router包下的index.js

配置请求 /book

/* 导入依赖 */
import Book from '../views/Book'/* 匹配请求 */
{path: '/book',component: Book
}

views包下新建Book.vue

编写假数据进行展示

<template>
<div><table border="1px"><tr><td>编号</td><td>图书名称</td><td>作者</td><td>出版社</td><td>页数</td><td>价格</td></tr><!-- 循环展示数据 --><tr v-for="elem in books"><td>{{ elem.id }}</td><td>{{ elem.name }}</td><td>{{ elem.author }}</td><td>{{ elem.publish }}</td><td>{{ elem.pages }}</td><td>{{ elem.price }}</td></tr></table>{{ msg }}</div>
</template><script>export default {name: "Book",data() {/* 数据造假 */return {msg: 'Hello Vue',books: [{id: 1,name: '平凡的世界',author: '张三',publish:'开心出版社',pages:'100',price:'100.01'},{id: 2,name: '月亮与六便士',author: '李四',publish:'快乐出版社',pages:'90',price:'99.01'}]}}}
</script><style scoped>
</style>

之后就是访问 http://localhost:8080/book，就能看见假数据。之后使用axios插件，向后端发起请求，接收并展示数据。

4.接收后端数据

常用的引入插件方式有npm和vue-cli两种。当然不排除在

首先要在vue引入axios插件，在vue项目所在的目录下，执行下列命令。注意，一定要是管理员权限（血泪啊~）

vue add axios

以管理员身份运行cmd，指令cd是切换目录。

d: ：切换到盘符D

cd .. ：返回上级目录

cd 文件名：进入该文件

在Book.vue编写creaeted()方法，它是初始化方法（放在 data()方法下面）

/* created()是初始化方法 */created() {const _this = thisaxios.get("http://localhost:8082/book/list").then(function (resp) {_this.books = resp.data;})}

之后，解决跨域问题，在SpringBoot项目中配置，解决跨域名问题。

在后端代码中，编写WebMvcConfig类（也可以选择在yml中配置）

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {//跨域配置registry.addMapping("/**").allowedOriginPatterns("*").allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS").allowCredentials(true).maxAge(3600).allowedHeaders("*");}
}

之后启动前后端，访问 localhost:8080/book，就成功访问到数据了。

上面就简单实现了前后端的分离开发，前端开发人员可以根据使用假数据

之后就是对 vue前端的使用+编写后端接口。

三、Element UI使用

进入到项目的目录下，管理员身份运行cmd，执行下列命令

vue add element

1.简单的数据展示

这里就使用Element-ui展示一下所有的数据（不进行分页）

编写Page.vue

<template><div><!-- 展示数据 --><el-table:data="tableData"stripestyle="width: 100%"><el-table-columnprop="id"label="编号"width="180"></el-table-column><el-table-columnprop="bookName"label="书名"width="180"></el-table-column><el-table-columnprop="author"label="作者"></el-table-column><el-table-columnprop="publish"label="出版社"></el-table-column><el-table-columnprop="page"label="页数"></el-table-column><el-table-columnprop="price"label="价格"></el-table-column></el-table></div>
</template><script>
export default {/* 初始化方法 */created() {const _this = thisaxios.get("http://localhost:8082/book/list").then(function (resp){_this.tableData = resp.data;})},/* 数据方法 */data() {return {/* 如果请求不可用，就展示静态数据 */tableData: [{id: '1',bookName: '月亮与六便士',author: 'dd',publish: '大力出版社',page: '101',price: '100.12'},{id: '2',bookName: '月亮与六便士',author: 'dd',publish: '大力出版社',page: '101',price: '100.12'}]}}
}
</script>

在index.js里面配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Page from '../views/Page.vue'Vue.use(VueRouter)const routes = [{path: "/page",name: "展示数据",component: Page}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

之后就是访问 localhost:8080/page，就是成功访问到数据库数据。

2.Element-ui更多…

添加好 Element UI 的插件，使用的话，最直接的就是去它的官网查看开发手册学习：

https://element.eleme.cn/#/zh-CN/component/installation

更多详细的使用方法，建议通过视频进行学习。边看边敲学习效果真的好~

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

从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【后端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[后端篇] 数据库准备后端搭建 1.快速创建个SpringBoot项目 2.引入依赖 3.编写代码快速生成代码 4.运行代码生成器生成代码 5.编写application.pr ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[前端篇] 后端篇前端篇创建vue项目安装所需工具开始编码 1.在根目录下添加vue.config.js文件 2.编写main.js 3.编写App.vue 4.编写ax ...
阿里服务器部署springboot+vue前后端分离项目
服务器部署springboot+vue前后端分离项目最近刚刚在实习熟悉公司的业务,所有尝试着自己将项目部署到服务器上.本次部署的项目是Spring Boot+Vue前后端分离项目,后端使用的技术有M ...
springboot+vue前后端分离框架快速搭建
项目介绍一款 Java 语言基于 SpringBoot2.x.MybatisPlus.Vue.ElementUI.MySQL等框架精心打造的一款前后端分离框架,致力于实现模块化.组件化.可插拔的前后 ...
大屏监控系统实战（4）-如何将SpringBoot+Vue前后端分离项目一次打包为一个Jar包运行？
玩过最新版Dubbo管控台的都知道,人家是个前后端分离的项目,可是一条打包命令能让两个项目整合在一起,生成一个jar包,这样的好处显而易见,部署的时候服务器不需要安装node环境单独部署前端项目,或者 ...
SSM项目/SpringBoot项目/SpringBoot+Vue前后端分离项目图片上传并查看功能实现汇总
SSM项目下的图片上传: 1.前端Js代码:用户点击"上传头像"按钮后,会执行uploadPhoto()的方法. <button type="button" ...
从0搭建一个Springboot+vue前后端分离项目(七)完善前台与后台的联系,完善功能接口
将之前前端写的表格内容,与数据库新建的表进行对应启动项目把写死的TableDa数据删掉.因为最终要从后台读取完善新增接口 <el-button type="primary&quo ...
从0搭建一个Springboot+vue前后端分离项目(四)利用Element框架搭建页面主体部分表格与侧边栏
https://element-plus.gitee.io/zh-CN/component/menu.html 导航栏部分选定menu菜单,选择竖型样式的复制一下 <el-menudefau ...

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