1. 程式人生 > 其它 >postpresql 表結構修改、新增欄位、外來鍵設定

postpresql 表結構修改、新增欄位、外來鍵設定

技術標籤:微服務線上教育平臺

建立一個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>

在這裡插入圖片描述