![見出し画像](https://assets.st-note.com/production/uploads/images/29826546/rectangle_large_type_2_36fb67c7ef7db85fc7ebabf37936e865.png?width=1200)
IndexedDB + Dexie.js で CRUDの作成。ファイルインポート可、Vue CLI版
■ 概要:
IndexedDB で、Dexie.js ライブラリを使用した
CRUD の作成となります。
vue-router と組み合わせて、ほぼサーバレス的な構成にできるか検討してみました。
・開発の面では、通常DBサービス起動も不要で
Vue-cli サービスのみで。開発できるので準備は楽でした
・IndexedDBデータの エクスポート、インポート機能を追加しました。
別PCや、外出先PCのブラウザにインポート可能になり。
データを復元できます。バックアップ等にも利用できます
■ 環境
Vue CLI
dexie : 3.0.1
vue: 2.6.11
vue-router
■ 画面
・リスト
・編集
・ Import
■ 参考のページ
■ 参考のコード
■ package.json
https://github.com/kuc-arc-f/vue_spa3b_1crud/blob/master/package.json
■ CRUD の参考
・create
https://github.com/kuc-arc-f/vue_spa3b_1crud/blob/master/src/components/DexieTasks/new.vue
・index
https://github.com/kuc-arc-f/vue_spa3b_1crud/blob/master/src/components/DexieTasks/Index.vue
・show
https://github.com/kuc-arc-f/vue_spa3b_1crud/blob/master/src/components/DexieTasks/show.vue
・edit
https://github.com/kuc-arc-f/vue_spa3b_1crud/blob/master/src/components/DexieTasks/edit.vue
ここから先は
IndexedDB, Vue CLI 開発の事例、ノウハウに関する記事を集めました。 ■ 免責事項 / 注記 , 内容について動作確認…
Amazonギフトカード5,000円分が当たる
この記事が気に入ったらチップで応援してみませんか?