Node.js?連接?MySql?統(tǒng)計組件屬性的使用情況解析
背景
團隊研發(fā)了一個 「低代碼工具」，主要應(yīng)用在公司的業(yè)務(wù)上，用于解決一些重復(fù)低效的工作，提高開發(fā)效率，降低開發(fā)成本。工具的頁面在 相關(guān)文章 中有，在此就不貼圖啦。
哪些是低效重復(fù)的工作？比如：
- 簡單的增刪改查
- 字段與頁面的綁定，比如某些管理類型的頁面，一個表單動不動上百個字段，邏輯簡單，但全是搬磚的活。
- 不舉例子了，太多啦
工具提供了什么能力？
- 快速根據(jù)數(shù)據(jù)庫表、
API接口、元數(shù)據(jù)平臺接口、mock接口生成增刪改查頁面，直接就能預(yù)覽了 - 封裝了大量的業(yè)務(wù)組件，比如 金額，百分比，千分比，數(shù)值，地址，下拉樹，彈出樹……
- 提供了可視化配置頁面的能力，拖拽組件構(gòu)建頁面，選中組件可視化配置組件的屬性，事件，代碼邏輯的編寫
- 快速預(yù)覽，批量生成
vue文件…… - 先說這些吧，跟今天的主題不相關(guān)，少扯點犢子。
最近工具研發(fā)也到了一個復(fù)盤總結(jié)的階段，就想著統(tǒng)計下用戶在使用過程中用了哪些組件，用了哪些組件的哪些屬性。前面也提到，工具是通過可視化的方式來實現(xiàn)組件，組件屬性的一個配置，配置數(shù)據(jù)是存在數(shù)據(jù)庫中。需要用到 SQL語句，然后再對數(shù)據(jù)進行一個分析輸出。
講道理這應(yīng)該讓后端的同事來搞，但想想咱前端Node.js也可以連接數(shù)據(jù)庫的嘛，只要把數(shù)據(jù)查回來，前端整理數(shù)據(jù)那不是小case嘛，那搞起。
思路
在搞一個需求之前，我的個人習慣是先捋清楚，想好了再寫。不然可能掉坑里，或者走彎路。
那要實現(xiàn)這個需求，如何下手？我是這么做的：
- 先寫
SQL啊，把統(tǒng)計的SQL編寫好，調(diào)試通過 - 寫個腳本，創(chuàng)建
SQL連接 - 執(zhí)行寫好的
SQL - 拿到數(shù)據(jù)，處理
- 輸出數(shù)據(jù)
- 關(guān)閉連接
那一步一步來吧……
SQL編寫
這里就是用到了基本的SQL語法，連表查詢，個人覺得前端的同學還是要會寫簡單的SQL的，比如：
- 條件查詢
- 關(guān)聯(lián)查詢
- 自查詢
- 左連接，右連接
- 分組
- ……
由于此處涉及到多張表的關(guān)系，在此不過多介紹，直接寫出來了。一共需要4個SQL語句。
查詢頁面節(jié)點上配置的屬性
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 != '{}'`
查詢到的數(shù)據(jù)如下：
從圖中不難看出，code 代表組件，props 代表配置的屬性對象，就像下面這樣：
| 組件 | 配置的屬性有 |
|---|---|
| container | {"direction":{"propDataType":"0","propValue":"horizontal"}} |
查詢節(jié)點事件的配置
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;`
查詢到的結(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';`
查詢結(jié)果的格式與第一個的SQL的一致，不貼圖了。
查詢區(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';`
查詢結(jié)果的格式與第一個的SQL的一致，不貼圖了。只需要知道有兩種格式的數(shù)據(jù)，在處理數(shù)據(jù)的時候要注意。
創(chuàng)建SQL連接
- 先初始化一個項目
mkdir countprops cd countprops npm init -y npm i mysql code .
借助mysql這個包來連接數(shù)據(jù)庫，進行查詢操作。
- 新建
config/index.js，用于配置數(shù)據(jù)庫連接信息
module.exports = {
host: '192.168.50.49', // IP
user: 'root', // 用戶名
password: '********', // 密碼
database: 'database', // 數(shù)據(jù)庫名
port: 3306 // 端口
}
- 新建一個
index.js文件
// #!/usr/bin/env node
// 導(dǎo)入數(shù)據(jù)庫連接信息
const connectionConfig = require('../config/index.js')
const mysql = require('mysql')
// 創(chuàng)建連接
const connection = mysql.createConnection(connectionConfig)
connection.connect()
執(zhí)行SQL & 處理數(shù)據(jù)
這里一共有4個SQL需要執(zhí)行，每個執(zhí)行完了都有返回數(shù)據(jù)，返回的數(shù)據(jù)結(jié)構(gòu)有兩種，要分別處理，并且還要去重。 執(zhí)行查詢SQL的方法是：
connection.query(sql, callback(error, result){
// 回調(diào)
})
只能通過回調(diào)的方式一個一個的執(zhí)行，不支持 Promise。
在此通過遞歸來實現(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í)行并處理返回數(shù)據(jù)
props.forEach(prop => { // 處理數(shù)據(jù)
const { code, props } = prop
const propArray = []
try { // 這里處理返回的 props 是對象 / 字符串的情況
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() // 按順序，一個一個的執(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é)
好了，到此，這個需求就被筆者簡單的實現(xiàn)了，個人認為實現(xiàn)的還算比較優(yōu)雅，主要是一勞永逸了，指不定過多久又要統(tǒng)計一次，到時再執(zhí)行一次就OK。如果我們不這樣去實現(xiàn)，去用眼睛觀察，用手去統(tǒng)計的話，那不得瘋了啊。假如下次需要把統(tǒng)計數(shù)據(jù)的結(jié)果用圖表可視化展示，我們只需要去構(gòu)造圖表的初始化數(shù)據(jù)就OK了，非常方便！其實我們工作中有很多類似的工作，都可以通過編碼來實現(xiàn)，只要你想，就沒有啥困難能擋住你。 「只要思想不滑坡，方法總比困難多??????」
以上就是Node.js 連接 MySql 統(tǒng)計組件屬性的使用情況解析的詳細內(nèi)容，更多關(guān)于Node.js連接MySql統(tǒng)計組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了nodejs log4js 使用詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
nodejs使用redis作為緩存介質(zhì)實現(xiàn)的封裝緩存類示例
這篇文章主要介紹了nodejs使用redis作為緩存介質(zhì)實現(xiàn)的封裝緩存類,涉及nodejs操作redis進行緩存設(shè)置相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
Node.js中的npm單獨與批量升級依賴包的方式超詳細講解
npm outdated僅檢查所有已安裝包的依賴關(guān)系,并將當前版本遠程倉庫中的最新版本進行對比,不會升級,這篇文章主要介紹了Node.js中的npm單獨與批量升級依賴包的方式超詳細講解,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了在node中使用jwt簽發(fā)與驗證token的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細介紹了nodejs實現(xiàn)大文件的讀取，比如在線視頻，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
npm dose not support Node.js v10.15
這篇文章主要給大家介紹了關(guān)npm dose not support Node.js v10.15.3的解決方法,文中通過圖文介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這里只是熟悉nodejs中的http模塊的API，一般在開發(fā)過程中使用的是第三方的框架，比如說Express。其中封裝了更為簡單的構(gòu)建http服務(wù)器的API。2015-01-01
nodejs實現(xiàn)截取上傳視頻中一幀作為預(yù)覽圖片
這篇文章主要為大家詳細介紹了nodejs實現(xiàn)截取上傳視頻中一幀作為預(yù)覽圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
本文是Node.js學習筆記系列文章的第一篇，主要給大家講解的是在Windows和Linux上安裝Node.js的方法。軟件安裝版本以0.12.0為例。希望大家能夠喜歡。2015-03-03
這篇文章主要介紹了node中的session的具體使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09