Comment construire une application CRUD simple avec vuejs et codefii

Dans ce tutoriel, nous allons construire une application simple crud avec vuejs en tant que cadre client et codefii en tant que notre Api RESTful.

Avant de commencer, vous devez télécharger la bibliothèque vuejs HttpRequest Library en cliquant sur cette adresse https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js. Et la prochaine chose à faire est de télécharger vuejs en recherchant https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js

Commençons par la magie visible :)

nous allons commencer par créer l’application codefii en utilisant composer, si vous n’avez pas installé compositeur ou si vous voulez savoir comment obtenir tous les outils nécessaires installés sur votre machine locale, veuillez visiter THE PAGE DOCUMENTATION.

Sinon, commençons par ouvrir notre terminal (dans mon cas, j’utilise linnux «fedora»). Pour les utilisateurs de Windows, merci de lancer votre cmd et votre

composer create-project - prefer-dist codefii / codefii myApp

Ceci fait, accédez à Codefii / Controllers, créez un fichier nommé ApiController.php et entrez le code suivant.

classe ApiController étend Controller {
fonction publique api () {
 $ res = array (‘error’ => false);
 $ read = 'read'; // une variable globale pour la validation des méthodes globales
 if (Request :: get ('action')) {
 $ read = Request :: get ('action');
 }
 // ceci lit la valeur de l'api contenant 'read'
 if ($ read == ’read’) {
 $ utilisateurs = array ();
 foreach (ApiModel :: getAllUsers () -> résultats () en tant que $ row) {
 array_push ($ utilisateurs, $ rangée);
 }
 $ res [‘utilisateurs’] = $ utilisateurs;
 echo json_encode ($ res);
 }
 // même fonction mais valeurs différentes telles que ‘créer’
 if ($ read == ’create’) {
 if (ApiModel :: addUser (Request :: get ('nomutilisateur')),
 Request :: get ('email'), Request :: get ('phone')))) //
 {
 $ res [‘message’] = ”Utilisateur ajouté avec succès”;
 echo json_encode ($ res);
 }autre{
 $ res [‘message’] = "Impossible d’ajouter un utilisateur";
 echo json_encode ($ res);
 }
 // imprimer le texte en json joli
 }
 if ($ read == ’update’) {
 if (ApiModel :: updateUser (Request :: get ('nom d'utilisateur')), Request :: get ('email'),
 Request :: get ('phone'), Request :: get ('id')))) //
 {
 $ res [‘message’] = ”Utilisateur mis à jour”;
 echo json_encode ($ res);
 }autre{
 $ res [‘message’] = "Impossible de mettre à jour l’utilisateur";
 echo json_encode ($ res);
 }
 // imprimer le texte en json joli
 }
if ($ read == ’delete’) {
 if (ApiModel :: deleteUser (Request :: get (‘id’)))) //
 {
 $ res [‘message’] = ”Utilisateur supprimé”;
 echo json_encode ($ res);
 }autre{
 $ res [‘error’] = true;
 $ res [‘message’] = "Impossible de supprimer l’utilisateur";
 echo json_encode ($ res);
 }
 // imprimer le texte en json joli
 }
}
}

Immédiatement après la création du contrôleur, la prochaine étape est la structure du modèle. Accédez à Codefii / Models, créez un fichier nommé ApiModel.php et entrez le code suivant:

classe ApiModel étend le modèle {
  fonction statique publique addUser ($ username, $ email, $ phone) {
    return self :: getDb () -> insertInTo ('utilisateurs', array (
      "nom d'utilisateur" => $ nom d'utilisateur,
      "email" => $ email,
      "phone" => $ phone
    ));
  }
  fonction statique publique updateUser ($ username, $ email, $ phone, $ id) {
      return self :: getDb () -> update ('utilisateurs', $ id, array (
        "nom d'utilisateur" => $ nom d'utilisateur,
        "email" => $ email,
        "phone" => $ phone
      ));
  }
  Fonction statique publique deleteUser ($ id) {
      return self :: getDb () -> delete ('utilisateurs', array (
        "id", "=", $ id
      ));
  }
  fonction statique publique getAllUsers () {
      return self :: getDb () -> query ("SELECT * FROM utilisateurs");
  }
}

J'espère que tout va bien, n'est-ce pas? fantastique, passons maintenant à l’étape suivante en configurant les paramètres de notre base de données. Ouvrez votre environnement mysql, créez une base de données avec le nom de votre choix, mais dans notre cas, nous utiliserons «vue» comme nom de la base de données.

Cela fait, la prochaine étape consiste à localiser le fichier Codefii / Database / Config.php; modifier les paramètres suivants à votre serveur / base de données paramètres et nous sommes bons.

$ GLOBALS ['config'] = array (
  'mysql' => array (
    'hôte' => 'localhost',
    'nom d'utilisateur' => 'racine',
    'password' => 'xxxxxx',
    'database' => 'vue',
    'encoding' => 'utf8',
    'timezone' => 'UTC',
    'cacheMetadata' => true,
    'log' => false,
),

définissons maintenant nos itinéraires en modifiant le fichier Routes.php qui se trouve dans Codefii / Routes / et ajoutons cette ligne à celui-ci.

$ routeur-> routes ('ApiController', ['controller' => 'ApiController', 'action' => 'api']);

Chers amis, réalisons la magie visible mentionnée précédemment. Si vous remarquez que nous n’avons créé aucun fichier de vue depuis, notre dossier myApp se trouve dans le répertoire de notre serveur. créons un nouveau dossier dans le répertoire Documents / tel que vu avec les fichiers suivants:

  1. app.js
  2. index.html
  3. style.css

dans le fichier app.js, ajoutez le code suivant

var app = new Vue ({
  el: '# codefii',
  Les données: {
    montrantAddModal: false,
    projectionEditModal: false,
    projectionDeleteModal: false,
    Message d'erreur:"",
    successMessage: "",
    utilisateurs:[],
    newUser: {nom d'utilisateur: "", email: "", téléphone: ""},
    clickedUser: {}
  },
  monté: function () {
    this.getAllUsers ();
  },
méthodes: {
    getAllUsers: function () {
      axios.get ("http: // localhost / myApp / ApiController? action = read")
      .then (fonction (réponse) {
        if (response.data.error) {
          app.errorMessage = response.data.message;
        }autre{
          app.users = response.data.users;
        }
      });
    },
saveUser: function () {
      var formData = app.toFormData (app.newUser);
      axios.post ("http: // localhost / myApp / ApiController? action = create", formData)
      .then (fonction (réponse) {
        console.log (réponse);
        app.newUser = {nom d'utilisateur: "", email: "", téléphone: ""};
        if (response.data.error) {
          app.errorMessage = response.data.message;
        }autre{
          app.successMessage = response.data.message;
          app.getAllUsers ();
        }
      });
    },
updateUser: function () {
      var formData = app.toFormData (app.clickedUser);
      axios.post ("http: // localhost / myApp / ApiController? action = update", formData)
      .then (fonction (réponse) {
        console.log (réponse);
        app.clickedUser = {};
        if (response.data.error) {
          app.errorMessage = response.data.message;
        }autre{
          app.successMessage = response.data.message;
          app.getAllUsers ();
        }
      });
    },
    deleteUser: function () {
      var formData = app.toFormData (app.clickedUser);
      axios.post ("http: // localhost / myApp / ApiController? action = delete", formData)
      .then (fonction (réponse) {
        app.clickedUser = {};
        if (response.data.error) {
          app.errorMessage = response.data.message;
        }autre{
          app.successMessage = response.data.message;
          app.getAllUsers ();
        }
      });
    },
selectUser (utilisateur) {
      app.clickedUser = utilisateur;
    },
    toFormData: fonction (obj) {
      var form_data = new FormData ();
      pour (clé var dans obj) {
        form_data.append (clé, obj [clé]);
      }
      return form_data;
    },
clearMessage: function () {
      app.errorMessage = "";
      app.successMessage = "";
    }
  }
});

le code ci-dessus correspond à ce qui va interagir avec notre application codefii myApp située dans notre répertoire de serveurs.

Et ensuite, le fichier index.html qui contient le code suivant:



  
    
     Utilisation de vuejs avec codefii </ title>
    <link rel = "stylesheet" href = "style.css" />
  </ head>
  <body></pre><pre><div id = "codefii">
      <div class = "conteneur">
        <h1 class = "left"> Liste des utilisateurs </ h1></pre><pre><type de bouton = "bouton" class = "addNewUser droit" @ click = "ShowingAddModal = true;"> Ajouter un nouvel utilisateur </ button>
        <div class = "clear">
        </ div>
        <h>
        <p class = "errorMessage" v-if = "errorMessage"> {{errorMessage}} </ p>
        <p class = "successMessage" v-if = "successMessage"> {{successMessage}} </ p>
        <table class = "list">
          <tr>
              <th> ID </ th>
              <th> Nom d'utilisateur </ th>
              <th> Email </ th>
              <th> Mobile </ th>
              <th> Modifier </ th>
              <th> Supprimer </ th>
          </ tr>
          <tr v-for = "utilisateur dans les utilisateurs">
            <td> {{user.id}} </ td>
            <td> {{user.username}} </ td> h
            <td> {{user.email}} </ td>
            <td> {{user.phone}} </ td>
            <td> <button @ click = "ShowingEditModal = true; selectUser (utilisateur);"> Modifier </ button> </ td>
            <td> <button @ click = "ShowingDeleteModal = true; selectUser (utilisateur);"> Supprimer </ button> </ td>
          </ tr>
        </ table>
      </ div>
          <! - boîte modale ->
          <div class = "modal" id = "addModal" v-if = "ShowingAddModal">
            <div class = "modalContainer">
              <div class = "modalHeading">
                <h1 class = "left"> Ajouter un nouvel utilisateur </ h1>
                <type de bouton = "bouton" class = "fermeture proche à droite" @ click = "ShowingAddModal = false;"> X </ bouton>
                <div class = "clear"></pre><pre></ div>
              </ div>
              <div class = "modalContent">
                <div class = "form">
                  <div class = "form-group">
                    <label class = "left" for = ""> Nom d'utilisateur: </ label>
                    <input type = "text" class = "form-control" name = "" v-model = "newUser.username">
                  </ div>
                  <div class = "form-group">
                    <label class = "left" for = ""> Email: </ label>
                    <input type = "text" class = "form-control" name = "" v-model = "newUser.email">
                  </ div>
                  <div class = "form-group">
                    <label class = "left" for = ""> Téléphone: </ label>
                    <input type = "text" class = "form-control" name = "" v-model = "newUser.phone">
                  </ div>
                  <div class = "form-group">
                    <type de bouton = "bouton" class = "btn right" @ click = "ShowingAddModal = false; saveUser ();"> Enregistrer </ button>
                  </ div>
                </ div>
              </ div>
            </ div>
          </ div></pre><pre><! - modifier l'utilisateur modal ->
          <! - boîte modale ->
          <div class = "modal" id = "editModal" v-if = "ShowingEditModal">
            <div class = "modalContainer">
              <div class = "modalHeading">
                <h1 class = "left"> Modifiez cet utilisateur </ h1>
                <type de bouton = "bouton" class = "fermeture proche à droite" @ click = "ShowingEditModal = false;"> X </ bouton>
                <div class = "clear"></pre><pre></ div>
              </ div>
              <div class = "modalContent">
                <div class = "form">
                  <div class = "form-group">
                    <label class = "left" for = ""> Nom d'utilisateur: </ label>
                    <input type = "text" class = "form-control" name = "" v-model = "clickedUser.username">
                  </ div>
                  <div class = "form-group">
                    <label class = "left" for = ""> Email: </ label>
                    <input type = "text" class = "form-control" name = "" v-model = "clickedUser.email">
                  </ div>
                  <div class = "form-group">
                    <label class = "left" for = ""> Téléphone: </ label>
                    <input type = "text" class = "form-control" name = "" v-model = "clickedUser.phone">
                  </ div>
                  <div class = "form-group">
                    <button class = "btn right" @ click = "ShowingEditModal = false; updateUser ()"> Mettre à jour </ button>
                  </ div>
                </ div>
              </ div>
            </ div>
          </ div></pre><pre><! - boîte modale ->
          <div class = "modal" id = "deleteModal" v-if = "ShowingDeleteModal">
            <div class = "modalContainer">
              <div class = "modalHeading">
                <h1 class = "left"> Supprimer cet utilisateur </ h1>
                <type de bouton = "bouton" class = "fermeture proche à droite" @ click = "ShowingDeleteModal = false;"> X </ bouton>
                <div class = "clear"></pre><pre></ div>
              </ div>
              <div class = "modalContent">
                <h4> Vous êtes sur le point de supprimer {{clickedUser.username}} </ h4>
                  <div class = "clear"></pre><pre></ div>
                  <p> Êtes-vous sûr de vouloir supprimer? </ p>
                  <br /></pre><pre><button class = "danger" @ click = "ShowingDeleteModal = false; deleteUser ()"> OUI </ button></pre><pre><button class = "btn" @ click = "ShowingDeleteModal = false;"> NON </ button>
              </ div>
            </ div>
          </ div></pre><pre></ div></pre><pre></ins><div class="neighbor-articles"><h4 class="ui header">Voir également</h4><a href="/article/how-to-find-altcoins-that-have-huge-growth-potential-771e3a/" title="Comment trouver des altcoins qui ont un potentiel de croissance énorme">Comment trouver des altcoins qui ont un potentiel de croissance énorme</a><a href="/article/how-to-think-for-yourself-98fa93/" title="Comment penser par soi-même">Comment penser par soi-même</a><a href="/article/how-to-find-a-reliable-dentist-4e1ffc/" title="Comment trouver un dentiste fiable">Comment trouver un dentiste fiable</a><a href="/article/how-to-effectively-deal-with-negative-comments-and-judgments-a8d02e/" title="Comment gérer efficacement les commentaires négatifs et les jugements">Comment gérer efficacement les commentaires négatifs et les jugements</a><a href="/article/how-to-make-a-powerful-start-in-prospectors-306635/" title="Comment bien démarrer chez les prospecteurs">Comment bien démarrer chez les prospecteurs</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="vn flag"></i></a><a href="https://uk.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="ua flag"></i></a><a href="https://tr.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="tr flag"></i></a><a href="https://th.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="th flag"></i></a><a href="https://sv.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="ch flag"></i></a><a href="https://sr.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="rs flag"></i></a><a href="https://sl.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="si flag"></i></a><a href="https://sk.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="sk flag"></i></a><a href="https://ru.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="ru flag"></i></a><a href="https://ro.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="ro flag"></i></a><a href="https://pt.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="pt flag"></i></a><a href="https://pl.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="pl flag"></i></a><a href="https://de.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="de flag"></i></a><a href="https://ar.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="sa flag"></i></a><a href="https://bg.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="bg flag"></i></a><a href="https://cs.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="cz flag"></i></a><a href="https://da.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="dk flag"></i></a><a href="https://el.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="gr flag"></i></a><a href="https://ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="es flag"></i></a><a href="https://et.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="ee flag"></i></a><a href="https://fi.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="fi flag"></i></a><a href="https://hi.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="in flag"></i></a><a href="https://hr.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="hr flag"></i></a><a href="https://hu.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="hu flag"></i></a><a href="https://id.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="id flag"></i></a><a href="https://it.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="it flag"></i></a><a href="https://ja.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="jp flag"></i></a><a href="https://ko.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="kr flag"></i></a><a href="https://lt.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="lt flag"></i></a><a href="https://lv.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="lv flag"></i></a><a href="https://ms.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="my flag"></i></a><a href="https://nl.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="nl flag"></i></a><a href="https://no.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="no flag"></i></a><a href="https://uz.ceadesc.org/article/how-to-build-a-simple-crud-app-with-vuejs-and-codefii-6d74b1/"><i class="uz flag"></i></a></div>ceadesc.org<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>