1. IndexedDB (Modell) -Datenbank vom Front-End-Browser-Objekttyp. Im Allgemeinen sind die Datenbanken, die wir im Hintergrund verwenden, relationale Datenbanken. Was sind die Eigenschaften von IndexedDB:
Erstens handelt es sich um eine wörtliche Indexdatenbank, die in der tatsächlichen Verwendung reflektiert werden kann, da sie einen Index für die Tabelle erstellen muss, um Daten basierend auf einem bestimmten Feld zu erhalten. In einer relationalen Datenbank ist dies offensichtlich nicht erforderlich.
Zweitens muss ich die Zeilen- und Spaltendaten nicht konvertieren, ich muss nur einen Array-ähnlichen Prozess bestehen:
Die Codekopie lautet wie folgt:
ObjectStore.push (Daten);
Es ist ein bisschen wie ein JSON -Objekt in die Datenbank. Ist es nicht sehr gewalttätig?
2. Bootstrap (Ansicht ) - Bootstrap. Um ehrlich zu sein, bin ich mit dieser Sache nicht sehr vertraut. Immerhin bin ich aus der Backend Java -Entwicklung. Nach meinem Verständnis ist dies ein Front-End-Framework, das durch reaktionsschnelles Layout gekennzeichnet ist. Was besonderer ist, sollte es sein, dass es beliebter ist, oder? ! Um ehrlich zu sein, benutze ich hier nur CSS und denke auch, dass postmoderne Front-End-Entwicklung den JS-Teil von Bootstrap nicht erfordern wird, schließlich ist es immer noch ein JQuery-basierter Ansatz.
3. AngularJS (Controller) -Es muss zugegeben werden, dass die Geburt dieser Sache meine Sicht auf die Front-End-Entwicklung vollständig untergräbt. Wir waren immer noch im Dilemma gefangen, das Front-End und das Back-End nicht vollständig zu trennen. Aber ich denke, wenn Front-End-Personal im Allgemeinen angewandte AngularJS-Skripte verwendet wird, um sich in der späteren Phase (und in einigen ähnlichen Rahmenbedingungen) zu entwickeln, müssen wir keine Back-End-Entwicklung mehr anwenden lassen, die viele Front-End-Stile, Strukturen usw. anwenden.
Auf diese Weise können viele Backend -Mitarbeiter es möglicherweise nicht verstehen. Zum Beispiel: Die Verwendung von AngularJs ist ein bisschen wie JSP, Freemarker usw., das HTML macht. Es ist nur eine auf der Clientseite und das andere auf dem Hintergrundserver gerendert. Solange wir die Struktur und Eigenschaften der Daten ändern, sind die entsprechenden gerenderten Seiten unterschiedlich. AngularJS soll uns mehr auf Datenänderungen als DOM -Änderungen achten. Das heißt: Sie werden selten $ ("btnsave") schreiben. Click (function () {}); Dies erfordert das Erhalten des Skriptcodes des HTML -Knotens. Es kann gesagt werden, dass dies völlig aus dem Rahmen von JQuery liegt. Dies kann also als Veränderung der Kreuzung angesehen werden?
Nehmen wir ein Beispiel (es muss am Ende auf dem Server ausgeführt werden):
user.html
<! DocType html> <html> <head> <meta charset = "utf-8"> <meta name = "viewPort" content = "width = Geräte-Width"/> <!-New Bootstrap Core CSS-Datei-> <link rel = "StylesHeet" href = "// cdn.bootcs.com/bootstrap/3.3.5/css/bootstrap.min.css"><Script Src =" http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js "</script> </script> </script> </cross> </</cross> </</cross> </</cross> </</cross> </</cross> </</cross> </</cross> </</</cross> </</</cross> </</</head> </</cross> </</</phili> </</</</phlow> </</</</</phlow> </ ng-controller = "userctrl"> <div> <h3> Benutzer </h3> <table> <Thead> <tr> <Th> Bearbeiten </th> <Th> Vorname </th> <Th> Nachname </th> </tr> </thead> <Tbody> <ttr ng-repeat = "in den Benutzern"> <Td> <td> <td> <td> <td> <tdd> <tdbutton ng-click="editUser(one)"><span></span>Edit</button><button ng-click="deleteUser(one.id)"><span></span>Delete</button></td><td>{{ one.fName }}</td><td>{{ one.lName }}</td><td>{{ eins.telephone}} </td> </tr> </tbody> </table> <hr> <button ng-klick = "editUser ()"> <span> </span> Neuen Benutzer erstellen </button> <h3 ng-show = "kreist"> neue Benutzer: </H3> <H3 ng-hide = "> bearbeiten"> edit user: </h3> <h3 ng-hide = "> edit user: </h3> <h3> <h3 ng-hide ="> edit user: </h3> <h3> <h3 ng-hide = " Name: </label> <div> <Eingabe type = "text" ng-model = "user.fname" ng-disabled = "! Bearbeiten" placeholder = "Vorname"> </div> </div> <div> <label> Nachname: </label> <div> <input type = "text Name"></div></div><div><label>telephone:</label><div><input type="tel" ng-model="user.telephone" placeholder="telephone"></div></div></form><hr><button ng-click="saveCustomer()"><span></span> Save Changes</button></div><script src = "jdbc.js? v = 2323"> </script> <script src = "myusers.js"> </script> </body> </html>jdbc.js (als Datenzugriffsmodul, das von verschiedenen Anwendungen geladen und aufgerufen werden kann)
'use strict';!(function (w, angular) {angular.module('db', []).service('jdbc', function ($http, $q) {var _self = this;var myDB = {name: 'roma',version: 1,db: null,schema: {2: function(db) {// Initialize the user var customer = db.createObjectStore ('customer', {keypath: "id", autoincrement: true}); conreateinNex ("customer_fname_index", "fname", {eindeutig: true});}}; // Die entgegengesetzte Methode verhandelt mit der Callback -Methode. wird ausgelöst, und die Auflösung kann in jeder Variablen/**** Funktionstest () {* var defer = $ q.Defer (); in 2 Sekunden gedruckt werden ** @type {deferred |*}*/var defer = $ q.defer (); _ self.onload = Funktion (cb) {return defer.Promise.Then (cb);}; var getDb = Funktion (db) {var d = $ q.defer (); fall (db) {/db); Datenbank var result = window.indexeddb.open (mydb.name); result.onError = function (e) {console.log ("Öffnen Sie DB -Fehler!"); D.Promise;}; _ self.opendb = function (Name, Version, Erfolg, Upgrade) {var d = $ q.defer (); var name = name || mydb.name; ERROR! "); D.Reject (e);}; // Öffnen Sie korrekt ergebnis. Upgrade (mydb.db); d.resolve ("upgraderEed");}; return d.promise;}; var schema = function (schema) {angular.foreach (Schema, Funktion (Upgrade, Version, O) {_self.opendb (mydb.name, Version, Funktion () {) {Defer.resolve (); {upgrade (db);});})}; Schema (mydb.schema); _ self.get = function (storename, key) {var d = $ q.defer (); Transaction.ObjectStore (Storename); var result = store.get (key); result.onsuccess = function (e) {_self.Result = e.target.result; d.resolve ();}; ergebnis. d = $ q.Defer (); // domitgetDB (mydb.db) .then (Funktion (db) {var transaction = db.transaction (Storename, 'readonly'); var stora = transaction.objectstore (StarrEname); var keyrange = idbkeyrange. = []; result.onsuccess = Funktion (Ereignis) {var cursor = event.target.result; if (cursor) {results.push (cursor.value); cursor.continue ();} else {d.resolve (resulting);}; D.Promise;}; _ self.put = function (storename, value) {var d = $ q.defer (); var db = mydb.db || {store.put (value); Transaction.ObjectStore (Storename); var result = store.delete (value); result.onSuccess = Funktion (e) {d.resolve ();}; result.onError = Funktion (e) {D.Reject ();}; return d.Promise;}; _ selfindall = function (faireName) {var da dar ed. {var edl) {var da dar da dar dar $ q.Defer (); // PromiseGetDB (mydb.db) .then (Funktion (db) {var transaction = db.transaction (Storename, 'readonly'); var store = transaction.objectStore (Storename); Ereignis.Target.Result; if (cursor) {results.push (cursor.value); cursor.continue ();} else {d.resolve (resulting);}}; result.onError = function (e) {D.Reject ();};}); MyUsers.js (Applied Controller Layer Skript) 'verwenden' strict '; Angular.module (' MyApp ', [' db ']). Controller ("Userctrl", Funktion ($ scope, $ http, jdbc) {// Die Datenstruktur aktualisieren, die Zwei-Wege-Bindung von Angularjs hilft uns automatisch. {jdbc.findall ("customer"). Dann (Funktion (Antwort) {if (! Antwort) {$ http.get ("data.json"). Erfolg (Funktion (Antwort) {$ scope.users = reaktion;}); jdbc.onload (reload); $ scope.edit = true; var _user = $ scope.user = {}; $ scope.edituser = function (user) {if (user) {_user.id = user.id; _user.fname = user.fname; user.telephone;} else {_user.fname = ""; _user.lname = ""; _user.telephone = ""; _user.telephone = ""; _user.id = "";}}; jdbc.remove ("customer", id) .then (reload);}; $ scope.savecustomer = function () {// Tabellendaten nach dem Hinzufügen oder Aktualisieren von Datensätzen aus der Datenbank jdbc.put ("customer", _user) .then (reload);}; "Lin"). Dann (Funktion (Daten) {console.log (data);});}); data.json(used to display data when indexedDB cannot be retrieved normally)[{"id": 1,"fName": "lin","lName": "Jiabin","telephone": "13514087953"},{"id": 2,"fName": "Chen","lName": "Xiao","telephone": "13509890786"}]Das obige ist die vollständige Beschreibung des IndexedDB Bootstrap AngularJS und MVC DOMO (Anwendungsbeispiel), das Ihnen vom Editor zur Verfügung gestellt wurde. Ich hoffe, es wird für Sie hilfreich sein!