1. IndexedDB (Model) -Banco de dados do tipo de objeto front-end do navegador. Geralmente, os bancos de dados que usamos em segundo plano são bancos de dados relacionais. Então, quais são as características do indexedDB:
Primeiro de tudo, é um banco de dados de índice literal, que pode ser refletido no uso real, pois precisa criar um índice para a tabela para obter dados com base em um determinado campo, mas em um banco de dados relacional, isso obviamente não é necessário.
Em segundo lugar, não preciso converter os dados de linha e coluna, só preciso passar por um processo semelhante a uma matriz:
A cópia do código é a seguinte:
objectStore.push (dados);
É um pouco como encher um objeto JSON no banco de dados. Não é muito violento?
2. Bootstrap (View ) - Bootstrap. Para ser sincero, não estou muito familiarizado com isso. Afinal, sou do desenvolvimento do Java Backend. No meu entendimento, esta é uma estrutura front-end caracterizada por um layout responsivo. Quanto ao que é mais especial, deve ser mais popular, certo? ! Para ser sincero, eu só uso o CSS aqui e também acho que o desenvolvimento do front-end pós-moderno não exigirá a parte do JS do Bootstrap, afinal, ainda é uma abordagem baseada em jQuery.
3. AngularJS (controlador) -Deve-se admitir que o nascimento dessa coisa subverte completamente minha visão no desenvolvimento do front-end. Ainda estávamos presos no dilema de não conseguir separar completamente o front-end e o back-end. Mas acho que se o pessoal do front-end geralmente usar os scripts do AngularJS aplicados para se desenvolver no estágio posterior (e algumas estruturas semelhantes), não precisaremos mais permitir que os engenheiros de desenvolvimento de back-end apliquem muitos estilos, estruturas, etc.
Dessa forma, muitos funcionários de back -end podem não ser capazes de entendê -lo. Por exemplo: o uso do AngularJS é um pouco como JSP, Freemarker, etc. que renderiza HTML. É apenas um renderizado no lado do cliente e o outro renderizado no servidor em segundo plano. Enquanto alterarmos a estrutura e as propriedades dos dados, as páginas renderizadas correspondentes serão diferentes. AngularJS é para nos fazer prestar mais atenção às alterações de dados do que às alterações do DOM. Ou seja: você raramente escreverá $ ("btnsave"). Clique em (function () {}); Isso requer a obtenção do código de script do nó HTML. Pode -se dizer que isso está completamente fora do escopo do jQuery. Então, isso pode ser considerado uma mudança de cruz?
Vamos dar um exemplo (ele deve ser executado no servidor no final):
user.html
<! Doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = dispositivo-width"/> <!-novo arquivo CSS do núcleo de bootstrap-> <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 "> </script> ng-Controller = "UserCtrl"> <div> <h3> Usuários </h3> <table> <Thead> <tr> <th> Edit </th> <th> primeiro nome </th> <th> sobrenome </th> </tr> </thead> <Tbody> <Ttr ng-repeat = "One em usuários"> 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>{{ One.telephone}} </td> </tr> </tbody> </tabela> <hr> <button ng-click = "editUser ()"> <pan> </span> Crie um novo usuário </butão> <hr> <h3 ng-show = "edit"> Crie Novo Usuário: </h3> <h3h-hida-hide = "Edit"> Crie um novo usuário: </h3> <h3h-hida ng-h3 Usuário: </h3> <form> <div> <breting> Primeiro nome: </celt> <div> <input type = "text" ng-model = "user.fname" ng -Disabled = "! Edit" Plakeholder = "Frimor"> </Div> </niv> </div> <bel> sobrenome: </celt> <div> <input "> </div) ng-Disabled = "!! Edit" Plancoholder = "Sobrenome"> </div> </div> <div> <breting> Telefone: </elabel> <div> <input type = "tel" ng-model = "user.telephone" someholder = "telefone"> </div> </div> </"<hr> <blothlk =" teple "> </div> Alterações </botão> </div> <script src = "jdbc.js? V = 2323"> </script> <script src = "myusers.js"> </sCript> </body> </html>jdbc.js (como módulo de acesso a dados, que pode ser carregado e chamado por vários aplicativos)
'Use Strict';! (function (w, angular) {angular.module ('db', []). Serviço ('jdbc', function ($ http, $ q) {var _self = this; var mydb = {name: 'roma', versão: 1, db: null, schema: {2: function: db (db: null; DB.CreateObjectStore ('Cliente', {Keypath: "ID", AutoinCrement: True}); Customer.CreateIndex ("Customer_fname_index", "fname", {exclusivo: true}); ser desencadeado e resolver pode passar em qualquer variável/**** Função test () {* var difer = $ q.defer ();* setTimeout (2000, function () {* defer.resolve ("hello);*});* return Impresso em 2 segundos ** @Type {diferred |*}*/var difer = $ q.defer (); _ self.onload = function (cb) {return difer.promise.then (cb);}; var getdb = function (db) {var d = $ q.defer (); se (); var resultado = window.indexeddb.open (mydb.name); result.onerror = function (e) {console.log ("Open DB Error!"); d.reject ("error");}; // abrie resultado.Onsuccess = function (e) {var db = e.Target.Result; d.promise;}; _ self.opendb = função (nome, versão, sucesso, atualização) {var d = $ q.defer (); var name = nome || DB Erro! "); D.Rejeção (e);}; // Abra corretamente result.Onsuccess = function (e) {mydb.db = e.target.Result; if (success) success (mydb.db); d.Resolve (e);}; // database alteração resultado.onupgradedEdEd = FunctionEd = (e) (Upgrade) Upgrade (mydb.db); d.Resolve ("upgradeNeeded");}; retorna d.promise;}; var schema = function (schema) {angular.foreach (schema, função (upgrade, versão o) {_eself.OPendB (mydb.am, function (db) {upgrade (db);});})}; schema (mydb.schema); _ self.get = function (storename, key) {var d = $ q.defer (); 'readonly' '); var store = transaction.ObjectStore (storename); var result = store.get (key); resultado.Onsuccess = function (e) {_self.Result = e.target.Result; d.Resolve ();}; resultado.Orror = função (e) {D.reject (); (storename, key, value) {var d = $ q.defer (); // promesogetdb (mydb.db) .then (function (db) {var transaction = db.Transaction (storename, 'readnly'); var store = transaction.objectStore (storename); var keyrange '); store.Index (key) .OPencursor (keyrange, "próximo"); var resulta = []; resultado.Onsuccess = function (event) {var Cursor = event.target.Result; if (cursor) {resulta. {d.reject ();};}); retorna d.promise;}; _ self.put = function (storename, value) {var d = $ q.defer (); var db = mydb.db || getdb (); var transaction = db.Transact null && value! == indefinido) {store.put (value); d.Resolve ();} else {d.reject ();} retornar d.promise;}; _ self.remove = function (storename, value) {var d = $ q.defer (); db.Transaction (Storename, 'readWrite'); var store = transaction.ObjectStore (storename); var result = store.Delete (value); resultado.Onsuccess = function (e) {d.Resolve ();}; resultado.Orror = function () {D.reject ();}; {var d = $ q.defer (); // promesogetdb (mydb.db) .then (function (db) {var transaction = db.transaction (storename, 'readOnly'); var store = transaction.ObjectStore (storename); var result = store.OpEncursor (var); event.target.Result; if (cursor) {resulta.push (cursor.value); cursor.continue ();} else {d.Resolve (resultados);}}; result.onerror = function (e) {d.reject ();}}};}; Myusers.js (script da camada do controlador aplicado) 'Use Strict'; angular.module ('myApp', ['db']). {jdbc.findall ("cliente"). Então (function (resposta) {if (! Response) {$ http.get ("data.json"). Sucesso (function (resposta) {$ scope.users = resposta;}); retorno;} $ scope.users = resposta;});} // após a estrutura dos dados é concluída; jdbc.onload (recarregar); $ 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 ("cliente", id) .hen (recarregar);}; $ scope.Savecustomer = function () {// Atualizar os dados da tabela após adicionar ou atualizar registros do banco de dados jdbc.put ("cliente", _user) .then (relload);}; jdbc.find (_user). "lin"). Então (function (dados) {console.log (data);});}); Data.json (usado para exibir dados quando indexedDB não pode ser recuperado normalmente) [{"id": 1, "fname": "lin", "lname": "jiabin", "telefone": "13514087953"}, {"id": 2, "fname": "chen", "" ":}, {" id ": 2," FNAME ":" Chen "," "":}, {"id": 2, "FNAME": "Chen", "" ":}, {" id ": 2," FNAME ":" Chen "," "". "13509890786"}]O exposto acima é a descrição completa do IndexedDB Bootstrap AngularJS e MVC DOMO (Exemplo de Aplicação) trazido a você pelo editor. Espero que seja útil para você!