背景

團(tuán)隊(duì)研發(fā)了一個(gè) 「低代碼工具」，主要應(yīng)用在公司的業(yè)務(wù)上，用于解決一些重復(fù)低效的工作，提高開(kāi)發(fā)效率，降低開(kāi)發(fā)成本。工具的頁(yè)面在 相關(guān)文章 中有，在此就不貼圖啦。

哪些是低效重復(fù)的工作？比如：

• 簡(jiǎn)單的增刪改查
• 字段與頁(yè)面的綁定，比如某些管理類(lèi)型的頁(yè)面，一個(gè)表單動(dòng)不動(dòng)上百個(gè)字段，邏輯簡(jiǎn)單，但全是搬磚的活。
• 不舉例子了，太多啦

工具提供了什么能力？

• 快速根據(jù)數(shù)據(jù)庫(kù)表、API接口、元數(shù)據(jù)平臺(tái)接口、mock接口生成增刪改查頁(yè)面，直接就能預(yù)覽了
• 封裝了大量的業(yè)務(wù)組件，比如 金額，百分比，千分比，數(shù)值，地址，下拉樹(shù)，彈出樹(shù)……
• 提供了可視化配置頁(yè)面的能力，拖拽組件構(gòu)建頁(yè)面，選中組件可視化配置組件的屬性，事件，代碼邏輯的編寫(xiě)
• 快速預(yù)覽，批量生成vue文件……
• 先說(shuō)這些吧，跟今天的主題不相關(guān)，少扯點(diǎn)犢子。

最近工具研發(fā)也到了一個(gè)復(fù)盤(pán)總結(jié)的階段，就想著統(tǒng)計(jì)下用戶(hù)在使用過(guò)程中用了哪些組件，用了哪些組件的哪些屬性。前面也提到，工具是通過(guò)可視化的方式來(lái)實(shí)現(xiàn)組件，組件屬性的一個(gè)配置，配置數(shù)據(jù)是存在數(shù)據(jù)庫(kù)中。需要用到 SQL語(yǔ)句，然后再對(duì)數(shù)據(jù)進(jìn)行一個(gè)分析輸出。

講道理這應(yīng)該讓后端的同事來(lái)搞，但想想咱前端Node.js也可以連接數(shù)據(jù)庫(kù)的嘛，只要把數(shù)據(jù)查回來(lái)，前端整理數(shù)據(jù)那不是小case嘛，那搞起。

思路

在搞一個(gè)需求之前，我的個(gè)人習(xí)慣是先捋清楚，想好了再寫(xiě)。不然可能掉坑里，或者走彎路。

那要實(shí)現(xiàn)這個(gè)需求，如何下手？我是這么做的：

• 先寫(xiě)SQL啊，把統(tǒng)計(jì)的SQL編寫(xiě)好，調(diào)試通過(guò)
• 寫(xiě)個(gè)腳本，創(chuàng)建SQL連接
• 執(zhí)行寫(xiě)好的SQL
• 拿到數(shù)據(jù)，處理
• 輸出數(shù)據(jù)
• 關(guān)閉連接

那一步一步來(lái)吧……

SQL編寫(xiě)

這里就是用到了基本的SQL語(yǔ)法，連表查詢(xún)，個(gè)人覺(jué)得前端的同學(xué)還是要會(huì)寫(xiě)簡(jiǎn)單的SQL的，比如：

• 條件查詢(xún)
• 關(guān)聯(lián)查詢(xún)
• 自查詢(xún)
• 左連接，右連接
• 分組
• ……

由于此處涉及到多張表的關(guān)系，在此不過(guò)多介紹，直接寫(xiě)出來(lái)了。一共需要4個(gè)SQL語(yǔ)句。

查詢(xún)頁(yè)面節(jié)點(diǎn)上配置的屬性

const QUERY_LAYOUT_CMPPROPS = `select xplt.CMP_CODE as code, xplt.CMP_PROPS as props  
from xp_page_layout_tree xplt 
where 
PAGE_ID in (select PAGE_ID  from xp_page) 
and 
CMP_PROPS != '{}'`

查詢(xún)到的數(shù)據(jù)如下：

從圖中不難看出，code 代表組件，props 代表配置的屬性對(duì)象，就像下面這樣：

查詢(xún)節(jié)點(diǎn)事件的配置

const QUERY_LAYOUT_CMPEVENTS = `select
 xplt1.CMP_CODE as code, xplo.BIND_EVENT as props
from
 xp_page_layout_operate xplo,
 xp_page_layout_tree xplt1,
 xp_page p
where
 xplt1.PAGE_NODE_ID = xplo .BIND_PAGE_NODE_ID
 and p.PAGE_ID = xplt1.PAGE_ID
 and xplo.BIND_EVENT is not NULL
 and xplo.OPERATE_TYPE in ('1', '2')
 group by xplt1.CMP_CODE,xplo.BIND_EVENT;`

查詢(xún)到的結(jié)果如下：

code代表組件，props 代表配置的事件名。

表單字段配置的屬性

const QUERY_MODEL_FIELD_FORMUIPROPS = ` select
xmf.FORM_UI_TYPE as code, xmf.FORM_UI_PROPS as props
from
xp_model xm ,
xp_model_field xmf
where
xmf.MODEL_ID = xm.MODEL_ID
and xmf.FORM_UI_PROPS is not null and xmf.FORM_UI_PROPS != '{}' and xmf.FORM_UI_PROPS != 'null';`

查詢(xún)結(jié)果的格式與第一個(gè)的SQL的一致，不貼圖了。

查詢(xún)區(qū)域表單字段配置的屬性

const QUERY_MODEL_FIELD_QUERYUIPROPS = ` select
xmf.FORM_UI_TYPE as code, xmf.QUERY_UI_PROPS as props
from
xp_model xm ,
xp_model_field xmf
where
xmf.MODEL_ID = xm.MODEL_ID
and xmf.QUERY_UI_PROPS is not null and xmf.QUERY_UI_PROPS != '{}' and xmf.QUERY_UI_PROPS != 'null';`

查詢(xún)結(jié)果的格式與第一個(gè)的SQL的一致，不貼圖了。只需要知道有兩種格式的數(shù)據(jù)，在處理數(shù)據(jù)的時(shí)候要注意。

創(chuàng)建SQL連接

• 先初始化一個(gè)項(xiàng)目

mkdir countprops
cd countprops
npm init -y
npm i mysql
code .

借助mysql這個(gè)包來(lái)連接數(shù)據(jù)庫(kù)，進(jìn)行查詢(xún)操作。

• 新建config/index.js，用于配置數(shù)據(jù)庫(kù)連接信息

module.exports = {
  host: '192.168.50.49', // IP
  user: 'root', // 用戶(hù)名
  password: '********', // 密碼
  database: 'database', // 數(shù)據(jù)庫(kù)名
  port: 3306 // 端口
}

• 新建一個(gè)index.js文件

// #!/usr/bin/env node
// 導(dǎo)入數(shù)據(jù)庫(kù)連接信息
const connectionConfig = require('../config/index.js')
const mysql = require('mysql')
// 創(chuàng)建連接
const connection = mysql.createConnection(connectionConfig)
connection.connect()

執(zhí)行SQL & 處理數(shù)據(jù)

這里一共有4個(gè)SQL需要執(zhí)行，每個(gè)執(zhí)行完了都有返回?cái)?shù)據(jù)，返回的數(shù)據(jù)結(jié)構(gòu)有兩種，要分別處理，并且還要去重。 執(zhí)行查詢(xún)SQL的方法是：

connection.query(sql, callback(error, result){
// 回調(diào)
})

只能通過(guò)回調(diào)的方式一個(gè)一個(gè)的執(zhí)行，不支持 Promise。

在此通過(guò)遞歸來(lái)實(shí)現(xiàn)：

const result = {} // 放結(jié)果
const quene = [QUERY_LAYOUT_CMPPROPS, QUERY_MODEL_FIELD_FORMUIPROPS, QUERY_MODEL_FIELD_QUERYUIPROPS, QUERY_LAYOUT_CMPEVENTS] // 等待執(zhí)行的SQL
function handleProps(props) { // 遞歸調(diào)用執(zhí)行并處理返回?cái)?shù)據(jù)
  props.forEach(prop => { // 處理數(shù)據(jù)
    const { code, props } = prop
    const propArray = []
    try {  // 這里處理返回的 props 是對(duì)象 / 字符串的情況
      const objProps = JSON.parse(props)
      propArray.push(...Object.keys(objProps))
    } catch (error) {
      propArray.push(props)
    }
    ;(result[code] || (result[code] = new Set())).add(...propArray) // 去重
  })
  const next = quene.shift() // 按順序，一個(gè)一個(gè)的執(zhí)行
  if (next) {
    connection.query(next, function (error, results, fields) {
      if (error) throw error
      handleProps(results)
    })
  } else {
    console.log(result) // 輸出結(jié)果
    /**
     * 關(guān)閉連接
     */
    connection.end()
  }
}
handleProps([]) // 調(diào)用

輸出

最終執(zhí)行輸出內(nèi)容如下：

總結(jié)

好了，到此，這個(gè)需求就被筆者簡(jiǎn)單的實(shí)現(xiàn)了，個(gè)人認(rèn)為實(shí)現(xiàn)的還算比較優(yōu)雅，主要是一勞永逸了，指不定過(guò)多久又要統(tǒng)計(jì)一次，到時(shí)再執(zhí)行一次就OK。如果我們不這樣去實(shí)現(xiàn)，去用眼睛觀察，用手去統(tǒng)計(jì)的話，那不得瘋了啊。假如下次需要把統(tǒng)計(jì)數(shù)據(jù)的結(jié)果用圖表可視化展示，我們只需要去構(gòu)造圖表的初始化數(shù)據(jù)就OK了，非常方便！其實(shí)我們工作中有很多類(lèi)似的工作，都可以通過(guò)編碼來(lái)實(shí)現(xiàn)，只要你想，就沒(méi)有啥困難能擋住你。 「只要思想不滑坡，方法總比困難多??????」

以上就是Node.js 連接 MySql 統(tǒng)計(jì)組件屬性的使用情況解析的詳細(xì)內(nèi)容，更多關(guān)于Node.js連接MySql統(tǒng)計(jì)組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！