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

相关推荐
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
暮毅6 小时前
10.Node.js连接MongoDb
数据库·mongodb·node.js
~甲壳虫12 小时前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
~甲壳虫12 小时前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫12 小时前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
熊的猫13 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
前端青山1 天前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
GDAL1 天前
npm入门教程1:npm简介
前端·npm·node.js
郑小憨1 天前
Node.js简介以及安装部署 (基础介绍 一)
java·javascript·node.js
lin-lins1 天前
模块化开发 & webpack
前端·webpack·node.js