欢迎您访问电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
您现在的位置是：首页 > 编程 > 

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

2025-07-19 02:54:43
背景         AI模型，GPT.5（GPT4次数有限，使用后发现比.5也就稍微好这么一奈奈） 开始 先来个简单版的 指令：使用vueelementui画一个订单管理页面，要求实现curd基础功能 结果：AI秒写了个代码。可以直接拿过来改改，
背景

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

开始

先来个简单版的

指令：使用vueelementui画一个订单管理页面，要求实现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=></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=></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: , name: 	订单	 }
      ],
      addDialogVisible: false,
      editDialogVisible: false,
      addForm: {
        id: 		,
        name: 		
      },
      editForm: {
        id: 		,
        name: 		
      }
    };
  },
  methods: {
    showAddDialog() {
      this.addDialogVisible = true;
    },
    showEditDialog(row) {
       = { ...row };
       = true;
    },
    deleteOrder(row) {
      ct index = indexOf(row);
      if (index !== -1) {
        splice(index, 1);
      }
    },
    addOrder() {
      push({ ...this.addForm });
      this.addDialogVisible = false;
      this.resetForm(	add	);
    },
    updateOrder() {
      ct index = findIndex(order => order.id === .id);
      if (index !== -1) {
        splice(index, 1, { ... });
      }
       = false;
      this.resetForm(	edit	);
    },
    resetForm(type) {
      if (type === 	add	) {
        this.addForm = { id: 		, name: 		 };
      } else if (type === 	edit	) {
         = { id: 		, name: 		 };
      }
    }
  }
};
</script>

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

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

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

<template>
  <div>
    <el-form :inline=true :model=queryForm class=query-form>
      <el-form-item label=订单编号>
        <el-input v-model=></el-input>
      </el-form-item>
      <el-form-item label=订单来源>
        <el-select v-model= 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.productame></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=productame 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=></el-input>
        </el-form-item>
        <el-form-item label=订单来源>
          <el-select v-model=>
            <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.productame></el-input>
        </el-form-item>
        <el-form-item label=创建用户>
          <el-input v-model=></el-input>
        </el-form-item>
        <el-form-item label=创建时间>
          <el-date-picker v-model= 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=></el-input>
        </el-form-item>
        <el-form-item label=订单来源>
          <el-select v-model=>
            <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.productame></el-input>
        </el-form-item>
        <el-form-item label=创建用户>
          <el-input v-model=></el-input>
        </el-form-item>
        <el-form-item label=创建时间>
          <el-date-picker v-model= 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=></el-input>
        </el-form-item>
        <el-form-item label=订单来源>
          <el-select v-model= 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.productame></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-butt>
      <!-- 操作按钮 -->
      <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=productame 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=></el-input>
        </el-form-item>
        <el-form-item label=订单来源>
          <el-select v-model= 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.productame></el-input>
        </el-form-item>
        <el-form-item label=创建用户>
          <el-input v-model=></el-input>
        </el-form-item>
        <el-form-item label=创建时间>
          <el-date-picker v-model= 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: 		,
        productame: 		
      },
      orderSources: [	来源1	, 	来源2	, 	来源	],
      orders: [
        {
          orderId: 	001	,
          orderSource: 	来源1	,
          price: 100,
          productame: 	商品1	,
          createdUser: 	user1	,
          createdTime: 	202-07-17 00:00:00	
        },
        {
          orderId: 	002	,
          orderSource: 	来源2	,
          price: 200,
          productame: 	商品2	,
          createdUser: 	user2	,
          createdTime: 	202-07-16 00:00:00	
        },
        {
          orderId: 	00	,
          orderSource: 	来源	,
          price: 00,
          productame: 	商品	,
          createdUser: 	user	,
          createdTime: 	202-07-15 00:00:00	
        }
      ],
      total: ,
      currentPage: 1,
      pageSize: 10,
      selectedOrders: [],
      dialogVisible: false,
      dialogTitle: 		,
      dialogType: 		,
      form: {
        orderId: 		,
        orderSource: 		,
        price: 		,
        productame: 		,
        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: 		,
        productame: 		,
        createdUser: 		,
        createdTime: 		
      };
    },
    handleSelectionChange(selection) {
      this.selectedOrders = selection;
    },
    handlePageChange(page) {
       = page;
      // 根据页码重新查询数据
      // ...
    }
  }
};
</script>

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

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

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

总结

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

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

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

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

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

AI插件链接

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

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1072043.html

相关标签：无
上传时间： 2025-07-09 14:23:00

上一篇：一文看懂OpenAI新发布最强模型ChatGPT:o1

下一篇：ChatGPT使用api_key本地部署

推荐阅读

留言与评论（共有 17 条评论）
注册新账号 登录
本站网友 调控政策
30分钟前 发表
导入
本站网友 重庆巴菲盛宴
23分钟前 发表
label=source
本站网友 kbs超级中国
27分钟前 发表
商品2
本站网友 广州增值税发票
14分钟前 发表
exportOrders() { // 导出订单 // ... }
本站网友 锦州中影国际影城
13分钟前 发表
} }; }
本站网友 歌手孙悦
5分钟前 发表
        5
本站网友 hintsoft
6分钟前 发表
20
本站网友 体育场二手房
15分钟前 发表
操作按钮有新增
本站网友 qq背景音乐链接地址
12分钟前 发表
on-success=importOrders
本站网友 职业操盘手
9分钟前 发表
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.productame></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
本站网友 李京文
30分钟前 发表
商品1
本站网友 44362
9分钟前 发表
此想法基于GPT.5的使用后，得出的个人想法
本站网友 韦钰
27分钟前 发表
        4
本站网友 removechild
8分钟前 发表
visible.sync=addDialogVisible title=添加订单 @close=resetForm( add )> <el-form
本站网友 盛大游戏下载
24分钟前 发表
希望继续努力跟上第四次工业革命的步伐
本站网友 南宁健身房
21分钟前 发表
00