Turinys
Svetainė, sukurta naudojant HTML 5, „JavaScript“, CSS 3, gali būti vykdoma skirtingais įrenginiais naudojant „Apache Cordova“. Jei turime mobiliąją programą ir norime efektyviai ir patikimai saugoti, valdyti ir gauti duomenis, „Apache Cordova“ suteikia mums papildinį, skirtą SQLite duomenų bazėms tvarkyti.Savo ruožtu „Android“ į savo architektūrą įtraukia visus reikalingus įrankius SQLite duomenų bazėms kurti ir tvarkyti, kad galėtume įterpti, keisti, konsultuoti ir ištrinti duomenis. Ši duomenų bazė bus vietinė, tai yra, ji bus laikoma įrenginyje, kuriame veikia programa.
Kitoje pamokoje mes jau paaiškinome „Apache Cordova“ diegimą, čia padarysime programą, skirtą suprasti, kaip veikia „Sqlite“ duomenų bazė iš „Android“.
Šiuo atveju naudosime „Linux“ terminalą, tačiau „Apache Cordova“ yra kelių platformų. Pradėsime kurdami projektą iš terminalo ir root režimu naudodami šį kodą:
cordova sukurti programą com.demo.app App01
„Cordova“ platforma, skirta „Android“Tarkime, kad „Android Adv Manager“ turime jau sukonfigūruotą įrenginį, tačiau sukonfigūruojame tą, kuris palaiko „Api 19“, ir tai yra 4.4.2 versijos „Android“
pridėti „cordova“ papildinį https://github.com/brodysoft/Cordova-SQLitePlugin.gitMes išbandysime, ar veikia numatytoji programa, todėl einame į terminalą ir parašome šį kodą
„Cordova“ imituoja „Android“Ji pradės rinkti programą ir, jei viskas veikia, turėtume matyti emuliuotą įrenginį, kaip parodyta žemiau.
DIDELIS
Tada mes modifikuojame bloką Įtraukiau formą duomenims įvesti
Linijabus rodomi įvesti duomenys, rasti duomenų bazėje. Css katalogo viduje randame failą index.css, atidarome šį failą, ištriname jo turinį ir pridedame šį stiliaus kodą, kad forma būtų sukurta.Kontaktinė informacija
Graviruoti
- vardas
- Paštu
html, body, h1, forma, fieldset, ol, li {paraštė: 0; paminkštinimas: 0; } body {background: #ffffff; spalva: # 111111; šriftų šeima: Georgia, "Times New Roman", Times, serif; paminkštinimas: 20 taškų; } forma # kontaktai {fonas: # 9cbc2c; -moz-border-spindulys: 5px; -webkit-border-spindulys: 5px; paminkštinimas: 20 taškų; plotis: 400 pikselių; aukštis: 150 pikselių; } form # kontaktai fieldset {border: none; paraštė-apačia: 10 taškų; } form # kontaktai fieldset: last-of-type {margin-bottom: 0; } forma # kontaktų legenda {spalva: # 384313; šrifto dydis: 16 taškų; šrifto svoris: paryškintas; paminkštinimas-10 pikselių; } forma # kontaktai> laukų rinkinys> legenda: prieš {content: "Step" skaitiklis (laukų rinkiniai) ":"; skaitiklis prieaugis: laukų rinkiniai; } form # kontaktai fieldset fieldset legend {color: # 111111; šrifto dydis: 13 taškų; šrifto svoris: normalus; paminkštinimas apačioje: 0; } forma # kontaktai ol li {fonas: # b9cf6a; fonas: rgba (255,255,255, .3); border-color: # e3ebc3; kraštinė-spalva: rgba (255,255,255, .6); sienos stilius: tvirtas; ribos plotis: 2 taškai; -moz-border-spindulys: 5px; -webkit-border-spindulys: 5px; linijos aukštis: 30 taškų; sąrašo stilius: nėra; paminkštinimas: 5px 10px; paraštė-apačia: 2 taškai; } forma # kontaktai ol ol li {fonas: nėra; siena: nėra; plūdė: kairė; } forma # kontaktų etiketė {float: left; šrifto dydis: 13 taškų; plotis: 110 pikselių; } forma # kontaktų laukų rinkinio lauko rinkinio etiketė {fonas: nėra jokio pakartojimo liko 50%; linijos aukštis: 20 taškų; paminkštinimas: 0 0 0 30px; plotis: automatinis; } forma # kontaktai lauko rinkinio lauko rinkinio etiketė: užveskite žymeklį {žymeklis: žymeklis; } forma # kontaktai textarea {background: #ffffff; siena: nėra; -moz-border-spindulys: 3px; -webkit-border-spindulys: 3px; -khtml-border-spindulys: 3px; šriftas: kursyvas 13px Georgia, "Times New Roman", Times, serif; kontūras: nėra; paminkštinimas: 5px; plotis: 200 pikselių; } forma # kontaktų įvestis: ne ([tipas = pateikti]): dėmesys, forma # kontaktai textarea: focus {background: #eaeaea; } formos # kontaktų mygtukas {fonas: # 384313; siena: nėra; plūdė: kairė; -moz-border-spindulys: 20px; -webkit-border-spindulys: 20px; -khtml-border-spindulys: 20px; ribos spindulys: 20 taškų; spalva: #ffffff; ekranas: blokas; šriftas: 14px Georgia, "Times New Roman", Times, serif; tarpas tarp raidžių: 1 taškas; paraštė: 7px 0 0 5px; paminkštinimas: 7px 20px; teksto šešėlis: 0 1px 1px # 000000; text-transform: didžiosios raidės; } formos # kontaktų mygtukas: užveskite pelės žymeklį {background: # 1e2506; žymeklis: rodyklė; }Įrašę du failus, mes vėl paleidžiame programą:
„Cordova“ imituoja „Android“Turėtume pamatyti šį ekraną:
DIDELIS
Faile sqlitedb.js įrašome šį kodą:
// Kaip įvykį įkeliame momentą, kai programa paleidžiama ir pradedama bendrauti su įrenginiu document.addEventListener ("deviceready", onDeviceReady, false); // formos kintamieji laukai var name, email; // Paleidžiu programą sukuriu duomenų bazės funkciją onDeviceReady () {var db = window.openDatabase ("Darbotvarkė", "1.0", "Darbotvarkė", 100000); db.transaction (CreateDB, errorDB); } Kiekviena duomenų bazės operacija atliekama naudojant apibrėžtą objektą db ir vykdoma naudojant sandorio metodą. Šis metodas grąžina parametrą su tokio vykdymo rezultatu, kuris pagal susitarimą yra išsaugomas parametre tx, kiekviena operacija turi funkciją kaip parametras tai yra pati operacija, pavyzdžiui, įrašyti duomenis ir klaidos funkcija, jei operacija nepavyks. Mes tęsiame funkciją „CreateDB“ ir „errorDB“ funkciją „CreateDB“ funkcija (tx) {tx.executeSql („KURTI LENTELĘ, JEI NĖRA“ (ID INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, pavadinimas TEXT NOT NULL, email TEXT NOT NULL) “); } funkcijos klaidaDB (tx, err) {alert ("SQL klaida:" + klaida); } // funkcija Įterpti duomenis į duomenų bazės funkciją InsertSQL (tx) {name = document.getElementById ('name'). value; paštas = document.getElementById ('email'). vertė; tx.executeSql ('INSERT INTO kontaktai (vardas, el. paštas) VALUES ("' + vardas + '", "' + el. paštas + '")'); įspėjimas („Žurnalas pridėtas“); } // funkcija, kuri generuoja operaciją, kad pridėtų duomenų funkcijos įrašą () {var db = window.openDatabase ("Darbotvarkė", "1.0", "Darbotvarkė", 100000); db.transaction (InsertSQL, errorDB); // Rodyti duomenis iš lentelės db.transaction (ConsultDB, errorDB); } // Mes peržiūrime visus kontaktų lentelės įrašus ir rezultatas naudojamas funkcijoje ListDBfunction ConsultDB (tx) {tx.executeSql ('SELECT * FROM contacts', [], ListDB, errorDB); } // Funkcija ListDB gauna operacijos parametrą ir įrašų rinkinį su užklausos turiniu, einame per įrašų rinkinį ir ištraukiame kiekvieną lauką, sugeneruojame html sąrašą ir tada rodome jį div su sąrašo identifikatoriumi per internalHtml taip dinamiškas. funkcija ListDB (tx, rezultatai) {var len = results.rows.length; var sąrašas = ""; listing = listing.concat ("Sąrašas:" + len + "kontaktai"); už (var i = 0; i
'+ results.rows.item (i) .name+' '+ results.rows.item (i) .email); } document.getElementById ('sąrašas'). internalHTML = list; }Kai turime visą kodą, iš terminalo perkompiliuojame programą naudodami šį kodą
„Cordova“ imituoja „Android“Kai emuliatorius bus įdiegtas kartu su programa, pradėsime įtraukti įrašus į savo darbotvarkę ir jie bus rodomi žemiau, įrenginys nuolat saugo mūsų įvestus duomenis virtualioje atmintyje, tai yra, kad duomenų bazė nebus ištrinta kiekvieną kartą kai vykdysime programą emuliatoriuje arba realiame įrenginyje, galėsime matyti duomenis, kuriuos registravome.
DIDELIS
