PHP နှင့် Vue.js ပူးပေါင်း - ထိရောက်သော ဦး နှောက်မြေပုံ applications များကိုတည်ဆောက်ရန်သင်ခန်းစာ

1 ။ PHP နှင့် vue.js ပူးပေါင်းဆောင်ရွက်မှုကိုခြုံငုံသုံးသပ်ချက်

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

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

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

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

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

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

လျှောက်လွှာလုပ်ဆောင်ချက်များကိုချောမွေ့အကောင်အထည်ဖော်ရန်သေချာစေရန်မှန်ကန်သောနည်းပညာ stack ကိုရွေးချယ်ရန်အလွန်အရေးကြီးသည်။ အောက်ပါနည်းပညာဆိုင်ရာဖြေရှင်းနည်းများကိုအကြံပြုပါ။

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

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

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

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

 
CREATE TABLE mindmap (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(255),
  json_data JSON
);
  

ဦး နှောက်ဂရပ်အချက်အလက်များကိုပိုမိုကောင်းမွန်စေရန်အတွက် MySQL 5.7 နှင့်အထက်မှအထောက်အပံ့ပေးသော JSon Data အမျိုးအစားများကို ဦး နှောက်ဂရပ်ဖွဲ့စည်းပုံနှင့် node အချက်အလက်များကိုသိမ်းဆည်းရန်အသုံးပြုသည်။

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

ထို့နောက်ကျွန်ုပ်တို့သည် backend လုပ်ဆောင်မှုကိုအကောင်အထည်ဖော်မည်။ PHP ကို ​​backend ဘာသာစကားအဖြစ်အသုံးပြုပါ, ဒေတာဘေ့စ်လုပ်ငန်းများအတွက် PDO နှင့်ပူးပေါင်းပါ။ ဦး နှောက်မြေပုံများစာရင်းကိုရယူရန်အတွက်အဓိကကုဒ်ဖြစ်သည်။

 
class MindmapController {
  private $db;

  public function __construct(PDO $db) {
    $this->db = $db;
  }

  public function index(Request $request, Response $response) {
    $stmt = $this->db->query('SELECT * FROM mindmap');
    $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
    return $response->withJson($data);
  }
}
  

အထက်ဖော်ပြပါကုဒ်သည်ဒေတာဘေ့စ်ကို PDO မှတစ်ဆင့်ရှာဖွေခြင်း, ဦး နှောက်မြေပုံအချက်အလက်အားလုံးကိုရယူပြီးပါးလွှာသောမူဘောင်မှတဆင့် JSON format တုပ format ိပက်ခတုံ့ပြန်မှုကိုပြန်ပို့သည်။

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

ရှေ့ဆုံးအပိုင်းသည် Vue.js framework ကိုအသုံးပြုသည်။ Element UI Compony စာကြည့်တိုက်ကို ဦး နှောက်မြေပုံများ၏ပြန်ဆိုခြင်းနှင့်အပြန်အလှန်လုပ်ဆောင်မှုများကိုနားလည်သဘောပေါက်ရန် UI Compony စာကြည့်တိုက်ကိုပေါင်းစပ်ထားသည်။ အောက်ဖော်ပြပါသည် ဦး နှောက်ဂရပ်ပြန်ဆိုမှုကိုအကောင်အထည်ဖော်သည့်ကုဒ်နမူနာဖြစ်သည်။

 
<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 မှတဆင့် Backend မှဒေတာများကိုရယူပါ။ အချက်အလက်များကို ဦး နှောက်ဂရပ်မြင်ကွင်းထဲသို့ထည့်သွင်းရန် El-Preach အစိတ်အပိုင်းကိုအသုံးပြုပါ။

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

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