1. indexedDB (Model) - front-end browser object-type database. Generally, the databases we use in the background are relational databases. So what are the characteristics of indexeddb:
First of all, it is a literal index database, which can be reflected in actual use as it needs to create an index for the table to obtain data based on a certain field, but in a relational database, this is obviously not needed.
Secondly, I don't need to convert the row and column data, I just need to pass an array-like process:
The code copy is as follows:
objectStore.push(data);
It's a bit like stuffing a json object into the database. Isn't it very violent?
2. bootstrap (View ) -- bootstrap. To be honest, I am not very familiar with this thing. After all, I am from the backend Java development. In my understanding, this is a front-end framework characterized by responsive layout. As for what is more special, it should be that it is more popular, right? ! To be honest, I only use CSS here, and I also think that postmodern front-end development will not require the js part of bootstrap, after all, it is still a jquery-based approach.
3. angularjs (Controller) -- It must be admitted that the birth of this thing completely subverts my view on front-end development. We were still trapped in the dilemma of being unable to completely separate the front-end and back-end. But I think if front-end personnel generally use applied angularjs scripts to develop in the later stage (and some similar frameworks), we will no longer need to let back-end development engineers apply many front-end styles, structures, etc.
In this way, many backend personnel may not be able to understand it. For example: the usage of angularjs is a bit like jsp, freemarker, etc. that renders HTML. It is just one rendered on the client side and the other rendered on the background server. As long as we change the structure and properties of the data, the corresponding rendered pages will be different. angularjs is to make us pay more attention to data changes rather than DOM changes. That is to say: you will rarely write $("btnSave").click(function() {}); this requires obtaining the script code of the html node. It can be said that this is completely out of the scope of jQuery. So this can be considered a cross-era change?
Let’s take an example (it must be run on the server in the end):
user.html
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"/><!-- New Bootstrap core CSS file --><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></head><body ng-app="myApp" ng-controller="userCtrl"><div><h3>Users</h3><table><thead><tr><th>Edit</th><th>First Name</th><th>Last Name</th></tr></thead><tbody><ttr ng-repeat="one in users"><td><button 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></table><hr><button ng-click="editUser()"><span></span> Create New User</button><hr><h3 ng-show="edit">Create New User:</h3><h3 ng-hide="edit">Edit User:</h3><form><div><label>First Name:</label><div><input type="text" ng-model="user.fName" ng-disabled="!edit" placeholder="First Name"></div></div><div><label>Last Name:</label><div><input type="text" ng-model="user.lName" ng-disabled="!edit" placeholder="Last 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 (as a data access module, which can be loaded and called by various applications)
'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});customer.createIndex("customer_fName_index", "fName", {unique: true});}}};// Used to handle the opposite method of callback function. When defer calls the resolve method, the callback method passed in defer.promise.then(callback) will be triggered, and resolve can pass in any variable/**** function test() {* var defer = $q.defer();* setTimeout(2000, function() {* defer.resolve("hello");* });* return defer.promise;* }** test().then(function(say) {* console.log(say);* });** "hello" will be printed in 2 seconds** @type {Deferred|*}*/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);}// Open the database var result = window.indexedDB.open(myDB.name);result.onerror = function (e) {console.log("Open DB Error!");d.reject("error");};// Open result.onsuccess = function (e) {var db = e.target.result;myDB.db = db;d.resolve(db);};return d.promise;};_self.openDB = function (name, version, success, upgrade) {var d = $q.defer();var name = name || myDB.name;var version = version || myDB.version;// Open the database var result = window.indexedDB.open(name, version);// Error result.onerror = function (e) {console.log("Open DB Error!");d.reject(e);};// Open correctly result.onsuccess = function (e) {myDB.db = e.target.result;if (success) success(myDB.db);d.resolve(e);};// Database version change result.onupgradeneeded = function (e) {myDB.db = e.target.result;if (upgrade) upgrade(myDB.db);d.resolve("upgradeneeded");};return d.promise;};var schema = function (schema) {angular.forEach(schema, function(upgrade, version, o) {_self.openDB(myDB.name, version, function() {defer.resolve();}, function(db) {upgrade(db);});})};schema(myDB.schema);_self.get = function (storeName, key) {var d = $q.defer(); //promisegetDb(myDB.db).then(function (db) {var transaction = db.transaction(storeName, 'readonly');var store = 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;};_self.find = function (storeName, key, value) {var d = $q.defer();//promisegetDb(myDB.db).then(function(db) {var transaction = db.transaction(storeName, 'readonly');var store = transaction.objectStore(storeName);var keyRange = IDBKeyRange.only(value);var result = store.index(key).openCursor(keyRange, "next");var results = [];result.onsuccess = function(event) {var cursor = event.target.result;if (cursor) {results.push(cursor.value);cursor.continue();} else {d.resolve(results);}};result.onerror = function (e) {d.reject();};});return d.promise;};_self.put = function (storeName, value) {var d = $q.defer();var db = myDB.db || getDb();var transaction = db.transaction(storeName, 'readwrite');var store = transaction.objectStore(storeName);if (value !== null && value !== undefined) {store.put(value);d.resolve();} else {d.reject();} return d.promise;};_self.remove = function (storeName, value) {var d = $q.defer();//promisevar db = myDB.db || getDb();var transaction = db.transaction(storeName, 'readwrite');var store = 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();//promisegetDb(myDB.db).then(function(db) {var transaction = db.transaction(storeName, 'readonly');var store = transaction.objectStore(storeName);var result = store.openCursor();var results = [];result.onsuccess = function (event) {var cursor = event.target.result;if (cursor) {results.push(cursor.value);cursor.continue();} else {d.resolve(results);}};result.onerror = function (e) {d.reject();};});return d.promise;};return _self;});}(window, window.angular)); myUsers.js (applied controller layer script)'use strict';angular.module('myApp', ['db']).controller("userCtrl", function($scope, $http, jdbc) {// Refresh the data structure, the two-way binding of angularjs will automatically help us render the interface function reload() {jdbc.findAll("customer").then(function(response) {if (!response) {$http.get("data.json").success(function(response) {$scope.users = response;});return;}$scope.users = response;});}// After the data structure is completed, refresh the interface 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.lName = user.lName;_user.telephone = user.telephone;} else {_user.fName = "";_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() {// Refresh table data after adding or updating records from the database jdbc.put("customer", _user).then(reload);};jdbc.find("customer", "customer_fName_index", "lin").then(function(data) {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"}]The above is the full description of the indexedDB bootstrap angularjs and MVC DOMO (application example) brought to you by the editor. I hope it will be helpful to you!