1. IndexedDB (modelo) -Base de datos de tipo de objeto del navegador front-end. En general, las bases de datos que utilizamos en segundo plano son bases de datos relacionales. Entonces, ¿cuáles son las características de IndexedDB:
En primer lugar, es una base de datos de índice literal, que puede reflejarse en el uso real, ya que necesita crear un índice para la tabla para obtener datos basados en un cierto campo, pero en una base de datos relacional, esto obviamente no es necesario.
En segundo lugar, no necesito convertir los datos de la fila y la columna, solo necesito pasar un proceso similar a la matriz:
La copia del código es la siguiente:
ObjectStore.push (datos);
Es un poco como meter un objeto JSON en la base de datos. ¿No es muy violento?
2. Bootstrap (Ver ) - Bootstrap. Para ser honesto, no estoy muy familiarizado con esto. Después de todo, soy del desarrollo de Backend Java. En mi lugar, este es un marco frontal caracterizado por el diseño receptivo. En cuanto a lo que es más especial, debería ser que sea más popular, ¿verdad? ! Para ser honesto, solo uso CSS aquí, y también creo que el desarrollo del front-end posmoderno no requerirá la parte JS de Bootstrap, después de todo, sigue siendo un enfoque basado en jQuery.
3. Angularjs (controlador) : debe admitirse que el nacimiento de esta cosa subvierte completamente mi punto de vista sobre el desarrollo frontal. Todavía estábamos atrapados en el dilema de no poder separar completamente el front-end y el back-end. Pero creo que si el personal front-end generalmente usa scripts AngularJS aplicados para desarrollarse en la etapa posterior (y algunos marcos similares), ya no necesitaremos dejar que los ingenieros de desarrollo de back-end apliquen muchos estilos, estructuras, etc. de front-end.
De esta manera, mucho personal de backend puede no ser capaz de entenderlo. Por ejemplo: el uso de AngularJS es un poco como JSP, Freemarker, etc. que representa HTML. Es solo uno renderizado en el lado del cliente y el otro renderizado en el servidor de fondo. Mientras cambiemos la estructura y las propiedades de los datos, las páginas renderizadas correspondientes serán diferentes. AngularJS es hacer que prestemos más atención a los cambios de datos en lugar de los cambios DOM. Es decir: rara vez escribirá $ ("btnsave"). Click (function () {}); Esto requiere obtener el código de script del nodo HTML. Se puede decir que esto está completamente fuera del alcance de JQuery. Entonces, ¿esto puede considerarse un cambio de la era cruzada?
Tomemos un ejemplo (debe ejecutarse en el servidor al final):
user.html
* 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 "> </script> </fead> <body ng-app =" myapp "myapp" ng-Controller = "Userctrl"> <div> <h3> usuarios </h3> <table> <thead> <tr> <th> editar </th> <th> nombre de primer </th> <th> apellido </th> </tr> </thead> <tbody> <ttr ng-repeat = "uno en los usuarios"> <td>> botón ng-click = "edituser (uno)"> <span> </span> editar </boton> <button ng-click = "deleteuser (One.id)"> <span> </span> delete </botón> </td> <td> {{One.fname One.telephone}} </td> </tr> </tbody> </table> <hr> <button ng-click = "edituser ()"> <span> </span> Crear un nuevo usuario </botón> <hr> <h3 ng-show = "editar"> crear un nuevo usuario: </h3> <h3 ng-hide = "editar" editar usuario: <h3> <h3> <tent <tatty <tatty <tatty <tatty <ettatt <ettaty <ettaty <ettavy <ettave <etty <tatty <etty <tatty <tatty <tatty <tatty <tAt <TATT. Nombre: </selabel> <div> <input type = "text" ng-model = "user.fname" ng-disable Nombre "> </div> </div> <viv> <lelstelebel> Telephone: </Label> <viv> <input type =" tel "ng-model =" user.telphone "placeholder =" teléfono "> </div> </div> </borm> <hr> <button ng-click =" saveCustomer () "> <pan> </span> guardar los cambios </button> <viv> src = "jdbc.js? V = 2323"> </script> <script src = "myusers.js"> </script> </body> </html>JDBC.JS (como un módulo de acceso a datos, que puede ser cargado y llamado por varias aplicaciones)
'use estrict';! (function (w, angular) {angular.module ('db', []). Service ('jdbc', function ($ http, $ q) {var _self = this; var mydb = {name: 'roma', versión: 1, db: null, schema: {2: function (db) {///// inicializando la inicialización del usuario db.createObjectStore ('Customer', {KeyyPath: "id", autoincrement: true}); customer.createIndex ("custom_fname_index", "fname", {único: true});}}}; // utilizado para manejar el método de la función de devolución de llamada. diferenciar console.log (digamos);*}); ** "Hola" se imprimirá en 2 segundos ** @Type {Deferred |*}*/var defer = $ Q.defer (); _ self.onload = function (cb) {return defer.promise.then (cb);}; var getdb = function (db) {var d = $ Q.DeFer () (if) {d.resolve (db);} // abre la base de datos var result = window.indexeddb.open (mydb.name); resultado.onerror = function (e) {console.log ("Open db error!"); d.reject ("error");}; // abre result.onsucces = function (e) {var db = e.target.ReMeT; db; d.resolve (db);}; return d.promise;}; _ self.opendb = function (nombre, versión, éxito, actualización) {var d = $ q.defer (); var name = name || = function (e) {console.log ("¡Open DB Error!"); D.Rject (e);}; // Abrir correctamente result.onsuccess = function (e) {mydb.db = e.target.result; if (éxito) exitoso (mydb.db); d.resolve (e);}; // version de la versión database. {mydb.db = e.target.Result; if (ogradade) ograde (mydb.db); d.resolve ("actualizeededed");}; return d.promise;}; var esquema = function (schema) {angular.foreach (esquema, function (actualización, versión, o) {_elf.opendb (mydb.name, versión, versión) {Defer.resolve ();}, function (db) {actualización (db);});})}; esquema (mydb.schema); _ self.get = function (storename, key) {var d = $ q.defer (); db.transaction (storeName, 'readonly'); var store = transaction.ObjectStore (storeName); var resultado = store.get (key); resultado.onsuccess = function (e) {_Self.Result = e.target.result; d.resolve ();}; dutin.onerror = function (e) {d.reject ();};} d.promise;}; _ self.find = function (storeName, key, value) {var d = $ q.defer (); // prometgetdb (mydb.db) .then (function (db) {var transaccion = db.transaction (storenEnly, 'readonly'); var store = transaccion.objectore (storenameMame); IdbKeyRange.only (valor); var result = store.index (clave) .Opencursor (KeyRange, "Next"); var resultados = []; resultado.onsuccess = function (event) {var cursor = event.target.result; if (cursor) {results.push (cursor.value); cursor.continue ();} {d.resolve (resultados);}}; resultado.onerror = function (e) {d.reject ();};}); return d.promise;}; _ self.put = function (storename, valor) {var d = $ q.defer (); var db = mydb.db || 'readWrite'); var store = transaction.ObjectStore (storeName); if (value! == null && value! == undefined) {store.put (valor); d.resolve ();} else {d.reject ();} return d.promise;}; _ self.remove = function (storename, value) {var d = $ Q.DeFER (); db = myDB.DB || d.promise;}; _ self.findall = function (storeName) {var d = $ q.defer (); // prometgetdb (mydb.db) .then (function (db) {var transaccion = db.transaction (storename, 'readonly'); var store = transaccion.objectstore (storename); var ind = storeR. []; resultado.onsuccess = function (event) {var cursor = event.target.result; if (cursor) {dults.push (cursor.value); cursor.continue ();} else {d.resolve (resultados);}}; d. _Self;});} (ventana, ventana.angular)); myUsers.js (Script de capa de controlador aplicado) 'Use Strict'; Angular.Module ('MyApp', ['DB']). Controler ("UserCtrl", function ($ Scope, $ http, JDBC) {// Actualizar la estructura de datos, el enlace de dos vías de AngularJS ayudará automáticamente a ser a renderizar la función de interfaz () () {jdbc.findall ("cliente"). entonces (function (respuesta) {if (! respuesta) {$ http.get ("data.json"). éxito (function (respuesta) {$ scope.users = respuesta;}); return;} $ scope.users = respuesta;});} // Después de que la estructura de datos se completa, riza la interfaz jDbc.onload (releTiT); = true; var _user = $ scope.user = {}; $ scope.edituser = function (user) {if (user) {_user.id = user.id; _user.fname = user.fname; _user.lname = user.lname. _user.telephone "";_user.lName = "";_user.telephone = "";_user.telephone = "";_user.id = "";}};$scope.deleteUser = function(id) {// Refresh table data after deleting records from the database jdbc.remove("customer", id) .then (reload);}; $ scope.savecustomer = function () {// Actualizar datos de la tabla después de agregar o actualizar registros de la base de datos jdbc.put ("cliente", _user) .Then (reload);}; jdbc.find ("cliente", "custom_fname_index", "Lin"). {console.log (data);});}); data.json (utilizado para mostrar datos cuando indexedDB no se puede recuperar normalmente) [{"id": 1, "fName": "lin", "lname": "jiabin", "teléfono": "13514087953"}, {"id": 2, "fname": "chen", "lname": "xiao", "teléfono" "13509890786"}]Lo anterior es la descripción completa del editor IndexedDB Bootstrap AngularJS y MVC DOMO (ejemplo de aplicación) que el editor. ¡Espero que te sea útil!