MVC DOMO of Application Example for indexedDB bootstrap angularjs
- 2021-06-29 06:22:40
- OfStack
1. indexedDB (Model) - Front-end browser object-based database, 1. Normally the databases we use in the background are relational databases.What are the features of indexeddb?
Firstly, it is an indexed database in the sense that it needs to be indexed for a table to get data from a field, which is obviously unnecessary in a relational database.
Secondly, I don't need to convert row and column data, I just need to process it like an array:
objectStore.push(data);
) It's sort of like cramming an json object into a database. Is that violent?
2. bootstrap (View) -- bootstrap, to be honest, I am not very familiar with this, after all, I was developed by backend java.As I understand it, this is a front-end framework that features responsive layouts. As for something special, it should be popular, right?To be honest, I only use css here, and I also think that post-modern front-end development will not require the js part of bootstrap, after all, it is mainly jquery.
3. angularjs (Controller) -- It must be acknowledged that the birth of this thing completely overturned my view of front-end development. Previously and now we are still in a dilemma where front-end and back-end cannot be completely separated, but I think if later, front-end personnel generally develop using applied angularjs scripts (there is also a few similar frameworks),We will no longer need back-end development engineers to apply many of the front-end styles, structures, and so on.
In this way, many backend users may still not appreciate it, for example: angularjs is used in a way that is somewhat like something like jsp, freemarker that renders html, only one on the client side and the other on the background server.As long as we change the structure and attributes of the data, the pages rendered will be different. angularjs lets us focus more on changes in the data than on changes in DOM, which means that you will rarely write $("btnSave"). click (function() {});This requires getting script code for the html node, which, in other words, is completely out of the scope of jQuery.So is this a cross-generational change?
Next, let's take the example above (which ultimately has to run on the server):
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 class="container">
<h3>Users</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="one in users">
<td>
<button class="btn" ng-click="editUser(one)">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<button class="btn" ng-click="deleteUser(one.id)">
<span class="glyphicon glyphicon-remove"></span> Delete
</button>
</td>
<td>{{ one.fName }}</td>
<td>{{ one.lName }}</td>
<td>{{ one.telephone }}</td>
</tr>
</tbody>
</table>
<hr>
<button class="btn btn-success" ng-click="editUser()">
<span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="user.fName" ng-disabled="!edit" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="user.lName" ng-disabled="!edit" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">telephone:</label>
<div class="col-sm-10">
<input type="tel" ng-model="user.telephone" placeholder="telephone">
</div>
</div>
</form>
<hr>
<button class="btn btn-success" ng-click="saveCustomer()">
<span class="glyphicon glyphicon-save"></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 that can be loaded and called by individual 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) {
// Initialization user
var customer = db.createObjectStore('customer', {keyPath:"id", autoIncrement: true});
customer.createIndex("customer_fName_index", "fName", {unique: true});
}
}
};
// Used to handle the opposite of a callback function , When defer call resolve After method , Will trigger defer.promise.then(callback) Incoming callback Method , also resolve Any variable can be passed in
/**
*
* function test() {
* var defer = $q.defer();
* setTimeout(2000, function() {
* defer.resolve("hello");
* });
* return defer.promise;
* }
*
* test().then(function(say) {
* console.log(say);
* });
*
* 2 Print out in seconds "hello"
*
* @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 database
var result = window.indexedDB.open(myDB.name);
result.onerror = function (e) {
console.log("Open DB Error!");
d.reject("error");
};
// Open correctly
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 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(); //promise
getDb(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();//promise
getDb(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();//promise
var 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();//promise
getDb(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 Data Structure ,angularjs Binding automatically renders the interface for us
function reload() {
jdbc.findAll("customer").then(function(response) {
if (!response) {
$http.get("data.json").success(function(response) {
$scope.users = response;
});
return;
}
$scope.users = response;
});
}
// Refresh interface after data structure is completed
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.id = "";
}
};
$scope.deleteUser = function(id) {
// Refresh table data after deleting records from 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", " Forest ").then(function(data) {
console.log(data);
});
});
data.json( When indexedDB Used to display data when it is not available properly )
[
{
"id": 1,
"fName": " Forest ",
"lName": " Jiabin ",
"telephone": "13514087953"
},
{
"id": 2,
"fName": " Chen ",
"lName": " Xiao ",
"telephone": "13509890786"
}
]The above is the full description of MVC DOMO (sample application) brought to you by this site, indexedDB bootstrap angularjs. I hope it will help you!