knaka Tech-Blog

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

IndexedDB + Vue CLI, markdown対応のtodo機能。ファイルインポート可 #Vue.js #IndexedDB #Vue-cli

概要:

前と同様、IndexedDB + Vue CLI
Dexie.js ライブラリを使用した構成となります。

RDB, APIサービス等を使用しない。
ブラウザ側の IndexedDBにデータ保存する。シンプル構成となります。

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

環境

Chrome 83
Vue CLI
dexie : 3.0.1
vue: 2.6.11
vue-router
marked: 1.1.0

画面

・詳細
f:id:knaka0209:20200627184009p:plain

・リスト
f:id:knaka0209:20200627184021p:plain

参考のコード

github.com

デモのページ

・netlify様の、無償プラン
https://idx-kuc.netlify.app/#/dexie_todos

idx-kuc.netlify.app

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

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

.

Update 2020/06/29

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

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

参考のページ

knaka0209.hatenablog.com





.