PHP နှင့် vue မှတဆင့်ထိရောက်သောဒေတာများတင်ဆောင်လာသောလုပ်ဆောင်ချက်များအောင်မြင်ရန်

PHP နှင့် vue မှတဆင့်ထိရောက်သောဒေတာများတင်ဆောင်လာသောလုပ်ဆောင်ချက်များအောင်မြင်ရန်

နိဒါန်း
မျက်မှောက်ခေတ် Web Development တွင် Real-time data loading function သည် applications များစွာ၏အဓိကလိုအပ်ချက်များထဲမှတစ်ခုဖြစ်သည်။ အချက်အလက်တင်ခြင်းလုပ်ငန်းများကိုအကောင်အထည်ဖော်ရန် PHP နှင့် Vue.js မူဘောင်များကိုမည်သို့အသုံးပြုရမည်ကိုဤဆောင်းပါးကဖော်ပြသည်။ ဤနည်းပညာကိုမြန်မြန်ကျွမ်းကျင်စွာကူညီရန်သတ်သတ်မှတ်မှတ်သင်္ကေတဥပမာများကိုကျွန်ုပ်တို့အသုံးပြုပါမည်။

1 ။ ပြင်ဆင်မှု

သင်မစတင်မီ PHP နှင့် vue.js များတပ်ဆင်ထားပါ။ ၎င်းကို install လုပ်ခြင်းမရှိသေးပါက၎င်းကိုဒေါင်းလုတ် လုပ်. install လုပ်ရန်တရားဝင်ဝက်ဘ်ဆိုက်ကိုသင်ဝင်ရောက်ကြည့်ရှုနိုင်သည်။ ထို့အပြင်ကျွန်ုပ်တို့သည်အသုံးပြုသူအချက်အလက်များကိုသိမ်းဆည်းရန် "အသုံးပြုသူများ" ဟုခေါ်သည့်ဇယားပါသောရိုးရှင်းသောဒေတာဘေ့စ်တစ်ခုကိုဖန်တီးလိမ့်မည်။

2 ။

ပထမ ဦး စွာကျွန်ုပ်တို့သည် PHP ဖိုင်ကို "loaddata.php" အမည်ရှိ PHP ဖိုင်ကိုဖန်တီးသည်။ ဤဖိုင်ကိုဒေတာဘေ့စ်မှအချက်အလက်များကိုရှာဖွေပြီး၎င်းကိုရှေ့အဆုံးသို့ပြန်ပို့ရန်အသုံးပြုသည်။

 
  <?php
  // ဒေတာဘေ့စ်ကိုဆက်သွယ်ပါ
  $db = new PDO('mysql:host=localhost;dbname=test', 'root', '');
  
  // ဒေတာရှာဖွေမှုဒေတာ
  $stmt = $db->query("SELECT * FROM users");
  $users = $stmt->fetchAll(PDO::FETCH_ASSOC);
  
  // ပြန်လာJSONအချက်အလက်အချက်အလက်များ
  header('Content-Type: application/json');
  echo json_encode($users);
  ?>
  

အထက်ပါကုဒ်သည် MySQL database နှင့် questions questions quests quests questions questions questions questions quests quests questions quests quests questions) ကို ဦး စွာဆက်သွယ်သည်။ ထို့နောက်ကျွန်ုပ်တို့သည် JSON format ရှိ frontend သို့မျှော်လင့်ချက်ရလဒ်ကိုပြန်ပို့သည်။

3 ။ Front-end အပိုင်း

ထို့နောက် vue.js တွင်ဥပမာတစ်ခုကိုဖန်တီးပါ, Backend API ဟုခေါ်ရန်နှင့်ဒေတာများကိုတင်ရန် "Mounted" lifecycle ချိတ်ကိုသုံးပါ။

 
  new Vue({
    el: '#app',
    data: {
      users: []  // backend ကနေရရှိသောဒေတာကိုသိမ်းဆည်းရန်အသုံးပြုခဲ့သည်
    },
    mounted() {
      this.loadData();  // စာမျက်နှာဖွင့်သောအခါဒေတာ loading function ကိုခေါ်ပါ
    },
    methods: {
      loadData() {
        // အသုံးပြုAxiosစာကြည့်တိုက်ပို့ပါHTTPမေးမြန်း
        axios.get('loadData.php')
          .then(response => {
            this.users = response.data;
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  });
  

ဤကုဒ်တွင်ကျွန်ုပ်တို့သည် vue ဥပမာတစ်ခု ဖန်တီး. "Mounted" lifecycle hook တွင် "loaddata" function ကိုခေါ်ပါ။ ဤလုပ်ဆောင်ချက်သည် Axios ကို HTTP တောင်းဆိုမှုများကို backend interface သို့ပို့ရန်, JSON format ဖြင့်အသုံးပြုသူဒေတာများကို vue Pasce တွင်ရရှိသော "အသုံးပြုသူများ" ခင်းကျင်းမှုကို update လုပ်သည်။

Front-end ဒေတာ display ကို

vue's "v-for" ညွှန်ကြားချက်မှတဆင့်ကျွန်ုပ်တို့သည် "အသုံးပြုသူများ" ခင်းကျင်းမှုကို HTML တွင် ဖြတ်. အသုံးပြုသူတစ် ဦး ချင်းစီ၏အချက်အလက်များကိုပြသနိုင်သည်။

 
  <div id="app">
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
  

အထက်ပါကုဒ်တွင် "သုံးစွဲသူများ" ခင်းကျင်းမှုကို "V-for" ညွှန်ကြားချက်ကို ဖြတ်. စာမျက်နှာပေါ်ရှိအသုံးပြုသူတစ် ဦး ချင်းစီ၏အမည်နှင့်စာတိုက်ပုံးကိုပြသသည်။

IV ။ စမ်းသပ်နှင့် run

အထက်ပါအဆင့်များကိုပြီးစီးပြီးနောက် browser ကိုဖွင့ ်. HTML ဖိုင်ကိုဖွင့်ပါ။ အသုံးပြုသူအချက်အလက်အားလုံးကိုဒေတာဘေ့စ်မှတင်ထားသောအသုံးပြုသူအချက်အလက်အားလုံးကိုကြည့်ရှုနိုင်သင့်သည်။ အရာအားလုံးအဆင်ပြေမယ်ဆိုရင်စာမျက်နှာက "အသုံးပြုသူများ" စားပွဲပေါ်မှာပါအကြောင်းအရာတွေကိုပြသလိမ့်မယ်။

နိဂုံးချုပ်အားဖြင့်

ဤဆောင်းပါးကိုမိတ်ဆက်ပေးခြင်းဖြင့် PHP နှင့် vue.js functions ကိုအကောင်အထည်ဖော်ရန်မည်သို့အသုံးပြုရမည်ကိုလေ့လာရန်လေ့လာသင်ယူရန်လေ့လာသင်ယူရန်လေ့လာသင်ယူရန်လေ့လာသင်ယူသည်။ Backend PHP ဖိုင်သည်ဒေတာဘေ့စ်မှဒေတာများကိုရယူပြီး JSON format ကိုပြန်ပို့သည်။ frontend vue ဥပမာအားဖြင့် Axios စာကြည့်တိုက်မှတဆင့်ဒေတာများကိုရရှိပြီးစာမျက်နှာပေါ်တွင်ဖော်ပြထားသည်။ အချက်အလက်တင်ခြင်းလုပ်ဆောင်မှုများကိုအကောင်အထည်ဖော်ရန်ဤဆောင်းပါးသည် PHP နှင့် Vue ကိုပိုမိုကောင်းမွန်စွာနားလည်ရန်နှင့်အသုံးပြုရန်ကူညီနိုင်သည်ဟုကျွန်ုပ်မျှော်လင့်ပါသည်။