Node.js 根据表结构动态生成目标代码
文章目录
- 前言
- 项目背景
- 使用的技术栈
- 步骤一:设置 Node.js 项目
- 步骤二:连接 SQL Server 数据库
- 步骤三:查询数据库表结构
- 步骤四:生成模板代码
- 步骤五:整合所有功能
- 总结
前言
在现代的前端开发中,使用 Vue3 搭配 Element Plus 进行组件化开发已经成为一种常见的实践。最近,我在一个项目中需要根据数据库表结构动态生成表格代码,这让我经历了一次从 MySQL 到 SQL Server 的旅程,并学习了如何使用 ejs 模版引擎来生成代码。在这篇博客中,我将介绍如何使用 mysql2/promise 和 mssql 库连接数据库,以及如何利用 ejs 动态生成代码。
项目背景
我们需要在 Vue3 项目中封装一个 <my-table> 组件,该组件的表格列(tableColumns)需要根据数据库表结构动态生成。为了实现这一点,我搭建了一个 Node.js 服务,通过查询数据库表结构来生成表格代码。
使用的技术栈
- Vue3:使用
setup语法和Element Plus组件库。 - Node.js:用于连接数据库并生成代码。
- mysql2/promise 和 mssql:用于连接 MySQL 和 SQL Server 数据库。
- ejs:用于动态生成模板代码。
步骤一:设置 Node.js 项目
首先,创建一个新的 Node.js 项目并安装所需的库:
mkdir dynamic-table-generator
cd dynamic-table-generator
npm init -y
npm install express ejs mssql
步骤二:连接 SQL Server 数据库
由于我们的数据库是 SQL Server,我们使用 mssql 库来进行连接:
// db.js
const sql = require('mssql');const config = {user: 'your_username',password: 'your_password',server: 'your_server',database: 'your_database',options: {encrypt: true, // 使用 SSL 连接enableArithAbort: true}
};const connectToDatabase = async () => {try {await sql.connect(config);console.log('Connected to the database!');} catch (err) {console.error('Database connection failed: ', err);}
};module.exports = {connectToDatabase,sql
};
步骤三:查询数据库表结构
我们需要查询数据库以获取表的结构信息:
// getTableStructure.js
const { sql } = require('./db');const getTableStructure = async (tableName) => {try {const result = await sql.query`SELECT COLUMN_NAME, DATA_TYPE FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME = ${tableName}`;return result.recordset;} catch (err) {console.error('Error fetching table structure: ', err);}
};module.exports = getTableStructure;
步骤四:生成模板代码
使用 ejs 动态生成 Vue3 表格代码:
注意 其中用<%- %> 代替 <%= %> 来保留 tsx中的<> 尖括号。
// generateTemplate.js
const ejs = require('ejs');
const fs = require('fs');const generateTemplate = (columns) => {const template = `
<template><my-table :columns="tableColumns"></my-table>
</template><script setup>
import { reactive } from 'vue';const tableColumns = reactive([<% columns.forEach(column => { %>{prop: '<%= column.COLUMN_NAME %>',label: '<%= column.COLUMN_NAME %>',minWidth: 120,align: 'center',render(param: { row: any; index: number }) {const { row, index } = param;<% if (column.COLUMN_NAME.endsWith('Time') || column.COLUMN_NAME.endsWith('Date')) { %>return <>{formatDateTime(row.<%= column.COLUMN_NAME %>)}</>;<% } else { %>return <>{row.<%= column.COLUMN_NAME %>}</>;<% } %>}},<% }) %>
]);
</script>`;const result = ejs.render(template, { columns });fs.writeFileSync('output.vue', result);
};module.exports = generateTemplate;
步骤五:整合所有功能
搭建一个 Express 服务,处理生成代码的请求:
// server.js
const express = require('express');
const { connectToDatabase } = require('./db');
const getTableStructure = require('./getTableStructure');
const generateTemplate = require('./generateTemplate');const app = express();
const PORT = 3000;app.get('/generate-template', async (req, res) => {const tableName = req.query.table;const columns = await getTableStructure(tableName);generateTemplate(columns);res.send('Template generated successfully!');
});connectToDatabase().then(() => {app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);});
});
总结
通过以上步骤,我们成功地搭建了一个 Node.js 服务,能够根据 SQL Server 数据库中的表结构动态生成 Vue3 表格代码。我们使用 mssql 库连接数据库,ejs 模板引擎生成代码,并结合 Vue3 和 Element Plus 实现了组件化开发。希望这篇博客能帮助到那些需要动态生成代码的开发者们。
相关文章:
Node.js 根据表结构动态生成目标代码
文章目录 前言项目背景使用的技术栈步骤一:设置 Node.js 项目步骤二:连接 SQL Server 数据库步骤三:查询数据库表结构步骤四:生成模板代码步骤五:整合所有功能总结 前言 在现代的前端开发中,使用 Vue3 搭配…...
渗透测试实战—云渗透(AK/SK泄露)
免责声明:文章来源于真实渗透测试,已获得授权,且关键信息已经打码处理,请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本…...
【机器学习】机器学习与医疗健康在疾病预测中的融合应用与性能优化新探索
文章目录 引言第一章:机器学习在医疗健康中的应用1.1 数据预处理1.1.1 数据清洗1.1.2 数据归一化1.1.3 特征工程 1.2 模型选择1.2.1 逻辑回归1.2.2 决策树1.2.3 随机森林1.2.4 支持向量机1.2.5 神经网络 1.3 模型训练1.3.1 梯度下降1.3.2 随机梯度下降1.3.3 Adam优化…...
MySQL(8.0)数据库安装和初始化以及管理
1.MySQL下载安装和初始化 1.下载安装包 下载地址:https://downloads.mysql.com/archives/get/p/23/file/mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar wget https://downloads.mysql.com/archives/get/p/23/file/mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar 2.解压…...
C# Web控件与数据感应之 TreeView 类
目录 关于 TreeView 一些区别 准备数据源 范例运行环境 一些实用方法 获取数据进行呈现 根据ID设置节点 获取所有结点的索引 小结 关于 TreeView 数据感应也即数据捆绑,是一种动态的,Web控件与数据源之间的交互,本文将继续介绍与…...
java使用责任链模式进行优化代码
1.什么是责任链 责任链模式(Chain of Responsibility Pattern)是一种行为设计模式,它允许多个对象有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系。每个收到请求的对象要么处理该请求,要么将它传递给链中…...
【人工智能】边缘计算与 AI:实时智能的未来
💎 我的主页:2的n次方_ 💎1. 引言 随着物联网设备数量的爆炸性增长和对实时处理需求的增加,边缘计算与人工智能(Edge AI)成为一个热门话题。Edge AI 通过在本地设备上运行 AI 算法,减少对云计…...
Day12--Servlet实现前后端交互(案例:学生信息管理系统登录页面)
(在一个完整的项目架构中,servlet的角色和位置) Servlet、GenericServlet和HttpServlet三者之间的关系是Java Web开发中的一个重要概念,它们共同构成了基于Java的服务器端程序的基础。以下是具体分析: 1. Servlet接口…...
Android 安装应用-准备阶段
安装应用的准备阶段是在PackageManagerService类中的preparePackageLI(InstallArgs args, PackageInstalledInfo res),代码有些长,分段阅读。 分段一 分段一: GuardedBy("mInstallLock")private PrepareResult preparePackageLI(I…...
【JKI SMO】框架讲解(九)
本节内容将演示如何向SMO框架添加启动画面。 1.打开LabVIEW新建一个空白项目,并保存。 2.找到工具,打开SMO Editor。 3.新建一个SMO,选择SMO.UI.Splash。 4. 打开LabVIEW项目,可以看到项目里多了一个SystemSplash类。 打开Process…...
Linux通过Docker安装Microsoft Office+RDP远程控制
之前根据B站教程《在linux上安装微软office》:在linux上安装微软office_哔哩哔哩_bilibili 写过一篇使用KVM虚拟机安装Microsoft OfficeRDP远程控制的文章,根据B站的教程安装后,发现有远程控制延迟的问题,比如拖动Office窗口时会…...
利用Qt实现调用文字大模型的API,文心一言、通义千问、豆包、GPT、Gemini、Claude。
利用Qt实现调用文字大模型的API,文心一言、通义千问、豆包、GPT、Gemini、Claude。 下载地址: AI.xyz 1 Qt实现语言大模型API调用 视频——Qt实现语言大模型API调用 嘿,大家好!分享一个最近做的小项目 “AI.xyz” 基于Qt实现调用各家大模型…...
借助医疗保健专用的 LLM提高诊断支持与准确性
概述 最近的研究表明,大规模语言模型在医疗人工智能应用中非常有效。它们在诊断和临床支持系统中的有效性尤为明显,在这些系统中,它们已被证明能为各种医疗询问提供高度准确的答案(例如,医生在诊断过程中需要用到语言…...
微前端(qiankun)
微前端 特点:独立开发、独立部署,独立运行,增量升级 解决的问题:日常开发过程中,可能有很多老项目需要迭代,但是可能新的一些可能需要使用的依赖或者新的一些框架,老项目已经不满足,…...
速通c++(周二)
前言 Hello,大家好啊,我是文宇,不是文字,是文宇哦。 今天是速通c第二期。 运算符 c里的运算符种类有很多,因为这个教程是入门教程,所以只介绍其中我们会用到的几种。 算数运算 c中的算数运算有九个&a…...
拓扑未来物联网平台简介
拓扑未来物联网平台是基于Thingsboard二次开发的面向产业互联和智慧生活应用的物联网PaaS平台,支持适配各种网络环境和协议类型,可实现各种传感器和智能硬件的快速接入。有效降低物联网应用开发和部署成本,满足物联网领域设备连接、智能化改造…...
软件测试经理工作日常随记【7】-接口+UI自动化(多端集成测试)
软件测试经理工作日常随记【7】-UI自动化(多端集成测试) 自动化测试前篇在此 前言 今天开这篇的契机是,最近刚好是运维开发频繁更新证书的,每次更新都在0点,每次一更新都要走一次冒烟流程。为了不让我的美容觉被阉割…...
软考:软件设计师 — 9.数据流图
九. 数据流图 数据流图是下午场考试中第一个题目,分值 15 分。通常会考察实体名、存储名、加工名的补充,以及找到缺失的数据流并改正等。 1. 数据平衡原则 数据流的分析依赖于数据平衡原则。 父图与子图之间的平衡 父图与子图之间平衡是指任何一张 …...
收银系统源码-门店折扣活动应该怎么做
系统概况: 专门为零售行业的连锁店量身打造的收银系统,适用于常规超市、生鲜超市、水果店、便利店、零食专卖店、服装店、母婴用品、农贸市场等类型的门店使用。同时线上线下数据打通,线下收银的数据与小程序私域商城中的数据完全同步&#…...
Python数值计算(12)——线性插值
1. 概述 插值是根据已知的数据序列(可以理解为你坐标中一系列离散的点),找到其中的规律,然后根据找到的这个规律,来对其中尚未有数据记录的点进行数值估计的方法。最简单直观的一种插值方式是线性插值,它是…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
(二)TensorRT-LLM | 模型导出(v0.20.0rc3)
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述,后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作,其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
为什么要创建 Vue 实例
核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...
Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务,但是又不想花钱,所以就想着自己搭建一个,刚好我们用的一个开源框架已经集成了MinIO,所以就选了这个 我这边对文件服务性能要求不是太高,单机版就可以 安装非常简单,几个命令就…...
[USACO23FEB] Bakery S
题目描述 Bessie 开了一家面包店! 在她的面包店里,Bessie 有一个烤箱,可以在 t C t_C tC 的时间内生产一块饼干或在 t M t_M tM 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC,tM≤109)。由于空间…...
LeetCode 0386.字典序排数:细心总结条件
【LetMeFly】386.字典序排数:细心总结条件 力扣题目链接:https://leetcode.cn/problems/lexicographical-numbers/ 给你一个整数 n ,按字典序返回范围 [1, n] 内所有整数。 你必须设计一个时间复杂度为 O(n) 且使用 O(1) 额外空间的算法。…...
中国政务数据安全建设细化及市场需求分析
(基于新《政务数据共享条例》及相关法规) 一、引言 近年来,中国政府高度重视数字政府建设和数据要素市场化配置改革。《政务数据共享条例》(以下简称“《共享条例》”)的发布,与《中华人民共和国数据安全法》(以下简称“《数据安全法》”)、《中华人民共和国个人信息…...
