1。INDEXEDDB（モデル） - フロントエンドブラウザオブジェクトタイプのデータベース。一般に、バックグラウンドで使用するデータベースはリレーショナルデータベースです。したがって、indexedDBの特徴は何ですか：
まず第一に、これはリテラルインデックスデータベースであり、特定のフィールドに基づいてデータを取得するためにテーブルのインデックスを作成する必要があるため、実際に使用できますが、リレーショナルデータベースでは、これは明らかに必要ありません。
第二に、行と列のデータを変換する必要はありません。アレイのようなプロセスを渡すだけです。
コードコピーは次のとおりです。
objectstore.push（data）;
JSONオブジェクトをデータベースに詰めるようなものです。それは非常に暴力的ではありませんか？
2。Bootstrap（ビュー） - ブートストラップ。正直に言うと、私はこのことにあまり精通していません。結局のところ、私はバックエンドJava開発から来ました。私の理解では、これはレスポンシブレイアウトを特徴とするフロントエンドフレームワークです。もっと特別なことは、それがより人気があるということですよね？ ！正直に言うと、私はここでCSSのみを使用しています。また、ポストモダンのフロントエンド開発ではBootstrapのJS部分は必要ないと思います。
3。AngularJS（コントローラー） - このことの誕生がフロントエンド開発に対する私の見解を完全に破壊することを認めなければなりません。私たちは、フロントエンドとバックエンドを完全に分離できないというジレンマにまだ閉じ込められていました。しかし、フロントエンドの職員が一般に応用角度のスクリプトを使用して後の段階で開発する場合（およびいくつかの類似のフレームワーク）、バックエンド開発エンジニアに多くのフロントエンドスタイル、構造などを適用できるようにする必要がなくなると思います。
このようにして、多くのバックエンド担当者がそれを理解できないかもしれません。たとえば、AngularJSの使用は、HTMLをレンダリングするJSP、Freemarkerなどに少し似ています。クライアント側にレンダリングされたものと、バックグラウンドサーバーでレンダリングされたものは1つだけです。データの構造とプロパティを変更する限り、対応するレンダリングされたページは異なります。 AngularJSは、DOMの変更ではなく、データの変更にもっと注意を払うことです。つまり、$を書き込むことはめったにありません（ "btnsave"）。クリック（function（）{}）;これには、HTMLノードのスクリプトコードを取得する必要があります。これは完全にjQueryの範囲外であると言えます。それで、これは時代の変化と見なすことができますか？
例を見てみましょう（最後にサーバーで実行する必要があります）：
user.html
< href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">< src =" http://apps.bdimg.com/libs/angular.js/1.4.6/Angular.min.js " ng-controller = "userctrl"> <div> <h3> users </h3> <table> <thead> <tr> <th>編集</th> <th>姓</th> <th </th> </tr </thead> <tbody> <ttr ng-repeat = "one in"> <td> <ボタンng-click = "edituser（one）"> <span> </span> edit </button> <button ng-click = "deleteuser（one.id）"> <span> </span> delete </button> </td> <td> {{one.fname}}}}} </td> {n.laname} {onlame} </td> </td> </td> One.telephone}} </td> </tr> </tbody> </table> <hr> <button ng-click = "edituser（）"> <span> </span>新しいユーザーの作成</button> <hr> <h3 ng-show = "edit">新しいユーザーの作成：</h3>ユーザー：</h3> <form> <div> <abol>名：</label> <div> <入力タイプ= "ng-model =" user.fname "ng-disabled ="！編集「プレースホルダー= "名"> </div> </div> <div> <label>姓：</labe> <div> <入力タイプ= " ng-disabled = "！edit" placeholder = "last name"> </div> </div> <div> <div> <abel>電話：</label> <div> <入力タイプ= "ng-model =" user.telephone "placeholder ="電話 "変更</button> </div> <src = "jdbc.js？v = 2323"> </script> <script src = "myusers.js"> </script> </body> </html>JDBC.JS（データアクセスモジュールとして、さまざまなアプリケーションでロードおよび呼び出すことができます）
'Strict'; db.CreateObjectStore（ 'customer'、{keypath： "id"、autoincrement：true}）; customer.createindex（ "Customer_fname_index"、 "fname"、{unique：true}）;}}; // Defer.Promise.Then（コールバック）がトリガーされ、Resolveは任意の変数/**** function test（）{* var defer = $ q.defer（）;* setimeout（）{* defer.Resolve（ "hello"）;*}）;* defer.promise; console.log（fay）;*}）; ** "hello"は2秒で印刷されます** @type {deferred |*}*/var defer = $ q.defer（）; _ self.onload = function（cb）{return defer.promise.then（cb）;}; {d.Resolve（db）;} //データベースを開きますvar result = window.indexeddb.open（mydb.name）; result.onerror = function（e）{console.log（ "open db error！"）; dreject（ "エラー"）;}; db; dresolve（db）;}; return d.promise; _ self.opendb = function（var d = $ q.defer（）; var name = name || name; = function（e）{console.log（ "open db error！"）; d.reject（e）;}; //正しくopen resulcess = function（e）{mydb.db = e.target.result; if（success）success（mydb.db）; d.resolve（e）;}; = e.target.result; if（upgrade）upgrade（mydb.db）; d.resolve（ "upgradeneeded"）;}; return d.promise;}; {defer.resolve（）;}、function（db）{upgrade（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.result; result; d.resolve（）;}; result.onerror = function（e）{d.reject（）;};}; d.promise;}; _ self.find = function（storeName、key、value）{var d = $ q.defer（）; // promisegetdb（mydb.db）.then（function（db）{var transaction = db.transaction（storeName、 'readonly'）; idbkeyrange.only（value）; var result = store.index（key）.opencursor（keyrange、 "next"）; var result = []; result.onuccess = function = function（var cursor = event.target.result; if（cursor）{results.push（cursor.value）; {d.resolve（results）;}}; result.onerror = function（e）{d.reject（）;};}）; _ self.put = function（var d = $ q.defer（）; 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）{d = $ q.defer（）; 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（）; （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.opencor（）; var result = sore.opencor（）; event.target.result; if（cursor）{results.push（cursor.value）; cursor.continue（）;} else {d.resolve（results）;}}; result.onerror = function（e）{derect（）;};};}）; return d.promise;}; myusers.js（Applied Controller Layer Script） 'sprict'; angular.module（ 'myApp'、['db']）。コントローラー（ "userctrl"、function（$ scope、$ http、jdbc）{//データ構造の更新、アングラーの2方向の拘束{jdbc.findall（ "customer"）。then（function（response）{if（！response）{$ http.get（ "data.json"）。成功（function（$ scope.users = response;}）;} $ scope.users = response;}）;} 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.ter.teer user.telephone;} else {_user.fname = ""; _user.lname = ""; _user.telephone = ""; _user.telephone = ""; _User.id = "";} jdbc.remove（ "customer"、id）.then（reload）;}; $ scope.savecustomer = function（）{//データベースJdbc.put（ "customer"、_user）.then（reload）;}; "lin"）。then（function（data）{console.log（data）;}）;}）; data.json（indexedDBを正常に取得できない場合にデータを表示するために使用） "13509890786"}]上記は、編集者が提起したIndexEdDB Bootstrap AngularJSおよびMVC DOMO（アプリケーションの例）の完全な説明です。それがあなたに役立つことを願っています！