前言

低代码由来已久，主要是减少开发人员的编码时间，提高产品交付效率，甚至功能完备的低代码平台可以使非开发人员使用。

正如此，多年来，低代码平台层不出穷，但依然没有出现现象级的产品，不过，大多数公司也都有自己的低代码平台，体验和效果也是参差不齐。

新范式的到来

如今人工智能又达到了一个新的阶段，有预言说，它最先代替的是程序员。我认为这很难，如果你深度使用了ChatGPT，它确实非常非常惊艳，但是，要想取代程序员，还为时过早。不过如果能够善加利用，它将是一把利器，可以事半功倍。

但是，目前还没有发现一款体验非常好的GPT产品可以无缝的与开发环境融合。即使“历史悠久”的GitHub Copilot也没有达到一种理想效果，虽然还有它的孪生兄弟GitHub Copilot Chat也总是缺少一些体验。

虽然现在还没一个非常好的产品来辅助我们开发（GitHub Copilot已经很好了），但是也不影响一个新的范式即将到来，GPT注定会改变我们的开发方式。

目前，就我的体验来说，ChatGPT的自定义GPT体验是最好的，但是在开发的过程中，也相当割裂。下面我们就来定制这样一个GPT，看他的效果如何。

自定义GPT

假定你可以访问ChatGPT，并且开通了Plus。

自定义一个GPT和开发一个项目差不多，需要反复调试，第一版完成之后，还需迭代。但是，相对于开发项目，自定义一个GPT的调试过程要相对简单，我这里直接给出一个调试好的，你可以直接把这个指令粘贴到你的ChatGPT里。

你是一位资深的前端开发工程师，你的目标是根据用户要求创建一个不省略任何逻辑的，功能完备的组件。你需要跟用户沟通需求，满足条件之后进行组件开发。

你严格遵循如下规则完成组件开发：

- 使用最新的Typescript和Vue3进行开发。

- 使用Ant Design of Vue UI库。

- 代码结构必须是这样的：<template></template><script setup lang="ts"></script><style scoped></style>。

- 使用 Ant Design Vue 的栅格系统：利用 Ant Design Vue 的 <a-row> 和 <a-col> 组件创建响应式布局。

- 如果需要导航路由，必须这样：import { useRouter } from 'vue-router';  const router = useRouter(); router.push('xxx');

- 如果有URL相关访问，必须这样：import { useRoute } from 'vue-router';  const route = useRoute(); route.xxx

- 如果有提示、通知等，必须这样：import { notification, message, xxx } from 'ant-design-vue';

- 如果有Form表单，必须这样：<a-form @finish="handleLogin" :model="loginForm" :rules="rules" :label-col="{ span: 4 }" layout="horizontal">

- 如果组件有文字必须使用中文。

- 代码里避免使用any，复杂字段必须定义类型，可以参考api.json文档。

- 如果有数据提交按钮，按钮必须包含loading，防止多次触发。

- 如果有危险操作，进行二次确认。

- 如果有数据访问，做好下面处理：

    - import axios from '@/axios-config';

    - 根据api.json文档定义请求数据及响应的数据类型。

    - 使用api.json提供的接口路径。

    - 根据响应状态进行成功或者失败提示。

- 所有接口返回的数据类型都被如下范型包括:

[这里需要填写自己的]

- 输出代码之前：

    - 必须先参考示例代码文件LoginView.vue【重要】

    - 先把思路写出来，观察思路是否符合规则，之后再输出代码。

- 示例代码文件LoginView.vue内容如下：

[这里需要填写自己的]

你需要把 API 文档上传进去。

另外，可以根据开发过程遇到的问题，不断的调试这个指令，非常简单。

使用自定义GPT

上面，我们自定义了一个GPT，怎么使用呢？比如你可以输入这样的要求：

根据API文档及示例代码开发一个用户注册组件，要求如下： 

1、根据API定义三个字段，邮箱、邮箱验证码、密码 

2、邮箱后面需要有验证码发送按钮，参考下面代码 
<a-input-search v-model:value="value" placeholder="input search text" size="large" @search="onSearch" >
<template #enterButton>
<a-button>Custom</a-button>
</template>
</a-input-search>

3、发送按钮要有一分钟倒计时功能

4、注册按钮下面要有一个跳转逻辑：已有账户登录？

它就会非常贴心的生成如下代码：

<template>

  <a-row type="flex" justify="center">

    <a-col :xs="24" :sm="16" :md="12">

      <a-form @finish="handleRegister" :model="registerForm" :rules="rules" layout="horizontal">

        <a-form-item label="邮箱" name="email">

          <a-input-search

            v-model:value="registerForm.email"
placeholder="请输入邮箱"
size="large"

            @search="sendVerificationCode"

          >

            <template #enterButton>

              <a-button :disabled="countdown > 0">{{ countdown > 0 ? `${countdown}秒` : '发送验证码' }}</a-button>

            </template>

          </a-input-search>

        </a-form-item>

        <a-form-item label="邮箱验证码" name="emailVerification">

          <a-input v-model:value="registerForm.emailVerification" placeholder="请输入验证码" />

        </a-form-item>

        <a-form-item label="密码" name="password">

          <a-input-password v-model:value="registerForm.password" placeholder="请输入密码" />

        </a-form-item>

        <a-form-item>

          <a-button type="primary" block html-type="submit" :loading="loading">注册</a-button>

        </a-form-item>

        <a-form-item>

          已有账户登录？<a @click="navigateToLogin">点击登录</a>

        </a-form-item>

      </a-form>

    </a-col>

  </a-row>

</template>


<script setup lang="ts">

import { ref } from 'vue';

import { useRouter } from 'vue-router';

import { notification } from 'ant-design-vue';

import axios from '@/axios-config';


interface RegisterModel {

  email: string;

  emailVerification: string;

  password: string;

}


const registerForm = ref<RegisterModel>({

  email: '',

  emailVerification: '',

  password: ''

});

const rules = {

  email: [{ required: true, message: '请输入邮箱', trigger: 'blur', type: 'email' }],

  emailVerification: [{ required: true, message: '请输入验证码', trigger: 'blur' }],

  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]

};

const loading = ref(false);

const countdown = ref(0);

const router = useRouter();


const sendVerificationCode = async () => {

  if (countdown.value > 0) return;


  // 发送验证码请求

  try {

    const response = await axios.get('/auth/verify-email', { params: { email: registerForm.value.email } });

    if (response.appCode === 2000) {

      notification.success({ message: response.message });
countdown.value = 60;

      let interval = setInterval(() => {

        countdown.value--;

        if (countdown.value === 0) clearInterval(interval);

      }, 1000);

    } else {

      notification.error({ message: response.message });

    }

  } catch (error) {

    notification.error({ message: '验证码发送失败' });

  }

};


const handleRegister = async () => {

  try {
loading.value = true;

    const response = await axios.post('/auth/register', registerForm.value);

    if (response.appCode === 2000) {

      notification.success({

        message: '注册成功',

        description: '您可以现在登录了'

      });

      router.push('/login');

    } else {

      notification.error({

        message: '注册失败',

        description: response.message

      });

    }

  } finally {
loading.value = false;

  }

};


const navigateToLogin = () => {

  router.push('/login');

};

</script>


<style scoped>

</style>

效果非常好，如果有哪些不满足要求， 可以不断的与之沟通，继续完善代码。当然如果有些小的改动，可以直接在编辑器里修改代码。比如，上面的上面发送验证码的地方是有问题的，没有没有判断邮箱是否可用，这里你就可以自己加个逻辑，或者告诉它 发送邮箱验证码之前，必须校验邮箱

于是，它就会给你想要的逻辑，非常喜人。不过有时候他会给出代码片段，有时候也会给出全部代码，看自己情况要求它。

const isEmailValid = (email: string): boolean => {
const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
return emailRegex.test(email);

};

const sendVerificationCode = async () => {
if (!isEmailValid(registerForm.value.email)) {

    notification.error({ message: '请输入有效的邮箱地址' });
return;

  }

if (countdown.value > 0) return;

// 原有的发送验证码逻辑保持不变
// ...

};

总结

它现在能做到的已经非常棒了，未来会更加可期。

不过，从体验角度来说，我们需要在开发工具和ChatGPT之间来回切换，还是有些麻烦，什么时候，开发工具中，可以支持就太好。

还有一点儿，现在还需要我们自己去发现问题，与它沟通，指出问题，让它修正问题。如果有一个良好的产品，可以使用测试驱动开发，先让它生成测试代码，根据测试代码，生成逻辑代码。如果测试代码跑不通，自动的把错误消息反馈给它，它再修改，再跑测试代码，这体验简直逆天。

期望

希望一个体验非常完美的平台赶快到来：

如果有这样一个平台，那么，开发效率将是巨大的提升。