這里使用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()方法

@Configurationpublic 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前后端分離內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！