JDBC呼叫儲存過程
阿新 • • 發佈：2021-11-13
axios是獨立的專案，不是vue裡面的一部分，使用axios經常和vue疫情使用，用於實現ajax的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale==1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <table style="border: 1px solid #cccccc;width: 60%;"> <tr> <th>序號</th> <th>使用者名稱</th> <th>年齡</th> </tr> <tr v-for="(user,index) in userList"> <td>{{index}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> </tr> </table> </div> <script src="/vue.min.js"></script> <script src="/axios.min.js"></script> <script> new Vue({ el: '#app', //固定的結構 data: { //在data定義變數和初始值 //定義變數，值空陣列 userList:[] }, created(){ //頁面渲染之前執行//呼叫定義的方法 this.getUserList() }, methods:{ //編寫具體的方法 //建立方法，查詢所有的使用者資料 getUserList(){ //使用axios傳送ajax請求 //axios.提交方式("請求介面路徑").then(箭頭函式).catch(箭頭函式) axios.get("data.json") .then(response=>{ //response就是請求之後的返回資料
//通過response獲取具體資料，賦值給定義空陣列 this.userList=response.data.data.items console.log(this.userList) }) //請求成功執行then方法 .catch(error=>{ }) //請求失敗執行catch方法 } } }) </script> </body> </html>
data.json
{ "success":true, "code":20000, "message":"成功", "data":{ "items":[ {"name":"lucy","age":30}, {"name":"lily","age":33}, {"name":"wangxiaoli","age":41} ] } }