wosql: WOSQL意为：without any sql but work like databases或者可以称之为喔！sql 前端直接进行一些对于数据的操作，前端无需关心数据库操作等问题，专心使用核心：WOTable类进行数据的增删改查操作，并且数据永久存在于你的电脑上，除非手动清除，当你想要在任意其他位置，甚至是新的文件，新的项目中也能使用某个项目设置好的数据，多个项目达到数据同步

# WOSQL

- maker：syf20020816@outlook.com
- docName：WOSQL README
- createDate：20230216
- updateDate：20230227
- version：0.2.0
- des-tag：测试版本(test-version)
- email：syf20020816@outlook.com

## 介绍（Introduction）

WOSQL意为：without any sql but work like databases或者可以称之为喔！sql

前端无需关心数据库操作等问题，专心使用核心：WOTable类或WODoc进行数据的增删改查操作，并且数据永久存在于你的电脑上，除非手动清除，当你想要在任意其他位置，甚至是新的文件，新的项目中也能使用某个项目设置好的数据

请记住一句话：WOSQL不是数据库，而是基于浏览器本地存储的模拟数据库框架，它虽然可以帮助我们在前端实现数据库的效果，但最核心是帮助真实的数据库工作的辅助者

![image-20230227204400560](D:\个人项目\DIY\SpringCloud\wosql\wosql\packages\wosql\README\imgs\image-20230227204400560.png)

### 注意点

我们支持的数据量为<5MB

关系型：支持存储`string|number`， 不支持直接存储图片，音频，等数据（通过base64转码后存储）

非关系型：支持存储任何可序列化的数据

小型练手项目可使用它模拟数据库操作，中大型项目可使用它辅助真实数据库工作

## 版本更新说明(update introduction)

| 版本(version)         | 0.2.0        |
| --------------------- | ------------ |
| 版本说明(version tag) | 测试版(test) |
| 更新时间(update date) | 20230227     |
| 技术(technology)      | TS           |

历史更新点(update points)：

1. 支持无框架使用，即无任何如react，vue...框架的简单项目使用 （0.1.0）
1. 支持JS简易使用，无需指定类型，直接导出WOTable类直接使用（0.1.0）
1. 支持第二种无框架使用方式，拜托资源服务器限制（0.1.1）
1. 整体架构升级（0.2.0）
1. 增加WODoc模拟非关系型数据库类（0.2.0）
1. 优化工程文件层级（0.2.0）
1. 项目核心改变（0.2.0）

## 安装(install)

### npm 安装（npm install）

```bash
npm i wosql
```

### 无框架安装

```
//0.2.0前
index.js直接导入使用module方式
index_easy.js直接导入使用src方式加载
//0.2.0开始
index_doc|table_版本号.js直接导入使用module方式
index_doc|table_easy_版本号.js直接导入使用src方式加载
```

![image-20230218194138207](.\README\imgs\image-20230218194138207.png)

找到index.js进行复制

![image-20230218194246306](.\README\imgs\image-20230218194246306.png)

放置到文件夹中

![image-20230218194336308](.\README\imgs\image-20230218194336308.png)

### 无框架安装2

与无框架第一种不同的是，这种方式采用`<script src="./index_easy.js"></script>`方式进行导入，无需使用import语句，无需VSCode插件LiveServer

注意这里我们需要使用的是:**index_easy.js**!

## 使用(use)

### 框架

```vue
<script lang="ts" setup>
import { WOTable, WODoc } from 'wosql'
</script>
```

### 无框架方式1

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="module">
      import { WOTable } from './index_table_0.2.0.js'
      import { WODoc } from './index_doc_0.2.0.js'
    </script>
  </body>
</html>
```

### 无框架方式2

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./index_table_easy_0.2.0.js"></script>
    <script src="./index_doc_easy_0.2.0.js"></script>
    <title>Document</title>
  </head>
  <body>
    <script>
    </script>
  </body>
</html>
```

## QuickStart

### 框架

#### use WOTable

```vue
<script lang="ts" setup>
import { WOTable } from 'wosql'

/**
 * 设置表的存储字段列 如下：
 * -------------
 * |id|username|
 * |--|-------|
 * -------------
 */
let l: Array<tools.Column> = [
  {
    name: 'id',
    type: 'number'
  },
  {
    name: 'username',
    type: 'string'
  }
]

let l2: Array<tools.Column> = [
  {
    name: 'id2',
    type: 'number'
  },
  {
    name: 'username2',
    type: 'string'
  }
]
//设置表的行数据
let n = {
  id: 1,
  username: 'lsi'
}
let n1 = {
  id: 2,
  username: 'zhangsan'
}
let n2 = {
  id: 100,
  username: 'z0000n'
}
//创建并初始化表
let table = new WOTable('test', l)
let table2 = new WOTable('ceshi', l2)
//表添加数据
table.enhanceAdd(n)
table.enhanceAdd(n1)
/**
 * 表如下：
 * -------------
 * |id|username|
 * |1|lsi|
 * |2|zhangsan|
 * -------------
 */
table2.enhanceAdd(n2)
//获取单列数据集
console.log(table.enhanceGetColumn('id'))
//获取多列数据集
console.log(table.enhanceGetColumns(['id', 'username']))
//修改某一行数据
table.enhanceChange(0,{id: 100,username:'wangwu'})
//获取当前表的数据，Map-->Object方便使用
console.log(table.enhanceGetData())
//获取索引值为1的行的所有数据
console.log(table.enhanceGetRow(1))
//删除第1行数据，传入参数为索引值
table.enhanceDelete(0)
//清空表中的数据
table.enhanceClear()
//获取表，表名称为：test
console.log(WOTable.enhanceGet('test'))
//获取所有的表
console.log(WOTable.selectAllTables())
//删除数据库中的所有表
WOTable.enhanceDestory()   
//删除test表    
WOTable.destoryTable('test')
</script>
```

#### use WODoc

```vue
<script lang="ts" setup>
import {  WODoc } from 'wosql'
let doc = new WODoc('testDoc')
let d = [
  {
    id: 1,
    name: 'zhangsan'
  },
  {
    sex: '男',
    pwd: 'sssssss'
  }
]

let d2 = 'wosql-test-doc'

if (WOTool.canJson(d)) {
  //将文档数据添加入WODoc（顺序添加）
  doc.enhanceAdd(d, '1')
  doc.enhanceAdd(d2, '2')
  //将文档数据添加入WODoc（指定索引位置）
  doc.enhanceAddByIndex(0, d2, '3')
}
console.log(doc)
//获取id为1的文档
console.log(doc.enhanceGet('1'))
//获取索引为1的文档
console.log(doc.enhanceGetByIndex(1))
//修改id为1的文档
console.log(doc.enhanceChange('1', 56))
//修改索引为0的文档
console.log(doc.enhanceChangeByIndex(0, 'nihao'))
//删除id为1的文档
console.log(doc.enhanceDelete('1'))
//删除索引为1的文档
console.log(doc.enhanceDeleteByIndex(1))
//获取存储当前文档的容器
console.log(doc.getDocContainer())
</script>
```

### 无框架方式1（VSCode-Live Server）

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>
  </head>
  <body>
    <script type="module">
      import { WOTable } from './index_table_0.2.0.js'
      import { WODoc } from './index_doc_0.2.0.js'
      let l = [
        {
          name: 'id',
          type: 'number'
        },
        {
          name: 'username',
          type: 'string'
        }
      ]
      let n = {
        id: 1,
        username: 'lsi'
      }
      let table = new WOTable('test', l)
      table.enhanceAdd(n)
      console.log(table)
      console.log(WOTable.enhanceGet('test'))
    </script>
  </body>
</html>

```

### 无框架方式2（script-src）

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./index_table_easy_0.2.0.js"></script>
    <script src="./index_doc_easy_0.2.0.js"></script>
    <title>Document</title>
  </head>
  <body>
    <script>
      import { WOTable } from './index.js'
      let l = [
        {
          name: 'id',
          type: 'number'
        },
        {
          name: 'username',
          type: 'string'
        }
      ]
      let n = {
        id: 1,
        username: 'lsi'
      }
      let table = new WOTable('test', l)
      table.enhanceAdd(n)
      console.log(table)
      console.log(WOTable.enhanceGet('test'))
    </script>
  </body>
</html>
```

白嫖圣手fly/wosql

简介

发行版

贡献者

近期动态

白嫖圣手fly/wosql .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

白嫖圣手fly/wosql