【OpenAI】试试使用ChatGPT来写前端代码，vue+elementui-FreeNAS中文网

admin 管理员组

文章数量: 887021

背景

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 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1724525574h756197.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

技术交流 – FreeNAS中文网

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

背景

开始

总结

AI插件链接

更多相关文章

聊聊 ChatGPT

ChatGPT吐槽式自评

ChatGPT新手指南-2024.9.25

大致讲一下ChatGPT的原理，给小孩子解释什么是ChatGPT

吴恩达《ChatGPT Prompt Engineering for Developers》课程中文版、学习笔记

Windows用户也能使用桌面版ChatGPT了！

GetLastError 函数错误信息 代码大全

day04 vue学习

ChatGPT基础内容及使用

openai chatgpt 大语言模型

风靡全球的ChatGPT是什么？深度解读ChatGPT的方方面面！

【大模型】Spring AI对接ChatGpt使用详解

深入浅出剖析AI对话「ChatGPT，Chat Generative Pre-trained Transformer」基于GPT的聊天机器人

chatgpt学术科研prompt模板有哪些？chatgpt的学术prompt有哪些？学术gpt，学术科研

百度文心一言对标 ChatGPT，你怎么看？

Claude和ChatGPT到底选择谁？用真实数据对比

ChatGPT API 学习

python编的程序转换成android可执行代码_有python代码怎么编成可执行的exe程序?

OpenAI 发布 o1 Pro 与 ChatGPT Pro：更强大、更智能的 AI 助手

Windows7 ：Vue(vuecli 4.2.3)开发环境搭建

发表评论

推荐文章

Android基于box2d开发弹弓类游戏[四]

Android仿直播类app赠送礼物功能

Android直播间上下,Android直播间消息流图文混排

mlp 参数调优

【实测国内充值成功】ChatGPT Plus会员开通指南,过程简单、高效、不复杂！

热门文章

易语言 win7 计算机名,高手讲说win7系统易语言打开支持库配置就崩溃的处理办法...

VMware 15 安装 MAC OS 10 13 原版（详细图文教程）

重庆2017c语言报名时间,2017年重庆交通大学《C语言程序设计》考研复试大纲

html5弹弓射球的代码,coco2d

论文笔记：Beyond a Pre

本地Facts

阿里聚安全

本地连接已连接上，但电脑无法上网

windows系统激活存在哪里

小米PC电脑手机互联互通，小米妙享，小米电脑管家，老款小米笔记本怎么使用，其他品牌笔记本怎么使用，一分钟教会你

最新文章

GetLastError 函数错误信息代码大全