postpresql 表結構修改、新增欄位、外來鍵設定
阿新 • • 發佈:2021-02-01
技術標籤:微服務線上教育平臺
建立一個json檔案
{ "success":true, "code":20000, "message":"ok", "data":{ "items":[ {"name":"張三","age":10}, {"name":"李四","age":20}, {"name":"王五","age":30} ] } }
在頁面中引入 vue.js axios.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
< div id="app">
<table>
<tr v-for="user in userList">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script src="./axios.min.js" ></script>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
//在data定義變數和初始值
userList:[]
},
created(){
//在頁面渲染之前執行這個方法 vue的生命週期方法
//一般在這裡呼叫定義的方法
this.getUsers()
},
methods:{
getUsers(){
//使用axios傳送ajax請求
//一般用法 axios.get("請求的介面路徑").then(箭頭函式).catch(箭頭函式)
axios.get("test.json")
.then(response =>{ //response和error是axios裡面固定的變數
console.log(response)//通過這一句可以檢視到json檔案中資料的格式 然後通過下面的方式來獲取資料
this.userList = response.data.data.items
})//請求成功執行的then方法
.catch(error=>{
//
})//請求失敗執行的catch方法
}
}
})
</script>
</body>
</html>