လက်ရှိတည်နေရာ: ပင်မစာမျက်နှာ> နောက်ဆုံးရဆောင်းပါးများစာရင်း> PHP နှင့် vue.js ပေါင်းစပ်: လက်တွေ့ကျသောဒေတာ၏အမြင်အာရုံခွဲခြမ်းစိတ်ဖြာအပေါ်သင်ခန်းစာ

PHP နှင့် vue.js ပေါင်းစပ်: လက်တွေ့ကျသောဒေတာ၏အမြင်အာရုံခွဲခြမ်းစိတ်ဖြာအပေါ်သင်ခန်းစာ

M66 2025-06-12

နိဒါန်း

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

1 ။ PHP နှင့် vue.js ကိုအဘယ်ကြောင့်ရွေးချယ်ရသနည်း။

ဆာဗာဘေးထွက် Scripting language တစ်ခုအနေဖြင့် PHP တွင်လျှောက်လွှာနယ်ပယ်အမျိုးမျိုးရှိပြီး vue.js သည်တိုးတက်သောရှေ့ဆုံးမူဘောင်တစ်ခုဖြစ်ပြီး, နှစ်ခုပေါင်းစပ်မှုသည်ရှေ့တန်းနှင့်နောက်ကွယ်တွင်သီးခြားဖွံ့ဖြိုးတိုးတက်မှုကိုရရှိနိုင်ပါသည်။

2 ။ ပြင်ဆင်မှုအလုပ်

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

  1. vue.js: တိုးတက်သော JavaScript Framework
    NPM သည် vue ကိုတပ်ဆင်ပါ
  2. Ettarts.js: အစွမ်းထက်ဒေတာမြင်ကွင်းကိုစာကြည့်တိုက်
    NPM ECHARTS ကို Install လုပ်ပါ
  3. Axios.js: appynchronous တောင်းဆိုမှုများအတွက်ကတိကအခြေပြု HTTP စာကြည့်တိုက်
    NPM က axisos ကိုထည့်ပါ

3 ။ စီမံကိန်းလမ်းညွှန်ဖွဲ့စည်းပုံတစ်ခုဖန်တီးပါ

အလုပ်လုပ်လမ်းညွှန်တွင်အောက်ပါ directory ဖွဲ့စည်းပုံကိုဖန်တီးပါ။

  • CSs
  • - Style.CSS
  • JS
  • - Main.js
  • ယခု Php
  • - ဒေတာ .php
  • index.html

CSS directory တွင်ကျွန်ုပ်တို့သည်ဇယားကွန်တိန်နာအရွယ်အစားကဲ့သို့သောစတိုင်လ်များကိုသတ်မှတ်ရန် style.css ဖိုင်အသစ်တစ်ခုကိုဖန်တီးသည်။

JS လမ်းညွှန်တွင် Vue.js-related code ကိုရေးရန် Main.js ဖိုင်အသစ်တစ်ခုကိုကျွန်ုပ်တို့ဖန်တီးသည်။

PHP လမ်းညွှန်တွင် data.php ဖိုင်ကို backend အချက်အလက်များကိုတုပရန်ဖန်တီးပါ။

Index.html ကိုစီမံကိန်းအတွက် entry file တစ်ခုအဖြစ်အသုံးပြုလိမ့်မည်။

4 ။ ဒေတာပြင်ဆင်မှု

Data.php ဖိုင်တွင်စာရင်းအင်းဇယားများကိုပြသရန် Backend အချက်အလက်များကိုတုပနိုင်သည်။ ဥပမာအားဖြင့်:

  <?php
  $data = [
    ['name' => &#39;A&#39;, &#39;Value&#39; = >> 100]
    [အမည် &#39;=>>&#39; b &#39;,&#39; value &#39;=> 200]
    [အမည် &#39;=>>&#39; C &#39;,&#39; Value &#39;= >>> 300]
    [အမည် &#39;=>>&#39; D &#39;&#39;, &#39;value&#39; => 400]
    [အမည် &#39;=>>&#39; e &#39;,&#39; Value &#39;= >> 500]
  ];
  echo json_entode ($ ဒေတာ);
  >

Code သည်ဒေါ်လာဒေတာခင်းကျင်းမှုကိုဖန်တီးပြီး Vue.js အတွက်အချက်အလက်အပြောင်းအလဲအတွက်လုပ်ဆောင်ရန်အတွက် JSON format သို့ပြောင်းသည်။

vue.js ကုဒ်

Main.js ဖိုင်တွင်လိုအပ်သောစာကြည့်တိုက်များကိုမိတ်ဆက်ပေးပြီး vue.js code ကိုရေးသည်။

  &#39;vue&#39; မှတင်သွင်းမှု vue;
  &#39;axios&#39; မှ Axios တင်သွင်း;
  ECHARTS မှ ECTARTS ကို ECTARTS ကိုတင်သွင်းပါ။

  အသစ် vue ({
    el: &#39;#app&#39;,
    ဒေတာ: {
      chartdata: []
    },
    ဖန်တီး () {)
      that.fetchdata ();
    },
    နည်းလမ်းများ: {
      Fetchdata () {)
        Axios.GEget (&#39;./ PHP / data.php&#39;)
          .then (တုံ့ပြန်မှု => {
            this.Chartdata = Respons.Data;
            this.drawchart ();
          })
          .Catch (အမှား => {
            console.log (အမှား);
          });
      },
      Drawchart () {)
        var chart = etarts.init (document.getentebyid (&#39;chart-container&#39;));
        var option = {
          ခေါင်းစဉ်: {
            စာသား: &#39;စာရင်းဇယားဇယား&#39;
          },
          xaxis: {
            အမျိုးအစား: &#39;အမျိုးအစား&#39;
            ဒေတာ: This.Chartdata.map (item => item.name)
          },
          Yaxis: {
            အမျိုးအစား: &#39;Value&#39;
          },
          စီးရီး - [{{
            ဒေတာ: This.Chartdata.map (item => item.value),
            အမျိုးအစား: &#39;ဘား&#39;
          }]
        };
        chart.settion (option);
      }
    }
  });

6 ။ HTML စာမျက်နှာကုဒ်နံပါတ်

Index.html ဖိုင်တွင် HTML code ကိုရေးပြီး CSS နှင့် JS ဖိုင်များကိုမိတ်ဆက်ပေးပြီး,

  <meta charset="utf-8">
  <title>PHP နှင့် vue.js လက်တွေ့ကျကျသင်ခန်းစာ</title>
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <script src="./js/main.js"></script>

HTML တွင် Vue.js, Axios နှင့် Ettarts ၏စာကြည့်တိုက်ဖိုင်များကိုပထမ ဦး ဆုံးမိတ်ဆက်ပေးပြီးနောက် id app ဟု id app နှင့် Element တစ်ခုပြုလုပ်ပြီး ID နှင့်ပါ 0 င်သည့်ဒြပ်စင်တစ်ခုပါ 0 င်သည်။

7 ။ စီမံကိန်းကိုဖွင့်ပါ

Terminal တွင်အလုပ်လုပ်သောလမ်းညွှန်ကိုရိုက်ထည့်ပါ။ စီမံကိန်းကိုဖွင့်ရန်အောက်ပါ command ကို Execute လုပ်ပါ။

 NPM Run ကိုအမှုဆောင်

အောင်မြင်သောကွပ်မျက်ပြီးနောက် http: // localhost: 8080 ကိုသွားပါ။

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

PHP နှင့် vue.j များကိုပေါင်းစပ်ခြင်းအားဖြင့်ကျွန်ုပ်တို့သည်ဒေတာမြင်ကွင်းနှင့်ခွဲခြမ်းစိတ်ဖြာခြင်း function ကိုအောင်မြင်စွာအကောင်အထည်ဖော်နိုင်ခဲ့သည်။ ဤဆောင်းပါးတွင် PHP ကိုမည်သို့အသုံးပြုရမည်ကိုပြသသည်မှာ Dision.js နှင့် Ettuals တို့၏အမြင်အာရုံဆန်းစစ်မှုကိုဖြည့်ဆည်းပေးရန် PHP ကိုမည်သို့အသုံးပြုရမည်ကိုပြသသည်။ ဒီသင်ခန်းစာသည် Developerials သည်အချက်အလက်များကိုအမှန်တကယ်အကောင်အထည်ဖော်ရန်မည်သို့အကောင်အထည်ဖော်ရမည်ကိုပိုမိုနားလည်ရန်ကူညီလိမ့်မည်ဟုမျှော်လင့်ပါသည်။

ဆက်စပ်အကြောင်းအရာ
မကြာသေးမီ ဆောင်းပါးများ