Français
Français
PHP et VUE.js sont les deux technologies populaires dans le domaine du développement Web actuel. Ils sont utilisés en combinaison pour aider à développer des applications Web efficaces, évolutives et faciles à maintenir. Dans cet article, nous présenterons comment utiliser PHP et VUE.js pour créer une application de carte cérébrale entièrement fonctionnelle.
Avant de créer une application de carte du cerveau, nous devons d'abord clarifier les exigences fonctionnelles de l'application. Selon notre analyse, les applications de cartes cérébrales devraient avoir les fonctions de base suivantes:
Pour répondre à ces exigences fonctionnelles, nous avons sélectionné la pile technologique suivante:
Avant d'implémenter une application, vous devez d'abord concevoir une structure de base de données. Afin de stocker les données des cartes cérébrales, nous pouvons concevoir un tableau de données appelé "MindMap" avec les champs suivants:
Afin de traiter efficacement les données JSON, vous pouvez utiliser le type de données JSON de MySQL 5.7 et plus.
Créer une table Mindmap ( id int key primaire auto_increment, nom varchar (255), JSON_DATA JSON ));
Après la conception de la structure de la base de données, implémentez la logique back-end. Nous utilisons PHP comme langage backend et choisissons PDO comme outil d'accès à la base de données et Slim Framework comme Framework API RESTFul. Ce qui suit est un exemple de code pour obtenir la liste des cartes du cerveau dans le backend:
classe MindMapController {
Private $ dB;
fonction publique __construct (PDO $ db) {
$ this-> db = $ db;
}
Index des fonctions publiques (demande $ demande, réponse $ réponse) {
$ stmt = $ this-> db-> query ('select * from Mindmap');
$ data = $ stmt-> fetchall (PDO :: fetch_assoc);
return $ réponse-> withjson ($ data);
}
}
$ app-> get ('/ MindMaps', 'MindMapController: index');
Ce code interroge la liste des cartes cérébrales dans la base de données via PDO et renvoie les résultats au format JSON à l'aide de Slim Framework.
Après avoir terminé le développement back-end, la logique frontale est ensuite implémentée. En utilisant le cadre Vue.js combiné avec la bibliothèque des composants d'interface utilisateur des éléments, les fonctions suivantes peuvent être implémentées:
Voici un exemple de code pour rendre un diagramme cérébral avec 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>
Ce code utilise Axios pour obtenir des données de cartographie cérébrale à partir du serveur et rend les données dans une structure d'arborescence via le composant EL-Tree de l'interface utilisateur de l'élément.
Cet article présente comment combiner php et vue.js pour développer une puissante application de carte du cerveau. En concevant une base de données, en mettant en œuvre des fonctions API arrière et de rendu frontal, nous pouvons créer un outil de carte du cerveau avec des fonctions telles que la création, l'édition, la recherche et le glisser-déposer. Espérons que le tutoriel de cet article vous aidera à mieux comprendre comment utiliser PHP et VUE.js pour améliorer vos compétences en développement Web.
