ယနေ့သတင်းအချက်အလက်ခေတ်တွင်ဒေတာခွဲခြမ်းစိတ်ဖြာခြင်းနှင့်မြင်ကွင်းများသည်စက်မှုလုပ်ငန်းအားလုံး၏မရှိမဖြစ်လိုအပ်သောအစိတ်အပိုင်းတစ်ခုဖြစ်လာသည်။ Web Development အတွက် PHP ကို backend ဘာသာစကားနှင့် vue.js ပေါင်းစပ်ခြင်းအတွက်ရှေ့ပြေးမူဘောင်အဖြစ်ကျယ်ကျယ်ပြန့်ပြန့်အသုံးပြုသည်။ ဤဆောင်းပါးသည် PHP နှင့် Vue.js ကိုပေါင်းစပ်ပြီးဒေတာအမြင်အာရုံဆန်းစစ်မှုကိုနားလည်သဘောပေါက်ရန်စာရင်းအင်းဇယားများကိုအသုံးပြုရန်မည်သို့ပေါင်းစပ်မည်ကိုမိတ်ဆက်ပေးလိမ့်မည်။
ဆာဗာဘေးထွက် Scripting language တစ်ခုအနေဖြင့် PHP တွင်လျှောက်လွှာနယ်ပယ်အမျိုးမျိုးရှိပြီး vue.js သည်တိုးတက်သောရှေ့ဆုံးမူဘောင်တစ်ခုဖြစ်ပြီး, နှစ်ခုပေါင်းစပ်မှုသည်ရှေ့တန်းနှင့်နောက်ကွယ်တွင်သီးခြားဖွံ့ဖြိုးတိုးတက်မှုကိုရရှိနိုင်ပါသည်။
ဖွံ့ဖြိုးတိုးတက်မှုမပြုမီကျွန်ုပ်တို့သည် PHP ပတ်ဝန်းကျင်ကိုတပ်ဆင်ပြီးလုပ်ငန်းလမ်းညွှန်သည်အဆင်သင့်ဖြစ်ကြောင်းသေချာစေရန်လိုသည်။ တစ်ချိန်တည်းမှာပင် Vue.js နှင့်များသောအားဖြင့်အသုံးပြုသောဒေတာမြင်ကွင်းကိုစာကြည့်တိုက်များလည်းလိုအပ်သည်။ အောက်ဖော်ပြပါများသည်များသောအားဖြင့်အသုံးပြုသောစာကြည့်တိုက်များစွာနှင့်သူတို့၏တပ်ဆင်မှုပညတ်များဖြစ်သည်။
အလုပ်လုပ်လမ်းညွှန်တွင်အောက်ပါ directory ဖွဲ့စည်းပုံကိုဖန်တီးပါ။
CSS directory တွင်ကျွန်ုပ်တို့သည်ဇယားကွန်တိန်နာအရွယ်အစားကဲ့သို့သောစတိုင်လ်များကိုသတ်မှတ်ရန် style.css ဖိုင်အသစ်တစ်ခုကိုဖန်တီးသည်။
JS လမ်းညွှန်တွင် Vue.js-related code ကိုရေးရန် Main.js ဖိုင်အသစ်တစ်ခုကိုကျွန်ုပ်တို့ဖန်တီးသည်။
PHP လမ်းညွှန်တွင် data.php ဖိုင်ကို backend အချက်အလက်များကိုတုပရန်ဖန်တီးပါ။
Index.html ကိုစီမံကိန်းအတွက် entry file တစ်ခုအဖြစ်အသုံးပြုလိမ့်မည်။
Data.php ဖိုင်တွင်စာရင်းအင်းဇယားများကိုပြသရန် Backend အချက်အလက်များကိုတုပနိုင်သည်။ ဥပမာအားဖြင့်:
<?php $data = [ ['name' => 'A', 'Value' = >> 100] [အမည် '=>>' b ',' value '=> 200] [အမည် '=>>' C ',' Value '= >>> 300] [အမည် '=>>' D '', 'value' => 400] [အမည် '=>>' e ',' Value '= >> 500] ]; echo json_entode ($ ဒေတာ); >
Code သည်ဒေါ်လာဒေတာခင်းကျင်းမှုကိုဖန်တီးပြီး Vue.js အတွက်အချက်အလက်အပြောင်းအလဲအတွက်လုပ်ဆောင်ရန်အတွက် JSON format သို့ပြောင်းသည်။
Main.js ဖိုင်တွင်လိုအပ်သောစာကြည့်တိုက်များကိုမိတ်ဆက်ပေးပြီး vue.js code ကိုရေးသည်။
'vue' မှတင်သွင်းမှု vue; 'axios' မှ Axios တင်သွင်း; ECHARTS မှ ECTARTS ကို ECTARTS ကိုတင်သွင်းပါ။ အသစ် vue ({ el: '#app', ဒေတာ: { chartdata: [] }, ဖန်တီး () {) that.fetchdata (); }, နည်းလမ်းများ: { Fetchdata () {) Axios.GEget ('./ PHP / data.php') .then (တုံ့ပြန်မှု => { this.Chartdata = Respons.Data; this.drawchart (); }) .Catch (အမှား => { console.log (အမှား); }); }, Drawchart () {) var chart = etarts.init (document.getentebyid ('chart-container')); var option = { ခေါင်းစဉ်: { စာသား: 'စာရင်းဇယားဇယား' }, xaxis: { အမျိုးအစား: 'အမျိုးအစား' ဒေတာ: This.Chartdata.map (item => item.name) }, Yaxis: { အမျိုးအစား: 'Value' }, စီးရီး - [{{ ဒေတာ: This.Chartdata.map (item => item.value), အမျိုးအစား: 'ဘား' }] }; chart.settion (option); } } });
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 င်သည်။
Terminal တွင်အလုပ်လုပ်သောလမ်းညွှန်ကိုရိုက်ထည့်ပါ။ စီမံကိန်းကိုဖွင့်ရန်အောက်ပါ command ကို Execute လုပ်ပါ။
NPM Run ကိုအမှုဆောင်
အောင်မြင်သောကွပ်မျက်ပြီးနောက် http: // localhost: 8080 ကိုသွားပါ။
PHP နှင့် vue.j များကိုပေါင်းစပ်ခြင်းအားဖြင့်ကျွန်ုပ်တို့သည်ဒေတာမြင်ကွင်းနှင့်ခွဲခြမ်းစိတ်ဖြာခြင်း function ကိုအောင်မြင်စွာအကောင်အထည်ဖော်နိုင်ခဲ့သည်။ ဤဆောင်းပါးတွင် PHP ကိုမည်သို့အသုံးပြုရမည်ကိုပြသသည်မှာ Dision.js နှင့် Ettuals တို့၏အမြင်အာရုံဆန်းစစ်မှုကိုဖြည့်ဆည်းပေးရန် PHP ကိုမည်သို့အသုံးပြုရမည်ကိုပြသသည်။ ဒီသင်ခန်းစာသည် Developerials သည်အချက်အလက်များကိုအမှန်တကယ်အကောင်အထည်ဖော်ရန်မည်သို့အကောင်အထည်ဖော်ရမည်ကိုပိုမိုနားလည်ရန်ကူညီလိမ့်မည်ဟုမျှော်လင့်ပါသည်။