ครั้งแรกเริ่มทำด้วย 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>
<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>{{today}}</p> <p>{{formattedDate}}</p>
<br>
{{info}}
<br>
<!-- {{info.channel_mode}} -->
<!-- <p>{{info.person_results[0].id}}</p> -->
<p>บัตร ปชช. {{info.person_results[0].citizen_no}}</p>
<p>ชื่อ-สกุล {{info.person_results[0].pre_name}} {{info.person_results[0].f_name}} {{info.person_results[0].l_name}}
<p>วดป.เกิด {{info.person_results[0].birth_date}}</p>
<p>ที่อยู่ปัจจุบัน {{info.person_results[0].present_address}}</p>
<!-- <p>{{info.person_results[0].vaccines[0].vacc_disease}}</p> -->
ประวัติการได้รับวัคซีน
<!-- vaccine have more record, so will loop -->
<table border="1">
<tr><td>No.</td><td>Vaccine Name</td><td>Date</td><td>Service place</td></tr>
<tr v-for="(rowvac, index) in info.person_results[0].vaccines">
<td>{{index+1}}</td>
<td>{{rowvac.vacc_disease }}</td>
<td>{{rowvac.vacc_date }}</td>
<td>{{rowvac.authorize_workplace_name }}</td>
</tr>
</table>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////// -->
<script>
new Vue({
el: '#app',
data () {
return {
today: new Date().toLocaleDateString(),
info: null,
date: new Date()
}
},
mounted () {
const targetURL ='http://223.27.246.234/hujat-info/vaccination/api_intervac.php?p=3960400280121'
axios.get(targetURL)
.then(response => (this.info = response.data))
.then(response =>console.log(response))
},
computed: {
formattedDate() {
const day = this.date.getDate().toString().padStart(2, "0");
const month = (this.date.getMonth() + 1)
.toString()
.padStart(2, "0");
const year = this.date.getFullYear().toString();
const th_year = this.date.getFullYear()+543;
return `${day}/${month}/${th_year}`;
}
}
})
</script>
</body>
</html>
หมายเหตุ
-การดึง API จาก enpoint ที่ติดปัญหาเรื่อง CORS
ให้แก้ด้วยการดึงด้วย PHP (ใช้ CURL) แล้วให้ส่งค่า Response เพื่อให้ Axios ดึงมาอีกที
(เพราะ PHP เป็น Server side Rendering อยู่แล้ว ไม่มีปัญหาเรื่อง CORS)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น