Node.js 根据表结构动态生成目标代码

文章目录


前言

在现代的前端开发中,使用 Vue3 搭配 Element Plus 进行组件化开发已经成为一种常见的实践。最近,我在一个项目中需要根据数据库表结构动态生成表格代码,这让我经历了一次从 MySQL 到 SQL Server 的旅程,并学习了如何使用 ejs 模版引擎来生成代码。在这篇博客中,我将介绍如何使用 mysql2/promise 和 mssql 库连接数据库,以及如何利用 ejs 动态生成代码。

项目背景

我们需要在 Vue3 项目中封装一个 <my-table> 组件,该组件的表格列(tableColumns)需要根据数据库表结构动态生成。为了实现这一点,我搭建了一个 Node.js 服务,通过查询数据库表结构来生成表格代码。

使用的技术栈

  • Vue3 :使用 setup 语法和 Element Plus 组件库。
  • Node.js:用于连接数据库并生成代码。
  • mysql2/promisemssql:用于连接 MySQL 和 SQL Server 数据库。
  • ejs:用于动态生成模板代码。

步骤一:设置 Node.js 项目

首先,创建一个新的 Node.js 项目并安装所需的库:

bash 复制代码
mkdir dynamic-table-generator
cd dynamic-table-generator
npm init -y
npm install express ejs mssql

步骤二:连接 SQL Server 数据库

由于我们的数据库是 SQL Server,我们使用 mssql 库来进行连接:

javascript 复制代码
// 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
};

步骤三:查询数据库表结构

我们需要查询数据库以获取表的结构信息:

javascript 复制代码
// 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中的<> 尖括号。

javascript 复制代码
// 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 服务,处理生成代码的请求:

javascript 复制代码
// 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 模板引擎生成代码,并结合 Vue3Element Plus 实现了组件化开发。希望这篇博客能帮助到那些需要动态生成代码的开发者们。

相关推荐
艾小码10 小时前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!
前端·javascript·node.js
前端小哲12 小时前
MCP从入门到实战
node.js·ai编程
dasseinzumtode13 小时前
nestJS 使用ExcelJS 实现数据的excel导出功能
前端·后端·node.js
梅孔立17 小时前
服务器不支持node.js16以上版本安装?用Docker轻松部署Node.js 20+环境运行Strapi项目
服务器·docker·node.js
XiaoMu_00117 小时前
基于Node.js和Three.js的3D模型网页预览器
javascript·3d·node.js
卿·静17 小时前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js
lvlv_feifei18 小时前
N8N macOS (Apple Silicon) 完整安装配置教程
node.js·workflow
Cosmoshhhyyy1 天前
Node.js 18+安装及Claude国内镜像使用、idea中claude插件下载指南
node.js
徐_三岁1 天前
关于npm的钩子函数
前端·npm·node.js
不买Huracan不改名2 天前
安装Codex(需要用npm)
前端·npm·node.js