php နှင့် vue.js ကို အသုံးပြု. ထိရောက်သော ဦး နှောက်မြေပုံ application တစ်ခုကိုဖန်တီးနည်း

1 ။ PHP နှင့် vue အကြားပူးပေါင်းဆောင်ရွက်မှု

PHP နှင့် Vue.j များသည်လက်ရှိ Web Development Field တွင်လူကြိုက်များသောနည်းပညာနှစ်ခုဖြစ်သည်။ ၎င်းတို့သည်ထိရောက်သော, ဤဆောင်းပါးတွင် PHP နှင့် Vue.js ကိုမည်သို့အသုံးပြုရမည်ကိုကျွန်ုပ်တို့အပြည့်အဝအလုပ်လုပ်သော ဦး နှောက်မြေပုံ application တစ်ခုတည်ဆောက်ရန်မည်သို့အသုံးပြုရမည်ကိုမိတ်ဆက်ပေးမည်။

2 ။ ဦး နှောက်မြေပုံ applications များကိုလိုအပ်ချက်များခွဲခြမ်းစိတ်ဖြာခြင်း

2.1 အလုပ်လုပ်တဲ့လိုအပ်ချက်များ

ဦး နှောက်မြေပုံ application မတည်ဆောက်မီ, လျှောက်လွှာ၏လုပ်ဆောင်မှုလိုအပ်ချက်များကိုကျွန်ုပ်တို့ရှင်းလင်းရန်လိုအပ်သည်။ ကျွန်ုပ်တို့၏လေ့လာမှုအရ ဦး နှောက်မြေပုံလျှောက်လွှာများသည်အောက်ပါအဓိကလုပ်ဆောင်ချက်များရှိသင့်သည်။

• proces, တည်းဖြတ်ခြင်း, ဖျက်ခြင်းနှင့် node များကိုရွှေ့ပါ
• node များချဲ့ထွင်ခြင်းနှင့်ပြိုကျ
• node ကိုရှာဖွေရေး function ကို
• ပံ့ပိုးမှုစင်တာဆွဲခြင်းနှင့် drop operations
• ဆာဗာသို့ဒေတာများကိုသိမ်းဆည်းပါ

2.2 နည်းပညာဆိုင်ရာလိုအပ်ချက်များ

ဤလုပ်ငန်းဆောင်တာလိုအပ်ချက်များနှင့်ကိုက်ညီရန်အောက်ပါနည်းပညာ stack ကိုရွေးချယ်သည်။

• php backend ဘာသာစကားအဖြစ်
• ဒေတာဘေ့စ်အဖြစ် MySQL
• ရှေ့ - အဆုံးမူဘောင်အဖြစ် vue.js
• UI အစိတ်အပိုင်းစာကြည့်တိုက်အဖြစ် Element UI

3 ။ ဦး နှောက်ပုံများ applications များကိုဒီဇိုင်းနှင့်အကောင်အထည်ဖော်ခြင်း

3.1 ဒေတာဘေ့စဒီဇိုင်း

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

• ID: Auto-Incourment မူလတန်းသော့
• အမည်: Brain Map အမည်
• JSON_DATA: JSON format ကို ဦး နှောက်ဂရပ်အချက်အလက်များ၏ကိုယ်စားပြုမှု

JSON ဒေတာကိုထိရောက်စွာလုပ်ဆောင်နိုင်ရန်အတွက် JSON ဒေတာအမျိုးအစားများ MySQL 5.7 နှင့်အထက်တွင်သုံးနိုင်သည်။

စားပွဲတင် Mindmap ကိုဖန်တီးပါ (
  ID Int Plasst Plassest Key Auto_incrent,
  Varchar အမည် (255),
  JSON_DATA JSONS
);

3.2 အကောင်အထည်ဖော်မှုကို backend

ဒေတာဘေ့စ်ဖွဲ့စည်းပုံကိုဒီဇိုင်းပြုလုပ်ပြီးနောက်နောက်ကျောအဆုံးယုတ္တိဗေဒကိုအကောင်အထည်ဖော်ပါ။ PHP ကို ​​backend ဘာသာစကားအဖြစ် အသုံးပြု. ဒေတာဘေ့စ်အသုံးပြုမှုကိရိယာနှင့်ပါးလွှာသောမူဘောင်အဖြစ် PDO ကိုရွေးပါ။ အောက်ပါတို့သည် backend တွင် ဦး နှောက်ရှိ ဦး နှောက်မြေပုံစာရင်းကိုရယူရန်အတွက်ကုဒ်ဥပမာတစ်ခုဖြစ်သည်။

andmapcontroller {
    ပုဂ္ဂလိက $ dB;

    Public function __Construct (PDO $ DB) {
        $ -> DB = $ dB;
    }

    Public Funfor Index ($ တောင်းဆိုမှု, တုံ့ပြန်မှု $ တုန့်ပြန်) {
        $ stmt = $:> DB-> query ('select * mindmap');
        $ ဒေတာ = $ stmt-> fetchall (pdo :: fetter_assoc);
        $ Response-> ToduJson ($ ဒေတာ),
    }
}
$ app-> Get ('/ Mindmaps', 'Mindmapcontroller: Index');

ဤကုဒ်နံပါတ်သည် PDE မှတစ်ဆင့်ဒေတာဘေ့စ်ရှိ ဦး နှောက်မြေပုံများစာရင်းကို querys နှင့် Slim Framework ကို သုံး. JSON format တွင်ရလဒ်များကိုပြန်လည်ရရှိခဲ့သည်။

3.3 ရှေ့တန်းအကောင်အထည်ဖော်မှု

နောက်ခံဖွံ့ဖြိုးမှုကိုဖြည့်စွက်ပြီးသောအခါရှေ့ဆုံးယုတ္တိဗေဒကိုအကောင်အထည်ဖော်သည်။ Vue.js မူဘောင်ကို အသုံးပြု. UI Component Library စာကြည့်တိုက်နှင့်ပေါင်းစပ်ပြီးအောက်ပါလုပ်ဆောင်ချက်များကိုအကောင်အထည်ဖော်နိုင်သည်။

• ဦး နှောက်မြေပုံအချက်အလက်များကိုပြန်ဆိုခြင်း
• ကျယ်ပြန့် / collapse node များချဲ့ထွင်
• node များကိုရှာဖွေပါ
• node ကိုဆွဲပါ

ယခုအချိန်တွင် ဦး နှောက်ပုံကို vue.js နှင့်အတူကောက်ယူခြင်းဥပမာတစ်ခုဖြစ်သည်။

<template>
  <div id="app">
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  mounted() {
    axios.get('/mindmaps/1').then(response => {
      this.data = response.data.json_data;
    });
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
};
</script>

ဤကုဒ်သည်ဆာဗာမှ ဦး နှောက်မြေပုံဒေတာများကိုရယူရန် Axios ကို အသုံးပြု. ဒြပ်စင်၏ El-Preach အစိတ်အပိုင်းတစ်ခုမှအချက်အလက်များကိုသစ်ပင်များဖွဲ့စည်းပုံကိုအသုံးပြုသည်။

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

ဤဆောင်းပါးသည် PHP နှင့် vue.js ကိုပေါင်းစပ်ပြီး ဦး နှောက်မြေပုံ application တစ်ခုတည်ဆောက်ရန်မည်သို့ပေါင်းစပ်ရမည်ကိုမိတ်ဆက်ပေးသည်။ ဒေတာဘေ့စ်တစ်ခုကိုဒီဇိုင်းဆွဲခြင်းအားဖြင့်အပြီးသတ် API နှင့်ရှေ့အဆင့်ဖြင့်ပြန်ဆိုသည့်လုပ်ဆောင်မှုများကိုအကောင်အထည်ဖော်ခြင်းအားဖြင့်ကျွန်ုပ်တို့သည်တီထွင်မှု, တည်းဖြတ်ခြင်း, ရှာဖွေခြင်း, ရှာဖွေခြင်း, ရှာဖွေခြင်း, ဤဆောင်းပါးတွင်သင်ခန်းစာသည်သင်၏ဝဘ်ဆိုက်ဖွံ့ဖြိုးတိုးတက်မှုစွမ်းရည်တိုးတက်စေရန် PHP နှင့် Vue.js ကိုမည်သို့အသုံးပြုရမည်ကိုပိုမိုနားလည်ရန်သင့်အားပိုမိုနားလည်ရန်ကူညီလိမ့်မည်ဟုမျှော်လင့်ပါသည်။