1. IndexedDB (Model) -Database tipe objek front-end. Secara umum, database yang kami gunakan di latar belakang adalah database relasional. Jadi apa karakteristik IndexedDB:
Pertama -tama, ini adalah database indeks literal, yang dapat tercermin dalam penggunaan aktual karena perlu membuat indeks untuk tabel untuk mendapatkan data berdasarkan bidang tertentu, tetapi dalam database relasional, ini jelas tidak diperlukan.
Kedua, saya tidak perlu mengonversi data baris dan kolom, saya hanya perlu melewati proses seperti array:
Salinan kode adalah sebagai berikut:
objectstore.push (data);
Agak seperti memasukkan objek JSON ke dalam database. Bukankah itu sangat kejam?
2. Bootstrap (Lihat ) - Bootstrap. Sejujurnya, saya tidak terlalu terbiasa dengan hal ini. Lagi pula, saya dari pengembangan Java backend. Dalam pemahaman saya, ini adalah kerangka kerja front-end yang ditandai dengan tata letak responsif. Adapun apa yang lebih istimewa, seharusnya lebih populer, bukan? Lai Sejujurnya, saya hanya menggunakan CSS di sini, dan saya juga berpikir bahwa pengembangan front-end postmodern tidak akan memerlukan bagian JS dari Bootstrap, setelah semua, itu masih merupakan pendekatan berbasis jQuery.
3. AngularJS (Controller) -Harus diakui bahwa kelahiran benda ini sepenuhnya merongrong pandangan saya tentang pengembangan ujung depan. Kami masih terjebak dalam dilema karena tidak dapat sepenuhnya memisahkan front-end dan back-end. Tapi saya pikir jika personel front-end umumnya menggunakan skrip AngularJS yang diterapkan untuk dikembangkan pada tahap selanjutnya (dan beberapa kerangka kerja serupa), kita tidak perlu lagi membiarkan insinyur pengembangan back-end menerapkan banyak gaya, struktur, dll.
Dengan cara ini, banyak personel backend mungkin tidak dapat memahaminya. Misalnya: Penggunaan AngularJS sedikit seperti JSP, Freemarker, dll. Yang membuat HTML. Itu hanya satu yang diterjemahkan di sisi klien dan yang lainnya diterjemahkan di server latar belakang. Selama kita mengubah struktur dan sifat data, halaman yang diberikan yang sesuai akan berbeda. AngularJS adalah membuat kita lebih memperhatikan perubahan data daripada perubahan DOM. Artinya: Anda jarang akan menulis $ ("btnsave"). Klik (function () {}); Ini membutuhkan mendapatkan kode skrip dari node HTML. Dapat dikatakan bahwa ini benar -benar di luar lingkup jQuery. Jadi ini bisa dianggap sebagai perubahan silang?
Mari kita ambil contoh (harus dijalankan di server pada akhirnya):
user.html
<! Doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width"/> <!-File CSS inti bootstrap baru-> <tautan 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-head </head-" non-"myp"> </script> </head- "myp"> </script> </head- "BOAD-" BOAD- "MYPLIMLE.MIN.MIN.JS"> </script> </scripter> 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-klik = "edituser (satu)"> <span> </span> Edit </button> <tombol ng-click = "deleteUser (one.id)"> <span> </span> hapus </button> </td> <td> {{{One.fname}} </td> <td> {{{{OneName}} </td {{{{{{{{{{{{{{{{{{{td. One.telephone}} </td> </tr> </tbody> </boable> <hr> <tombol ng-klik = "edituser ()"> <span> </span> Buat pengguna baru </button> <h3 ng-hide = "Edit"> Buat pengguna baru: </hutpute> <h3 ng-hide = "Edit"> Buat pengguna baru: </h3> <h3 ng-hide = "Edit"> Buat pengguna baru: </h3> <h3 ng-hide = "Edit"> Buat pengguna baru: </h3> <h3 ng-hide = "Edit"> Buat pengguna baru: </h3> <h3 ng-hide = "Edit"> Buat pengguna baru: </h3> <h3 ng-hide = "Edit" Pengguna: </h3> <norm> <verv> <label> Nama Depan: </Label> <vi> <input type = "text" ng-model = "user.fname" ng disabled = "! Edit" placeholder = "nama depan"> </div> </div> <Div> <label nama belakang: </label> <input "<input" = "TEKS =" TEKS = "TEKS =" TEKS = "TEPLE" TEKS = </DIVET "TEKS = TEKS = </DIVLET" TEKS = </TEPLET/TEKS = </TEPLET/TEKS = </TEPLET " 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 Ubah </button> </div> <skrip src = "jdbc.js? V = 2323"> </script> <script src = "myusers.js"> </script> </body> </html>jdbc.js (sebagai modul akses data, yang dapat dimuat dan dipanggil oleh berbagai aplikasi)
'Gunakan ketat';! (function (w, angular) {angular.module ('db', []). service ('jdbc', function ($ http, $ q) {var _self = this; var mydb = {name: 'roma', versi: 1, db: null, schema: {2: name: 'roma', versi: 1, db: null, schema: {2: name: 'roma', versi: 1, db: null, skema: {{name; db.createObjectStore ('customer', {keypath: "id", autoincrement: true}); customer.createIndex ("customer_fname_index", "fname", {unik: true}); dipicu, dan tekad dapat dilewati dalam variabel/**** test apa pun () {* var defer = $ q.defer ();* setTimeout (2000, function () {* defer.resolve ("hello");*});* return defer.promise;*} ** test (). kemudian (function) {{{{{{{{{{{{{{{{{{); dicetak dalam 2 detik ** @type {ditangguhkan |*}*/var defer = $ q.defer (); _ self.onload = function (cb) {return defer.promise.then (cb);}; var getdb = function (db) {var d = $ q.defer (); if (db) (db) {var d = $ q.defer (); if (db) {dB) {var d = $ q. window.indexeddb.open (mydb.name); result.onError = function (e) {console.log ("Buka kesalahan db!"); D.REJECT ("error");}; // buka hasil. D.Promise;}; _ self.opendb = fungsi (nama, versi, keberhasilan, upgrade) {var d = $ q.defer (); var name = name || Kesalahan! "); D.REJECT (e);}; // Buka dengan benar result.onsuccess = function (e) {mydb.db = e.target.result; if (sukses) sukses (mydb.db); d.resolve (e);}; // versi database perubahan result.onupgradeneeded = function (e) (e) (e) {{e) {e) {e) {e) {e) {e) {e) (e); upgrade (mydb.db); d.resolve ("upgradeneeded");}; return d.promise;}; var schema = function (skema) {angular.foreach (skema, fungsi (upgrade, versi, o) {_self.opendb (mydb.name, function, function () {defer. {upgrade (db);});})}; skema (mydb.schema); _ self.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 ();}; return.onError = function (e) {D.REJECT ();};}); return., FUNGSI = {d.RECHECT ();};}); return. DM) function (e) {D.REJECT ();};}); return. D.Promise (e) {D.REJECT (); = $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 (kursor) {results.push (kursor.value); cursor.continue ();} else {d.Resolve (hasil);};}; hasil. d.promise;}; _ self.put = function (Storename, value) {var d = $ q.defer (); var db = mydb.db || {Store.put (value); D.Resolve ();} else {D.RECT ();} return D.Promise;}; _ self.remove = function (Storename, value) {var d = $ q.defer (); // promisevar db = mydb.db | transaction.objectstore (Storename); var result = store.delete (value); result.onsuccess = function (e) {d.resolve ();}; result.onError = function (e) {d.ReChject ();}; return d.promise;}; _ self.findall = function (storename) {var do = $ q.defer (); // janjigetdb (mydb.db) .then (function (db) {var transaction = db.transaction (storename, 'readonly'); var store = transaction.Objectstore (storeName); var result = evene.opencursor (); var results = []; hasil. event.target.Result; if (kursor) {results.push (cursor.value); cursor.continue ();} else {d.Resolve (hasil);}}; hasilnya. 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"). Kemudian (function (response) {if (! response) {$ http.get ("data.json"). Success (function (response) {$ scope.users = response;}); return;} $ scope.users = response;});} // setelah data rever; 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.lname = _user.fname = User.fname; _user.lname.lname = user.telephone;} else {_user.fname = ""; _user.lname = ""; _user.telephone = ""; _user.telephone = ""; _User.id = "";}; $ scope.deleteUser = function (id) {{///}} DATAB AFORE DATACE dari fungsi (id) {{Id) {{{{{{{{Id) {{{Id) {{{Id) {/ { jdbc.remove ("customer", id) .then (reload);}; $ scope.savecustomer = function () {// refresh tabel data setelah menambahkan atau memperbarui catatan dari database jdbc.put ("customer", _user) .tHen (reload);}; jdbc.find ("customer (" customer "," customer "," customer "," customer "," customer "," customer "," customer "," customer "," customer "," customer "," " "lin"). Lalu (fungsi (data) {console.log (data);});}); data.json (digunakan untuk menampilkan data ketika indexeddb tidak dapat diambil secara normal) [{"id": 1, "fname": "lin", "lname": "jiabin", "telepon": "13514087953"}, "id": "2," fname ":" chen "," name "," ln: ln. "13509890786"}]Di atas adalah deskripsi lengkap dari bootstrap indexedDB AngularJS dan MVC domo (contoh aplikasi) yang dibawa kepada Anda oleh editor. Saya harap ini akan membantu Anda!