Rumah > Artikel > pembangunan bahagian belakang > Amalan dan teknik terbaik untuk melaksanakan fungsi pemetaan minda dengan PHP dan Vue
Amalan dan teknik terbaik untuk melaksanakan fungsi pemetaan minda dengan PHP dan Vue
- WBOYasal
- 2023-08-26 21:31:48858semak imbas
Amalan dan Teknik Terbaik untuk Melaksanakan Fungsi Pemetaan Minda dengan PHP dan Vue
ForeWord:
Persediaan bahagian hadapan
- Dalam kod di atas, kami telah memperkenalkan Vue dan pemalam peta minda Vue. Kemudian, kami mencipta div dengan id "aplikasi" dan menambah komponen vue-mindmap di dalamnya. Akhir sekali, kami memperkenalkan fail app.js untuk menulis kod logik Vue.
Penyediaan belakang
Di bahagian belakang, kami menggunakan PHP untuk mengendalikan penambahan, pemadaman, pengubahsuaian dan pengekalan data. Kita perlu mencipta API untuk interaksi data dengan bahagian hadapan. Berikut ialah contoh kod PHP mudah: - Kod di atas hanya mengendalikan permintaan GET dan POST, yang digunakan untuk mendapatkan dan menyimpan data peta otak masing-masing. Permintaan GET digunakan untuk mendapatkan data dalam data.json, manakala permintaan POST digunakan untuk menyimpan data yang dihantar oleh hujung hadapan ke dalam data.json. Di sini kami menganggap bahawa data.json ialah fail yang menyimpan data peta otak.
Kod logik Vue
Dalam app.js, kami akan menulis kod logik Vue dan berinteraksi dengan API bahagian belakang. Berikut ialah contoh kod mudah: - Kod di atas mula-mula mencipta tika Vue dan melekapkannya pada div dengan id "aplikasi". Kemudian, kami mentakrifkan atribut mindmapData untuk menyimpan data peta minda. Dalam fungsi cangkuk yang dipasang, kami memanggil kaedah fetchMindmapData untuk mendapatkan data peta minda dan menetapkannya kepada mindmapData. Dalam kaedah fetchMindmapData, kami menggunakan pustaka axios untuk menghantar permintaan GET ke API bahagian belakang dan menetapkan data yang dikembalikan kepada mindmapData. Dalam kaedah saveMindmapData, kami menggunakan perpustakaan axios untuk menghantar permintaan POST ke API bahagian belakang dan menyimpan mindmapData ke bahagian belakang.
Contoh lengkap
Berdasarkan kod di atas, kita boleh membuat halaman lengkap yang melaksanakan fungsi peta otak. Berikut ialah kod HTML bagi contoh lengkap: - Berikut ialah kod app.js bagi contoh lengkap:
new Vue({ el: '#app', data: { mindmapData: {} }, mounted() { this.fetchMindmapData(); }, methods: { fetchMindmapData() { axios.get('http://localhost/api/mindmap') .then(response => { this.mindmapData = response.data; }) .catch(error => { console.error(error); }); }, saveMindmapData() { axios.post('http://localhost/api/Mindmap', this.mindmapData) .then(response => { console.log('Data saved successfully'); }) .catch(error => { console.error(error); }); } } });
Dalam kod contoh di atas, kami menambah butang simpan, dan apabila butang itu diklik, kaedah saveMindmapData dipanggil untuk menyimpan data peta minda. Pada masa yang sama, kami memperkenalkan perpustakaan axios untuk menghantar permintaan HTTP.Kesimpulan:
Artikel ini memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi peta otak, dan memberikan beberapa amalan dan teknik terbaik. Dengan menggabungkan PHP dan Vue, kami boleh melaksanakan fungsi peta otak yang berkuasa dan mudah digunakan untuk membantu pengguna mengatur dan mengurus maklumat dengan lebih cekap. Saya harap artikel ini dapat memberi inspirasi kepada anda, terima kasih kerana membaca!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>脑图功能</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/vue-mindmap"></script> </head> <body> <div id="app"> <vue-mindmap :data="mindmapData"></vue-mindmap> </div> <script src="app.js"></script> </body> </html>
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
$method = $_SERVER['REQUEST_METHOD'];
$url = $_SERVER['REQUEST_URI'];
// 处理GET请求，获取脑图数据
if ($method === 'GET' && $url === '/api/mindmap') {
$data = file_get_contents('data.json');
echo $data;
}
// 处理POST请求，保存脑图数据
if ($method === 'POST' && $url === '/api/mindmap') {
$data = file_get_contents('php://input');
file_put_contents('data.json', $data);
echo '{"success": true}';
}
// 其他请求返回404错误
http_response_code(404);
echo json_encode(['error' => 'Not Found']);new Vue({
el: '#app',
data: {
mindmapData: {}
},
mounted() {
this.fetchMindmapData();
},
methods: {
fetchMindmapData() {
axios.get('http://localhost/api/mindmap')
.then(response => {
this.mindmapData = response.data;
})
.catch(error => {
console.error(error);
});
},
saveMindmapData() {
axios.post('http://localhost/api/Mindmap', this.mindmapData)
.then(response => {
console.log('Data saved successfully');
})
.catch(error => {
console.error(error);
});
}
}
});<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>脑图功能</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/vue-mindmap"></script> </head> <body> <div id="app"> <vue-mindmap :data="mindmapData"></vue-mindmap> <button @click="saveMindmapData">保存</button> </div> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="app.js"></script> </body> </html>
Atas ialah kandungan terperinci Amalan dan teknik terbaik untuk melaksanakan fungsi pemetaan minda dengan PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn