1、Vue下載下傳安裝步驟的詳細教程(親測有效) 1_水w的部落格-CSDN部落格
2、Vue下載下傳安裝步驟的詳細教程(親測有效) 2 安裝與建立預設項目_水w的部落格-CSDN部落格
3、基于vscode開發vue項目的詳細步驟教程_水w的部落格-CSDN部落格
4、基于vscode開發vue項目的詳細步驟教程 2 第三方圖示庫FontAwesome_水w的部落格-CSDN部落格
5、基于vscode建立SpringBoot項目，連接配接postgresql資料庫_水w的部落格-CSDN部落格
本篇是在基于vscode建立SpringBoot項目，連接配接postgresql資料庫 2 更簡單_水w的部落格-CSDN部落格
的基礎上，開始的。
為了保證浏覽器的安全，不同源的用戶端腳本在沒有明确授權的情況下，不能讀寫對方資源，稱為同源政策，同源政策是浏覽器安全的基石。
同源政策 (Sameoriginpolicy) 是一種約定，它是浏覽器最核心也最基本的安全功能
所謂同源(即指在同一個域)就是兩個頁面具有相同的協定 (protocol)，主機(host) 和端口号 (port)一個請求url的協定、域名、端口三者之間任意一個與目前頁面url不同即為跨域，此時無法讀取非同源網頁的 Cookie，無法向非同源位址發送 AJAX 請求
目錄
四、實作前後端連接配接
0 前提
1 修改main.js檔案
2 修改TestTable.vue
3 App.vue
5 Movie.vue
6 測試
四、實作前後端連接配接
0 前提
如有需要，可以移步到本篇開頭的那幾篇部落格，都是按照開發和學習順序一步一步寫的。
需要建立一個vue項目。
1 修改main.js檔案
全部代碼為：
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'font-awesome/css/font-awesome.min.css'
import App from './App.vue'
import axios from 'axios'
const app = createApp(App)
// 配置請求根路徑
axios.defaults.baseURL = 'http://localhost:8088'
//将axios作為全局的自定義屬性，每個元件可以在内部直接通路（Vue3），該部分要放在pp.mount('#app')的全面
app.config.globalProperties.$http = axios
app.use(ElementPlus)
app.mount('#app')
2 修改TestTable.vue
修改兩處，
全部代碼為：
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column
prop="id"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="username"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="password"
label="密碼">
</el-table-column>
</el-table>
<i class="fa fa-camera-retro"></i> fa-camera-retro
</template>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
<script>
export default {
methods: {
tableRowClassName({rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
created: function(){
this.$http.get("/user/findAll").then((response)=>{
console.log(response.data)
this.tableData = response.data
})
},
data() {
return {
tableData: []
}
}
}
</script>
3 App.vue
全部代碼為：
<template>
<img alt="Vue logo" src="./assets/logo.png">
<Movie v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie>
<testTable></testTable>
</template>
<script>
import Movie from './components/Movie.vue'
import testTable from './components/testTable.vue'
export default {
name: 'App',
data:function(){
return {
movies:[
{id:1, title:"金剛狼1", rating:8.7},
{id:2, title:"金剛狼2", rating:8.8},
{id:3, title:"金剛狼3", rating:8.9}
]
}
},
created: function(){
console.log("元件被建立了")
},
components: {
Movie,
testTable
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
5 Movie.vue
<template>
<div>
<h1>{{ title }}</h1>
<h2>{{ rating }}</h2>
</div>
</template>
<script>
export default {
name: 'helloHello',
props: ["title", "rating"],
data:function(){
return {
}
},
created: function(){
console.log("Movie元件被建立了")
},
mounted: function(){
console.log("Movie元件被挂載完畢")
},
}
</script>
<style>
</style>
6 測試
目前，前端和後端的目錄結構，分别如下所示：
浏覽器通路http://localhost:8080/，傳回查詢到的json格式的資料，說明成功了。
然後，同時，idea的終端也會傳回我們從資料庫中的【my_user】表中查到的所有資料記錄。
ok。