Wie schreibe ich SQL in js

Im sich ständig verändernden Front-End-Bereich können Front-End-Ingenieure immer mehr Dinge tun. Seit dem Aufkommen von NodeJS hat das Front-End zunehmend die Tendenz, das traditionelle Back-End-Leben zu revolutionieren . Dieser Artikel wird ein weiteres Detail hinzufügen, wie man Standard-SQL-Anweisungen in js-Code ausführt.

Warum sollten wir SQL in js schreiben?

Mit zunehmender Geschäftskomplexität können einige Seiten mit komplexer Datenlogik auf der Front-End-Seite erscheinen, die komplizierter zu verarbeiten ist:

Zum Beispiel liegt die Schwierigkeit in einer Produktschnittstelle mit mehreren Spezifikationen und mehreren Lagerbeständen in der komplexen logischen Beziehung zwischen Farbklassifizierung, Größe, Preis, Lagerbestand, Kauflimitmenge und Entsprechende Bildanzeige. Bei der Auswahl muss js viele komplexe Abfragen durchlaufen, um das Ergebnis zu berechnen

Zum Beispiel in der regionalen Verknüpfung Die Schwierigkeit besteht darin, die Schnittstelle abzufragen:

1. Wie werden regionale Daten jedes Mal abgerufen, wenn sie im Speicher gespeichert werden? , eine Zeichenfolge ähnlich wie JSON.parse muss in ein Array oder einen Objektprozess konvertiert werden. Wenn die Datenmenge groß ist, führt dieser Vorgang zum Einfrieren der Seite und zu einer extrem schlechten Leistung

2. Die dreistufige regionale Verknüpfungsabfrage ist kompliziert. Wenn Sie eine Abfrage von einer Region auf Kreisebene zu den entsprechenden Städten und Provinzen durchführen möchten, ist die Logik komplizierter

---

Wenn die beiden oben genannten Beispiele mit traditioneller JS-Logik geschrieben sind, muss jeder sie bereits in seinem Kopf entworfen haben. Algorithmen verwenden zwangsläufig verschiedene neue ES678-Methoden wie forEach, filter, some, find usw. Der Autor hat auch verschiedene verwendet Coole neue Methoden zum Ausschreiben und zwei Probleme gefunden:

1. Nach dem Schreiben ist die Logik sehr kompliziert und es scheint, dass sie ohne 100 Zeilen Code nicht implementiert werden kann (Natürlich gibt es Experten, die es besser können als ich)

2. Selbst nachdem ich viele Kommentare geschrieben habe, können Kollegen es nicht sehen. Ich bin immer noch verwirrt (weil die Logik so ist). wirklich kompliziert...)

Der Autor hat eine Weile PHP-Entwicklung betrieben (auch PM, UI, QA usw. gemacht) und dachte plötzlich: Kann es implementiert werden? mit SQL? Nach einigen Recherchen hat der Autor eine solche Bibliothek geschrieben:

Database.js

Database.js basiert auf einer Web-SQL-Datenbank. Was ist also eine Web-SQL-Datenbank?

Web SQL Database ist der erste offizielle Entwurf, der im Januar 2008 von der WHATWG (Web Hypertext Application Technology Working Group, dem Antragsteller des HTML5-Entwurfs) vorgeschlagen wurde, aber nicht in HTML 5 enthalten ist Bei der Spezifikation handelt es sich um eine unabhängige Spezifikation, die eine Reihe von APIs für den Betrieb von Clientdatenbanken mit SQL einführt. Obwohl das W3C im November 2011 offiziell erklärt hatte, dass es die Web-SQL-Datenbank-Spezifikation nicht länger beibehalten würde, wurden diese APIs bereits früher vorgeschlagen und in verschiedenen Browsern, insbesondere mobilen Browsern, weithin implementiert.

Kompatibilität

Was ist der Unterschied zwischen Web SQL-Datenbank und indizierter Datenbank?

Indexed Database ähnelt beim Betrieb der Datenbank eher NoSQL. Das Wichtigste ist, dass Indexed Database kein SQL als Abfragesprache verwendet.

Um die Notwendigkeit zu erkennen, SQL in js zu schreiben, hat der Autor ersteres entschieden als zugrunde liegende Technologie übernommen.

Web SQL Database drei Kernmethoden:

• openDatabase: Diese Methode verwendet eine vorhandene Datenbank oder eine neue Datenbank, um ein Datenbankobjekt zu erstellen

• transaction: Mit dieser Methode können wir die Übermittlung oder das Rollback von Transaktionen je nach Situation steuern

• executeSql: Diese Methode wird zum Ausführen von SQL-Abfragen verwendet

Codebeispiel:

var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
    var msg;
    db.transaction(function (context) {
       context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
       context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
       context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
       context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
     });

Für Frontend-Studenten ohne SQL-Erfahrung sieht der obige Code wie folgt aus: Etwas ungewohnt und ungewohnt, also wurde Database.js geboren:

Der Autor gab ein Beispiel für einen Bedarf im Geschäft: Zhuanzhuan-SpielegeschäftslistenseiteDas Filtermenü ist ein dreistufiges Verknüpfungsmenü. Jede Menüänderung wirkt sich auf andere Menüdaten aus, wie in der Abbildung gezeigt:

Original JSON-Datenstruktur

Es ist ersichtlich, dass es sich um eine dreistufige verschachtelte Struktur handelt. Der Autor hat sie in eine flache Datenstruktur verarbeitet (der Prozess wird weggelassen). und speicherte es in drei Datenbanken, in denen jeweils Spielnamen, Spielplattformen und Produkttypen gespeichert wurden, wie unten gezeigt:

Die Datenstruktur für Spielnamen ist beispielsweise wie folgt unten:

通过chrome控制台Application面板可以直接看到数据库，结构、数据清晰可见

核心代码如下：

/**
       * 打开数据库
       * @returns {Promise.<void>}
       */
      openDataBase(){
        //打开数据库，没有则创建
        db.openDatabase(&#39;GameMenu&#39;,1,&#39;zzOpenGameMenu&#39;).then(res=>{
          //检测数据库是否存在
          db.isExists(&#39;game&#39;).then(res=>{
            //数据库已经存在，直接使用,将数据交付给页面UI组件
            this.setSelectData()
          }).catch(e=>{
            //数据库不存在，请求接口并处理数据，然后存入数据库
            this.getData()
          })
        }).catch(e=>{
          console.err(e)
        })
      },
     /**
       * 获取分类数据并存储到数据库
       * @returns {Promise.<void>}
       */
      async getData(){
        //接口请求数据并处理成三个扁平数组
        let data =  await this.getMenuData()
        for(let i in data){
          //创建表并存储数据
          db.create(i,data[i])
        }
        //将数据交付给页面UI组件
        this.setSelectData()
      },

当任意菜单选择变更时，三列数据将重新查询，核心代码如下：

/**
       * 重新查询数据
       * @param data 点击菜单携带的数据
       * @param index 点击菜单的序号
       * @param all 三个菜单当前选中数据
       */
      async onSelect(data,index,all){
        let target = [],condition = {}
        //业务逻辑：处理查询条件
        if(all['0'] && all['0']['name']!=defaultData[0].default.name)condition['gameName'] = all['0']['name']
        if(all['1'] && all['1']['name']!=defaultData[1].default.name)condition['platName'] = all['1']['name']
        if(all['2'] && all['2']['name']!=defaultData[2].default.name)condition['typeName'] = all['2']['name']

        //创建三个查询任务
        let tasks = ['game','plat','type'].map((v,k)=>{
            //使用db.select方法查询
            return db.select(v,this.formatCondition(v,condition),'name,value','rowid desc','name').then((res)=>{
              target.push({
                options:res.data,
                defaultOption:defaultData[k].default,
                clickHandle:this.onSelect
              })
            })
        })
        //执行查询
        await Promise.all(tasks)
        //将数据交付给联动菜单组件使用
        this.selectData = target
      }

以上代码即可完成联动菜单所需要的数据管理工作，看起来是不是比较清晰？

---

使用Database.js的优势

1.将数据结构化存储于Storage中，避免了以文本形式存入Storage或cookie中再解析的性能消耗流程。

2.将复杂数据清晰的在前端进行管理和使用，代码逻辑更清晰，数据查询更简洁！

Database.js使用文档

openDatabase

• 功能：打开数据库，不存在则创建

• 语法：openDatabase(dbName,dbVersion,dbDescription,dbSize,callback)

• 参数：

• dbName：数据库名

• dbVersion：数据库版本（打开已存在数据库时，版本号必须一致，否则会报错）

• dbDescription：数据库描述

• dbSize：数据库预设大小，默认1M

• callback：回调函数

query

• 功能：执行sql语句，支持多表查询

• 语法：query(sqlStr,args = [],callback,errorCallback)

• 参数：

• sqlStr：sql语句

• args（Array）：传入的数据，替换sql中的?符号

• callback:成功回调

• errorCallback：失败回调

1   //插入数据
2   db.query('INSERT INTO testTable(id,title) VALUES (?,?)',[1,'这是title'])
3 
4   //多表查询
5  db.query('select game.*,plat.* from game left join plat on game.name = plat.gameName')

isExists

• 功能：检测表是否存在

• 语法：isExists(tableName)

• 参数：

• tableName：表名

createTable

• 功能：创建一张表

• 语法：createTable(tableName,fields)

• 参数：

• tableName：表名

• fields：表结构(需指定字段类型)

• 示例  

                1   db.createTable('testTable',{
        2       name:'varchar(200)',
        3       price:'int(100)'
        4   })

insert

• 功能：插入一条或多条数据

• 语法：insert(tableName,data)

• 参数：

• tableName：表名

• data（Object or Array）：插入的数据，多条数据请传入数组类型

• 示例： javascript //插入单条 db.insert('testTable',{ name:'商品1', price:10 }) //插入多条 db.insert('testTable',[ {name:'商品1',price:10}, {name:'商品2',price:20}, {name:'商品3',price:30}, ])

将数据存入数据库的常规流程是先createTable，然后再insert，如果你觉得这样麻烦，可以试一下create方法：

create

• 功能：直接创建数据库并存入数据

• 注意：类库会根据传入的数据类型自动设置数据库的字段类型，这样可以覆盖大多数需求，但如果你的数据中，同一个字段中有不同的数据类型，有可能不能兼容，建议还是使用常规流程手动设置类型

• 语法：create(tableName,data)

• 参数：

• tableName：表名

• data（Object or Array）：插入的数据，多条数据请传入数组类型

• 示例：

1   //插入数据
2   db.query('INSERT INTO testTable(id,title) VALUES (?,?)',[1,'这是title'])
3
4   //多表查询
5  db.query('select game.*,plat.* from game left join plat on game.name = plat.gameName')

delete

• 功能：删除数据

• 语法：delete(tableName,condition)

• 参数：

• tableName：表名

• condition（String or Obejct）：查询条件

• 示例：

1       //删除一条数据
2       db.delete('testTable',{name:'商品1'})

关于condition： 1、传入array形式时，默认查询条件连接方式是AND，如果需要用OR等方式，可以在condition中传入logic设定，例如{logic：'OR'} 2、如果查询条件有AND、OR等多种方式，建议使用string方式传入

select

• 功能：查询数据

• 注意：如果需要多表查询，可参照query方法

• 语法：select(tableName,condition = '',fields = '*',order = '',group = '',limit = '')

• 参数：

• tableName：表名

• condition（String or Obejct）：查询条件

• fields（String or Array）：返回字段，默认*，支持distinct

• order（String or Array）：排序规则

• group（String or Array）：分组规则

• limit（String or Array）：分页规则

• 示例：

  
  

  1 //查询name=商品1的数据，并按照price倒序

**update**
- 功能：更新数据
- 语法：update(tableName,data,condition = '')
- 参数：
    - tableName：表名
    - data（String or Obejct）：更改数据
    - condition（String or Obejct）：查询条件
- 示例：

1       //将商品1的价格改为99
2       db.update('testTable',{
3             price:99
4         },{
5             name:'商品1'
6         })

truncate

• 功能：清空表

• 语法：truncate(tableName)

• 参数：

• tableName：表名

drop

• 功能：删除表

• 语法：drop(tableName)

• 参数：

• tableName：表名

Das obige ist der detaillierte Inhalt vonWie schreibe ich SQL in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!