【前端必会】使用indexedDB,降低环境搭建成本
背景
- 学习前端新框架、新技术。如果需要做一些数据库的操作来增加demo的体验(CURD流程可以让演示的体验根据丝滑)
- 最开始的时候一个演示程序我们会调用后台,这样其实有一点弊端,就是增加了开发和维护成本,简单的一个demo不应该劳师动众
- 后来我会在demo中使用一些websql,奈何,websql也真的是没前景了。代码写起来也不是特别好
- 下面来介绍下今天的主角indexedDB和jsStore
介绍
- indexedDB可以给浏览器本地存储的能力,并且容量还比较大。
- 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插入、查询也没什么问题
总结
- 使用indexDB强化自己的demo体验,避免搭建后端环境,增加复杂度
- jsStore 的API多了解下,并且涉及的indexedDB的API都是异步的
- API没有啥,主要就是打开链接,事务,CRUD。语法参考下官网的例子即可
https://jsstore.net/tutorial/get-started/
【前端必会】使用indexedDB,降低环境搭建成本的更多相关文章
- 前端(二十三)—— Vue环境搭建
目录 一.Vue环境搭建 一.Vue环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\n ...
- 前端框架vue学习笔记:环境搭建
兼容性 不兼容IE8以下 Vue Devtools 能够更好的对界面进行审查和调试 环境搭建 1.nodejs(新版本的集成了npm)[npm是node包管理 node package manager ...
- php、前端开发(网站建设)环境搭建
php集成开发环境wampserver,是一款免费开源的软件,下载地址http://www.wampserver.com,由于是国外的网站,打开速度慢,根据自己的电脑选择32位/64位的系统下载.
- 前端学习日记-vue cli3.0环境搭建
卸载老版本的 vue-cli : npm uninstall vue-cli -g 安装新版本的 : npm install -g @vue/cli --安装新版本cli 同时nodeJS 要更新至 ...
- 【定有惊喜】android程序员如何做自己的API接口?php与android的良好交互(附环境搭建),让前端数据动起来~
一.写在前面 web开发有前端和后端之分,其实android还是有前端和后端之分.android开发就相当于手机app的前端,一般都是php+android或者jsp+android开发.androi ...
- windows下vue+webpack前端开发环境搭建及nginx部署
一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...
- Vue + Spring Boot从零开始搭建个人网站(一) 之 项目前端Vue.js环境搭建
前言: 最近在考虑搭建个人网站,想了想决定采用前后端分离模式 前端使用Vue,负责接收数据 后端使用Spring Boot,负责提供前端需要的API 就这样开启了我边学习边实践之旅 Vue环境搭建步骤 ...
- vue前端+java后端 vue + vuex + koa2开发环境搭建及示例开发
vue + vuex + koa2开发环境搭建及示例开发 https://segmentfault.com/a/1190000012918518 vue前端+java后端 https://blog.c ...
- 前端开发 Vue -1windows环境搭建Vue Node开发环境
解决几个疑问: 想学习下vue.js,我理解的它是一个前端的框架,主要作用是对数据的处理,和juqery类似,所以不太理解为什么要在nodejs中npm install vue呢?在html文件中引入 ...
随机推荐
- 【每天学一点-03】 使用Html5+Less实现简单的静态登录界面(入门Less)
1.首先引用Less 有npm安装.cdn引用.或者下载Less.js本地引用,我采用的是第三种方法 less.js引用: 下载地址:https://github.com/less/less.js/t ...
- Thread类的常用方法_sleep和创建多线程程序的第二种方式实现Runnable接口
public static void sleep(long millis);//使当前正在执行的线程以指定的毫秒数暂停(暂时停止执行). 毫秒数结束后线程继续执行 package com.yang.T ...
- Vue 计算属性 && 监视属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- linux 磁盘io利用率高,分析的正确姿势
一.背景简介 作为一个DBA难免不了会遇到性能问题,那么我们遇到性能问题该如何进行排查呢?例如我们在高并发的业务下,出现业务响应慢,处理时间长我们又该如何入手进行排查,本片文章将分析io高的情况下如何 ...
- Luogu2018 消息传递 (树形DP)
贪心优先子树较多者. #include <iostream> #include <cstdio> #include <cstring> #include <a ...
- 深入分析FragmentPagerAdapter和FragmentStatePagerAdapter
最近遇到比较奇怪的bug,TableLayout+ViewPager实现点击顶部tab切换viewpager视图.但是在Viewpager设置dapter时,最开始设置的是FragmentPagerA ...
- ipi发送阻塞导致crash
3.10的内核, 在子进程退出的时候,发送信号通知父进程,此时是持有父进程的sighand中的spinlock的,然后父进程和该子进程不在一个核上,发送ipi的reschedule中断给对应的核, 但 ...
- [CF1515F] Phoenix and Earthquake(图论推导,构造)
题面 在紧张又忙碌地准备联合省选时,发生了大地震,把原本要参赛的 n n n 个城市之间的全部 m m m 条道路震垮了,使得原本互相都能到达的这 n n n 个城市无法交通了.现在,需要紧急恢复 n ...
- 【java】学习路径21-基本类型的包装类
int i =100; //Integer i2 = new Integer(100); //我们发现已被弃用,现在我们一般的方法是使用valueOf Integer i2 = null; i2 = ...
- 应用性能监控:SkyWalking
目录 SkyWalking 简介 SkyWalking 搭建 平台后端(Backend) 平台前端(UI) Java Agent(Java 应用监控) Java Agent 下载 Java 演练项目 ...