1、背景
最近有一个需求，基本上都是业务信息的增删改查功能，搜索条件+table展示的组合，一共四个页面，页面结构也都很相似。
以往常规做法就是看原型画页面，或者找到相似的页面copy过来，改改代码。
然而现在有了AI工具的加成，可以直接将原型图发给AI，让他直接生成代码，然后我们把代码拿过来修改一下就可以使用了。
但是这样做有个缺点就是，生成的代码可能不是很符合原有的框架，需要改动的内容会比较多。尤其是项目中的table组件是封装过的，那么AI直接生成的代码就不适用了。但是依然可以使用AI简化一些工作量。
2、实现思路
基于以上背景，最理想的是在开发工具中，比如VSCode中，让AI根据当前的项目代码再输出想要的结果，但是集成到VSCode的AI插件里又不能上传图片，所以我们可以分两步。
第一步：项目中使用的是封装好的table组件，传给组件的列数据可以使用AI生成。方法是将原型图中的table的表格标题发给AI，让其按照格式生成数据。
第二步：找一个相似的页面作为参考标准，让AI帮助生成新页面。虽然每个页面内容都不相同，但是页面结构是相同的。使用VSCode的插件，我这里用的是通义灵码的AI程序员的功能，让他按照要求修改代码。
3、实操步骤
3.1 获取table的列JSON
获取传递给封装好的table组件的列数组，编辑好要求，发给AI即可生成。如果返回的不符合要求，可以继续提出要求。这一步就节省了很多复制粘贴的工作，也解决了挨个想英文标题的工作。
3.2 参考标准代码修改代码
在VSCode中的通义灵码的AI程序员对话中可以输入要求，假设TagList.vue是参考的代码，ProductList.vue是新页面组件。
输入：参考TagList.vue的代码，补充或修改ProductList.vue的代码，按照要求：1、search-bar（search-bar是搜索栏div的类名）中的内容修改为：标签名称、排序、状态、创建日期。2、columnData（table组件的列数组）中修改为：上一步中生成的数据。
然后AI开始生成，生成完毕之后，会在工作区展示前后对比，如果觉得生成的没什么大问题，就可以点击左侧的【接受】。这一步跟传统方式相比就不需要逐个修改字段名称了。
3.3 使用AI插件完成后续代码编写
对于剩余的三个页面，重复以上两步即可完成，真的大大节省了复制粘贴的工作。
当接入API接口时，接口返回的字段名，跟已经生成的字段名，可能有出入，那么同样的思路，可以把后端同事的数据字段定义文件拿过来，然后继续跟AI提出要求。例如发送要求：
根据java文件中定义的字段名称和类型，修改vue组件中对应的数据字段，要求：table组件中绑定的列数据跟java文件中定义的保持一致。
发送这样的要求给AI程序员，然后生成代码，再决定要不要接受进而进行后续的开发。
虽然有时候AI改的代码可能不完全正确，但是将需求描述清楚，准确率会提高很多。
4、优化建议
本文只是对AI的普通尝试，感觉比较粗浅，欢迎看到这篇文章的朋友提出更优秀的建议。
