knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

IndexedDB + Dexie.js で CRUDの作成。ファイルインポート可、Vue CLI版 #Vue.js #IndexedDB #Vue-cli

概要:

IndexedDB で、Dexie.js ライブラリを使用した
CRUD の作成となります。
vue-router と組み合わせて、ほぼサーバレス的な構成にできるか検討してみました。

・ブラウザ内の、LocalStorageと似ているイメージで
 データは、他のPCから利用できない為。
 オフライン機能で、何か作る場合は。良さそうでした

・開発の面では、通常DBサービス起動も不要で
 Vue-cli サービスのみで。開発できるので準備は楽でした

・Update : 2020/06/29
IndexedDBデータの エクスポート、インポート機能を追加しました。
 別PCや、外出先PCのブラウザにインポート可能になり。
 データを復元できます。バックアップ等にも利用できます

環境

Vue CLI
dexie : 3.0.1
vue: 2.6.11
vue-router

参考のコード

github.com

デモのページ

https://idx-kuc.netlify.app/#/dexie_tasks
idx-kuc.netlify.app

https://code-kuc.netlify.app/#/dexie_tasks

・上記、都合により。URL変更しました(別ドメイン)


.

npm 追加

npm install --save dexie

実装など

・db定義
db-name, store ,db-version
storeは、テーブルみたいな扱いのようです

          var db = new Dexie("friend_database");
          db.version(1).stores({
              friends: 'name,shoeSize'
          });

・書く、読み込み

          db.friends.put({name: "Nicolas", shoeSize: 8}).then (function(){
              return db.friends.get('Nicolas');
          }).then(function (friend) {
              alert ("Nicolas has shoe size " + friend.shoeSize);
          }).catch(function(error) {
             alert ("Ooops: " + error);
          });

画面

・リストの部分です
f:id:knaka0209:20200627094308p:plain

Update 2020/06/29

IndexedDB CRUDの、エクスポート/ インポート機能を追加しました。
・import画面、追加
f:id:knaka0209:20200629142025p:plain

・index、export ,importボタン追加
f:id:knaka0209:20200629142047p:plain




.