BASCI VUE3
https://www.mindphp.com/developer/20-javascript/9721-getting-started-with-vue-js.html
REST API
https://www.youtube.com/watch?v=JmwgD3UOsHA
CODE SNIPPED
https://fontawesomeicons.com/fa/vue-js-post-form-data-to-api-using-axios
ROUTE
https://shouts.dev/articles/vuejs-3-routing-from-scratch-using-cdn-without-cli
CRUD -PHP & MYSQL [API with Axios]
https://github.com/rudSarkar/php-mysql-vue
Multiple Endpoint [API with Axios]
https://blog.logrocket.com/using-axios-all-make-concurrent-requests
ตย.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<p>Date : {{todayDate}}</p>
<!-- <p>{{ vsan }}</p> -->
<table border="1">
<thead><tr><th>No</th><th>Office</th><th>T1</th></tr></thead>
<tbody>
<!-- index เป็นตัวนับ เริ่มจาก 0 เวลาไปใช้จึงต้อง +1 -->
<tr v-for="(row, index) in vsan"> <!-- :key="info.user_id" ต้องใส่เสมอ ป้องกันข้อผิดพลาดกรณีแก้ไขข้อมูล-->
<td>{{index+1}}</td>
<td>{{row.nick_name }}</td>
<td>{{row.t1}}</td>
</tr>
</tbody>
</table>
<!-- //////////////////////////// -->
<br>
<!-- <p>{{ qalert }}</p> -->
<table border="1">
<thead><tr><th>No</th><th>Office</th><th>C19</th><th>YLF</th></tr></thead>
<tbody>
<!-- index เป็นตัวนับ เริ่มจาก 0 เวลาไปใช้จึงต้อง +1 -->
<tr v-for="(row, index) in qalert"> <!-- :key="info.user_id" ต้องใส่เสมอ ป้องกันข้อผิดพลาดกรณีแก้ไขข้อมูล-->
<td>{{index+1}}</td>
<td>{{row.nick_name }}</td>
<td>{{row.C19}}</td>
<td>{{row.YLF}}</td>
</tr>
</tbody>
</table>
<!-- //////////////////////////// -->
</div>
<script>
new Vue({
el: '#app',
data () {
return {
vsan:null,
qalert:null,
todayDate: new Date().toLocaleDateString(),
}
},
mounted () {
let endpoints = [
'http://223.27.246.234/poe12-opendata/vsan_t1.php',
'http://223.27.246.234/poe12-opendata/qalert.php'
];
axios.all(endpoints.map((endpoint) => axios.get(endpoint)))
.then(
axios.spread(({data: vsan}, {data: qalert}) => {
this.vsan = vsan
this.qalert = qalert
console.log({ vsan, qalert });
})
);
}
})
</script>
</body>
</html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น