Node.js 连接 MySql 统计组件属性的使用情况解析

 更新时间:2022年10月13日 11:45:58   作者:Lvzl  
这篇文章主要为大家介绍了Node.js 连接 MySql 统计组件属性的使用情况解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

背景

团队研发了一个 「低代码工具」,主要应用在公司的业务上,用于解决一些重复低效的工作,提高开发效率,降低开发成本。工具的页面在 相关文章 中有,在此就不贴图啦。

哪些是低效重复的工作?比如:

  • 简单的增删改查
  • 字段与页面的绑定,比如某些管理类型的页面,一个表单动不动上百个字段,逻辑简单,但全是搬砖的活。
  • 不举例子了,太多啦

工具提供了什么能力?

  • 快速根据数据库表、API接口、元数据平台接口、mock接口生成增删改查页面,直接就能预览了
  • 封装了大量的业务组件,比如 金额,百分比,千分比,数值,地址,下拉树,弹出树……
  • 提供了可视化配置页面的能力,拖拽组件构建页面,选中组件可视化配置组件的属性,事件,代码逻辑的编写
  • 快速预览,批量生成vue文件……
  • 先说这些吧,跟今天的主题不相关,少扯点犊子。

最近工具研发也到了一个复盘总结的阶段,就想着统计下用户在使用过程中用了哪些组件,用了哪些组件的哪些属性。前面也提到,工具是通过可视化的方式来实现组件,组件属性的一个配置,配置数据是存在数据库中。需要用到 SQL语句,然后再对数据进行一个分析输出。

讲道理这应该让后端的同事来搞,但想想咱前端Node.js也可以连接数据库的嘛,只要把数据查回来,前端整理数据那不是小case嘛,那搞起。

思路

在搞一个需求之前,我的个人习惯是先捋清楚,想好了再写。不然可能掉坑里,或者走弯路。

那要实现这个需求,如何下手?我是这么做的:

  • 先写SQL啊,把统计的SQL编写好,调试通过
  • 写个脚本,创建SQL连接
  • 执行写好的SQL
  • 拿到数据,处理
  • 输出数据
  • 关闭连接

那一步一步来吧……

SQL编写

这里就是用到了基本的SQL语法,连表查询,个人觉得前端的同学还是要会写简单的SQL的,比如:

  • 条件查询
  • 关联查询
  • 自查询
  • 左连接,右连接
  • 分组
  • ……

由于此处涉及到多张表的关系,在此不过多介绍,直接写出来了。一共需要4个SQL语句。

查询页面节点上配置的属性

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 != '{}'`

查询到的数据如下:

从图中不难看出,code 代表组件,props 代表配置的属性对象,就像下面这样:

组件配置的属性有
container{"direction":{"propDataType":"0","propValue":"horizontal"}}

查询节点事件的配置

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;`

查询到的结果如下:

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';`

查询结果的格式与第一个的SQL的一致,不贴图了。

查询区域表单字段配置的属性

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';`

查询结果的格式与第一个的SQL的一致,不贴图了。只需要知道有两种格式的数据,在处理数据的时候要注意。

创建SQL连接

  • 先初始化一个项目
mkdir countprops
cd countprops
npm init -y
npm i mysql
code .

借助mysql这个包来连接数据库,进行查询操作。

  • 新建config/index.js,用于配置数据库连接信息
module.exports = {
  host: '192.168.50.49', // IP
  user: 'root', // 用户名
  password: '********', // 密码
  database: 'database', // 数据库名
  port: 3306 // 端口
}
  • 新建一个index.js文件
// #!/usr/bin/env node
// 导入数据库连接信息
const connectionConfig = require('../config/index.js')
const mysql = require('mysql')
// 创建连接
const connection = mysql.createConnection(connectionConfig)
connection.connect()

执行SQL & 处理数据

这里一共有4个SQL需要执行,每个执行完了都有返回数据,返回的数据结构有两种,要分别处理,并且还要去重。 执行查询SQL的方法是:

connection.query(sql, callback(error, result){
// 回调
})

只能通过回调的方式一个一个的执行,不支持 Promise

在此通过递归来实现:

const result = {} // 放结果
const quene = [QUERY_LAYOUT_CMPPROPS, QUERY_MODEL_FIELD_FORMUIPROPS, QUERY_MODEL_FIELD_QUERYUIPROPS, QUERY_LAYOUT_CMPEVENTS] // 等待执行的SQL
function handleProps(props) { // 递归调用执行并处理返回数据
  props.forEach(prop => { // 处理数据
    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() // 按顺序,一个一个的执行
  if (next) {
    connection.query(next, function (error, results, fields) {
      if (error) throw error
      handleProps(results)
    })
  } else {
    console.log(result) // 输出结果
    /**
     * 关闭连接
     */
    connection.end()
  }
}
handleProps([]) // 调用

输出

最终执行输出内容如下:

总结

好了,到此,这个需求就被笔者简单的实现了,个人认为实现的还算比较优雅,主要是一劳永逸了,指不定过多久又要统计一次,到时再执行一次就OK。如果我们不这样去实现,去用眼睛观察,用手去统计的话,那不得疯了啊。假如下次需要把统计数据的结果用图表可视化展示,我们只需要去构造图表的初始化数据就OK了,非常方便!其实我们工作中有很多类似的工作,都可以通过编码来实现,只要你想,就没有啥困难能挡住你。 「只要思想不滑坡,方法总比困难多😆😆😆」

以上就是Node.js 连接 MySql 统计组件属性的使用情况解析的详细内容,更多关于Node.js连接MySql统计组件的资料请关注脚本之家其它相关文章!

相关文章

  • Node.js中的async 和 await 关键字微任务和宏任务

    Node.js中的async 和 await 关键字微任务和宏任务

    这篇文章主要介绍了Node.js中的async和await关键字微任务和宏任务,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • vscode安装教程以及配置node.js环境全过程

    vscode安装教程以及配置node.js环境全过程

    这篇文章主要给大家介绍了关于vscode安装教程以及配置node.js环境的相关资料,VSCode是一款由微软开发的轻量级编辑器,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • 浅谈NodeJs之数据库异常处理

    浅谈NodeJs之数据库异常处理

    这篇文章主要介绍了浅谈NodeJs之数据库异常处理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Node.js 中使用fetch 按JSON格式发post请求的问题解析

    Node.js 中使用fetch 按JSON格式发post请求的问题解析

    最近在测试一个api,可以用curl命令直接访问,指定header相关配置,request body(JSON),成功后返回一个JSON,这篇文章主要介绍了Node.js 中使用fetch 按JSON格式发post请求,需要的朋友可以参考下
    2023-04-04
  • Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件

    Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件

    在Node.js中,要实现目录文件夹的循环递归复制也非常简单,使用fs模块即可,仅需几行,而且性能也不错,我们先来实现文件的复制,需要的朋友可以参考下
    2017-09-09
  • Node.js安装配置图文教程

    Node.js安装配置图文教程

    这篇文章主要为大家详细介绍了Node.js安装配置的图文教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • nodejs dgram模块广播+组播的实现示例

    nodejs dgram模块广播+组播的实现示例

    这篇文章主要介绍了nodejs dgram模块广播+组播的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • PHP和NodeJs开发的应用如何共用Session

    PHP和NodeJs开发的应用如何共用Session

    这篇文章主要介绍了PHP和NodeJs开发的应用如何共用Session的相关资料及思路,需要的朋友可以参考下
    2015-04-04
  • node.js中的buffer.length方法使用说明

    node.js中的buffer.length方法使用说明

    这篇文章主要介绍了node.js中的buffer.length方法使用说明,本文介绍了buffer.length的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • Yapi安装部署详细图文教程

    Yapi安装部署详细图文教程

    YApi 是一个可本地部署的、打通前后端及QA的、可视化的接口管理平台,下面这篇文章主要给大家介绍了关于Yapi安装部署的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-09-09

最新评论