🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
影分身之术:かげぶんしんのじゅつ(卡给咯新诺就茨) ![](https://box.kancloud.cn/c07fbda611ea2fb510bb8c2d30f718e0_410x271.png) 提到快速开发,大部分人的第一反映就是代码生成器,觉得只有生成代码才是王道。 目前的快速开发主要是两大派系:引擎模式 VS 生成模式。两大派系的支持者都互相吐槽,其中不乏大能者。存在必有道理,任何东西都不是凭空产生的。 色不异空,空不异色,色即是空,空即是色,受想行识,亦复如是。 是诸法空相,不生不灭,不垢不净,不增不减。凡事不要太执着,任何事都具有双面性,有利有弊,工具永远都是工具,人才是造物主,人定胜天。人和动物的区别是,人会使用工具来改善自己的生活。 之前在用户手册文档中介绍说Eova是引擎模式的快速开发平台,不走生成代码的路线。但是不代表Eova不具备生成代码的能力和用法。 Eova理念是追求轻量级快速开发,无招胜有招!下面就为大家介绍,利用Eova来生成代码,然后快速定制个性化功能。 可能大家会好奇,说好了不生成代码的呢?怎么现在又要生成代码了,So 请不要执着于模式,用合适的办法快速解决合适的问题即可!废话不多说,下面请看操作! **前置技能:** 1.Eova 自定义功能按钮 2.熟练使用浏览器的开发者功能(谷歌F12) 产品管理>修改产品 ![](https://box.kancloud.cn/6c6d890509688142b412701258723e4d_920x161.png) 如上为系统默认的修改模版提供的功能 需求:分组显示表单控件 使用Eova如何快速实现? 有同学就说了,你看吧,Eova一点都不灵活,这种需求咋整,还要改模版,如果是生成的代码,直接在页面上改吧改吧就完成了。 OK,下面且看Eova如何快速实现! 开启浏览器的开发者模式,观察Network,找到【修改产品】对应的URL http://127.0.0.1/form/update/product-28 ![](https://box.kancloud.cn/534b89afddb269d87faca438b969faa3_592x282.png) 上图中Response 就是修改产品页面的HTML源码! ![](https://box.kancloud.cn/27e52eceac0c75e3f289d7787cce282a_174x166.png) 1. 复制【修改产品页面】的HTML源码,另存为/product/update.html 2. 复制一个按钮代码,进行微调如下,保存为 /product/btn/update.html ![](https://box.kancloud.cn/33a3f9abc3641143dcf6a30937d96710_859x246.png) 新增自定义Controller 并配置 ![](https://box.kancloud.cn/76675da18b7cd73204fecdbe1815dda5_411x210.png) PS:product 用于动态输出修改值,和 常规开发手写页面一样,如果是新增页面直接render即可 ![](https://box.kancloud.cn/6037ad342f43f71ebec0c015f18056ce_421x154.png) 快速添加一个自定义按钮 ![](https://box.kancloud.cn/82598860edee9a3b95c3e5224fdcc038_485x131.png) ![](https://box.kancloud.cn/a149325e8256f8ba40caaab50a67207e_688x233.png) ![](https://box.kancloud.cn/b08c331c417e58ec6404f32d0a7d831f_564x37.png) > PS:BS路径暂时可以随便写,因为还没用上! 手工对HTML进行排版或者重写均可,视需求而定! ![](https://box.kancloud.cn/b1fb14964a4da0b29e7d2cd600ca0591_652x513.png) > PS:上面的HTML由于是复制的浏览器生成的HTML,所以需要手工 用 `${product.xxx}` 来动态获取值 `<div id="id" name="id" value="${product.id!}" class="eova-auto">` 手工排版之后的分组效果: ![](https://box.kancloud.cn/f42e23df464a18e9599197b3bae6a6b1_921x241.png) VS ![](https://box.kancloud.cn/6c6d890509688142b412701258723e4d_920x161.png) YY:自己捣鼓的看着哪哪都舒服! > **此文介绍的只是一种DIY思路,Form分组,Eova V 1.6 已经默认提供快速可配置功能!** 此致,利用Eova生成的HTML代码来进行额外扩展就完成了,可能有的人觉得简单,有的人觉得复杂。 这里只是介绍一种方案,当默认的模版无法满足需求时,如何在现有的模版基础上进行扩展,而不用自己手工编写大量代码。 上文中介绍的是,DIY Form 分组显示,同理不管你页面布局多奇葩,都可以自己重新排版!如果业务超级复杂可以将整个修改页面重写,甚至使用其它UI框架综合使用,这里就是一个完整的独立页面。 > 亮点:上述操作步骤中,我们真正意义上手写的代码不超过5行,其它的基本都是复制粘贴!懒货们干起来! 代码优化:上面复制的HTML源码可以套用模版 ~~~ <%layout("/eova/layout/default.html",{'title' : 'Dialog' }){%> // 你只需要复制HTML源码 body部分就行了,头和尾 模版里面有! <%}%> ~~~