1. IndexedDB (รุ่น) -ฐานข้อมูลประเภทวัตถุเบราว์เซอร์ front-end โดยทั่วไปฐานข้อมูลที่เราใช้ในพื้นหลังเป็นฐานข้อมูลเชิงสัมพันธ์ ดังนั้นลักษณะของ indexedDB คืออะไร:
ประการแรกมันเป็นฐานข้อมูลดัชนีที่แท้จริงซึ่งสามารถสะท้อนให้เห็นในการใช้งานจริงตามที่ต้องการในการสร้างดัชนีสำหรับตารางเพื่อรับข้อมูลตามฟิลด์ที่แน่นอน แต่ในฐานข้อมูลเชิงสัมพันธ์นี้ไม่จำเป็นต้องเห็นได้ชัด
ประการที่สองฉันไม่จำเป็นต้องแปลงข้อมูลแถวและคอลัมน์ฉันแค่ต้องผ่านกระบวนการคล้ายอาร์เรย์:
การคัดลอกรหัสมีดังนี้:
Objectstore.push (ข้อมูล);
มันเหมือนกับการบรรจุวัตถุ JSON ลงในฐานข้อมูล มันไม่รุนแรงมากเหรอ?
2. bootstrap (ดู ) - bootstrap พูดตามตรงฉันไม่คุ้นเคยกับสิ่งนี้มากนัก ท้ายที่สุดฉันมาจากการพัฒนา Java แบ็กเอนด์ ในความเข้าใจของฉันนี่เป็นกรอบการทำงานส่วนหน้าที่โดดเด่นด้วยเค้าโครงที่ตอบสนอง สำหรับสิ่งที่พิเศษกว่านี้ควรเป็นที่นิยมมากขึ้นใช่ไหม? - พูดตามตรงฉันใช้ CSS ที่นี่เท่านั้นและฉันก็คิดว่าการพัฒนาส่วนหน้าหลังสมัยใหม่จะไม่ต้องการส่วน JS ของ Bootstrap หลังจากทั้งหมดมันยังคงเป็นวิธีการที่ใช้ jQuery
3. AngularJS (คอนโทรลเลอร์) -ต้องยอมรับว่าการกำเนิดของสิ่งนี้ทำให้มุมมองของฉันล้มเหลวในการพัฒนาส่วนหน้าอย่างสมบูรณ์ เรายังคงถูกขังอยู่ในภาวะที่กลืนไม่เข้าคายไม่ออกว่าไม่สามารถแยกส่วนหน้าและส่วนหลังได้อย่างสมบูรณ์ แต่ฉันคิดว่าหากบุคลากรส่วนหน้าโดยทั่วไปใช้สคริปต์ AngularJS ที่ใช้เพื่อพัฒนาในระยะต่อมา (และกรอบที่คล้ายกัน) เราไม่จำเป็นต้องปล่อยให้วิศวกรพัฒนาส่วนท้ายใช้รูปแบบส่วนหน้าโครงสร้าง ฯลฯ อีกต่อไป
ด้วยวิธีนี้บุคลากรแบ็กเอนด์จำนวนมากอาจไม่สามารถเข้าใจได้ ตัวอย่างเช่น: การใช้ AngularJS เป็นเหมือน JSP, Freemarker ฯลฯ ที่แสดงผล HTML มันเป็นเพียงหนึ่งที่แสดงผลทางฝั่งไคลเอ็นต์และอื่น ๆ ที่แสดงบนเซิร์ฟเวอร์พื้นหลัง ตราบใดที่เราเปลี่ยนโครงสร้างและคุณสมบัติของข้อมูลหน้าแสดงผลที่สอดคล้องกันจะแตกต่างกัน AngularJS คือการทำให้เราให้ความสำคัญกับการเปลี่ยนแปลงข้อมูลมากกว่าการเปลี่ยนแปลง DOM กล่าวคือ: คุณไม่ค่อยเขียน $ ("btnsave") คลิก (ฟังก์ชั่น () {}); สิ่งนี้ต้องได้รับรหัสสคริปต์ของโหนด HTML อาจกล่าวได้ว่าสิ่งนี้อยู่นอกขอบเขตของ jQuery อย่างสมบูรณ์ ดังนั้นสิ่งนี้สามารถพิจารณาการเปลี่ยนแปลงข้ามยุคได้หรือไม่?
ลองมาตัวอย่างกัน (จะต้องทำงานบนเซิร์ฟเวอร์ในที่สุด):
user.html
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = อุปกรณ์-ความกว้าง"/> <! href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.cs"><script src =" http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js " ng-controller = "userCtrl"> <div> <h3> ผู้ใช้ </h3> <table> <thead> <tr> <th> แก้ไข </th> <th> ชื่อแรก </th> <th> ชื่อสุดท้าย </th> </tr> ng-click = "edituser (หนึ่ง)"> <span> </span> แก้ไข </ปุ่ม> <button ng-click = "deleteUser (one.id)"> <span> </span> ลบ </button> </td> <td> {one.fname}} </td> One.Telephone}} </td> </tr> </tbody> </table> <hr> <button ng-click = "edituser ()"> <span> </span> สร้างผู้ใช้ใหม่ </button> <h3 ng-show = "แก้ไข"> สร้างผู้ใช้ใหม่: </h3> <h3> <h3 ผู้ใช้: </h3> <form> <div> <dable> ชื่อแรก: </label> <div> <อินพุตประเภท = "ข้อความ" ng-model = "user.fname" ng-disabled = "! แก้ไข" placeolder = "ชื่อแรก"> </div> ng-disabled = "! แก้ไข" placeHolder = "นามสกุล"> </div> </div> <div> <dable> โทรศัพท์: </label> <div> <อินพุต type = "โทรศัพท์" ng-model = "user.telephone" placeHer = "โทรศัพท์"> </div> การเปลี่ยนแปลง </button> </div> <script src = "jdbc.js? v = 2323"> </script> <script src = "myusers.js"> </script> </body> </html>jdbc.js (เป็นโมดูลการเข้าถึงข้อมูลซึ่งสามารถโหลดและเรียกโดยแอปพลิเคชันต่างๆ)
'ใช้อย่างเข้มงวด';! (ฟังก์ชั่น (w, เชิงมุม) {angular.module ('db', []). บริการ ('jdbc', ฟังก์ชั่น ($ http, $ q) {var _self = this; var mydb = {ชื่อ: 'roma' db.createObjectstore ('ลูกค้า', {keypath: "id", autoincrement: true}); customer.createindex ("customer_fname_index", "fname", {ไม่ซ้ำกัน: true});}}; defer.promise. จากนั้น (การโทรกลับ) จะถูกเรียกใช้และการแก้ไขสามารถส่งผ่านตัวแปรใด ๆ/**** การทดสอบฟังก์ชั่น () {* var defer = $ q.defer ();* settimeout (2000, function () {* defer.resolve ("hello");*}; console.log (say);*}); ** "สวัสดี" จะพิมพ์ใน 2 วินาที ** @type {รอการไกล |*}*/var defer = $ q.defer (); _ self.onload = ฟังก์ชัน (cb) {return defer.promise.then (cb);}; {d.resolve (db);} // เปิดฐานข้อมูล var result = window.indexeddb.open (mydb.name); result.onerror = ฟังก์ชั่น (e) {console.log ("เปิด db ข้อผิดพลาด!"); d.reject ("ข้อผิดพลาด");}; // db; d.resolve (db);}; return d.promise;}; _ self.opendb = ฟังก์ชั่น (ชื่อ, รุ่น, ความสำเร็จ, การอัพเกรด) {var d = $ q.defer (); result.onerror = function (e) {console.log ("เปิดข้อผิดพลาด db!"); d.reject (e);}; // เปิดผลลัพธ์อย่างถูกต้อง onsuccess = ฟังก์ชั่น (e) {mydb.db = e.target.result; if (ความสำเร็จ) ความสำเร็จ (mydb.db); {mydb.db = e.target.result; ถ้า (อัปเกรด) อัปเกรด (mydb.db); d.resolve ("อัปเกรด");}; return d.promise;}; var schema = function (schema) {defer.resolve ();}, ฟังก์ชั่น (db) {อัพเกรด (db);});})}; schema (mydb.schema); _ self.get = function (storename, key) {var d = $ q.defer (); 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 (); d.promise;}; _ self.find = ฟังก์ชั่น (storename, คีย์, ค่า) {var d = $ q.defer (); // promituelgetDb (mydb.db). จากนั้น (ฟังก์ชั่น (db) {transaction var = db.transaction (storename, 'readonly'); idbkeyrange.only (ค่า); var result = store.index (key). opencursor (Keyrange, "next"); var results = []; result.onsuccess = ฟังก์ชั่น (เหตุการณ์) {cursor var = event.target.result; ถ้า (Cursor) {d.resolve (ผลลัพธ์);}}; result.onerror = ฟังก์ชั่น (e) {d.reject ();};}); return d.promise;}; _ self.put = function (storename, ค่า) {var d = $ q.defer (); var db = mydb.db 'readWrite'); var store = transaction.ObjectStore (storename); ถ้า (ค่า! == null && value! == undefined) {store.put (value); d.resolve ();} else {d.reject ();} ส่งคืน d.promise;}; = mydb.db || getdb (); transaction var = db.transaction (storename, 'readwrite'); var store = transaction.objectstore (storename); var result = store.delete (ค่า) d.promise;}; _ self.findall = function (storename) {var d = $ q.defer (); // promitionalgetDb (mydb.db). จากนั้น (db) {transaction var = db.transaction (storename, 'readonly'); []; result.onsuccess = ฟังก์ชั่น (เหตุการณ์) {var cursor = event.target.result; ถ้า (เคอร์เซอร์) {results.push (cursor.value); Cursor.continue ();}} {d.resolve (ผลลัพธ์);}}; _self;});} (window, window.angular)); myusers.js (สคริปต์เลเยอร์คอนโทรลเลอร์ที่ใช้) 'ใช้อย่างเข้มงวด'; angular.module ('myapp', ['db']). คอนโทรลเลอร์ ("userCtrl", ฟังก์ชั่น ($ scope, $ http, jdbc) {// รีเฟรชโครงสร้างข้อมูล {jdbc.findall ("ลูกค้า") จากนั้น (ฟังก์ชั่น (การตอบสนอง) {if (! การตอบสนอง) {$ http.get ("data.json"). ความสำเร็จ (ฟังก์ชั่น (การตอบสนอง) {$ scope.users = การตอบสนอง;}); return; true; var _user = $ spope.user = {}; $ scope.edituser = function (ผู้ใช้) {ถ้า (ผู้ใช้) {_user.id = user.id; _user.fname = user.fname; _user.lname = user.lname; ""; _user.lname = ""; _user.Telephone = ""; _user.Telephone = ""; _user.id = "";}}; $ scope.deleteuser = ฟังก์ชั่น (id) {// ข้อมูลตารางรีเฟรช ID). จากนั้น (โหลดซ้ำ);}; $ scope.saveCustomer = function () {// ข้อมูลตารางรีเฟรชหลังจากเพิ่มหรืออัปเดตบันทึกจากฐานข้อมูล jdbc.put ("ลูกค้า", _user) {console.log (data);});}); data.json (ใช้เพื่อแสดงข้อมูลเมื่อไม่สามารถเรียกคืนได้ตามปกติ) [{"id": 1, "fname": "Lin", "lname": "Jiabin", "โทรศัพท์": "13514087953"}, {"ID": 2, "Fname": "Chen" "13509890786"}]ด้านบนเป็นคำอธิบายแบบเต็มของ indexedDB bootstrap angularJs และ MVC DOMO (ตัวอย่างแอปพลิเคชัน) ที่คุณแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!