devbox
秋刀鱼在做梦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【OpenAI】试试使用ChatGPT来写前端代码，vue+elementui_前端框架中加入openai生成代码

作者：秋刀鱼在做梦 | 2024-07-31 03:47:40

赞

踩

前端框架中加入openai生成代码

背景

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

开始

先来个简单版的

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

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

  1. <template>
  2.   <div>
  3.     <el-button type="primary" @click="showAddDialog">添加订单</el-button>
  4.     <el-table :data="orders" style="width: 100%">
  5.       <el-table-column prop="id" label="订单ID"></el-table-column>
  6.       <el-table-column prop="name" label="订单名称"></el-table-column>
  7.       <el-table-column label="操作">
  8.         <template slot-scope="scope">
  9.           <el-button type="primary" size="small" @click="showEditDialog(scope.row)">编辑</el-button>
  10.           <el-button type="danger" size="small" @click="deleteOrder(scope.row)">删除</el-button>
  11.         </template>
  12.       </el-table-column>
  13.     </el-table>
  14.     <el-dialog :visible.sync="addDialogVisible" title="添加订单" @close="resetForm('add')">
  15.       <el-form :model="addForm" label-width="80px">
  16.         <el-form-item label="订单ID">
  17.           <el-input v-model="addForm.id"></el-input>
  18.         </el-form-item>
  19.         <el-form-item label="订单名称">
  20.           <el-input v-model="addForm.name"></el-input>
  21.         </el-form-item>
  22.       </el-form>
  23.       <div slot="footer">
  24.         <el-button @click="addDialogVisible = false">取消</el-button>
  25.         <el-button type="primary" @click="addOrder">确定</el-button>
  26.       </div>
  27.     </el-dialog>
  28.     <el-dialog :visible.sync="editDialogVisible" title="编辑订单" @close="resetForm('edit')">
  29.       <el-form :model="editForm" label-width="80px">
  30.         <el-form-item label="订单ID">
  31.           <el-input v-model="editForm.id"></el-input>
  32.         </el-form-item>
  33.         <el-form-item label="订单名称">
  34.           <el-input v-model="editForm.name"></el-input>
  35.         </el-form-item>
  36.       </el-form>
  37.       <div slot="footer">
  38.         <el-button @click="editDialogVisible = false">取消</el-button>
  39.         <el-button type="primary" @click="updateOrder">确定</el-button>
  40.       </div>
  41.     </el-dialog>
  42.   </div>
  43. </template>
  44.  
  45. <script>
  46. export default {
  47.   data() {
  48.     return {
  49.       orders: [
  50.         { id: 1, name: '订单1' },
  51.         { id: 2, name: '订单2' },
  52.         { id: 3, name: '订单3' }
  53.       ],
  54.       addDialogVisible: false,
  55.       editDialogVisible: false,
  56.       addForm: {
  57.         id: '',
  58.         name: ''
  59.       },
  60.       editForm: {
  61.         id: '',
  62.         name: ''
  63.       }
  64.     };
  65.   },
  66.   methods: {
  67.     showAddDialog() {
  68.       this.addDialogVisible = true;
  69.     },
  70.     showEditDialog(row) {
  71.       this.editForm = { ...row };
  72.       this.editDialogVisible = true;
  73.     },
  74.     deleteOrder(row) {
  75.       const index = this.orders.indexOf(row);
  76.       if (index !== -1) {
  77.         this.orders.splice(index, 1);
  78.       }
  79.     },
  80.     addOrder() {
  81.       this.orders.push({ ...this.addForm });
  82.       this.addDialogVisible = false;
  83.       this.resetForm('add');
  84.     },
  85.     updateOrder() {
  86.       const index = this.orders.findIndex(order => order.id === this.editForm.id);
  87.       if (index !== -1) {
  88.         this.orders.splice(index, 1, { ...this.editForm });
  89.       }
  90.       this.editDialogVisible = false;
  91.       this.resetForm('edit');
  92.     },
  93.     resetForm(type) {
  94.       if (type === 'add') {
  95.         this.addForm = { id: '', name: '' };
  96.       } else if (type === 'edit') {
  97.         this.editForm = { id: '', name: '' };
  98.       }
  99.     }
  100.   }
  101. };
  102. </script>

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

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

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

  1. <template>
  2.   <div>
  3.     <el-form :inline="true" :model="queryForm" class="query-form">
  4.       <el-form-item label="订单编号">
  5.         <el-input v-model="queryForm.orderId"></el-input>
  6.       </el-form-item>
  7.       <el-form-item label="订单来源">
  8.         <el-select v-model="queryForm.orderSource" filterable remote :remote-method="getOrderSources">
  9.           <el-option v-for="source in orderSources" :key="source" :label="source" :value="source"></el-option>
  10.         </el-select>
  11.       </el-form-item>
  12.       <el-form-item label="商品编号">
  13.         <el-input v-model="queryForm.productId"></el-input>
  14.       </el-form-item>
  15.       <el-form-item label="商品名称">
  16.         <el-input v-model="queryForm.productName"></el-input>
  17.       </el-form-item>
  18.       <el-form-item>
  19.         <el-button type="primary" @click="searchOrders">查询</el-button>
  20.       </el-form-item>
  21.     </el-form>
  22.     <el-row class="operation-row">
  23.       <el-col>
  24.         <el-button type="primary" icon="el-icon-plus" @click="showAddDialog">新增</el-button>
  25.         <el-button type="primary" icon="el-icon-edit" @click="showEditDialog" :disabled="selectedOrders.length !== 1">编辑</el-button>
  26.         <el-button type="danger" icon="el-icon-delete" @click="deleteOrder" :disabled="selectedOrders.length === 0">删除</el-button>
  27.         <el-button type="danger" icon="el-icon-delete" @click="deleteSelectedOrders" :disabled="selectedOrders.length === 0">批量删除</el-button>
  28.         <el-button type="primary" icon="el-icon-download" @click="exportOrders">导出</el-button>
  29.         <el-upload :show-file-list="false" :on-success="importOrders" :before-upload="beforeImport">
  30.           <el-button type="primary" icon="el-icon-upload">导入</el-button>
  31.         </el-upload>
  32.       </el-col>
  33.     </el-row>
  34.     <el-table :data="orders" style="width: 100%" @selection-change="selectedOrders = $event">
  35.       <el-table-column type="selection" width="55"></el-table-column>
  36.       <el-table-column prop="orderId" label="订单编号"></el-table-column>
  37.       <el-table-column prop="orderSource" label="订单来源"></el-table-column>
  38.       <el-table-column prop="price" label="价格"></el-table-column>
  39.       <el-table-column prop="productId" label="商品编号"></el-table-column>
  40.       <el-table-column prop="productName" label="商品名称"></el-table-column>
  41.       <el-table-column prop="createdUser" label="创建用户"></el-table-column>
  42.       <el-table-column prop="createdTime" label="创建时间"></el-table-column>
  43.       <el-table-column label="操作">
  44.         <template slot-scope="scope">
  45.           <el-button type="primary" size="small" @click="showEditDialog(scope.row)">编辑</el-button>
  46.           <el-button type="danger" size="small" @click="deleteOrder(scope.row)">删除</el-button>
  47.         </template>
  48.       </el-table-column>
  49.     </el-table>
  50.     <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total"
  51.       @size-change="handleSizeChange" @current-change="handleCurrentChange">
  52.     </el-pagination>
  53.     <el-dialog :visible.sync="addDialogVisible" title="新增订单" @close="resetForm('add')">
  54.       <el-form :model="addForm" label-width="80px">
  55.         <el-form-item label="订单编号">
  56.           <el-input v-model="addForm.orderId"></el-input>
  57.         </el-form-item>
  58.         <el-form-item label="订单来源">
  59.           <el-select v-model="addForm.orderSource">
  60.             <el-option v-for="source in orderSources" :key="source" :label="source" :value="source"></el-option>
  61.           </el-select>
  62.         </el-form-item>
  63.         <el-form-item label="价格">
  64.           <el-input v-model="addForm.price"></el-input>
  65.         </el-form-item>
  66.         <el-form-item label="商品编号">
  67.           <el-input v-model="addForm.productId"></el-input>
  68.         </el-form-item>
  69.         <el-form-item label="商品名称">
  70.           <el-input v-model="addForm.productName"></el-input>
  71.         </el-form-item>
  72.         <el-form-item label="创建用户">
  73.           <el-input v-model="addForm.createdUser"></el-input>
  74.         </el-form-item>
  75.         <el-form-item label="创建时间">
  76.           <el-date-picker v-model="addForm.createdTime" type="datetime"></el-date-picker>
  77.         </el-form-item>
  78.       </el-form>
  79.       <div slot="footer">
  80.         <el-button @click="addDialogVisible = false">取消</el-button>
  81.         <el-button type="primary" @click="addOrder">确定</el-button>
  82.       </div>
  83.     </el-dialog>
  84.     <el-dialog :visible.sync="editDialogVisible" title="编辑订单" @close="resetForm('edit')">
  85.       <el-form :model="editForm" label-width="80px">
  86.         <el-form-item label="订单编号">
  87.           <el-input v-model="editForm.orderId"></el-input>
  88.         </el-form-item>
  89.         <el-form-item label="订单来源">
  90.           <el-select v-model="editForm.orderSource">
  91.             <el-option v-for="source in orderSources" :key="source" :label="source" :value="source"></el-option>
  92.           </el-select>
  93.         </el-form-item>
  94.         <el-form-item label="价格">
  95.           <el-input v-model="editForm.price"></el-input>
  96.         </el-form-item>
  97.         <el-form-item label="商品编号">
  98.           <el-input v-model="editForm.productId"></el-input>
  99.         </el-form-item>
  100.         <el-form-item label="商品名称">
  101.           <el-input v-model="editForm.productName"></el-input>
  102.         </el-form-item>
  103.         <el-form-item label="创建用户">
  104.           <el-input v-model="editForm.createdUser"></el-input>
  105.         </el-form-item>
  106.         <el-form-item label="创建时间">
  107.           <el-date-picker v-model="editForm.createdTime" type="datetime"></el-date-picker>
  108.         </el-form-item>
  109.       </el-form>
  110.       <div slot="footer">
  111.         <el-button @click="editDialogVisible = false">取消</el-button>
  112.         <el-button type="primary" @click="updateOrder">确定</el-button>
  113.       </div>
  114.     </el-dialog>
  115.   </div>
  116. </template>
  117.  
  118. <script>
  119. export default {
  120. 省略

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

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

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

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

  1. <template>
  2.   <div>
  3.     <div class="query-form">
  4.       <!-- 查询条件 -->
  5.       <el-form :inline="true" :model="queryForm" class="demo-form-inline">
  6.         <el-form-item label="订单号">
  7.           <el-input v-model="queryForm.orderId"></el-input>
  8.         </el-form-item>
  9.         <el-form-item label="订单来源">
  10.           <el-select v-model="queryForm.orderSource" placeholder="请选择">
  11.             <el-option v-for="source in orderSources" :key="source" :label="source" :value="source"></el-option>
  12.           </el-select>
  13.         </el-form-item>
  14.         <el-form-item label="商品名称">
  15.           <el-input v-model="queryForm.productName"></el-input>
  16.         </el-form-item>
  17.         <el-form-item>
  18.           <el-button type="primary" @click="searchOrders">查询</el-button>
  19.         </el-form-item>
  20.       </el-form>
  21.     </div>
  22.     <div class="operation-buttons">
  23.       <!-- 操作按钮 -->
  24.       <el-button type="primary" @click="openAddDialog">新增</el-button>
  25.       <el-button type="danger" @click="batchDeleteOrders" :disabled="selectedOrders.length === 0">批量删除</el-button>
  26.       <el-button type="success" @click="importOrders">导入</el-button>
  27.       <el-button type="info" @click="exportOrders">导出</el-button>
  28.     </div>
  29.     <el-table :data="orders" stripe border fit highlight-current-row @selection-change="handleSelectionChange">
  30.       <el-table-column type="selection" width="55"></el-table-column>
  31.       <el-table-column prop="orderId" label="订单号" width="120"></el-table-column>
  32.       <el-table-column prop="orderSource" label="订单来源" width="120"></el-table-column>
  33.       <el-table-column prop="price" label="价格" width="120"></el-table-column>
  34.       <el-table-column prop="productName" label="商品名称"></el-table-column>
  35.       <el-table-column prop="createdUser" label="创建用户" width="120"></el-table-column>
  36.       <el-table-column prop="createdTime" label="创建时间" width="180"></el-table-column>
  37.       <el-table-column label="操作" width="120">
  38.         <template slot-scope="scope">
  39.           <el-button type="primary" size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
  40.           <el-button type="danger" size="mini" @click="deleteOrder(scope.row)">删除</el-button>
  41.         </template>
  42.       </el-table-column>
  43.     </el-table>
  44.     <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handlePageChange"></el-pagination>
  45.     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
  46.       <el-form :model="form" label-width="80px">
  47.         <el-form-item label="订单号">
  48.           <el-input v-model="form.orderId"></el-input>
  49.         </el-form-item>
  50.         <el-form-item label="订单来源">
  51.           <el-select v-model="form.orderSource" placeholder="请选择">
  52.             <el-option v-for="source in orderSources" :key="source" :label="source" :value="source"></el-option>
  53.           </el-select>
  54.         </el-form-item>
  55.         <el-form-item label="价格">
  56.           <el-input v-model="form.price"></el-input>
  57.         </el-form-item>
  58.         <el-form-item label="商品名称">
  59.           <el-input v-model="form.productName"></el-input>
  60.         </el-form-item>
  61.         <el-form-item label="创建用户">
  62.           <el-input v-model="form.createdUser"></el-input>
  63.         </el-form-item>
  64.         <el-form-item label="创建时间">
  65.           <el-date-picker v-model="form.createdTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
  66.         </el-form-item>
  67.       </el-form>
  68.       <div slot="footer">
  69.         <el-button @click="dialogVisible = false">取消</el-button>
  70.         <el-button type="primary" @click="submitForm">{{ dialogType === 'add' ? '新增' : '修改' }}</el-button>
  71.       </div>
  72.     </el-dialog>
  73.   </div>
  74. </template>
  75.  
  76. <script>
  77. export default {
  78.   data() {
  79.     return {
  80.       queryForm: {
  81.         orderId: '',
  82.         orderSource: '',
  83.         productName: ''
  84.       },
  85.       orderSources: ['来源1', '来源2', '来源3'],
  86.       orders: [
  87.         {
  88.           orderId: '001',
  89.           orderSource: '来源1',
  90.           price: 100,
  91.           productName: '商品1',
  92.           createdUser: 'user1',
  93.           createdTime: '2023-07-17 00:00:00'
  94.         },
  95.         {
  96.           orderId: '002',
  97.           orderSource: '来源2',
  98.           price: 200,
  99.           productName: '商品2',
  100.           createdUser: 'user2',
  101.           createdTime: '2023-07-16 00:00:00'
  102.         },
  103.         {
  104.           orderId: '003',
  105.           orderSource: '来源3',
  106.           price: 300,
  107.           productName: '商品3',
  108.           createdUser: 'user3',
  109.           createdTime: '2023-07-15 00:00:00'
  110.         }
  111.       ],
  112.       total: 3,
  113.       currentPage: 1,
  114.       pageSize: 10,
  115.       selectedOrders: [],
  116.       dialogVisible: false,
  117.       dialogTitle: '',
  118.       dialogType: '',
  119.       form: {
  120.         orderId: '',
  121.         orderSource: '',
  122.         price: '',
  123.         productName: '',
  124.         createdUser: '',
  125.         createdTime: ''
  126.       }
  127.     };
  128.   },
  129.   methods: {
  130.     searchOrders() {
  131.       // 根据查询条件进行查询
  132.       // ...
  133.     },
  134.     openAddDialog() {
  135.       this.dialogType = 'add';
  136.       this.dialogTitle = '新增订单';
  137.       this.dialogVisible = true;
  138.     },
  139.     openEditDialog(order) {
  140.       this.dialogType = 'edit';
  141.       this.dialogTitle = '编辑订单';
  142.       this.form = { ...order };
  143.       this.dialogVisible = true;
  144.     },
  145.     deleteOrder(order) {
  146.       // 删除订单
  147.       // ...
  148.     },
  149.     batchDeleteOrders() {
  150.       // 批量删除订单
  151.       // ...
  152.     },
  153.     importOrders() {
  154.       // 导入订单
  155.       // ...
  156.     },
  157.     exportOrders() {
  158.       // 导出订单
  159.       // ...
  160.     },
  161.     submitForm() {
  162.       if (this.dialogType === 'add') {
  163.         // 新增操作
  164.         // ...
  165.       } else if (this.dialogType === 'edit') {
  166.         // 编辑操作
  167.         // ...
  168.       }
  169.       this.dialogVisible = false;
  170.     },
  171.     resetForm() {
  172.       this.form = {
  173.         orderId: '',
  174.         orderSource: '',
  175.         price: '',
  176.         productName: '',
  177.         createdUser: '',
  178.         createdTime: ''
  179.       };
  180.     },
  181.     handleSelectionChange(selection) {
  182.       this.selectedOrders = selection;
  183.     },
  184.     handlePageChange(page) {
  185.       this.currentPage = page;
  186.       // 根据页码重新查询数据
  187.       // ...
  188.     }
  189.   }
  190. };
  191. </script>
  192.  
  193. <style scoped>
  194. .query-form {
  195.   margin-bottom: 20px;
  196. }
  197.  
  198. .operation-buttons {
  199.   margin-bottom: 20px;
  200. }
  201.  
  202. .el-dialog__body {
  203.   padding: 20px;
  204. }
  205. </style>

总结

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

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

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

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

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

AI插件链接

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/906865
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号