【OpenAI】试试使用ChatGPT来写前端代码，vue+elementui|电子爱好者

admin管理员组
文章数量:1593928

背景

AI模型，GPT3.5（GPT4次数有限，使用后发现比3.5也就稍微好这么一奈奈）

开始

先来个简单版的

指令：使用vue+elementui画一个订单管理页面，要求实现curd基础功能

结果：AI秒写了个代码。可以直接拿过来改改，但是对内容不够理想，要改的较多。

<template>
  <div>
    <el-button type="primary" @click="showAddDialog">添加订单</el-button>
    <el-table :data="orders" style="width: 100%">
      <el-table-column prop="id" label="订单ID"></el-table-column>
      <el-table-column prop="name" label="订单名称"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="showEditDialog(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteOrder(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="addDialogVisible" title="添加订单" @close="resetForm('add')">
      <el-form :model="addForm" label-width="80px">
        <el-form-item label="订单ID">
          <el-input v-model="addForm.id"></el-input>
        </el-form-item>
        <el-form-item label="订单名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addOrder">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="editDialogVisible" title="编辑订单" @close="resetForm('edit')">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="订单ID">
          <el-input v-model="editForm.id"></el-input>
        </el-form-item>
        <el-form-item label="订单名称">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateOrder">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orders: [
        { id: 1, name: '订单1' },
        { id: 2, name: '订单2' },
        { id: 3, name: '订单3' }
      ],
      addDialogVisible: false,
      editDialogVisible: false,
      addForm: {
        id: '',
        name: ''
      },
      editForm: {
        id: '',
        name: ''
      }
    };
  },
  methods: {
    showAddDialog() {
      this.addDialogVisible = true;
    },
    showEditDialog(row) {
      this.editForm = { ...row };
      this.editDialogVisible = true;
    },
    deleteOrder(row) {
      const index = this.orders.indexOf(row);
      if (index !== -1) {
        this.orders.splice(index, 1);
      }
    },
    addOrder() {
      this.orders.push({ ...this.addForm });
      this.addDialogVisible = false;
      this.resetForm('add');
    },
    updateOrder() {
      const index = this.orders.findIndex(order => order.id === this.editForm.id);
      if (index !== -1) {
        this.orders.splice(index, 1, { ...this.editForm });
      }
      this.editDialogVisible = false;
      this.resetForm('edit');
    },
    resetForm(type) {
      if (type === 'add') {
        this.addForm = { id: '', name: '' };
      } else if (type === 'edit') {
        this.editForm = { id: '', name: '' };
      }
    }
  }
};
</script>

于是，把指令说的再精确一点

指令：使用vue+elementui画一个订单管理页面，页面布局有查询条件、操作按钮，表格、分页。查询字段：订单编号、可远程搜索的订单来源，商品编号，商品名称。表格字段：订单编号、订单来源、价格、商品编号、商品名称、创建用户，创建时间。操作按钮有新增、编辑、删除、批量删除、导入、导出，需实现操作按钮的基本功能

结果：这下就得到了自己定制化的代码。当然，代码不可能完全符合自己的预期

<template>
  <div>
    <el-form :inline="true" :model="queryForm" class="query-form">
      <el-form-item label="订单编号">
        <el-input v-model="queryForm.orderId"></el-input>
      </el-form-item>
      <el-form-item label="订单来源">
        <el-select v-model="queryForm.orderSource" filterable remote :remote-method="getOrderSources">
          <el-option v-for="source in orderSources" :key="source" :label="source" :value="source"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品编号">
        <el-input v-model="queryForm.productId"></el-input>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="queryForm.productName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchOrders">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row class="operation-row">
      <el-col>
        <el-button type="primary" icon="el-icon-plus" @click="showAddDialog">新增</el-button>
        <el-button type="primary" icon="el-icon-edit" @click="showEditDialog" :disabled="selectedOrders.length !== 1">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="deleteOrder" :disabled="selectedOrders.length === 0">删除</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="deleteSelectedOrders" :disabled="selectedOrders.length === 0">批量删除</el-button>
        <el-button type="primary" icon="el-icon-download" @click="exportOrders">导出</el-button>
        <el-upload :show-file-list="false" :on-success="importOrders" :before-upload="beforeImport">
          <el-button type="primary" icon="el-icon-upload">导入</el-button>
        </el-upload>
      </el-col>
    </el-row>
    <el-table :data="orders" style="width: 100%" @selection-change="selectedOrders = $event">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="orderId" label="订单编号"></el-table-column>
      <el-table-column prop="orderSource" label="订单来源"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="productId" label="商品编号"></el-table-column>
      <el-table-column prop="productName" label="商品名称"></el-table-column>
      <el-table-column prop="createdUser" label="创建用户"></el-table-column>
      <el-table-column prop="createdTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="showEditDialog(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteOrder(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange">
    </el-pagination>
    <el-dialog :visible.sync="addDialogVisible" title="新增订单" @close="resetForm('add')">
      <el-form :model="addForm" label-width="80px">
        <el-form-item label="订单编号">
          <el-input v-model="addForm.orderId"></el-input>
        </el-form-item>
        <el-form-item label="订单来源">
          <el-select v-model="addForm.orderSource">
            <el-option v-for="source in orderSources" :key="source" :label="source" :value="source"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="addForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品编号">
          <el-input v-model="addForm.productId"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="addForm.productName"></el-input>
        </el-form-item>
        <el-form-item label="创建用户">
          <el-input v-model="addForm.createdUser"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="addForm.createdTime" type="datetime"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addOrder">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="editDialogVisible" title="编辑订单" @close="resetForm('edit')">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="订单编号">
          <el-input v-model="editForm.orderId"></el-input>
        </el-form-item>
        <el-form-item label="订单来源">
          <el-select v-model="editForm.orderSource">
            <el-option v-for="source in orderSources" :key="source" :label="source" :value="source"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="editForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品编号">
          <el-input v-model="editForm.productId"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="editForm.productName"></el-input>
        </el-form-item>
        <el-form-item label="创建用户">
          <el-input v-model="editForm.createdUser"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="editForm.createdTime" type="datetime"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateOrder">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
省略

AI的代码并不会是完美的，同样有bug，还会有一些不合理的地方，甚至有的地方逻辑是错的，这些可自行修改，也可以通过指令让AI来修改，如下

指令：新增和修改可共用dialog，通过变量来区分新增和编辑

指令：编辑、删除，重复，只需要保留操作列里面的

最终得到想要的代码，基本上简单改改就能用了。

<template>
  <div>
    <div class="query-form">
      <!-- 查询条件 -->
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="订单号">
          <el-input v-model="queryForm.orderId"></el-input>
        </el-form-item>
        <el-form-item label="订单来源">
          <el-select v-model="queryForm.orderSource" placeholder="请选择">
            <el-option v-for="source in orderSources" :key="source" :label="source" :value="source"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="queryForm.productName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchOrders">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="operation-buttons">
      <!-- 操作按钮 -->
      <el-button type="primary" @click="openAddDialog">新增</el-button>
      <el-button type="danger" @click="batchDeleteOrders" :disabled="selectedOrders.length === 0">批量删除</el-button>
      <el-button type="success" @click="importOrders">导入</el-button>
      <el-button type="info" @click="exportOrders">导出</el-button>
    </div>
    <el-table :data="orders" stripe border fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="orderId" label="订单号" width="120"></el-table-column>
      <el-table-column prop="orderSource" label="订单来源" width="120"></el-table-column>
      <el-table-column prop="price" label="价格" width="120"></el-table-column>
      <el-table-column prop="productName" label="商品名称"></el-table-column>
      <el-table-column prop="createdUser" label="创建用户" width="120"></el-table-column>
      <el-table-column prop="createdTime" label="创建时间" width="180"></el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteOrder(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handlePageChange"></el-pagination>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <el-form :model="form" label-width="80px">
        <el-form-item label="订单号">
          <el-input v-model="form.orderId"></el-input>
        </el-form-item>
        <el-form-item label="订单来源">
          <el-select v-model="form.orderSource" placeholder="请选择">
            <el-option v-for="source in orderSources" :key="source" :label="source" :value="source"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="form.productName"></el-input>
        </el-form-item>
        <el-form-item label="创建用户">
          <el-input v-model="form.createdUser"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="form.createdTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">{{ dialogType === 'add' ? '新增' : '修改' }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryForm: {
        orderId: '',
        orderSource: '',
        productName: ''
      },
      orderSources: ['来源1', '来源2', '来源3'],
      orders: [
        {
          orderId: '001',
          orderSource: '来源1',
          price: 100,
          productName: '商品1',
          createdUser: 'user1',
          createdTime: '2023-07-17 00:00:00'
        },
        {
          orderId: '002',
          orderSource: '来源2',
          price: 200,
          productName: '商品2',
          createdUser: 'user2',
          createdTime: '2023-07-16 00:00:00'
        },
        {
          orderId: '003',
          orderSource: '来源3',
          price: 300,
          productName: '商品3',
          createdUser: 'user3',
          createdTime: '2023-07-15 00:00:00'
        }
      ],
      total: 3,
      currentPage: 1,
      pageSize: 10,
      selectedOrders: [],
      dialogVisible: false,
      dialogTitle: '',
      dialogType: '',
      form: {
        orderId: '',
        orderSource: '',
        price: '',
        productName: '',
        createdUser: '',
        createdTime: ''
      }
    };
  },
  methods: {
    searchOrders() {
      // 根据查询条件进行查询
      // ...
    },
    openAddDialog() {
      this.dialogType = 'add';
      this.dialogTitle = '新增订单';
      this.dialogVisible = true;
    },
    openEditDialog(order) {
      this.dialogType = 'edit';
      this.dialogTitle = '编辑订单';
      this.form = { ...order };
      this.dialogVisible = true;
    },
    deleteOrder(order) {
      // 删除订单
      // ...
    },
    batchDeleteOrders() {
      // 批量删除订单
      // ...
    },
    importOrders() {
      // 导入订单
      // ...
    },
    exportOrders() {
      // 导出订单
      // ...
    },
    submitForm() {
      if (this.dialogType === 'add') {
        // 新增操作
        // ...
      } else if (this.dialogType === 'edit') {
        // 编辑操作
        // ...
      }
      this.dialogVisible = false;
    },
    resetForm() {
      this.form = {
        orderId: '',
        orderSource: '',
        price: '',
        productName: '',
        createdUser: '',
        createdTime: ''
      };
    },
    handleSelectionChange(selection) {
      this.selectedOrders = selection;
    },
    handlePageChange(page) {
      this.currentPage = page;
      // 根据页码重新查询数据
      // ...
    }
  }
};
</script>

<style scoped>
.query-form {
  margin-bottom: 20px;
}

.operation-buttons {
  margin-bottom: 20px;
}

.el-dialog__body {
  padding: 20px;
}
</style>

总结

1、AI可作为工具来使用，能快速帮助生成一些简单的耗时的操作。

2、AI写的代码，取决于指令的详细程度，就像有的需求文档上，只有一句话，那谁也不知道写需求的人，想要什么，是同样的道理。

3、试过后发现，AI也是经常会出错，比如漏了一些功能，或者一些不合理的代码，当发现问题后，通过指令说明，AI可以快速的进行修改。

4、可以让AI写一些工具类、算法等。这应该是AI的强项，因为算法都是有规律可循的。

5、AI已经非常智能，随着对他的期待值越来越高，就会发现，机器终归是机器，要想完全取代人，目前来看，路程还有点远。即便如此，已经可以取代很多的生产力。希望继续努力跟上第四次工业革命的步伐。此想法基于GPT3.5的使用后，得出的个人想法。

AI插件链接

https://sider.ai/invited?c=1b5e7f7e26db2f8f62535c1f054cea4e

本文标签：来写代码 chatGPT openAI vue

版权声明：本文标题：【OpenAI】试试使用ChatGPT来写前端代码，vue+elementui 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：https://m.elefans.com/dongtai/1724561749a989971.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

电子爱好者 - 最新技术资讯及电子产品介绍！

【OpenAI】试试使用ChatGPT来写前端代码，vue+elementui

背景

开始

总结

AI插件链接

更多相关文章

【3分钟高效制作PPT】ChatGPT搭配闪击PPT生成PPT，你只需要输入一个标题

【满血Buff】ChatGPT科普篇，三段式介绍

ChatGPT理论分析

chatgpt报错 Something went wrong 解决方法

Microsoft Edge浏览器中使用免费的ChatGPT

Vue3实现简单的ChatGPT接口调用

Chatgpt-3 训练使用的分布式技术和框架

百度chatGPT chatgpt 程序员

基于C#制作一个桌面ChatGPT助手

【赠书第3期】用ChatGPT轻松玩转机器学习与深度学习

芯片工程师的ChatGPT初体验（上）

【ChatGPT】使用ChatGPT进行51单片机程序编程体验

ChatGPT：深度学习和机器学习的知识桥梁

ChatGPT教程之 01 什么是ChatGPT革命性的对话生成新工具

利用ChatGPT巧妙提升演讲技巧，轻松驾驭演讲舞台【文末送书】

反病毒攻防研究第002篇：利用缝隙实现代码的植入

vue-pdf 操作

用python写代码，把PDF转换成word

Java 代码实现pdf转word文件 | 无损转换完整代码教程

【深度学习】--情感分类-附带全套代码（网络结构：编码+全连接）

发表评论

推荐文章

惠普台式计算机打不开光驱,惠普台式机怎么样设置光盘启动

web安全day20：今天讲清楚漏洞和木马的区别，最后一个实验演示通过445端口控制服务器

7 款最好的免费 PDF 转 Word 转换器工具

WebRTC音视频之噪音消除功能

NVIDIA Tegra3，高通S4 MSM8960，三星Exynos4【新一代手机处理器大比拼】

热门文章

【PyCharm安装+使用】Python+PyCharm安装，你看看这篇就够了，保证一看就会（附带插件码）

推荐几款优秀的文档加密软件 | 企业文件加密解决方案

引导过程与解决root密码忘记问题、不能正常开机

如何把flv转换成mp3格式 音频转换器哪个好

创业时代片尾曲wma格式怎么转换为mp3

计算机外设：显示器是如何工作的？

vmos切换安卓版本_虚拟大师VMOS——手机里的&amp;quot;虚拟机&amp;quot;

win10多合一原版系统_制作WIN10多合一原版系统

GHD outlet the market investigate

数据科学学习心得_当我开始学习数据科学时我希望知道的5件事

最新文章

10个简单的放松运动

金融危机与我何干--一分钟通俗演绎次贷危机

谁说的C语言已死？

数字经济与信息资本主义——美国商务部《数字经济2000》中译本序

IBM论坛2010，暨IBM2010中国策略发布会：紧贴中国政府，落实云计算

失眠

【转载】NetLogic买断多核芯片公司RMI

[转]800个有趣句子帮你记忆7000个单词

网络入侵检测与UDP包捕

新手学Flash

发一套最完整的直升机原理（绝对完整，绝对精华）

一个普通IT人的十年回顾

C语言死了吗？

《程序员》百期文章回顾之9——中国优秀软件架构师感悟录

（转载）中国优秀软件架构师感悟录

小米手机肿么还原时钟

15000流明是多少瓦

一般普通投影机功率多大?

苹果绿联转换器有些投影机不能用

坚果V9投影机具体参数?

有关九年级作文850字精选

80后90后_高一作文

中级卫生专业资格中医全科学主治医师中级模拟题2021年(9)案与解析

(精品)师范大学招考硕士研究生课程八六0试卷

ZXMVC8900(V3

【模拟人生4（The Sims 4）性感露背黑色亮片礼服MOD V20190313】模拟人生4（The Sims 4）性感露背黑色亮片礼服MOD V20190313 官方免费下载

【生化危机2：重制版（Resident Evil 2 Remake）克莱尔红头发深色服装MOD】生化危机2：重制版（Resident Evil 2 Remake）克莱尔红头发深色服装MOD 官方免费下载

【模拟人生4（The Sims 4）性感露背深V领吊带裙MOD V20190311】模拟人生4（The Sims 4）性感露背深V领吊带裙MOD V20190311 官方免费下载

【模拟人生4（The Sims 4）科幻风宇宙飞船家庭住宅MOD V20190311】模拟人生4（The Sims 4）科幻风宇宙飞船家庭住宅MOD V20190311 官方免费下载

【鬼泣5（Devil May Cry V）v1.0十四项修改】鬼泣5（Devil May Cry V）v1.0十四项修改 官方免费下载

如何实现高效的treenode搜索算法

treenode与链表有何本质区别

在哪些场景下应优先考虑使用treenode

treenode在树形结构中的角色是什么

如何把flv转换成mp3格式音频转换器哪个好

vmos切换安卓版本_虚拟大师VMOS——手机里的"虚拟机"

【鬼泣5（Devil May Cry V）v1.0十四项修改】鬼泣5（Devil May Cry V）v1.0十四项修改官方免费下载