這篇文章重點在於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的都懂。
看效果:
點擊前: