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 实现了组件化开发。希望这篇博客能帮助到那些需要动态生成代码的开发者们。

相关推荐
人工智能训练师1 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny071 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
huangql5205 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
荣达8 小时前
koa洋葱模型理解
前端·后端·node.js
csdn_aspnet9 小时前
Windows Node.js 安装及环境配置详细教程
windows·node.js
风若飞17 小时前
npm ERR! code CERT_HAS_EXPIRED
前端·npm·node.js
csdn_aspnet17 小时前
Windows、Linux 系统 nodejs 和 npm 版本更新及错误修复
linux·windows·npm·node.js
北城笑笑17 小时前
NodeJS 8 ,从 0 到 1:npm 包发布与更新全流程指南( 含多场景适配与踩坑总结 )
前端·npm·node.js·github
码码哈哈0.017 小时前
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚
前端·npm·node.js
歪歪10019 小时前
webpack 配置文件中 mode 有哪些模式?
开发语言·前端·javascript·webpack·前端框架·node.js