【前端必會】使用indexedDB,降低環境搭建成本

来源:https://www.cnblogs.com/lee35/archive/2022/09/28/16736557.html
-Advertisement-
Play Games

#背景 學習前端新框架、新技術。如果需要做一些資料庫的操作來增加demo的體驗(CURD流程可以讓演示的體驗根據絲滑) 最開始的時候一個演示程式我們會調用後臺,這樣其實有一點弊端,就是增加了開發和維護成本,簡單的一個demo不應該勞師動眾 後來我會在demo中使用一些websql,奈何,websql ...


背景

  1. 學習前端新框架、新技術。如果需要做一些資料庫的操作來增加demo的體驗(CURD流程可以讓演示的體驗根據絲滑)
  2. 最開始的時候一個演示程式我們會調用後臺,這樣其實有一點弊端,就是增加了開發和維護成本,簡單的一個demo不應該勞師動眾
  3. 後來我會在demo中使用一些websql,奈何,websql也真的是沒前景了。代碼寫起來也不是特別好
  4. 下麵來介紹下今天的主角indexedDB和jsStore

介紹

  1. indexedDB可以給瀏覽器本地存儲的能力,並且容量還比較大。
  2. jsStore只是眾多封裝的indexedDB庫中的一個。可以用一種類似SQL的感覺操作數據

開始
package.json

{
  "name": "npm1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "lint": "eslint scripts/**",
    "fix": "eslint scripts/** --fix",
    "serve": "webpack serve"
  },
  "dependencies": {
    "jsstore": "^4.4.4",
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "css-loader": "^6.7.1",
    "eslint": "^8.23.1",
    "eslint-config-google": "^0.14.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "prettier": "2.7.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "author": "",
  "license": "ISC"
}

webpack配置,添加了devServer配置

//webpack.config.js
 const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  context: path.resolve(__dirname),
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    compress: true,
    port: 9000,
  },
  mode: "production",
  optimization: {
    minimize: false,
  },
  entry: "./src/main.js",
  target: ["web", "es5"],
  output: {
    clean: true,
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

jsStore鏈接幫助類,結合webpack+webworker。安裝了file-loader

//store-connection.js
 import { Connection } from "jsstore";
const getWorkerPath = () => {
  // return dev build when env is development
  if (process.env.NODE_ENV === "development") {
    return require("file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.js");
  } else {
    // return prod build when env is production

    return require("file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.min.js");
  }
};

const workerPath = getWorkerPath().default;
export const connection = new Connection(new Worker(workerPath));

主邏輯

//main.js
 import { connection } from "./store-connection";

async function init() {
  var dbName = "JsStore_Demo";
  var tblProduct = {
    name: "Product",
    columns: {
      // Here "Id" is name of column
      id: { primaryKey: true, autoIncrement: true },
      itemName: { notNull: true, dataType: "string" },
      price: { notNull: true, dataType: "number" },
      quantity: { notNull: true, dataType: "number" },
    },
  };
  var database = {
    name: dbName,
    tables: [tblProduct],
  };

  const isDbCreated = await connection.initDb(database);
  if (isDbCreated === true) {
    console.log("db created");
    // here you can prefill database with some data
  } else {
    console.log("db opened");
  }

  var value = {
    itemName: "Blue Jeans",
    price: 2000,
    quantity: 1000,
  };

  var insertCount = await connection.insert({
    into: "Product",
    values: [value],
  });

  console.log(`${insertCount} rows inserted`);

  // results will be array of objects
  var results = await connection.select({
    from: "Product",
  });

  results.forEach((item) => {
    console.log(item);
  });
}

window.addEventListener("load", function () {
  console.log(connection);
  init();
});

數據已經存進去了

API插入、查詢也沒什麼問題

總結

  1. 使用indexDB強化自己的demo體驗,避免搭建後端環境,增加複雜度
  2. jsStore 的API多瞭解下,並且涉及的indexedDB的API都是非同步的
  3. API沒有啥,主要就是打開鏈接,事務,CRUD。語法參考下官網的例子即可

https://jsstore.net/tutorial/get-started/


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 電阻種類很多,常用的有貼片電阻、插件電阻、熱敏電阻、壓敏電阻、光敏電阻、水泥電阻、可調電阻。 可調電阻在成品的PCBA中很少見,也大多用於電路調試中試用,等電路調試完成後再換成固定阻值的電阻,起到電路參數調節的作用。水泥電阻則在調試的時候會用到更多,當做假負載來使用。 這裡說下假負載,假負載並不是電 ...
  • 準備工作 一臺Linux(Centos7為例)伺服器。 安裝Docker服務。 安裝並啟動SqlServer容器服務。 編寫Shell文件 給出一個備份的範例 #!/bin/bash #設置mssql備份目錄 folder=/var/opt/mssql/data/databack/ day=`dat ...
  • 風裡雨里,我在深圳機場等你,口說無憑,上圖! 這是一段很長的故事!以前倒也不曾提過~ 銀河證券和騰訊雲資料庫長久以來並肩作戰,情比金堅,我們的故事日前在深圳寶安機場上映 他說:做好國產化分散式改造,就用騰訊雲資料庫。 我說:做國產資料庫,我是認真的。 誕生於2007年的騰訊雲資料庫現已歷經十四年的錘 ...
  • 1 導讀 數據的一致性是數據準確的重要指標,那如何實現數據的一致性呢?本文從事務特性和事務級別的角度和大家一起學習如何實現數據的讀寫一致性。 2 一致性 1.數據的一致性:通常指關聯數據之間的邏輯關係是否正確和完整。 舉個例子:某系統實現讀寫分離,讀資料庫是寫資料庫的備份庫,小李在系統中之前錄入的學 ...
  • 開心一刻 今天,她給我打來電話 她:你明天陪我去趟醫院吧 我:怎麼了 她:我懷孕了,陪我去打胎 我:他的嗎 她:嗯 我心一沉,猶豫了片刻:生下來吧,我養! 她:他的孩子,你不配養! 我:我隨孩子姓 需求背景 最近接到一個數據遷移的需求,舊系統的數據遷移到新系統;舊系統不會再新增業務數據,業務操作都在 ...
  • 本文主要記錄了關於fragment的四種跳轉方式: 1、從同一個Activiy的一個Fragment跳轉到另外一個Fragment 2、從一個Activity的Fragment跳轉到另外一個Activity 3、從一個Activity跳轉到另外一個Activity的Fragment上4、從一個Act ...
  • 在Xcode 項目執行:Run Script 時,則標識:${SYMROOT} . 更改括弧類型。 例如:BUILD 號自增,編譯完成後自動copy 某文件至目標文件夾等: cp -R ${BUILD_DIR}/${CONFIGURATION}-iphoneos/XXXX.bundle ${SRCR ...
  • 一、CSS選擇器 1、標簽選擇器 選中所有的該標簽 標簽名 { CSS屬性名:屬性值;} 2、類選擇器 .類名 { CSS屬性名:屬性值;} 所有標簽都有class屬性,class屬性的屬性值稱為類名 類名可以由數字、字母、下劃線、中劃線組成,但不能以數字或中劃線開頭 一個標簽可以有多個類名,類名之 ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...