手把手教學之: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,很多效果都可以傻瓜式生成,大大方便了我這種嚴重偏科後端的碼農,因爲前後端分離,後期也能招聘更多專業的程序員進來做前端的內容。好了先寫到這裏了~~~
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章