PHP နှင့် Vue.js သည်စာရင်းအင်းဆိုင်ရာဇယားအချက်အလက်အချက်အလက်များကိုဆက်လက်လုပ်ဆောင်ခြင်း - ဖွံ့ဖြိုးရေးအလေ့အကျင့်နှင့်နည်းပညာဆိုင်ရာခွဲခြမ်းစိတ်ဖြာမှု

1 ။ နိဒါန်း

အင်တာနက်ဖွံ့ဖြိုးတိုးတက်မှုနှင့်အတူဒေတာမြင်ကွင်းသည်လုပ်ငန်းသုံးရာများနှင့်စာရင်းအင်းများနှင့်ဇယားများတွင်အရေးကြီးသောအခန်းကဏ် plays မှပါ 0 င်သည်။ ဇယားအချက်အလက်များ၏တက်ကြွစွာတင်ရန်ဤဆောင်းပါးသည် PHP နှင့် Vue.js ကိုမည်သို့အသုံးပြုရမည်ကိုပြသပါလိမ့်မည်။

2 ။ စာရင်းအင်းဇယားများ၏တက်ကြွသောဒေတာကိုတင်

ရိုးရာဒေတာမြင်ကွင်း၏အမြင်အာရုံဆိုင်ရာဖြေရှင်းနည်းများသည် developer များအများအားဖြင့် developer များအများအပြား detault code များကိုရေးရန်နှင့်အချက်အလက်များကိုရယူရန်နှင့်ပြန်ဆိုခြင်းများရရှိရန်အတွက် JavaScript code များရေးရန်လိုအပ်သည်။ Vue.js ကိုအသုံးပြုခြင်းသည်ဤစစ်ဆင်ရေးများကိုရိုးရှင်းစေနိုင်သည်။

2.1 PHP Backend တွင်အချက်အလက်ရယူခြင်း

ပထမ ဦး စွာကျွန်ုပ်တို့သည် PHP Backend တွင်အချက်အလက်များကိုရယူရန်လိုအပ်သည်။ ဤဆောင်းပါးသည် MySQL ဒေတာဘေ့စ်ကိုဒေတာအရင်းအမြစ်အဖြစ် အသုံးပြု. ဒေတာဘေ့စ်ဆက်သွယ်မှုများနှင့်လုပ်ငန်းလည်ပတ်မှုအတွက် PHP PDO PDO Extension ကိုအသုံးပြုလိမ့်မည်။

PDO (PHP Data Object) သည်အသုံးများသောဒေတာဘေ့စ်အသုံးပြုမှုနည်းလမ်းဖြစ်ပြီးကျွန်ုပ်တို့အားဒေတာဘေ့စ်အမျိုးမျိုးနှင့်မတူကွဲပြားသောအမျိုးအစားများကိုချိတ်ဆက်ရန်နှင့် SQL Query များကိုလုပ်ဆောင်ရန်ခွင့်ပြုသည်။ PDO မှတစ်ဆင့်ဒေတာလုပ်ငန်းများမှတဆင့်ပိုမိုတိကျသောနှင့်အကျိုးရှိစွာဖြစ်လာသည်။

      
        $dsn = 'mysql:host=localhost;dbname=test;charset=utf8';
        $username = 'root';
        $password = '123456';

        try {
          $pdo = new PDO($dsn, $username, $password);
        } catch (PDOException $e) {
          echo 'Connection failed: ' . $e->getMessage();
        }

        $sql = "SELECT * FROM user;";
        $result = $pdo->query($sql);
        $data = $result->fetchAll(PDO::FETCH_ASSOC);
      

အထက်ပါကုဒ်တွင်ဒေတာအရင်းအမြစ်အမည် ($ DSN), Username ($ username) နှင့်စကားဝှက် ($ username) နှင့်စကားဝှက် ($ password) အပါအ 0 င်ဒေတာဘေ့စ် connection parameters များကို ဦး စွာသတ်မှတ်ထားသည်။ ထို့နောက် PDO မှတစ်ဆင့်ဒေတာဘေ့စ်ကိုချိတ်ဆက်ပါ,

2.2 Vue.js ရှေ့ - အဆုံးတွင်အချက်အလက်များကိုဖော်ပြခြင်း

PHP Backend သည်ဒေတာများကိုအောင်မြင်စွာရယူပြီးနောက်နောက်အလုပ်ကတော့ဒေတာကို frontend ကိုသွားပြီးပြသဖို့ပါ။ Vue.js သည်ပြောင်းလွယ်ပြင်လွယ်ရှိသောအချက်အလက်များ, vue components များစသဖြင့်ဒေတာများကိုဖြည့်ဆည်းပေးနိုင်သည်။

ပထမ ဦး စွာ ECHARTS အစိတ်အပိုင်းကို vue.js တွင်မိတ်ဆက်ပေးရန်သေချာပါစေ။

 
        import VueECharts from 'vue-echarts/components/ECharts.vue';
        Vue.component('v-chart', VueECharts);
      

ထို့နောက်ဇယား၏အချက်အလက်များကိုသိုလှောင်ရန် Vue ဥပမာအားဖြင့်ဒေတာအရာဝတ်ထုတစ်ခုကိုသတ်မှတ်ရန်လိုအပ်သည်။

 
        data() {
          return {
            chartData: []
          };
        }
      

ထို့နောက် backend api မှအချက်အလက်များကိုရယူရန် Axios ကို အသုံးပြု. Chartddata သို့သတ်မှတ်ရန်။

 
        axios.get('api/getChartData.php')
          .then(response => {
            this.chartData = response.data;
          });
      

နောက်ဆုံးအနေဖြင့်ကျွန်ုပ်တို့သည် fetched data များကို Ettarts အစိတ်အပိုင်းသို့ဖြတ်သန်းသွားနိုင်ပြီးဇယားမှဇယားကိုပြန်ဆိုနိုင်သည်။

 
        <v-chart :options="options" :data="chartData" :auto-resize="true"></v-chart>
      

ရွေးချယ်စရာများသည်ဇယား၏ configuration ပစ္စည်းများဖြစ်ပြီး Chartdata သည် Backend မှရရှိသောအချက်အလက်များဖြစ်သည်။

2.3 အကျဉ်းချုပ်

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

3 ။ အကျဉ်းချုပ်

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