1. IndexedDB (modèle) - base de données de type objet de navigateur frontal. Généralement, les bases de données que nous utilisons en arrière-plan sont des bases de données relationnelles. Alors, quelles sont les caractéristiques de l'indexeddb:
Tout d'abord, il s'agit d'une base de données d'index littérale, qui peut être reflétée dans une utilisation réelle car elle doit créer un index pour la table pour obtenir des données basées sur un certain champ, mais dans une base de données relationnelle, ce n'est évidemment pas nécessaire.
Deuxièmement, je n'ai pas besoin de convertir les données de ligne et de colonne, j'ai juste besoin de passer un processus de type tableau:
La copie de code est la suivante:
objectStore.push (data);
C'est un peu comme fourrer un objet JSON dans la base de données. N'est-ce pas très violent?
2. Bootstrap (vue ) - bootstrap. Pour être honnête, je ne connais pas très bien cette chose. Après tout, je viens du développement Java backend. À ma compréhension, il s'agit d'un cadre frontal caractérisé par une disposition réactive. Quant à ce qui est plus spécial, il devrait être plus populaire, non? ! Pour être honnête, je n'utilise que CSS ici, et je pense également que le développement frontal postmoderne ne nécessitera pas la partie JS de Bootstrap, après tout, c'est toujours une approche basée sur JQuery.
3. Angularjs (contrôleur) - Il faut admettre que la naissance de cette chose subvertit complètement mon point de vue sur le développement frontal. Nous étions toujours pris au piège dans le dilemme de ne pas être complètement séparés par le frontal et le back-end. Mais je pense que si le personnel frontal utilise généralement des scripts AngularJS appliqués à se développer au stade ultérieur (et certains cadres similaires), nous n'aurons plus besoin de laisser les ingénieurs de développement back-end appliquer de nombreux styles, structures, etc.
De cette façon, de nombreux membres du personnel backend peuvent ne pas être en mesure de le comprendre. Par exemple: l'utilisation d'AngularJS est un peu comme JSP, Freemarker, etc. qui rend HTML. Il ne s'agit que d'un côté du côté client et de l'autre rendu sur le serveur d'arrière-plan. Tant que nous modifions la structure et les propriétés des données, les pages rendues correspondantes seront différentes. AngularJS est de nous faire prêter plus d'attention aux changements de données plutôt qu'aux changements de DOM. C'est-à-dire: vous écrirez rarement $ ("btnsave"). Cliquez sur (fonction () {}); Cela nécessite d'obtenir le code de script du nœud HTML. On peut dire que cela est complètement hors de l'étendue de JQuery. Cela peut donc être considéré comme un changement de l'époque transversale?
Prenons un exemple (il doit être exécuté sur le serveur à la fin):
user.html
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <meta name = "Viewport" contenu = "width = device-width" /> <! - Nouveau fichier cootstrap noy CSS -> <link rel = "Stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src =" http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js "> </cript> Ng-Controller = "UserCtrl"> <div> <H3> Utilisateurs </h3> <Bile> <THEAD> <TR> <TH> modifier </th> <th> Premier Nom </ Th> <Th> Nom </th> </tr> </thead> <tbody> <ttr ng-repeat = "One In utilisateurs"> <td> <TD> <Tbody ng-Click = "EditUser (One)"> <span> </span> modifier </futton> <Button ng-Click = "DeleteUser (One.Id)"> <span> </span> Delete </ Button> </td> <Td> {{one.fname}} </td> <td> {{one.lname }} </td> <td> {{one.telephone}} </td> </tr> </ tbody> </ table> <hr> <Button ng-Click = "EditUser ()"> <span> </span> Créer un nouvel utilisateur </ Button> <hr> <h3 ng-show = "edit"> Créer un nouvel utilisateur: </ h3> <h3 ng-hide = "edit"> modifier l'utilisateur: </h3> <form> <v> <blouse> prénom: </bége> <v> <input type = "text" ng-model = "user.fname" ng-disabled = "! edit" lieuxholder = "prénom"> </v> </v> <v> <vabed> Nom de dernier: </ label> <vac ng-model = "user.lname" ng-disabled = "! éditer" placeholder = "nom de famille"> </ div> </ div> <div> <vabe> Téléphone: </ labone> <div> <input type = "tel" ng-model = "user> <hr> <hrutholder =" téléphone "> </ div> </v> </orm> <hr> <bouton ng-Click = "Savecomermer ()"> <span> </span> Enregistrer les modifications </ bouton> </div> <script src = "jdbc.js? V = 2323"> </ script> <script src = "myusers.js"> </ script> </ body> </html>JDBC.JS (en tant que module d'accès aux données, qui peut être chargé et appelé par diverses applications)
'utiliser strict';! (fonction (w, angular) {angular.module ('db', []). Service ('jdbc', function ($ http, $ q) {var _self = this; var mydb = {name: 'roma', version: 1, db: null, schéma: {2: function (db) {// initial l'inservateur Vars DB.CreateObjectStore ('Customer', {KeyPath: "ID", AutoIncrement: True}); Customer.CreateIndex ("Customer_FNAME_INDEX", "FNAME", {unique: true});}}}; // Utilisé pour gérer la méthode opposée de la fonction de rappel. sera déclenché, et la résolution peut passer dans n'importe quelle variable / **** fonction test () {* var defer = $ q.defer (); * setTimeout (2000, function () {* defer.resolve ("hello"); *}); * return Defer.promise; *} ** test (). Imprimé en 2 secondes ** @Type {différé | *} * / var defer = $ q.defer (); _ self.onload = function (cb) {return defer.promise.then (cb);}; var getdb = function (db) {var d = $ q.defer (); if (db) {D.Resolve (db);} = window.indexeddb.open (mydb.name); result.onError = function (e) {console.log ("Open DB Error!"); D.Reject ("Error");}; // Open result.onsucess = function (e) {var db = e.target.Result; d.promise;}; _ self.opendb = fonction (nom, version, succès, mise à niveau) {var d = $ q.defer (); var name = name || mydb.name; var version = version || Error! "); D.Reject (e);}; // Ouvrez correctement le résultat.onsuccess = fonction (e) {mydb.db = e.target.result; if (succès) Success (MyDB.DB); D.Resolve (e);}; // version de données de données. Mise à niveau (mydb.db); D.Resolve ("UpgradeeedEd");}; return d.promise;}; var schema = function (schema) {angular.Foreach (schema, function (upgrade, version, o) {_self.opendb (mydb.name, version, function () {defer.resolve ();}, fonction (db) {mise à niveau (db);});})}; schéma (mydb.schema); _ self.get = function (storename, key) {var d = $ q.defer (); transaction.ObjectStore (storename); var result = store.get (key); result.onsuccess = function (e) {_elf.result = e.target.result; D.Resolve ();};}; result.onerror = fonction (e) {d.reject ();};}); return d.promise;}; _ self.find = function (stoutrename, Value) {Var d = Var d = Var d = Var d = Var d = Var d = Var d = Var d = Var d = VaR d = Var d = Var d = Var d = Var d = Var d = Var d = VaR D = Var d = Var d = VaR d = VaR d = $ q.defer (); // promestGetDb (mydb.db) .then (function (db) {var transaction = db.transaction (storename, 'readonly'); var store = transaction.objectstore (storename); var keyrange = idbkeyrange.only (valeur); var résultat = store.index (key) .OPENCURSE []; result.onsuccess = function (event) {var cursor = event.target.result; if (cursor) {result.push (cursor.value); cursor.continue ();} else {d.resolve (résultats);}}; result.onerror = function (e) {d.reject ();};}); d.promise;}; _ self.put = function (storename, value) {var d = $ q.defer (); var db = mydb.db || {store.put (valeur); d.Resolve ();} else {d.reject ();} return d.promise;}; _ self.remove = function (storename, valeur) {var d = $ q.defer (); // promessevar db = mydb.db || transaction.ObjectStore (storename); var result = store.delete (value); result.onsuccess = function (e) {d.Resolve ();}; result.onerror = function (e) {d.reject ();}; return d.promise;}; _ self.findall = function (stockame) {var d = $ q.defer (); // promestGetDB (mydb.db) .then (function (db) {var transaction = db.transaction (storename, 'readonly'); var store = transaction.objectstore (storename); var result = store.opecursor (); var résultats = []; result.onsuces = function (event) {var cursor = événement) (curseur) {result.push (cursor.value); cursor.continue ();} else {d.Resolve (résultats);}}; result.onerror = function (e) {d.reject ();};}); return d.promise;}; return _self;});} (fenêtre, fenêtre. MyUsers.js (Script de couche de contrôleur appliqué) 'Utiliser Strict'; angular.module ('myapp', ['db']). Controller ("usertrl", fonction ($ Scope, $ http, jdbc) {// rafraîchir la structure de données, la liaison à deux voies d'AngularJ gens jdbc.onload (reload); $ scope.edit = true; var _user = $ scope.user = {}; $ scope.editser = function (user) {if (user) {_user.id = user.id; _user.fname = user.fname; _user.lname = user.lname; _user.Teleph; user.telephone;} else {_user.fname = ""; _user.lname = ""; _user.telephone = ""; _user.telephone = ""; _user.id = "";}}; $ scope.deleleUser = fonction (ID) {// Refresh Table JDBC.Remove ("Customer", id) .Then (Reload);}; $ scope.savecomerger = function () {// Refresh Table Data après avoir ajouté ou mis à jour des enregistrements à partir de la base de données JDBC.PUT ("Customer", _User) .Then (Reload);. "lin"). alors (fonction (data) {console.log (data);});}); data.json (utilisé pour afficher les données lorsque l'indexé ne peut pas être récupéré normalement) [{"id": 1, "fname": "lin", "lname": "jiabin", "téléphone": "13514087953"}, {"id": 2, "fname": "chen", "lname": "xiao", "téléphone": " "13509890786"}]Ce qui précède est la description complète du bootstrap indedDB AngularJS et MVC Domo (exemple d'application) qui vous a été apporté par l'éditeur. J'espère que cela vous sera utile!