1. IndexedDB (модель) -база данных объекта фронтального браузера. Как правило, базы данных, которые мы используем в фоновом режиме, являются реляционными базами данных. Итак, каковы характеристики IndexedDB:
Прежде всего, это буквальная база данных индекса, которая может быть отражена в фактическом использовании, поскольку необходимо создать индекс для таблицы для получения данных на основе определенного поля, но в реляционной базе данных это, очевидно, не требуется.
Во-вторых, мне не нужно преобразовать данные о строке и столбцах, мне просто нужно пройти процесс, похожий на массив:
Кода -копия выглядит следующим образом:
ObjectStore.push (data);
Это немного похоже на заполнение объекта JSON в базу данных. Разве это не очень жестоко?
2. Bootstrap (View ) - начальная загрузка. Честно говоря, я не очень знаком с этой штукой. В конце концов, я от бэкэнд -разработки Java. В моем понимании, это фронтальная структура, характеризующаяся отзывчивой макетом. Что касается того, что более особенное, то это должно быть в том, что это более популярно, верно? ! Честно говоря, я использую только CSS здесь, и я также думаю, что постмодернистская фронтальная разработка не потребует JS-часть начальной загрузки, в конце концов, это все еще остается на основе JQUERY.
3. angularjs (контроллер) -Следует признать, что рождение этой вещи полностью подрывает мой взгляд на развитие фронта. Мы все еще оказались в ловушке в дилемме того, чтобы быть неспособными полностью отделить передний и задний и задний план. Но я думаю, что если передний персонал обычно использует прикладные сценарии AngularJS для развития на более поздней стадии (и некоторых аналогичных рамках), нам больше не нужно позволять инженерам-разработчикам применять много стилей, структурных и т. Д.
Таким образом, многие бэкэнд -персонал, возможно, не сможет понять это. Например: использование AngularJS немного похоже на JSP, Freemarker и т. Д., Который рендегирует HTML. Это всего лишь один, отображаемый на стороне клиента, а другой - на фоновом сервере. Пока мы меняем структуру и свойства данных, соответствующие визуализированные страницы будут разными. AngularJS - заставить нас уделять больше внимания изменениям данных, а не к изменениям DOM. То есть вы редко будете писать $ ("btnsave"). Click (function () {}); Это требует получения кода сценария узла HTML. Можно сказать, что это совершенно не в силе jQuery. Так это можно считать перекрестным изменением?
Давайте возьмем пример (в конце концов, он должен быть запущен на сервере):
user.html
<! Doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width"/> <!-Новый файл CSS-файла Bootstrap-> <link rel = " href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> написано src =" http://apps.bdimg.com/libs/angular.js/1.4.6/gangular.min.js "> </script> </hade> <body ng-". ng-controller = "userctrl"> <div> <h3> Пользователи </h3> <table> <thead> <tr> <th> Edit </th> <Th> Имя </th> <Th> Фамилия </th> </tr> </theAd> <tbody> <ttr ng-repeat = "One in ancom ng-click = "edituser (one)"> <pan> </span> edit </button> <button ng-click = "deleteUser (one.id)"> <pan> </span> delete </button> </td> <td> {{one.fname}} </td> <td> {{one.l.m. One.TeLephone}} </td> </tr> </tbode> </table> <hr> <button ng-click = "edituser ()"> <pan> </span> создать нового пользователя </button> <hr> <h3 ng-show = "edit"> Создать новый пользователь: </h3> <h3 ng-hide = "edit"> edit Пользователь: </h3> <form> <div> <babel> Имя: </label> <div> <input type = "text" ng-model = "user.fname" ng-disablet = "! Редактировать" Placeholder = "name"> </div> </div> <div> <babel> Последнее название: </label> <div> <diver = "ng-com ng-disablet = "! Редактировать" Placeholder = "Фамилия"> </div> </div> <div> <babel> Телефон: </label> <div> <input type = "tel" ng-model = "user.telephone" Placeholder = "Телефон"> </div> </div> </form> <hr> <buttond ng-click = "() </div> </form> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> Изменения </button> </div> <script src = "jdbc.js? V = 2323"> </script> <script src = "myusers.js"> </script> </body> </html>JDBC.JS (как модуль доступа к данным, который можно загрузить и вызвать различными приложениями)
«Используйте строгое ';! (function (w, angular) {angular.module (' db ', []). Service (' jdbc ', function ($ http, $ q) {var _self = this; var mydb = {name:' roma ', версия: 1, db: null, schema: {2: funct db.createobjectstore ('customer', {keypath: "id", Autoincrement: true}); customer.createIndex ("customer_fname_index", "fname", {уникальный: true});}}}; // используется для обработки противоположной функции Callback. будет инициировано, и разрешение может пройти в любой переменной/**** Function Test () {* var defer = $ q.defer ();* settimeout (2000, function () {* defer.resolve ("hello");*});* return defer.promise;*} ** тест () Отпечатано за 2 секунды ** @type {deferred |*}*/var defer = $ q.defer (); _ self.onload = function (cb) {return defer.promise.then (cb);}; var getDb = function (db) {var d = $ q.defer (db) {db); result = window.indexeddb.open (mydb.name); result.onerror = function (e) {console.log ("open db error!"); d.reject ("ошибка");}; // open result.onsuccess = function (e) {var db = e.Target.Result; myDb.db = db; D.promise;}; _ Self.opendb = function (имя, версия, успех, обновление) {var d = $ q.defer (); var name = name || mydb.name; var version = version || Ошибка! "); D.Reject (e);}; // Открыть правильно Result.onsuccess = function (e) {myDb.db = e.target.result; if (успех) успех (mydb.db); d.resolve (e);}; // result result. iflage upradeeddededed = eprade. Обновление (mydb.db); d.resolve ("Upradeneeded");}; return d.promise;}; var schema = function (schema) {angular.foreach (схема, функция (обновление, версия, o) {_self.opendb (mydb.name, version, function () {defer.Resolve (); {Upgrade (db);});})}; schema (mydb.schema); _ sell.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 ();}; result.onerror = function (e) {d.reject ();};}; return D.promise;}; {var d = $ q.defer (); // resportgetdb (mydb.db) .then (function (db) {var transaction = db.transaction (storename, 'readonly'); var store = transaction.objectstore (storename); var keyrange = idbkeyrange.only (value); "Далее"); var results = []; result.onsuccess = function (event) {var cursor = event.target.result; if (cursor) {results.push (coursor.value); cursor.continue ();} else {d.resolve (reples);}}; reful.Onerr = function (e) {D.); d.promise;}; _ self.put = function (storename, value) {var d = $ q.defer (); var db = mydb.db || getdb (); var transaction = db.transaction (storename, 'readwrite'); var store = objectstore (storename); {store.put (value); d.resolve ();} else {d.reject ();} return d.promise;}; _ self.remove = function (storename, value) {var d = $ q.defer (); // respervar 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 (storename) {var d = $ q.defer (); // resperationdgetdb (mydb.db) .then (function (db) {var transaction = db.transaction (Storename, 'readonly'); var store = objectstore (storename); var result = store.opencorsor (); var results = []; upport. onsuccess = var event. Event.Target.Result; if (cursor) {ressults.push (cursor.value); cursor.continue ();} else {d.resolve (refuls);}}; result.onerror = function (e) {d.reject ();};}); return d.promise;}; return _self}; myusers.js (сценарий слоя применяемого контроллера) «используйте строго»; angular.module ('myApp', ['db']). Контроллер («userctrl», функция ($ scope, $ http, jdbc) {// Обновлять структуру данных, двусторонняя привязка Angularj {jdbc.findall ("customer"). Затем (function (response) {if (! response) {$ http.get ("data.json"). Успех (функция (ответ) {$ scope.users = response;}); return;} $ scope.users = response;});} // после завершения структуры данных, Refresh recope. 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.telephone; ";; _user.lname =" "; _user.telephone =" "; _user.telephone =" "; _user.id =" ";}}; $ scope.deleteUser = function (id) {// Сторонние таблицы данных после удаления из DataBase jdbc. id) .then (reload);}; $ scope.savecustomer = function () {// Обновление данных таблицы после добавления или обновления записей из базы данных jdbc.put («клиент», _user) .then (reload);}; jdbc.find («customer», «customer_fname_index», «lin»). {console.log (data);});}); data.json (используется для отображения данных, когда IndexedDB не может быть получено нормально) [{«id»: 1, «fname»: «lin», «lname»: «jiabin», «Телефон»: «13514087953»}, {«id»: 2, «fname»: «Chen», «Lname»: «xio»: «xio»: «xio»: «xio»: «xio»: «xio»: "xio": "xio": "xio": "xio": "xio": "xio": "xio": "xio": "xio": "xio": "xio": ". "13509890786"}]Выше приведено полное описание IndexedDB Bootstrap AngularJS и MVC Domo (пример приложения), принесенного вам редактором. Я надеюсь, что это будет полезно для вас!