Kuidas ehitada lihtsat CRUD-i rakendust vuejsi ja codefii abil

Selles õpetuses ehitame lihtsa crud-rakenduse, mille kliendipoolseks raamistikuks on vuejs ja RESTful Api-ks codefii.

Enne kui alustame, peate alla laadima vuejs HttpRequest Library, klõpsates sellel URL-il https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js. Ja järgmine asi on vuežide allalaadimine, otsides üles aadressi https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js

Alustame nähtava maagiaga :)

alustame rakenduse codefii loomist helilooja abil, kui teil pole heliloojat installitud või kui soovite teada, kuidas saada kõik kohalikku masinasse installitud tööriistad, külastage palun lahtrit DOKUMENTATSIOONI LEHEKÜLG.

Muul juhul alustame meie terminali avamisest (minu puhul kasutan linnux “fedora”), nii et Windowsi kasutajatele käivitage palun oma cmd ja tippige

helilooja loomise projekt - eelistage dist-codefii / codefii myApp

Kui see on tehtud, liikuge jaotisse Codefii / Controllers ja looge fail nimega ApiController.php ja sisestage järgmine kood.

klass ApiController laiendab kontrollerit {
avalik funktsioon api () {
 $ res = array ('viga' => vale);
 $ read = 'read'; // globaalne muutuja globaalsete meetodite valideerimiseks
 if (Taotlus: saa ('toiming')) {
 $ read = Taotlus :: saada ('toiming');
 }
 // see loeb api väärtust, mis sisaldab sõna "loe"
 if ($ read == 'read') {
 $ kasutajad = array ();
 foreach (ApiModel :: getAllUsers () -> results () kui $ rida) {
 array_push ($ kasutajad, $ rida);
 }
 $ res ['kasutajad'] = $ kasutajad;
 echo json_encode ($ res);
 }
 // sama funktsioon, kuid erinevad väärtused, näiteks 'loo'
 if ($ read == 'loo') {
 if (ApiModel :: addUser (Request :: get ('kasutajanimi')),
 Taotlus: saada ('e-post'), Taotlus: saada ('telefon'))) //
 {
 $ res ['message'] = ”Kasutaja edukalt lisatud”;
 echo json_encode ($ res);
 } veel {
 $ res ['message'] = 'Kasutajat ei saanud lisada';
 echo json_encode ($ res);
 }
 // printige tekst json ilusti
 }
 if ($ read == 'update') {
 if (ApiModel :: updateUser (Request :: get ('kasutajanimi')), Request :: get ('email'),
 Taotlus: saada ('telefon'), Taotlus: saada ('id'))) //
 {
 $ res ['message'] = 'Kasutaja värskendatud';
 echo json_encode ($ res);
 } veel {
 $ res ['message'] = 'Kasutajat ei saanud värskendada';
 echo json_encode ($ res);
 }
 // printige tekst json ilusti
 }
if ($ read == 'delete') {
 if (ApiModel :: deleteUser (Request :: get ('id')))) //
 {
 $ res ['message'] = ”Kasutaja kustutatud”;
 echo json_encode ($ res);
 } veel {
 $ res ['viga'] = tõsi;
 $ res ['message'] = 'Kasutajat ei saanud kustutada';
 echo json_encode ($ res);
 }
 // printige tekst json ilusti
 }
}
}

Vahetult pärast kontrolleri loomist on järgmine asi mudeli ülesehitus. Liikuge jaotisse Codefii / Models ja looge fail nimega ApiModel.php ja tippige järgmine kood:

klass ApiModel laiendab mudelit {
  avalik staatiline funktsioon addUser ($ kasutajanimi, $ email, $ telefon) {
    return self :: getDb () -> insertInTo ('kasutajad', massiiv (
      "kasutajanimi" => $ kasutajanimi,
      "email" => $ email,
      "telefon" => telefon
    ));
  }
  avaliku staatilise funktsiooni värskendusKasutaja ($ kasutajanimi, $ email, $ telefon, $ id) {
      return self :: getDb () -> update ('kasutajad', $ id, massiiv (
        "kasutajanimi" => $ kasutajanimi,
        "email" => $ email,
        "telefon" => telefon
      ));
  }
  avalik staatiline funktsioon deleteUser ($ id) {
      tagasta ise :: getDb () -> kustuta ('kasutajad', massiiv (
        "id", "=", $ id
      ));
  }
  avalik staatiline funktsioon getAllUsers () {
      return self :: getDb () -> query ("SELECT * FROM users");
  }
}

Loodan, et kõik läheb hästi? fantastiline, liigume nüüd järgmisse sammu, konfigureerides meie andmebaasi seaded. Avage oma mysql-i keskkond ja looge andmebaas mis tahes enda valitud nimega, kuid meie puhul kasutame andmebaasi nimena vue.

Pärast seda on järgmine samm faili Codefii / Database / Config.php leidmine; muutke järgmisi sätteid oma serveri / andmebaasi seadetes ja meil on hea.

$ GLOBALS ['config'] = array (
  'mysql' => massiiv (
    'host' => 'localhost',
    'kasutajanimi' => 'juur',
    'parool' => 'xxxxxx',
    'andmebaas' => 'vue',
    'kodeerimine' => 'utf8',
    'ajavöönd' => 'UTC',
    'cacheMetadata' => tõsi,
    'log' => vale,
),

määratleme nüüd meie marsruudid, redigeerides faili Routes.php, mis asub kataloogis Codefii / Routes /, ja lisage see rida sellele

$ ruuteri-> marsruudid ('ApiController', ['kontroller' => 'ApiController', 'action' => 'api']);

Inimesed, teostagem nähtavat maagiat, mida varem mainiti. Kui märkate, et me pole ühtegi vaatamisfaili loonud, kuna meie kaust myApp asub meie serveri kataloogis. loome dokumentidesse / kataloogi uue kausta järgmiste failidega:

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

lisage failis app.js järgmine kood

var app = uus Vue ({
  el: '# codefii',
  andmed: {
    showsAddModal: false,
    showsEditModal: false,
    showsDeleteModal: false,
    errorMessage: "",
    successMessage: "",
    kasutajad: [],
    newUser: {kasutajanimi: "", e-post: "", telefon: ""},
    clickedUser: {}
  },
  paigaldatud: function () {
    this.getAllUsers ();
  },
meetodid: {
    getAllUsers: function () {
      axios.get ("http: // localhost / myApp / ApiController? action = loe")
      . seejärel (funktsioon (vastus) {
        if (response.data.error) {
          app.errorMessage = response.data.message;
        } veel {
          app.users = response.data.users;
        }
      });
    },
saveUser: function () {
      var formData = app.toFormData (app.newUser);
      axios.post ("http: // localhost / myApp / ApiController? action = looma", formData)
      . seejärel (funktsioon (vastus) {
        console.log (vastus);
        app.newUser = {kasutajanimi: "", e-post: "", telefon: ""};
        if (response.data.error) {
          app.errorMessage = response.data.message;
        } veel {
          app.successMessage = response.data.message;
          app.getAllUsers ();
        }
      });
    },
updateUser: function () {
      var formData = app.toFormData (app.clickedUser);
      axios.post ("http: // localhost / myApp / ApiController? action = update", formData)
      . seejärel (funktsioon (vastus) {
        console.log (vastus);
        app.clickedUser = {};
        if (response.data.error) {
          app.errorMessage = response.data.message;
        } veel {
          app.successMessage = response.data.message;
          app.getAllUsers ();
        }
      });
    },
    deleteUser: function () {
      var formData = app.toFormData (app.clickedUser);
      axios.post ("http: // localhost / myApp / ApiController? action = delete", formData)
      . seejärel (funktsioon (vastus) {
        app.clickedUser = {};
        if (response.data.error) {
          app.errorMessage = response.data.message;
        } veel {
          app.successMessage = response.data.message;
          app.getAllUsers ();
        }
      });
    },
valigeKasutaja (kasutaja) {
      app.clickedUser = kasutaja;
    },
    toFormData: function (obj) {
      var form_data = uus vormData ();
      jaoks (var võti obj) {
        vorm_data.append (võti, obj [võti]);
      }
      tagasta vorm_andmed;
    },
clearMessage: function () {
      app.errorMessage = "";
      app.successMessage = "";
    }
  }
});

ülaltoodud kood hakkab toimima meie serveri kataloogis asuva codefii rakenduse myApp abil.

Ja siis järgmine asi on fail index.html, millel on järgmine kood:



  
    
     vuejsi kasutamine koos codefii-ga 
    
  
  
      
        

kasutajate loend

 Lisa uus kasutaja 
        
        
        
        

{{errorMessage}}

        

{{successMessage}}

                                   ID                Kasutajanimi                Email                Mobiilne                Redigeerimine                Kustuta                                    {{user.id}}              {{user.username}} h              {{user.email}}              {{user.phone}}              Edit              Kustuta                           
                     

          
          
              
              
                
                  
                                                            
                  
                                                            
                  
                                                            
                  
                     Värskenda                   
                
              
            
          

          
              
              
                

Peate kustutama saidi {{clickedUser.username}}

                  
                  

Kas soovite kindlasti kustutada?

                  
 JAH 
 EI 
              
                       
     
    

Ülaltoodud kood töötab hästi, kuid me peame seda css-iga natuke stiilima. Praegu usun, et oleksite pidanud looma faili style.css, kui olete seda juba teinud, siis lisage järgmine kood oma css-faili, näeme.

* {
  polster: 0px;
  veeris: 0 px;
  kasti suurus: äärise kast;
}
.konteiner {
  laius: 960 pikslit;
  veeris: auto;
  veerise ülaosa: 44 pikslit;
}
.vasak {
  ujuk: vasak;
}
paremale {
  ujuk: paremal;
}
.selge {
  selge: mõlemad;
}
h1 {
  kirjasuurus: 32 pikslit;
}
.addNewUser {
  ujuk: 2px 9px;
}
table.list {
  laius: 100%;
  teksti joondamine: keskel;
  veerise ülaosa: 33 pikslit;
}
table.list th {
  polster: 5px;
  taust: # F41272;
  värv: #fff;
}
table.list td {
  polster: 9px;
}
table.list tr {
  taust: # D7DBDD;
}
nuppu {
  polster: 10x 20xx;
  ääris: 0 pikslit;
  taust: # F2F3F4;
}
.modaalne {
  taust: rgba (0,0,0,0,4);
  positsioon: fikseeritud;
  ülemine: 0;
  põhi: 0;
  vasakul: 0;
  paremal: 0;
}
.modalContainer {
  laius: 555 pikslit;
  taust: #fff;
  veeris: 0 auto;
  veerise ülaosa: 44 pikslit;
}
.modalHeading {
  taust: # F41272;
  polster: 6px;
  teksti joondamine: keskel;
  värv: #fff;
}
.modalContent {
  min-kõrgus: 400 pikslit;
  polster: 44px;
}
.Sulge{
  taust: punane;
  kirjasuurus: 32 pikslit;
  värv: #fff;
  polster: 2px 9px;
  ääris: puudub;
}
silt {
  fondiperekond: "roboto", sans-serif;
  kirjasuurus: 15 pikslit;
}
.vorm {
  polster: 2px;
}
.vormigrupp {
  polster: 20 px;
}
.vormi juhtimine
{
  polster: 5px 6px;
  ujuk: paremal;
  laius: 80%;
  piiri raadius: 5 px;
  ääris: 1 px tahke # D6DBDF;
}
.btn {
  taust: # 48C9B0;
  värv: #fff;
  kirjasuurus: 14 pikslit;
  piiri raadius: 5 px;
}
.ohtlik {
  taust: punane;
  värv: #fff;
  kirjasuurus: 14 pikslit;
  piiri raadius: 5 px;
}
.successMessage {
  taust: # D8EFC2;
  värv: # 097133;
  äär vasak-vasak: 5xx tahke # 097133;
  polster: 9px;
  veeris: 22 pikslit 0;
}
.errorMessage {
  taust: # EFCBC2;
  värv: # D71517;
  äär vasak-vasak: 5xx tahke # D71517;
  polster: 9px;
  veeris: 22 pikslit 0;
}

Me pole palju teinud, kuid oleme teinud midagi tõeliselt suurepärast, nii et vaatame brauseris eelvaadet:

See on kõik inimesed, varsti on tulemas veel ...

Vue.js Andela Nigeeria php.net JavaScript Daily

Vaata ka

kuidas kanda bandeau-topekuidas avada .ass-failekuidas kahe allkirjaga kirjale alla kirjutadakuidas kustutada anaconda mackuidas Nanna loitsidakuidas eemaldada veekindel ripsmetušš ilma silmameigi eemaldajatakuidas segistis peeglit tehakuidas vabalt kampsunivesti kanda

Vaata ka

Kuidas leida hiiglasliku kasvupotentsiaaliga altcoineKuidas enda jaoks mõeldaKuidas leida usaldusväärset hambaarstiKuidas tõhusalt toime tulla negatiivsete kommentaaride ja hinnangutegaKuidas teha Prospectorsis võimas algusKuidas luua React komponent ja avaldada see NPM-isKuidas küsida eelistusi, mida inimesed soovivad täitaKuidas mälestada kõigi aegade kõige halvemat, ebapopulaarsemat presidenti