这篇文章重点在于BootStrap + VUE 前端页面调用SpringBoot提供的后端接口
安装VUE不写了，网上一大堆，看这位大佬的博客就行：https://www.cnblogs.com/Jack-cx/p/10934247.html；最起码一点要在自己页面看到VUE启动成功界面。
SpringBoot搭建在我另外一篇博客也有，这里不详细说，随便写一个TestController。
我用VSCode打开刚刚自动生成那个VUE项目～安装BootStrap和JQ，依次输入下列三条命令：
npm install jquery --save
npm install bootstrap --save
install popper.js --save
安装成功之后修改几个文件：
（1）
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
（2）要发起请求，安装axios模块：npm install axios
import "jquery/dist/jquery.min";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min";
import axios from "axios";
Vue.prototype.$axios = axios;
Vue.config.productionTip = false;
如果出现一些奇奇怪怪的单双引号或者空格的警告看着不舒服：
输入npm run dev启动。
可以看到启动成功了。
在HelloWorld.VUE 主页面加入一些BootStrap的按钮。
<div class="container">
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary" @click="_click()">
测试按钮
</button>
<a href="#" @click="_click">测试</a>
</div>
</div>
</div>
可以看到熟悉的BootStrap按钮出现了。
下一步就是请求SpringBoot的接口：我自己定一个随便的controller。
由于都是本地启动，端口不同，会出现跨域。记得在类上添加@CrossOrigin注解：
然后在HelloWorld.vue中点击那个新增的按钮后发起请求：
记得axios发起的就是异步请求，方法上要加async和await，不然返回的就是一个，具体这些用法我不详细写了，学习下ES6和Node的都懂。
看效果：
点击前：
