《程序猿入职必会（5） · CURD 页面细节规范 》

📢 大家好，我是 【战神刘玉栋】，有10多年的研发经验，致力于前后端技术栈的知识沉淀和传播。 💗
🌻 CSDN入驻不久，希望大家多多支持，后续会继续提升文章质量，绝不滥竽充数，欢迎多多交流。👍

写在前面的话

本系列博文已连载到第五篇，通过前四篇博文，我们已完成了教师信息的基础增删改查功能，在介绍其他知识专栏之前，先来谈一谈CURD页面的规范问题。
企业实战开发中，后台管理系统的大部分页面都是CURD的配置页，通常由查询条件+主体表格+弹窗表单三个部分组成，代码生成器基本也帮忙生成了大部分代码，但是不能过分依赖代码生成器，很多细节还是要调整的。
刚入职的程序猿往往也会被安排以这一任务作为练手，在完成任务后，主管会审核其功能完成质量。那双方参考什么规范确认完成质量呢，博主为公司新员工整理了《CURD 页面共性问题》研发文档，新人和主管都需要掌握，这里挑选部分内容，放置到博客上来分享。
加油，程序猿，保持住Tempo，开干，玩的就是真实！

关联文章：
《程序猿入职必会（1） · 搭建拥有数据交互的 SpringBoot 》
《程序猿入职必会（2） · 搭建具备前端展示效果的 Vue》
《程序猿入职必会（3） · SpringBoot 各层功能完善 》
《程序猿入职必会（4） · Vue 完成 CURD 案例 》
《程序猿入职必会（5） · CURD 页面细节规范 》
《程序猿入职必会（6） · 返回结果统一封装》

---

CURD 共性问题

操作体验

1、删除和批量删除操作必须提示是否删除，如“是否确定删除该行数据？”“请先选择需要删除的记录？”“是否批量删除选中的5行数据？”；
2、弹窗提示性文字应该带上问号，中文的问号，例如下面不符合规范：


3、搜索框的input或者select都应该加上clearable方便用户点击清空而不是还要长按删除键猜清空

4、对于提示内容，验证通过的应该用绿色，不通过的才用红色，区分开来

5、对于新增弹窗中的一些有效标志什么的，应该根据实际情况设置默认值，如有效标志应该默认有效

6、对于有效标志在列表界面应该采用switch按钮来实现快速设置


7、界面的按钮大小要统一，有的按钮用size=normal有的用size=small就显得很突兀

---

查询条件部

1、查询条件不能仅有一个代码生成器生成的文本输入框，原则上一些字段若是字典类型，也需要使用下拉框作为查询条件（如状态、类型等），具体情况自行分析；
2、当下拉框条件过多时，要使用可搜索的下拉框；
3、查询条件自带的文本框尽量使用模糊搜索，若多个字段需要模糊搜索，可以分开多个文本框，也可以同一个；
4、后台管理的CURD也页面通常都应该有查询条件部；
5、时间条件要注意和后端约定，不应该出现搜索“当日-当日”，搜索不到数据的场景；
6、输入框应该具有清空功能；
7、搜索尽量可以使用Enter快捷键替代，下拉框直接切换就触发搜索；

---

主体表格部

说明：代码生成器生成的页面，表的全部字段都显示了，没这个必要，表格显示重要列即可，不然太挤了。

1、表格部分，显示的字段太多，导致表头很多两行，而且内容过于拥挤开发人员应该要自行判断哪些字段不需要显示在表格上，不重要的字段麻烦放置到编辑框去，如描述等，当且仅当表格部分要显示的字段本身就不多才全部显示），原则上显示在表格上的内容要保住可以显示全；
2、有的页面翻页按钮下移到看不见的位置，这里就是搜索内容比较多，导致到了第二行，而没有同时调整表格的高度导致；
3、关键信息的长度要单独设置长一点，不要使用均分，这样用户体验不好；
4、对于数据显示不全的应该做样式调整；
5、对于要输入大段内容的输入框，例如备注等，应当使用textarea
6、自动生成时，表格序号一般从0计数，要修改为从1计数；
7、操作栏的按钮应该能清晰知道含义；

---

表单弹窗部

说明：表单通常在新增和编辑弹窗里面，由文本框、下拉框等表单项组成。
说明：安排封装校验工具类，校验常用的表单项，如常用正则等。

1、表单要防止重复提交，提交后关闭；
2、表单不要全部使用一行两列布局，部分字段内容多的可以单独一行，要美观；
3、表单需要做好校验工作，校验工具应该封装；
4、表单验证时取消或关闭弹窗时，应当清空规则校验提示及表单内容；
5、新增数据，通常要进行名称查重，对于字典表的新增，都要进行名称查重，编码也需要；
6、描述类型的字段，通常使用textarea，并且要单独占用一行；
7、一些表单项新增的时候，可以把默认值带过来，例如有效标志位，可以默认有效；
8、例如排序号等数字类型输入框，要对输入进行限制，只能输入数字，并且非必填情况下后端应该自动补上且不重复。
9、新增和编辑要确保有效，不要出现点击新增或者编辑提示成功了缺什么变化也没有。
10、更新的时候要确保主键设置为disable，不然如果把主键字段修改了，update会失效。
11、编辑弹窗里面各表单项长度应该要一致；
12、要注意哪些字段新增或编辑的时候是不可以编辑的，特别是编码和名称；
13、表单输入时长度没有控制，当输入的内容非常长，超过数据库设置的字段长度，会报“SQL_ERROR”，最好一些特殊字段和后端人员核对一下输入长度；
14、对于新增页面涉及到编码或者id时，重复时的提示信息都是类似“IS_EXIST”这种，是否需要转成中文提示；

---

字典翻译问题

说明：字典就是拥有编码和对应名称的表，例如性别字典，0男1女，除了性别字典自身的维护页面外，其他页面上需要使用性别字典，显示的都应该是名称，并且获取的字典列表数据必须加上validFlag=“1”，即有效的数据。

1、表格列里面某列，使用字典，但没有翻译成名称；
2、表单里面某个表单项，使用了字典，但没有用下拉选择框，或者没有翻译成名称；
3、通常需要翻译的字典项，需要考虑是否应该作为查询下拉框；

---

其他前端问题

1、前端请求的异常不用提示两次，代码生成器要整改一下；
2、异常提示信息要做国际化处理，并且信息提示要准确；
3、debugger没有删除，影响他人开发；
4、弹窗里面涉及到JSON和SQL显示的，尽量用格式化插件优化展示；
5、加载动画效果要有；

---

后端规约问题

说明：规约文档里面介绍的很清楚了，而且大部分是代码生成器生成的，这边不多强调，但是需要额外写逻辑的一定要遵循规约。

1、关键变量或者逻辑需进行注释；
2、与业务相关的不要放在controller，与业务无关的应该放在controller，如时间戳转换等；
3、方法注释，文件头注释要有；
4、无用import、代码块及时删除，可以通过设置自动清除无用包；
5、对于用户信息直接用前端传过来的信息不好，应该加密之类的；
6、Service 应该定义为接口，具体实现写在 ServiceImpl；
7、代码一行内过长，应该换行，不要超过idea的辅助线；
8、出现魔法值，应该用常量定义起来；
9、方法参数过多，建议用类封装；
10、转String的四种写法中，直接加空串效率最低，不建议使用，建议改成toString或String.valueOf；

---

总结陈词

此篇文章介绍了CURD页面的共性问题，仅供学习参考。
💗 后续会逐步分享企业实际开发中的实战经验，有需要交流的可以联系博主。