1. فهرسة (نموذج) -قاعدة بيانات كائن المتصفح الأمامي. بشكل عام ، فإن قواعد البيانات التي نستخدمها في الخلفية هي قواعد البيانات العلائقية. إذن ما هي خصائص الفهرسة:
بادئ ذي بدء ، إنها قاعدة بيانات فهرس حرفية ، والتي يمكن أن تنعكس في الاستخدام الفعلي حيث تحتاج إلى إنشاء فهرس للجدول للحصول على بيانات بناءً على حقل معين ، ولكن في قاعدة بيانات علائقية ، من الواضح أن هذا غير مطلوب.
ثانياً ، لست بحاجة إلى تحويل بيانات الصف والعمود ، أحتاج فقط إلى تمرير عملية تشبه الصفيف:
نسخة الكود كما يلي:
ObjectStore.push (البيانات) ؛
يشبه إلى حد ما حشو كائن JSON في قاعدة البيانات. أليس هذا عنيف جدا؟
2. bootstrap (عرض ) - bootstrap. لأكون صادقًا ، لست على دراية بهذا الشيء. بعد كل شيء ، أنا من الواجهة الخلفية Java Development. في فهمي ، هذا إطار أمامي يتميز بتخطيط مستجيب. بالنسبة إلى ما هو أكثر خصوصية ، يجب أن يكون أكثر شعبية ، أليس كذلك؟ ! لأكون صادقًا ، لا أستخدم فقط CSS هنا ، وأعتقد أيضًا أن تطوير الواجهة الأمامية بعد الحداثة لن يتطلب جزء JS من Bootstrap ، بعد كل شيء ، لا يزال نهجًا يعتمد على jQuery.
3. AngularJS (وحدة التحكم) -يجب أن يُعترف بأن ولادة هذا الشيء يفسد وجهة نظري تمامًا حول التطور الأمامي. ما زلنا محاصرين في معضلة عدم القدرة على فصل الواجهة الأمامية والخلفية تمامًا. لكنني أعتقد أنه إذا كان الموظفون الأماميون يستخدمون بشكل عام البرامج النصية Applied AngularJS للتطوير في المرحلة اللاحقة (وبعض الأطر المماثلة) ، فلن نحتاج بعد الآن إلى ترك مهندسي التطوير في النهاية يطبقون العديد من الأساليب والهياكل الأمامية ، وما إلى ذلك.
وبهذه الطريقة ، قد لا يتمكن العديد من موظفي الواجهة الخلفية من فهمه. على سبيل المثال: إن استخدام AngularJS يشبه إلى حد ما JSP و Freemarker ، وما إلى ذلك. إنه مجرد واحد تم تقديمه على جانب العميل والآخر يتم تقديمه على خادم الخلفية. طالما قمنا بتغيير بنية وخصائص البيانات ، ستكون الصفحات المقابلة المقابلة مختلفة. AngularJS هو جعلنا نولي المزيد من الاهتمام لتغييرات البيانات بدلاً من تغييرات DOM. وهذا يعني: نادراً ما تكتب $ ("btnsave"). انقر فوق (function () {}) ؛ هذا يتطلب الحصول على رمز البرنامج النصي لعقدة HTML. يمكن القول أن هذا خارج نطاق jQuery. لذلك يمكن اعتبار هذا تغييرًا عبر العصر؟
لنأخذ مثالاً (يجب تشغيله على الخادم في النهاية):
user.html
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width"/> <! 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 ng-controller = "userctrl"> <viv> <h3> المستخدمين </h3> <table> <thead> <tr> <th> edit </h> <th> الاسم الأول </th> <th> الاسم الأخير </th> </tr> </tbody> <ttrid ng-click = "edituser (واحد)"> <span> </span> تحرير </button> <button ng click = "deleteuser (One.id)"> <span> </sd> delete </utton> </td> <td> {one.fname}} </td> one.telephone}} </td> </tbody> </tbody> </table> <mhr> <button ng click = "edituser ()"> <span> </span> إنشاء مستخدم جديد </button> <hr> <h3 ng-show = "edit" المستخدم: </h3> <port> <viv> <label> الاسم الأول: </label> <div> <input type = "text" ng-model = "user.fname" ng-disabled = "! edit" placeholder = "first name"> </viv> </viv> <div> </label> </label> ng-disabled = "! edit" placeholder = "last name"> </viv> </viv> <viv> <blable> الهاتف: </label> <viv> <div> <input التغييرات </button> </div> <script src = "jdbc.js؟ v = 2323"> </script> <script src = "myusers.js"> </script> </body> </html>jdbc.js (كوحدة وصول للبيانات ، والتي يمكن تحميلها وتسمىها مختلف التطبيقات)
'use strict' ؛! (function (w ، Angular) {Angular.Module ('db' ، []). service ('jdbc' ، function ($ http ، $ q) {var _self = this ؛ var mydb = {name: 'roma' ، الإصدار: 1 ، db: chema: {2: function (db) DB.CreateObjectStore ("العميل" ، {keypath: "id" ، Autoincrement: True}) ؛ Customer.CreateIndex ("Customer_fname_index" ، "fname" ، {فريدة من نوعها: true}}} ؛ يتم تشغيله ، ويمكن حلها أن تمر في أي اختبار متغير/**** دالة () {* var effer = $ q.defer () ؛* setTimeOut (2000 ، function () {* effer.resolve ("hello") ؛*}) ؛* return defer.promise ؛ طُبع في ثانيتين **type {efferred |*}*/var effer = $ q.defer () ؛ _ self.onload = function (cb) {return defer.promise.then (cb) ؛ = window.indexeddb.open (mydb.name) ؛ result.onerror = function (e) {console.log ("Open db error!") ؛ d.reject ("error") ؛} ؛ D.Promise ؛} ؛ _ self.opendb = الدالة (الاسم ، النجاح ، الترقية) {var d = $ q.defer () خطأ! ") ؛ D.Reject (e) ؛} ؛ // open result sreduct. الترقية (mydb.db) ؛ d.resolve ("updredeneed") ؛} ؛ إرجاع D.Promise ؛} ؛ var schema = function (schema) {Angular.foreach (schema ، function (upgrade ، regude ، o) {_self.opendb (mydb.name ، position () {defer.resolve () ؛ {الترقية (db) ؛}) ؛}) ؛ المخطط (mydb.schema) ؛ _ self.get = storename ، المفتاح) {var d = $ q.defer () ؛ Transaction.ObjectStore (storename) ؛ var result = store.get (مفتاح) ؛ result.onsuccess = function (e) {_self.result = e.target.result ؛ d.resolve () ؛} ؛ $ q.defer () ؛ // promisegetDB (mydb.db) .Then (function (db) {var transaction = db.transaction (storename ، 'readonly') ؛ var store = transaction.ObjectStore (storename) ؛ var keyrange.on (value) ؛ var regud = store. =] D.Promise ؛} ؛ _ self.put = function (storename ، value) {var d = $ q.defer () ؛ var db = mydb.db || {store.put (value) ؛ d.resolve () ؛} {d.Reject () ؛} إرجاع D.Promise ؛} ؛ المعاملة. objectStore (storename) ؛ var result = store.delete (value) ؛ result.onsuccess = function (e) {d.resolve () ؛} ؛ result.onerror = function (e) {d.reject () ؛ $ q.defer () ؛ // promisegetDB (mydb.db) .Then (function (db) {var transaction = db.transaction (storename ، 'readonly') ؛ var store = transactaction.ObjectStore (storename) ؛ var result = store.opencursor () ؛ var revers event.target.result ؛ if (cursor) {results.push (cursor.value) ؛ cursor.continue () ؛} else {d.resolve (results) ؛}} ؛ result.onerror = function (e) {D.Reject () ؛} ؛}) ؛ return d.promise ؛} ؛ myusers.js (البرنامج النصي طبقة وحدة التحكم المطبق) "استخدم صارمًا" ؛ angular.module ('myapp' ، ['db']). وحدة تحكم ("USERCTRL" ، وظيفة (نطاق $ ، $ http ، jdbc) {jdbc.findall ("customer"). ثم (الدالة (استجابة) {if (! stripte) {$ http.get ("data.json"). النجاح (استجابة) {$ scope.users = reponse ؛}) ؛ return ؛} $ scope. 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.tel ؛ "" ؛ _user.lname = "" ؛ _user.telephone = "" ؛ _user.telephone = "" ؛ _user.id = "" ؛}} ؛ $ scope.deleteUser = function (id) {// refresh table data data من سجلات database jdbc.remove ("العميل" ، معرف). {console.log (data) ؛}) ؛}) ؛ data.json (المستخدمة لعرض البيانات عندما لا يمكن استرداد indexedDB بشكل طبيعي) [{"id": 1 ، "fname": "lin" ، "lname": "jiabin" ، "telephone": "13509890786"}]ما ورد أعلاه هو الوصف الكامل لـ InducedDB Bootstrap AngularJS و MVC DOMO (مثال على التطبيق) الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك!