手把手教学之：Vue.js+BootStrap+SpringBoot搭建一整套前后端分离的架构系统

这篇文章重点在于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的都懂。

看效果：

点击前：

这就请求成功了。就这样一个前后端分离的框架，两套项目就搭建好了。当然我这只是一个简单的demo而已，真正还要链接Mysql数据库啦，区分读写数据源啦，配日志啦，Redis，MQ啦…

前端的话反而工作会少很多，有BootStrap，很多效果都可以傻瓜式生成，大大方便了我这种严重偏科后端的码农，因为前后端分离，后期也能招聘更多专业的程序员进来做前端的内容。好了先写到这里了～～～