1. INDEXEDDB (모델) -프론트 엔드 브라우저 객체 유형 데이터베이스. 일반적으로 백그라운드에서 사용하는 데이터베이스는 관계형 데이터베이스입니다. 따라서 indexeddb의 특성은 무엇입니까?
우선, 그것은 문자 그럴 인덱스 데이터베이스로, 특정 필드를 기반으로 데이터를 얻기 위해 테이블의 색인을 생성하는 데 필요한 실제 사용에 반영 될 수 있지만 관계형 데이터베이스에서는 분명히 필요하지 않습니다.
둘째, 행과 열 데이터를 변환 할 필요가 없으며 배열과 같은 프로세스를 전달하면됩니다.
코드 사본은 다음과 같습니다.
ObjectStore.push (데이터);
JSON 객체를 데이터베이스에 채우는 것과 비슷합니다. 매우 폭력적이지 않습니까?
2. 부트 스트랩 (보기 ) - 부트 스트랩. 솔직히 말해서, 나는이 일에 익숙하지 않습니다. 결국, 나는 백엔드 Java 개발에서 왔습니다. 내 이해에 따르면, 이것은 반응 형 레이아웃이 특징 인 프론트 엔드 프레임 워크입니다. 더 특별한 것은 더 인기가 있어야합니다. ! 솔직히 말해서, 나는 여기에서만 CS를 사용하고 있으며, 포스트 모던 프론트 엔드 개발에는 부트 스트랩의 JS 부분이 필요하지 않다고 생각합니다. 결국 그것은 여전히 jQuery 기반 접근법입니다.
3. AngularJS (컨트롤러) -이 일의 탄생이 프론트 엔드 개발에 대한 나의 견해를 완전히 전복 시킨다는 것을 인정해야합니다. 우리는 여전히 프론트 엔드와 백엔드를 완전히 분리 할 수 없다는 딜레마에 갇혀있었습니다. 그러나 프론트 엔드 직원이 일반적으로 적용된 AngularJS 스크립트를 사용하여 후반 단계 (및 일부 유사한 프레임 워크)에서 개발하는 경우 더 이상 백엔드 개발 엔지니어가 많은 프론트 엔드 스타일, 구조 등을 적용 할 필요가 없을 것입니다.
이런 식으로 많은 백엔드 직원이 이해하지 못할 수도 있습니다. 예를 들어, AngularJS의 사용은 HTML을 렌더링하는 JSP, 프리 마커 등과 비슷합니다. 클라이언트쪽에 렌더링되고 다른 하나는 백그라운드 서버에서 렌더링됩니다. 데이터의 구조와 속성을 변경하는 한 해당 렌더링 된 페이지가 다릅니다. AngularJS는 DOM 변경보다는 데이터 변경에 더 많은주의를 기울이는 것입니다. 즉, $ ( "btnsave")를 거의 쓰지 않습니다. 클릭 (function () {}); 이를 위해서는 HTML 노드의 스크립트 코드를 얻어야합니다. 이것은 완전히 jQuery의 범위를 벗어 났다고 말할 수 있습니다. 그래서 이것은 시대의 변화로 간주 될 수 있습니까?
예를 들어 봅시다 (결국 서버에서 실행해야 함) :
user.html
<! docType html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport"content = "width = device-width"/> <!-새로운 부트 스트랩 코어 CSS 파일-> <link rel = "Stylesheet" href = "// cdn.bootcss.com/bootstrap/3.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> </tr> </th> </tr> </thead> <tbody> <ttr ng-repeat = "in us in us in us in us <td> ng-click = "edituser (one)"> <span> </span> 편집 </button> <button ng-click = "deleteuser (one.id)"> <span> </span> delete </td> <td> {one.fname}} </td> <td> {{one.lname}}}}}}} One.telephone}} </td> </tr> </tbody> </table> <hr> <button ng-click = "edituser ()"> <span> </span> 새 사용자 생성 </buttong user : </h3> <form> <div> <label> 이름 : </label> <div> <input type = "text"ng-model = "user.fname"ng-disabled = "! edit"placeholder = "이름"> </div> <div> <div> <input type = "ng-model" "user.lname" ng-disabled = "! edit"placeholder = "성"> </div> </div> <div> <label> 전화 : </label> <div> input type = "tel"ng-model = "user.telephone"placeholder = "전화"> </div> </div> </form> <hr> </dg click = "savecustomer ()" "> span> 변경 </button> </div> <script src = "jdbc.js? v = 2323"> </script> <script src = "myusers.js"> </script> </body> </html>JDBC.JS (다양한 응용 프로그램에서로드 및 호출 할 수있는 데이터 액세스 모듈로서)
'Strict';! DB.CreateObjectStore ( '고객', {kyypath : "id", autoincrement : true}); customer.createindex ( "customer_fname_index", "fname", {}}}}; DEFER.PROMISE.THEN (CALLBACK)이 트리거되고 Resolve는 변수/**** 기능 test () {* var defer = $ q.defer ();* settimeout (2000, function () {* defer.resolve ( "hello");* return defer.promise;*} ** test (). console.log (say);*}); ** "hello"는 2 초 안에 인쇄됩니다 ** @type {deferred |*}*/var defer = $ q.defer (); _ self.onload = function (cb) {return defer.promise.then (cb); var getdb = function (db) {q.defer (db)); {d.resolve (db);} // 데이터베이스 var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var (e) {console.log ( "열기 db error!"); d.reject ( "error");}; // olop result.onsuccess = function (e) e. db; db); return d.promise;}; _ self.opendb = 함수 (이름, 버전, 성공, 업그레이드) {var d = $ q.defer (); var version = version | var var var result = indecor renate. function (e) {console.log ( "Open db error!"); d.reject (e);}; // 올바르게 열기 결과 result.onsuccess = function (e) {mydb.db = e.target.result; if (성공) 성공 (mydb.db); d.resolve (e);}; mydabase change. = e.target.result; if (업그레이드) 업그레이드 (mydb.db); d.resolve ( "업그레이드 된");}; return d.promise;}; var schema = function (schema) {angular.foreach, 함수 (업그레이드, 버전, o) {_self.opendb (mydb.name,) function (db) {upgrade (db);});})}; schema (mydb.schema); _ self.get = function (var d = $ q.defer (); transaction.objectStore (storename); var result = stor.get (key); result.onsuccess = function (e) {_self.result = e.target.result; d.resolve ();}; result.onerror = function (e) {d.reject ();};};}); return d.promise;}; funct.find (stroename) = $ q.defer (); // promisegetdb (mydb.db) .then (function (db) {var transaction = db.transaction (storeName, 'readOnly'); var store = transaction.objectStore (StoreName); var keyrange = idbkeyrange.only (values = rest = next = key range); " []; result.onsuccess = function (event) {var cursor = event.target.result; if (cursor) {results.push (cursor.value); cursor.continue ();} else {resolve (result); result.onerror = function (e);};}); d.promise;}; _ self.put = function (storename, value) {var d = $ q.defer (); var db = mydb.db || {store.put (value); d.resolve ();} else {d.reject ();} return d.promise;}; _ self.remove = function (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.reject ();}; return d.promise; _ self.findall = function (storename) {storename. $ q.defer (); // promisegetdb (mydb.db) .then (function (db) {var transaction = db.transaction (storeName, 'readOnly'); var store = transaction.objectSor (storeName); var result = store.opencursor (); var results = []; var cursuccess = function) event.target.result; if (cursor) {results.push (cursor.value); cursor.continue ();} else {d.resolve (result);}}; result.onerror = function (e) {d.reject ();};}); return d.promise;}); myusers.js (Applied Controller Layer Script) 'Strict'; Angular.Module ( 'myApp', [ 'db']). 컨트롤러 ( "UserCtrl", 함수 ($ scope, $ http, jdbc) {// 데이터 구조를 새로 고치면 AngularJS의 양방향 바인딩이 자동으로 작동하는 데 도움이됩니다 () {jdbc.findall ( "customer"). 다음 (함수 (응답) {if (! response) {$ http.get ( "data.json"). success (function (function (function (function (respone) {$ scope.users = responsk;});} $ scope.users = responsk;}); 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;} else {_user.fname = "; jdbc.remove ( "Customer", id) .then (Reload);}; $ scope.saveCustomer = function () {// 데이터베이스 JDBC.PUT ( "Customer", _USER)에서 레코드를 추가하거나 업데이트 한 후 테이블 데이터를 새로 고침합니다. "lin"). 그런 다음 (함수 (data) {console.log (data);});}); data.json (IndexedDB를 정상적으로 검색 할 수없는 경우 데이터를 표시하는 데 사용) [{ "id": "fname": "lin", "linam": "jiabin", "전화": "13514087953"}, { "id": "fname": "lname": "xiao", "" ": "13509890786"}]위의 내용은 편집기가 가져온 IndexedDB Bootstrap AngularJS 및 MVC Domo (응용 프로그램 예)에 대한 전체 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다!