Sådan oprettes en simpel CRUD-app med vuejs og codefii

I denne selvstudie bygger vi en simpel rå applikation med vuejs som vores ramme for klientsiden og kodefii som vores RESTful Api.

Før vi begynder, skal du downloade vuejs HttpRequest-bibliotek ved at trykke på denne url https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js. Og den næste ting er at downloade vuejs ved at se op til https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js

Lad os begynde den synlige magi :)

begynder vi med at oprette codefii-app ved hjælp af komponist, hvis du ikke har en komponist installeret eller ønsker at vide, hvordan du får alle de nødvendigvis værktøjer installeret på din lokale maskine, bedes du besøge DOKUMENTATIONSIDEN.

Ellers, lad os starte med at åbne vores terminal (i mit tilfælde bruger jeg linnux "fedora") så for windows-brugere, venligst start din cmd og skriv

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

Når det er gjort, skal du navigere til Codefii / Controllers og oprette en fil med navnet ApiController.php og indtaste følgende kode.

klasse ApiController udvider Controller {
offentlig funktion api () {
 $ res = array (‘error’ => falsk);
 $ read = 'læst'; // en global variabel til validering af globale metoder
 hvis (Request :: få ( ’aktion’)) {
 $ read = Anmodning :: få (‘handling’);
 }
 // dette læser værdien af ​​det api, der indeholder 'læst'
 if ($ read ==’læst’) {
 $ brugere = matrix ();
 foreach (ApiModel :: getAllUsers () -> resultater () som $ række) {
 array_push ($ brugere, $ row);
 }
 $ res ['brugere'] = $ brugere;
 ekko json_encode ($ res);
 }
 // samme funktion men forskellige værdier som 'oprette'
 if ($ læse ==’skabe’) {
 hvis (ApiModel :: adduser (Request :: få ( ’brugernavn’),
 Anmodning :: får ( ’email’), Anmodning :: få ( ’telefon’))) //
 {
 $ res [‘message’] = ”Bruger tilføjet succes”;
 ekko json_encode ($ res);
 }andet{
 $ res [‘message’] = ”Kunne ikke tilføje bruger”;
 ekko json_encode ($ res);
 }
 // udskriv teksten i json pretty
 }
 if ($ læse ==’opdatering’) {
 hvis (ApiModel :: updateUser (Request :: få ( ’brugernavn’), Anmodning :: få ( ’email’),
 Anmodning :: får ( ’telefon’), Anmodning :: få ( ’id’))) //
 {
 $ res [‘message’] = ”Bruger opdateret”;
 ekko json_encode ($ res);
 }andet{
 $ res [‘message’] = ”Kunne ikke opdatere bruger”;
 ekko json_encode ($ res);
 }
 // udskriv teksten i json pretty
 }
if ($ læse ==’slet’) {
 hvis (ApiModel :: deleteUser (Request :: få ( ’id’))) //
 {
 $ res [‘message’] = ”Bruger er slettet”;
 ekko json_encode ($ res);
 }andet{
 $ res [‘error’] = sandt;
 $ res [‘message’] = ”Kunne ikke slette bruger”;
 ekko json_encode ($ res);
 }
 // udskriv teksten i json pretty
 }
}
}

Umiddelbart efter oprettelsen af ​​controlleren er den næste ting modelstrukturen. Naviger til Codefii / Models og opret en fil med navnet ApiModel.php og skriv følgende kode:

klasse ApiModel udvider Model {
  offentlig statisk funktion addUser ($ brugernavn, $ e-mail, $ telefon) {
    return self :: getDb () -> insertInTo ('brugere', matrix (
      "Username" => $ brugernavn,
      "E-mail" => $ email,
      "Telefon" => $ telefon
    ));
  }
  opdatering af offentlig statisk funktion Bruger ($ brugernavn, $ e-mail, $ telefon, $ id) {
      return self :: getDb () -> opdatering ('brugere', $ id, array (
        "Username" => $ brugernavn,
        "E-mail" => $ email,
        "Telefon" => $ telefon
      ));
  }
  offentlig statisk funktion deleteUser ($ id) {
      return self :: getDb () -> delete ('brugere', matrix (
        "Id", "=", $ id
      ));
  }
  offentlig statisk funktion getAllUsers () {
      return self :: getDb () -> forespørgsel ("VÆLG * FRA brugere");
  }
}

Håber, at alt går godt, ikke? fantastisk, lad os nu gå til det næste trin ved at konfigurere vores databaseindstillinger. Åbn dit mysql-miljø, opret en database med ethvert navn efter eget valg, men i vores tilfælde bruger vi “vue” som navnet på databasen.

Når det er gjort, er det næste trin at finde Codefii / Database / Config.php-filen; rediger følgende indstillinger til dine server / database indstillinger, og vi har det godt.

$ GLOBALS ['config'] = matrix (
  'Mysql' => array (
    'Vært' => 'localhost',
    'Username' => 'root',
    'Password' => 'xxxxxx',
    'Database' => 'vue',
    'encoding' => 'utf8',
    'timezone' => 'UTC',
    'cacheMetadata' => sandt,
    'log' => falsk,
),

lad os nu definere vores ruter ved at redigere Routes.php-filen, der er placeret i Codefii / Routes / og tilføje denne linje til den

$ Router-> ruter ( 'ApiController', [ 'controller' => 'ApiController', 'action' => 'api']);

Folk, lad os udføre den synlige magi, der blev nævnt tidligere. Hvis du bemærker, at vi ikke har oprettet nogen visningsfil, da det er fordi vores myApp-mappe findes i vores serverkatalog. lad os oprette en ny mappe i Dokumenter / bibliotek som vue med følgende filer:

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

i app.js-fil, tilføj følgende kode til den

var app = new Vue ({
  el: '# codefii',
  data: {
    viserAddModal: falsk,
    viserKlipModal: falsk,
    viserDeleteModal: falsk,
    fejl besked:"",
    succesMeddelelse: "",
    brugere: [],
    newUser: {brugernavn: "", e-mail: "", telefon: ""},
    clickedUser: {}
  },
  monteret: funktion () {
    this.getAllUsers ();
  },
metoder:{
    getAllUsers: function () {
      axios.get ( "http: // localhost / mitpgm / ApiController action = læst")
      Ringing (funktion (respons) {
        hvis (response.data.error) {
          app.errorMessage = response.data.message;
        }andet{
          app.users = response.data.users;
        }
      });
    },
saveUser: function () {
      var formData = app.toFormData (app.newUser);
      axios.post ( "http: // localhost / mitpgm / ApiController action = skabe", formData)
      Ringing (funktion (respons) {
        console.log (respons);
        app.newUser = {brugernavn: "", e-mail: "", telefon: ""};
        hvis (response.data.error) {
          app.errorMessage = response.data.message;
        }andet{
          app.successMessage = response.data.message;
          app.getAllUsers ();
        }
      });
    },
updateUser: function () {
      var formData = app.toFormData (app.clickedUser);
      axios.post ( "http: // localhost / mitpgm / ApiController action = opdatering", formData)
      Ringing (funktion (respons) {
        console.log (respons);
        app.clickedUser = {};
        hvis (response.data.error) {
          app.errorMessage = response.data.message;
        }andet{
          app.successMessage = response.data.message;
          app.getAllUsers ();
        }
      });
    },
    deleteUser: function () {
      var formData = app.toFormData (app.clickedUser);
      axios.post ( "http: // localhost / mitpgm / ApiController action = delete", formData)
      Ringing (funktion (respons) {
        app.clickedUser = {};
        hvis (response.data.error) {
          app.errorMessage = response.data.message;
        }andet{
          app.successMessage = response.data.message;
          app.getAllUsers ();
        }
      });
    },
selectUser (bruger) {
      app.clickedUser = bruger;
    },
    toFormData: funktion (obj) {
      var form_data = ny FormData ();
      for (var key in obj) {
        form_data.append (nøgle, obj [nøgle]);
      }
      return form_data;
    },
clearMessage: funktion () {
      app.errorMessage = "";
      app.successMessage = "";
    }
  }
});

ovenstående kode er det, der vil interagere med vores codefii-app myApp, der findes i vores serverkatalog.

Og så er den næste ting index.html-filen, der har følgende kode:



  
    
     Brug af vuejs med codefii 
    
  
  
      
        

Liste over brugere

 Tilføj ny bruger 
        
                 
        

{{errorMessage}}

        

{{successMessage}}

                                   ID                Brugernavn                E                Mobil                Rediger                Slet                                    {{user.id}}              {{user.username}} h              {{user.email}}              {{user.phone}}              Rediger              Slet                                                 

              
              
                
                  
                                                                               
                                                                               
                                                                               
                     Gem                                                                           

          
          

              
              
                
                  
                                                                               
                                                                               
                                                                               
                     Opdater                                                                           

          

              
              
                

Du er ved at slette {{clickedUser.username}}

                  

                  

Er du sikker på, at du vil slette?

                  
 JA 

              
            
          
    
    

Ovenstående kode fungerer fint, men vi er nødt til at style den lidt med css. På dette tidspunkt tror jeg, du skulle have oprettet en style.css-fil, hvis du har gjort det, så tilføj følgende kode til din css-fil, lad os se.

* {
  polstring: 0px;
  margin: 0px;
  box-dimensionering: border-box;
}
.beholder{
  bredde: 960px;
  margin: auto;
  margin-top: 44px;
}
.venstre{
  flyde: venstre;
}
.ret{
  flyde: højre;
}
.klar{
  klar: begge;
}
h1 {
  skriftstørrelse: 32px;
}
.addNewUser {
  float: 2px 9px;
}
table.list {
  bredde: 100%;
  tekstjustering: center;
  margin-top: 33px;
}
table.list th {
  polstring: 5px;
  baggrund: # F41272;
  farve: #fff;
}
table.list td {
  polstring: 9px;
}
table.list tr {
  baggrund: # D7DBDD;
}
knap{
  polstring: 10px 20px;
  kant: 0px;
  baggrund: # F2F3F4;
}
.modal {
  baggrund: rgba (0,0,0,0,4);
  position: fast;
  top: 0;
  bund: 0;
  venstre: 0;
  højre: 0;
}
.modalContainer {
  bredde: 555px;
  baggrund: #fff;
  margin: 0 auto;
  margin-top: 44px;
}
.modalHeading {
  baggrund: # F41272;
  polstring: 6px;
  tekstjustering: center;
  farve: #fff;
}
.modalContent {
  min-højde: 400px;
  polstring: 44px;
}
.tæt{
  baggrund: rød;
  skriftstørrelse: 32px;
  farve: #fff;
  polstring: 2px 9px;
  grænse: ingen;
}
etiket{
  font-familie: "roboto", sans-serif;
  skriftstørrelse: 15px;
}
.form{
  polstring: 2px;
}
.form-gruppen {
  polstring: 20px;
}
.form-kontrol
{
  polstring: 5px 6px;
  float: højre;
  bredde: 80%;
  grænseradius: 5px;
  kant: 1px solid # D6DBDF;
}
.btn {
  baggrund: # 48C9B0;
  farve: #fff;
  skriftstørrelse: 14px;
  grænseradius: 5px;
}
.fare{
  baggrund: rød;
  farve: #fff;
  skriftstørrelse: 14px;
  grænseradius: 5px;
}
.successMessage {
  baggrund: # D8EFC2;
  farve: # 097133;
  grænse-venstre: 5px solid # 097133;
  polstring: 9px;
  margen: 22px 0;
}
.fejl besked{
  baggrund: # EFCBC2;
  farve: # D71517;
  kant-venstre: 5px solid # D71517;
  polstring: 9px;
  margen: 22px 0;
}

Vi har ikke gjort meget, men vi har gjort noget virkelig godt, så lad os se forhåndsvisningen i en browser:

Det er alt sammen, mere kommer snart ...

Vue.js Andela Nigeria php.net JavaScript Daily