写在最前面
作者作为一个资深前端，平时喜欢专研一些新技术和新产品，这不最近迷上了人工智能，据说最近炒的比较火，于是想着是否能给前端er们开发出一些提高工作效率的工具作为福利，以下内容为作者原创，不喜勿喷。
项目开发痛点
作为前端来说，经常会遇到一些重复劳动，代码不规范，开发效率低下问题，这也是开发痛点，如何能提高开发效率可以说是一个一直困扰开发者的问题。
本人也问过一些周围同事，他们也会同样会遇到类似问题，尤其是表格字段不能复用，每次都要单独写很多重复代码，然后拿来修改，这算是开发的痛点。
通过对现有需求分析，这些问题的关键就在于无法实现将原型图直接转换成代码的前端自动化方法，最终提出了以下解决方案：
1、对UCD原型文件进行AI分析
2、提取关键信息（比如字段或者内容）
3、对现有内容进行处理和模板生成
4、系统自动输出所需要代码并用到项目中
技术栈选择
如何实现人工智能：要实现人工智能说起来比较高大上，其实现在已经有很多大厂如阿里、百度就提供了成熟的解决方案，如果自己从基础学习的话估计1-2年也差不多可以出师了，不过本人比较懒，直接拿来主义就好。这里我选择了百度的AI开放平台，提供的能力还挺全乎，什么人脸识别、图像识别等等，自己注册个账号就可以调用了，不过有些需要收费的，大家量力而行，这里用到的主要是图像识别和文字识别。
框架的选择：个人推荐使用D2admin,开源免费,功能强大,十分适合快速进行后台的开发,感兴趣的可以去看看,传送门：gitee.com/fairyever/d…
其次我们需要用到一些可以在线编辑的插件，因为需要在线编辑和生成代码模板，所以普通的文本框不支持，需要用到一些富文本插件，比如vue-quill-editor
后端接口：由于是个人项目，本人采用纯nodejs去实现，这里用到了thinkjs实现后端接口的开发，感觉比阿里egg轻量，容易上手，直接怼业务就完事了。
如何实现和开发
这里主要讲下开发思路，如果纯代码分析来说太过繁琐，这里简要说明：
1、注册一个百度AI平台账号，申请相应的接口，可以实现正常调用
2、通过接口上传图片，系统会返回字段，对输出的字段进行分析和处理
3、将已有的内容进行预处理，结合现有模板进行内容替换，实现代码的生成
4、开发后端接口，主要包括用户注册、模板管理等常见功能接口，主要使用thinkjs实现接口的开发，数据库mysql。
5、系统后台搭建，包括用户、权限、页面等等，这里不多赘述。
6、测试调试，最终完成整体项目开发，上传发布服务器。
智通-优雅的前端自动化系统
通过将近一周左右的努力开发，终于功夫不负有心人，完成了前端自动化系统，我把叫做智通（原因嘛就不多说了，可以猜猜看）。有了它可以快速实现前端代码自动化生成，大大节约了开发时间，提高开发效率。操作方式十分简便：
1、将UCD原型图列表截图
2、ctrl+v到左边表格中来
3、右边自动生成代码
4、如果结果不准确，可以人工修改干预结果，提高准确率
由于项目主要是基于vue开发，目前暂时不提供其他版本，目前已经开放测试，大家可以线上体验，测试体验地址： http://118.178.58.212/
结束语
目前前端自动化这个概念还处在起步阶段，已经面世的产品较少，大部分基本都是公司内部使用，开放出来可以给大家做一个学习和参考。欢迎大家提供宝贵建议，如果有任何疑问，可以发我邮箱进行反馈和交流：wqzhangi@isoftstone.com
