這里使用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中修改后端的端口號）

數據輸出成功

前端發請求拿數據

前端拿數據成功！?。?/b>