SpringBoot+VUE實現前後端分離的實戰記錄
一,前端VUE項目
這裡使用VUE UI創建一個VUE項目
命令行輸入vue ui進入
手動配置項目
選中這三個
點擊下一步->點擊創建項目
用IDEA打開剛才創建的項目
IDEA中的安裝vue插件並重啟
IDEA控制臺中輸入vue add axios安裝axios
新建一個Show.vue
在index,js的routes中配置它的路由
編寫Show,vue向後端請求數據並展示
<template> <div> <table> <tr> <td>ID</td> <td>姓名</td> <td>性別</td> </tr> <tr v-for="user in users"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.sex}}</td> </tr> </table> </div> </template> <script> export default { name: "Show", data(){ return{ users:[ { id:"", name:"", sex:"", } ] } }, created() { const _this=this axios.get('http://localhost:8888/user/showAll').then(function (resp) { _this.users=resp.data }) } } </script> <style scoped> </style>
二,後端SpringBoot項目
編寫一個查詢功能
略
controller層返回json數據
在spring boot中解決跨域問題
重寫WebMvcConfigurer中的addCorsMappings()方法
@Configuration public class CrosConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOriginPatterns("*") .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") .allowCredentials(true) .maxAge(3600) .allowedHeaders("*"); } }
後端測試(註意前後端端口號的區分,VUE占用瞭8080和8081,在Springboot中修改後端的端口號)
數據輸出成功
前端發請求拿數據
前端拿數據成功!!!
總結
到此這篇關於SpringBoot+VUE實現前後端分離的文章就介紹到這瞭,更多相關SpringBoot+VUE前後端分離內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- None Found