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

PHP နှင့် vue.js: စာရင်းအင်းဇယားတင်သွင်းမှုနှင့်ပို့ကုန် function ကိုအကောင်အထည်ဖော်ခြင်း

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

1 ။ သွင်းကုန် function ကိုအကောင်အထည်ဖော်ခြင်း

ပထမ ဦး စွာ PHP နှင့်ဆက်စပ်သော extensions များကိုသင်၏ဆာဗာတွင်တပ်ဆင်ထားကြောင်းသေချာပါစေ။ ထို့နောက်သက်ဆိုင်ရာကုဒ်နှင့်အရင်းအမြစ်ဖိုင်များကိုသိမ်းဆည်းရန် "Chart" ဟုခေါ်သောဖိုလ်ဒါတစ်ခုကိုဖန်တီးပါ။

အောက်ပါကုဒ်ကို "index.php" တွင်ရေးပါ။

 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: []
      };
    },
    methods: {
      handleImport() {
        this.$message.success('အောင်မြင်စွာတင်သွင်း');
        // TODO: သွင်းကုန်ကုဒ်ရေးပါ
      }
    }
  });
</script>

အထက်ပါကုဒ်သည် Import Button တစ်ခုနှင့်အချည်းနှီးသောစားပွဲတစ်ခုကိုပြသည်။ vue.js နှင့် element ui ပေါင်းစပ်မှတဆင့်သင်လျင်မြန်စွာအပြန်အလှန်အကျိုးသက်ရောက်မှုရှိသော UI အစိတ်အပိုင်းများကိုရှေ့အဆုံးတွင်လျင်မြန်စွာဖန်တီးနိုင်သည်။ "Import" ခလုတ်ကိုနှိပ်လိုက်ပါက system သည်အောင်မြင်မှုသတင်းစကားပေါ်လာလိမ့်မည်။ အမှန်တကယ်ဖွံ့ဖြိုးတိုးတက်မှုတွင်နောက်ခံမှဒေတာများကိုရယူခြင်းနှင့် Ajax တောင်းဆိုမှုမှတစ်ဆင့်ဇယားတစ်ခုထဲသို့ထည့်နိုင်သည်။

2 ။ ပို့ကုန် function ကိုအကောင်အထည်ဖော်ခြင်း

ထို့နောက်ကျွန်ုပ်တို့သည် Export Function ကိုအကောင်အထည်ဖော်ရန်အတွက် "index.php" ကိုမူလအခြေခံပြင်ဆင်ရန်ပြင်ဆင်သည်။

 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: []
      };
    },
    methods: {
      handleImport() {},
      handleExport() {
        // TODO: ပို့ကုန်ကုဒ်ရေးပါ
      }
    }
  });
</script>

ဒီဥပမာမှာပို့ကုန်ခလုတ်ကိုထည့်လိုက်တယ်။ VUE တွင်ဒေတာတင်ပို့မှုလုပ်ငန်းများကိုကိုင်တွယ်ရန် `handerexport` နည်းလမ်းကိုကျွန်ုပ်တို့အကောင်အထည်ဖော်သည်။ သင်၏လိုအပ်ချက်များနှင့်အညီ CSV, Excel နှင့်အခြားပုံစံများသို့ဒေတာများကိုတင်ပို့ရန်ရွေးချယ်နိုင်သည်။

အကျဉ်းချုပ်

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

ဤဆောင်းပါးသည်သင်၏ဖွံ့ဖြိုးတိုးတက်မှုလုပ်ငန်း၌သင့်ကိုကူညီနိုင်မည်ဟုမျှော်လင့်ပါ။ ပိုမိုနက်ရှိုင်းစွာလေ့လာရန်နှင့်ပိုမိုဖွံ့ဖြိုးရေးစွမ်းရည်များကိုပိုမိုလေ့လာရန်ဆက်လက်လုပ်ဆောင်ပါ။