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

小小小怪兽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. 前端渲染表单
相关推荐
Song5593 天前
elpis框架抽离并发布 SDK-NPM 包
前端
Mintopia3 天前
低代码平台如何集成 AIGC 技术？核心技术衔接点解析
前端·javascript·aigc
Mintopia3 天前
Next.js + AI-SDK + DeepSeek：3 分钟建设属于你的 AI 问答 Demo
前端·javascript·next.js
anyup3 天前
历时 10 天+，速度提升 20 倍，新文档正式上线！uView Pro 开源组件库体验再升级！
前端·typescript·uni-app
_AaronWong3 天前
仿 ElementPlus 的函数式弹窗调用
前端·element
用户21411832636023 天前
AI 当 “牛马”！免费云服务器 + 开源插件，7×24 小时写小说，一晚交出 70 章长篇
前端
IT_陈寒3 天前
React 18新特性全解析：这5个隐藏API让你的性能飙升200%！
前端·人工智能·后端
朦胧之3 天前
【NestJS】项目调试
前端·node.js
！win ！3 天前
不定高元素动画实现方案（中）
前端·动画
xw53 天前
不定高元素动画实现方案（中）
前端·css
热门推荐
01UV 工具安装与国内镜像源配置指南02Spec-Kit 使用指南0346个Nano-banana 精选提示词，持续更新中04GitHub 镜像站点05UV安装并设置国内源06解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题07保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）08KGG转MP3工具|非KGM文件|解密音频09Linux下V2Ray安装配置指南10jdk21下载、安装（Windows、Linux、macOS）