基于人工智能的表单开发-另一种角度的低代码

小小小怪兽2025-09-02 10:12

引言

当今的AI时代，大家手写编写代码的模式应该已经逐渐被AI辅助的智能编程所取代，在具体工作，大家已经自然而然的成了prompt工程师。将深入探讨如何利用Claude 3.7和Cursor编辑器，结合MCP（Model Context Protocol）协议，实现通过自然语言描述自动生成Vue2+ElementUI表单，并通过GitLab和MongoDB的MCP服务完成代码管理与数据存储的完整工作流。同时分享一种全新的视角，通过AI来重构我们之前的一些技术和思路。

一、核心技术栈

1.1 Cursor编辑器：AI赋能的开发环境

Cursor是专为AI辅助编程设计的代码编辑器，它基于VS Code构建，但集成了强大的AI功能。与传统代码编辑器不同，Cursor能深度理解你的代码库，提供智能建议，甚至可以根据自然语言指令生成或修改代码。

Cursor的核心优势包括：

  • ​​实时AI补全​​：由Claude 3.7驱动，比传统IDE更快

  • ​​自然语言转代码​​：可直接描述网站结构或功能需求

  • ​​内置终端和版本控制​​：减少工具切换成本

  • ​​MCP协议支持​​：允许AI安全访问和处理各种数据源

1.2 Claude 3.7：代码生成的强大引擎

Claude 3.7是Anthropic公司开发的先进大型语言模型，在编程能力方面表现卓越。其核心优势包括：

  • ​​代码生成准确率更高​​

  • ​​支持现代框架的上下文理解​​：包括React/Next.js/Vue等

  • ​​混合推理架构​​：支持快速响应模式与深度思考模式

  • ​​长上下文分析​​：支持128k Token，可进行多轮自我反思优化代码逻辑

1.3 MCP协议：连接AI与外部服务的桥梁

MCP（Model Context Protocol）是一种开放协议，用于将大型语言模型与外部工具（如数据库、API或自定义函数）集成。通过MCP，AI模型可以动态调用工具来增强功能，例如获取实时数据或执行特定任务。

MCP的核心组成包括：

  • ​​MCP Host​​：Claude Desktop、Cursor等AI工具，作为大模型的应用环境

  • ​​MCP Server​​：实现MCP协议的服务端，提供特定功能或数据资源访问

  • ​​安全机制​​：MCP内置安全控制，Server自主控制资源访问权限

二、环境准备与配置

2.1 基础环境搭建

首先需要安装和配置基础开发环境：

bash 复制代码 
# 安装Cursor编辑器（访问https://cursor.sh/）
# 注册Claude API账号获取3.7版本访问权限
# 初始化项目
mkdir vue-form-generator && cd vue-form-generator
npm init -y
npm install vue@2 element-ui mongodb

2.2 配置Cursor与Claude 3.7

在Cursor编辑器中配置AI模型：

  1. 打开Cursor设置，选择"AI"选项卡
  2. 在API密钥部分输入Claude API密钥
  3. 在AI模型选项中选择"Claude 3.7 Sonnet"

2.3 MCP服务器设置

配置GitLab MCP服务器，在Cursor的MCP设置中添加：

json 复制代码 
{
  "mcpServers": {
    "gitlab": {
      "command": "docker",
      "args": [
        "run", "-i", "--rm",
        "-e", "GITLAB_API_URL",
        "-e", "GITLAB_PERSONAL_ACCESS_TOKEN",
        "mcp/gitlab"
      ],
      "env": {
        "GITLAB_API_URL": "https://your-gitlab-instance.com/api/v4",
        "GITLAB_PERSONAL_ACCESS_TOKEN": "YOUR_ACCESS_TOKEN"
      }
    }
  }
}

对于MongoDB MCP服务器，需要创建自定义服务器：

python 复制代码 
// mongo-mcp-server.js
import mcp.server as mcp
from mcp.server import Server
from pymongo import MongoClient
from pydantic import BaseModel

server = Server("mongo-mcp-server")

class MongoInsertRequest(BaseModel):
    collection: str
    document: dict

@server.tool()
async def insert_document(request: MongoInsertRequest) -> str:
    """向MongoDB插入文档"""
    try:
        client = MongoClient("mongodb://localhost:27017/")
        db = client.formDatabase
        collection = db[request.collection]
        result = collection.insert_one(request.document)
        return f"插入成功，文档ID: {result.inserted_id}"
    except Exception as e:
        return f"MongoDB插入失败: {str(e)}"

if __name__ == "__main__":
    mcp.run(server, transport='stdio')

三、Vue2+ElementUI表单生成实现

3.1 自然语言描述表单结构

在Cursor中使用调出AI指令面板，输入自然语言描述：

"请生成一个Vue2单文件组件，使用ElementUI实现用户注册表单，包含以下字段：

  • 用户名（必填，2-20字符）

  • 密码（必填，强度验证）

  • 邮箱（必填，格式验证）

  • （单选，男/女）

  • 兴趣爱好（多选，选项包括阅读、运动、音乐、旅行）

  • 出生日期（日期选择器）

    要求包含表单验证和提交处理函数，提交时输出表单数据"

3.2 AI生成的表单代码

Claude 3.7会根据指令生成类似以下的代码：

js 复制代码 
<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="ruleForm.email"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="gender">
      <el-radio-group v-model="ruleForm.gender">
        <el-radio label="male">男</el-radio>
        <el-radio label="female">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="兴趣爱好" prop="hobbies">
      <el-checkbox-group v-model="ruleForm.hobbies">
        <el-checkbox label="reading">阅读</el-checkbox>
        <el-checkbox label="sports">运动</el-checkbox>
        <el-checkbox label="music">音乐</el-checkbox>
        <el-checkbox label="travel">旅行</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="出生日期" prop="birthdate">
      <el-date-picker v-model="ruleForm.birthdate" type="date" placeholder="选择日期"></el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'UserRegistrationForm',
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
        email: '',
        gender: '',
        hobbies: [],
        birthdate: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,}$/, 
            message: '密码必须包含大小写字母和数字，且长度至少8位', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        hobbies: [
          { type: 'array', required: true, message: '请至少选择一个兴趣爱好', trigger: 'change' }
        ],
        birthdate: [
          { required: true, message: '请选择出生日期', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 通过MCP服务存储到MongoDB
          this.saveToMongoDB(this.ruleForm);
          alert('提交成功!');
        } else {
          console.log('表单验证失败!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async saveToMongoDB(formData) {
      // 通过MCP服务调用MongoDB插入操作
      try {
        const response = await this.$mcpClient.callTool(
          "mongo-mcp-server/insert_document",
          {
            collection: "userRegistrations",
            document: formData
          }
        );
        console.log("数据保存成功:", response);
      } catch (error) {
        console.error("数据保存失败:", error);
      }
    }
  }
};
</script>

3.3 基于JSON Schema的动态表单生成

对于更复杂的场景，可以使用JSON Schema配置方式生成表单:

yaml 复制代码 
// 表单schema配置
export const formSchema = {
  inline: false,
  labelWidth: '100px',
  formItems: [
    {
      type: 'input',
      label: '用户名',
      field: 'username',
      placeholder: '请输入用户名',
      rules: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' }
      ]
    },
    {
      type: 'input.password',
      label: '密码',
      field: 'password',
      showPassword: true,
      placeholder: '请输入密码',
      rules: [
        { required: true, message: '密码不能为空', trigger: 'blur' }
      ]
    },
    // 更多表单项配置...
  ]
};

四、MCP服务集成与实践

4.1 GitLab MCP服务集成

通过GitLab MCP服务，我们可以实现代码的自动上传和管理：

arduino 复制代码 
// 通过自然语言指令GitLab MCP服务
"请使用GitLab MCP服务在xiaomage-devops群组下创建名为vue-form-generator的仓库，然后推送当前项目代码到该仓库，并创建初始提交"

// Cursor会调用MCP工具执行以下操作：
// 1. create_repository - 创建新仓库
// 2. create_or_update_file - 创建或更新文件
// 3. push_files - 推送文件到仓库

GitLab MCP Server支持的功能包括：

  • create_or_update_file：在项目中创建或更新文件

  • push_files：在单个提交中推送多个文件

  • search_repositories：在GitLab中搜索仓库

  • create_repository：在GitLab中创建仓库

  • get_file_contents：获取文件或目录的内容

  • create_issue：创建新的议题

  • create_merge_request：创建新的合并请求

4.2 MongoDB MCP服务集成

MongoDB MCP服务允许AI直接将表单数据存储到数据库：

json 复制代码 
// MongoDB MCP服务器配置
{
  "mcpServers": {
    "mongodb": {
      "command": "node",
      "args": ["mongo-mcp-server.js"],
      "env": {
        "MONGODB_URI": "mongodb://localhost:27017/formDatabase"
      }
    }
  }
}

4.3 在Cursor中使用MCP服务

在Cursor中，可以通过聊天面板或快捷键使用MCP服务：

  1. 激活MCP功能

  2. Cursor会扫描项目并建立上下文理解

  3. 通过自然语言指令使用MCP服务：

    • "将当前表单组件保存到GitLab仓库"

    • "将用户提交的表单数据存储到MongoDB"

    • "从MongoDB中查询最近10个表单提交"

五、完整工作流演示

5.1 步骤一：需求描述

在Cursor中使用自然语言描述表单需求：

"创建一个员工信息管理表单，包含基本信息、工作经历和教育背景三个部分，使用Vue2和ElementUI实现，要求有表单验证和数据导出功能"

5.2 步骤二：代码生成

Claude 3.7会根据需求生成完整的Vue组件

5.3 步骤三：测试与优化

根据呈现的具体页面，再通过Cursor的AI功能进行代码优化或者我们手动去调整或修改代码

5.4 步骤四：部署与存储

通过MCP服务完成后续操作：

  1. 使用GitLab MCP服务上传代码到仓库

  2. 配置MongoDB MCP服务存储表单数据

  3. 使用Cursor的一键部署功能部署到服务器

结论

通过Claude 3.7、Cursor编辑器和MCP协议的组合，我们实现了从自然语言描述到完整表单应用的全流程自动化开发。

大家发现了？

手动开发 低代码开发
​​核心操作​​ UI组件库 + 字段 + 调整布局 + 处理逻辑 编辑器 + 编译器
​​开发效率​​ 效率较低 快速变化、快速搭建
​​部署速度​​ 部署较慢 快速部署
​​自由度​​ 自由度高 拓展困难
​​适用场景​​ 定制化程度高、复杂度大的项目 简单和中等复杂度的应用程序开发

其实我们可以通过ai代码的模式，结合LangChain等框架，构建一种全新的智能表单系统。

  1. 维护字段、对应组件和相关配置
  2. 根据配置信息生成预设提示词
  3. AI直接生成代码，自动测试，并手动调优，最终落库
  4. 前端渲染表单
相关推荐
龙在天5 小时前
首屏优化
前端
小鱼儿亮亮5 小时前
Vue.js 父子组件通信的十种方式
前端·vue.js
日月晨曦5 小时前
Node.js 架构与 HTTP 服务实战：从「跑龙套」到「流量明星」的进化
前端·node.js
P7Dreamer5 小时前
Vue 表格悬停复制指令：优雅地一键复制单元格内容
前端·vue.js
用户010483831045 小时前
别再只用 WebSocket 做即时通讯了！MQTT+RabbitMQ 实战教程，轻量又高效
前端
我的写法有点潮5 小时前
前端必须会的 TypedArray：一文吃透
前端·javascript
Mintopia5 小时前
扩散模型在 Web 图像生成中的技术演进：从“随机噪声”到“浏览器里的画家”
前端·javascript·aigc
跟橙姐学代码5 小时前
Python学习笔记：正则表达式一文通——从入门到精通
前端·python·ipython
召摇5 小时前
简洁语法的逻辑赋值操作符
前端·javascript
热门推荐
01Xget：下一代开源资源获取加速引擎，让你的文件下载、储存库克隆和镜像拉取快如闪电02UV安装并设置国内源03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04奈飞工厂官网，国内Netflix影视在线看|中文网页电脑版入口05不再让Windows更新！&Edge游戏助手卸载及关闭自动更新06KGG转MP3工具|非KGM文件|解密音频07阿里Qoder AI 新开发工具，长期记忆、Wiki和Quest模式是它的独有特性08Linux下V2Ray安装配置指南09TRAE Rules 实践：为项目配置 6A 工作流10NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南