PHP နှင့် vue.js နှင့်အတူစာရင်းအင်းဆိုင်ရာဇယားများနှင့်ပတ်သက်သော Real-time data update ကိုအကောင်အထည်ဖော်ရန်အပြည့်အစုံသင်ခန်းစာ

PHP နှင့် vue.js ရှိစာရင်းအင်းဆိုင်ရာဇယား၏အချက်အလက်များကိုအချက်အလက်များကိုမည်သို့အကောင်အထည်ဖော်ရမည်နည်း

အချက်အလက်ခွဲခြမ်းစိတ်ဖြာခြင်းနှင့်မြင်ကွင်းလိုအပ်ချက်များကိုကြီးထွားမှုဖြင့်စာရင်းအင်းဇယားများကို web application များတွင်ပိုမိုအသုံးပြုသည်။ PHP နှင့် vue.j များကိုပေါင်းစပ်ခြင်းကအချိန်နှင့်တပြေးညီအချက်အလက်များကိုဖော်ပြနိုင်ပြီးဇယားများသည်နောက်ဆုံးပေါ်ဒေတာအခြေအနေကိုအမြဲတမ်းရောင်ပြန်ဟပ်ရန်ခွင့်ပြုနိုင်သည်။ ဤဆောင်းပါးသည်အကောင်အထည်ဖော်မှုလုပ်ငန်းစဉ်တစ်ခုလုံးကိုအသေးစိတ်မိတ်ဆက်ပေးလိမ့်မည်။

ဖွံ့ဖြိုးရေးပတ်ဝန်းကျင်ကိုပြင်ဆင်ပါ

သင်စတင်မီသင် PHP နှင့် vue.js ဖွံ့ဖြိုးတိုးတက်မှုပတ် 0 န်းကျင်များတပ်ဆင်ထားပြီး PHP backend server ကိုပြင်ဆင်ပါ။

PHP ဒေတာ interface ကိုဖန်တီးပါ

PHP Backend တွင်ဇယားအတွက်လိုအပ်သောအချက်အလက်များကိုပေးသောဒေတာမျက်နှာပြင်တစ်ခုဖန်တီးရန်လိုအပ်သည်။ ဒေတာဘေ့စ်ကိုရယူရန်နှင့် quality format ရှိ query form ကိုရှေ့ဆုံးသို့ပြန်သွားရန် PDO သို့မဟုတ် MySQLI ကိုသုံးနိုင်သည်။

<?php
// ဒေတာဘေ့စနှင့်ဆက်သွယ်ပါ
$pdo = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');

// ဒေတာရှာဖွေမှုဒေတာ
$stmt = $pdo-> ပြင်ဆင်ပါ ("စာရင်းအင်းများမှရွေးချယ်ပါ"),);
$ stmt-> execute ();
$ ဒေတာ = $ stmt-> fetchall (pdo :: fetter_assoc);

// ပြန်လာ JSON ဒေတာ header (&#39;အကြောင်းအရာအမျိုးအစား: application / jsor&#39;);
echo json_entode ($ ဒေတာ);
>

အထက်ဖော်ပြပါကုဒ်သည် MySQL ဒေတာဘေ့စ်ကိုစစ်ဆေးပြီးစာရင်းအင်းစားပွဲ၌အချက်အလက်အားလုံးကိုရှာဖွေခြင်းနှင့် JSON format ရှိအချက်အလက်အားလုံးကိုရှေ့အဆုံးသို့ပြန်သွားသည်။

တစ် ဦး vue.js ရှေ့ - အဆုံးလျှောက်လွှာကိုတည်ဆောက်ခြင်း

ရှေ့ဆုံးအဆုံးတွင်ကျွန်ုပ်တို့သည်စာရင်းအင်းဇယားများနှင့်အချက်အလက်များကိုအချိန်မှန်အတွက်အချက်အလက်များကိုအသစ်ပြောင်းရန် vue.js ကိုအသုံးပြုသည်။ ပထမ ဦး စွာ vue.js နှင့်ပဲ့တင်သံစာကြည့်တိုက်များကို HTML သို့မိတ်ဆက်ပေးပါ။

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>

ထို့နောက် vue ဥပမာအားဖြင့်ဒေတာနှင့်နည်းလမ်းများကိုသတ်မှတ်ပါ။

<div id="app">
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    chart: null,
    data: []
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.getData();
  },
  methods: {
    getData() {
      fetch('api.php') // တယ်လီဖုန်းဆက်ခြင်းPHPထိသိျက်နှာ
        .then(response => response.json())
        .then(data => {
          this.data = data;
          this.updateChart();
        });
    },
    updateChart() {
      // ဇယားအချက်အလက်များကိုအဆင့်မြှင့်တင်ပြီးပြန်လည်ဆပ်ပါ
      const option = {
        // configuration parameters တွေကို chart chart
        series: [{
          data: this.data
        }]
      };
      this.chart.setOption(option);
    }
  }
});
</script>

အထက်ပါကုဒ်များတွင် Vue ဥပမာတွင်ဇယားကိုပြသရန် Div element ပါ 0 င်သည်။ Orcharts of Ettarts ဥပမာအားဖြင့် Sounted Life Cycle Hook တွင်ဖော်ပြပြီးအချက်အလက်ရရှိရန် GetData နည်းလမ်းကိုခေါ်ပါ။ GetData နည်းလမ်းသည် PHP interface ကို JSON အချက်အလက်များကိုရယူခြင်းမှတစ်ဆင့်ရယူရန်ခေါ်ဆိုသည်။

Real-Time Data Updates

ဇယားအတွက်အချက်အလက်အပြောင်းအလဲများကိုအချိန်မှန်တွင်ရောင်ပြန်ဟပ်ရန်ဇယားကွက်အတွက်အချိန်မှန်သို့ရောက်ရန် timer ကိုသုံးနိုင်သည်။

 setintererval (() => {
  this.getdata ();
}, 5000); // ဒေတာ 5 စက္ကန့်တိုင်း

ဤကုဒ်သည်ဇယားအချက်အလက်များကိုအသစ်ပြောင်းရန်နှင့်အချိန်မှန်မျက်နှာပြင်သက်ရောက်မှုများရရှိရန်အတွက် 5 စက္ကန့်တိုင်းကို 5 စက္ကန့်တိုင်း 5 စက္ကန့်တိုင်းက egetdata method ကို 5 စက္ကန့်စီအကောင်အထည်ဖော်သွားမည်ဖြစ်သည်။

အကျဉ်းချုပ်

စာရင်းအင်းဆိုင်ရာဇယားများအတွက်ဒေတာအသစ်ပြောင်းခြင်းများကိုအကောင်အထည်ဖော်ရန် PPP နှင့် Vue.js ကိုမည်သို့ပေါင်းစပ်မည်ကိုဤဆောင်းပါးကမိတ်ဆက်ပေးသည်။ PHP တွင်ဒေတာ interface ကို ပေး. Vue.js နှင့် Echars များကိုအသုံးပြုခြင်းဖြင့် developer များသည် developer များက developer များက developer များအလွယ်တကူအကောင်အထည်ဖော်နိုင်သည်။ ဤနည်းလမ်းသည်ပြောင်းလွယ်ပြင်လွယ်ရှိပြီးချဲ့ထွင်ရန်လွယ်ကူသည်။ အချက်အလက်စာရင်းအင်းအခြေအနေအမျိုးမျိုးအတွက်သင့်တော်သည်။