问题形容

  • 常言道，麻利开发...
  • 如何去麻利开发呢？路径有很多，其中有一种就是去发明一些“工具”，应用工具晋升开发效率
  • 比方，从最早的原生写法的HTML、CSS、JS，到起初的JQuery（工具）
  • 再到起初的ANGUALR、REACT、VUE框架（工具）
  • 包含一些UI组件库，WEBPACK、甚至是低代码平台都是一种工具
  • 实质上，就是让咱们少写代码，也能实现想要的成果
  • 明天笔者就给大家抛砖引玉一下，心愿诸位读者，读完当前，可能有所思考

案例场景

表格案例

咱们晓得，开发中比拟常见的就是表格的展现，比方这样的：

咱们平时开发我的项目的时候，经常会把表格进行二次封装，通过JSON配置化的模式，配置一下，指定一些参数和字段，就可能间接渲染出咱们想要的成果了

代码大略是上面这样的

[  {    "propName": "name",    "labelName": "姓名",    "width": 90,    "fixed": false,    "isSort": false  },  {    "propName": "age",    "labelName": "年龄",    "width": 90,    "fixed": false,    "isSort": false  },  {    "propName": "home",    "labelName": "他乡",    "width": 90,    "fixed": false,    "isSort": false  },  {    "propName": "remark",    "labelName": "备注",    "width": 90,    "fixed": false,    "isSort": false  },]
  • 开发中，天然是复制粘贴啦，而后去批改其对应的键值对的值
  • 那么，咱们能不能自己搞一个工具，让咱们少一些复制粘贴呢？
  • 有的敌人问道，表格只有三五列，用得着，这么麻烦吗？
  • 笔者感叹，笔者曾遇到有100多列的表格的展现需要
  • 那总不能复制100屡次吧
  • 那怎么样少点复制操作，甚至可能主动生成呢？

思路剖析

  • 咱们晓得，表格展现的字段啥的，来自后端建表的时候，定义的字段名称
  • 所以，源头在哪里呢？就在数据库的表的构造外面啊
  • 咱们关上数据库，设计表、查看表构造，是可能看到什么字段，以及相应的信息的，如下图

什么字段对应什么意思，失常来说，都会写在字段的正文外面的
  • 也就是说，一个字段，有一个字段的正文，绝对应的，也就是propName和labelName
  • 那这就好办了，咱们间接导出这个表的构造，就能够看到对应关系了，如下操作

  • 导出的table.sql文件代码如下：
/* Navicat Premium Data Transfer Source Server         : lss Source Server Type    : MySQL Source Server Version : 50562 Source Host           : localhost:3306 Source Schema         : xiyouji Target Server Type    : MySQL Target Server Version : 50562 File Encoding         : 65001 Date: 14/04/2021 08:56:05*/SET NAMES utf8mb4;SET FOREIGN_KEY_CHECKS = 0;-- ------------------------------ Table structure for peopletable-- ----------------------------DROP TABLE IF EXISTS `peopletable`;CREATE TABLE `peopletable`  (  `id` int(13) NOT NULL AUTO_INCREMENT COMMENT '惟一id',  `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '姓名',  `age` int(11) NULL DEFAULT NULL COMMENT '年龄',  `home` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '他乡',  `remark` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '备注',  `is_delete_status` tinyint(1) UNSIGNED NOT NULL DEFAULT 1 COMMENT '1失常、0删除',  PRIMARY KEY (`id`) USING BTREE) ENGINE = InnoDB AUTO_INCREMENT = 31 CHARACTER SET = utf8 COLLATE = utf8_unicode_ci ROW_FORMAT = Compact;SET FOREIGN_KEY_CHECKS = 1;
  • 咱们看上述代码，就能明确，咱们想要的货色，从第24行开始到32行完结，中的CREATE TABLE创建表格的内容的，对应字段以及此字段的正文COMMENT的名字，完结的ENGINE = InnoDB AUTO_INCREMENT
  • 而，咱们又晓得，所谓的导出的.sql文件其内容不过就是一堆字符串罢了，毕竟咱们应用node的文件读取api可能拿到其对应字符串内容。如下
fs.readFile('./table.sql', 'utf-8', (err, data) => {    console.log('读取到的内容是字符串',data)})
  • 所以，当咱们拿到了字符串当前，就能够对字符串进行“加工”，比方找到对应关键字、进行提取、截取、拆散、加工组装成咱们所须要的JSON数组格局
  • 至于怎么加工的，笔者给大家提供了，一些代码，以供参考
const fs = require('fs');let tableHeader = []// 判断是不是大写字母function isUpLetter(str) {    var strCode = str.charCodeAt()    return strCode >= 65 && strCode <= 90}// 动静往上走获取每行数据的第一个字，i变量，articalArr和end常量function getLineFirstWord(articalArr, i, end) {    let lineWords = articalArr[end - i].trim()    return lineWords[0]}// 找到字段范畴完结行（开始行好找，完结行标识为ENGINE即end往上找）function findPropEndLine(articalArr, end) {    let i = 1 // 初始为1，就要往上找一行    while (isUpLetter(getLineFirstWord(articalArr, i, end))) { // 如果是大写的字母，就持续往上找        i = i + 1 // 直到不是大写字母，就阐明找到完结行地位了    }    return end - i}// 蛇形转驼峰function hump(str) {    if (!str.includes('_')) return str    let s = ""    for (let i = 0; i < str.length; i++) {        if (str[i] == "_") {            s = s + str[i + 1].toUpperCase()            i = i + 1        } else {            s = s + str[i]        }    }    return s}// 截取propfunction getPropName(str) {    let l = str.indexOf('`')    let r = str.lastIndexOf('`')    let resStr = str.slice(l + 1, r)    return hump(resStr)}// 截取labelfunction getLabelName(str) {    let l = str.indexOf('\'')    let r = str.lastIndexOf('\'')    return str.slice(l + 1, r)}// 导出JSON文件function exportJSON(tableHeader) {    fs.writeFile('tableHeader.json', tableHeader, (err) => {        if (err) {            console.log(`失败了${err}`)        }        console.log('tableHeader导出胜利');    })}// 读取sql文件并加工成前端须要的格局fs.readFile('./table.sql', 'utf-8', (err, data) => {    let articalArr = data.split('\n') // 应用换行符分隔成数组    let startLineIndex; // 开始行索引    let end; // end标识找到完结地位（完结地位再往上走几行才是prop、label完结地位）    articalArr.forEach((item, index) => {        if (item.includes('CREATE TABLE')) {            startLineIndex = index        }        if (item.includes('ENGINE')) {            end = index        }    })    startLineIndex = startLineIndex + 1 // 此行蕴含CREATE TABLE，再下一行才是真正prop、label数据    let endLineIndex = findPropEndLine(articalArr, end) // end标识不停往上走，直到不是大写字母    const propLabelArr = articalArr.slice(startLineIndex, endLineIndex + 1) // 截取真正应用范畴    /**     * 遍历拿到prop和label，这才是真正的前端表头须要的数据值     * */    for (const item of propLabelArr) {        let tableHeaderItem = {            propName: getPropName(item),            labelName: getLabelName(item),            width: 90, // 定义默认值            fixed: false, // 定义默认值        }        tableHeader.push(tableHeaderItem)    }    // 控制台输入复制粘贴应用    console.log(tableHeader);    // 导出成json文件应用    exportJSON(JSON.stringify(tableHeader))});
  • 应用的话，如下图：

理论示例

  • 为了更便于大家演示，笔者写了页面和接口，供大家看更间接的成果
  • http://ashuai.work/sql
  • 拜访地址后，如下图操作即可

至此，咱们就能够依据数据库中的表格字段，生成表格字段，假如一两百列很多字段的状况下，这种形式会不会加重一下工作量呢？

总结

  • 很多时候，思路比代码更重要...
  • 心愿本篇文章，能拓展一下大家的思路