共计 4343 个字符,预计需要花费 11 分钟才能阅读完成。
问题形容
- 常言道,麻利开发 …
- 如何去麻利开发呢?路径有很多,其中有一种就是去发明一些“工具”,应用工具晋升开发效率
- 比方,从最早的原生写法的 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 | |
} | |
// 截取 prop | |
function getPropName(str) {let l = str.indexOf('`') | |
let r = str.lastIndexOf('`') | |
let resStr = str.slice(l + 1, r) | |
return hump(resStr) | |
} | |
// 截取 label | |
function 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
- 拜访地址后,如下图操作即可
至此,咱们就能够依据数据库中的表格字段,生成表格字段,假如一两百列很多字段的状况下,这种形式会不会加重一下工作量呢?
总结
- 很多时候,思路比代码更重要 …
- 心愿本篇文章,能拓展一下大家的思路
正文完