頁面展示：
資料庫欄位名：
跨域：
config裡的index檔案裡的dev裡面的proxyTable裡面新增自己的後臺埠，這樣就能很方便的請求後臺資料了
'/api':{
target:'http://localhost:9987',
changeOrigin:true,
pathRewrite:{
'/api':''
}
具體程式碼：
<template><el-table :data="packData" border style="width: 100%"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="PackingId" label="包裝編號" width="120">//prop裡的值是資料庫表裡的對應欄位名</el-table-column><el-table-column prop="PackingName" label="包裝名稱" width="120"></el-table-column><el-table-column prop="PackingPrice" label="包裝價格" width="120"></el-table-column><el-table-column prop="PackingImage" label="包裝圖片"></el-table-column></el-table></template></script>export default {name: 'pack',data() {return {packData:[],//主題資料}}methods：{// 獲取 包裝資料，因為搜尋後分頁資料會變化，所以這裡可以傳值到後臺判斷是否進行了搜尋展示，這裡只做簡單展示，不考慮搜尋和分頁getPackData() {//我用的api代理this.$axios.post('/api/selectPackPageMade.do').then((res) => {this.packData = res.data;//把傳回來資料賦給packData}).catch(function(error){console.log(error);})},}}</script>
複製程式碼