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

news/2024/10/11 5:27:00/

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

文章目录

  • 写在前面的话
  • CURD 共性问题
    • 操作体验
    • 查询条件部
    • 主体表格部
    • 表单弹窗部
    • 字典翻译问题
    • 其他前端问题
    • 后端规约问题
  • 总结陈词

CSDN.gif

写在前面的话

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

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


CURD 共性问题

操作体验

1、删除和批量删除操作必须提示是否删除,如“是否确定删除该行数据?”“请先选择需要删除的记录?”“是否批量删除选中的5行数据?”;
2、弹窗提示性文字应该带上问号,中文的问号,例如下面不符合规范:
image.png
image.png
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;
QQ图片20200618170437.png


总结陈词

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

CSDN_END.gif


http://www.ppmy.cn/news/1503268.html

相关文章

echarts多stack的legend点选

echarts支持点击legend,实现显示和隐藏legend对应的数据,具体就是option里series里,name为legend值的数据。 如果配置了多个stack,那么可能你可能设置了多组legend,你点选的是多个legend组中的某组中的一个,那么如果不…

超声波清洗机买哪款?家庭型超声波清洗机

戴眼镜的朋友应该都知道,眼镜即使是认真清洗过,但是只要自己走动,它就没有不脏的时候。很多不在意的朋友会直接忽视!但是眼镜上面的油脂和细菌经过长期的累积,近距离的接触眼部的位置,容易对眼部健康造成威…

我的「Java全栈高级架构师高薪就业课」适合什么样的人群学习?

我的《Java全栈高级架构师高薪就业课》上线了~ 这是一套Java全栈微服务架构、以实战项目驱动的课程!包含34个模块,1514课时。对标阿里P7级别技术栈而研发,有着循序渐进的学习体系,助你开启Java进阶之旅。 我的这套《Java全栈高级…

中间件安全:Nginx 解析漏洞测试.

中间件安全:Nginx 解析漏洞测试. Nginx 是一个高性能的 HTTP和 反向代理服务器,Nginx 解析漏洞是一个由于配置不当导致的安全问题,它不依赖于Nginx或PHP的特定版本,而是由于用户配置错误造成的。这个漏洞允许攻击者上传看似无害的…

URL重写

目录 步骤1 规则语法 Nginx URL重写规则语法 Apache URL重写规则语法 步骤2 规则配置 Apache URL重写规则配置 启用mod_rewrite模块 配置.htaccess文件 编写重写规则 测试重写规则 Nginx URL重写规则配置 配置server或location块 测试重写规则 步骤1 规则语法 Ngin…

【Maven】 的继承机制

Maven是一个强大的项目管理工具,主要用于Java项目的构建和管理。它以其项目对象模型(POM)为基础,允许开发者定义项目的依赖、构建过程和插件。Maven的继承机制是其核心特性之一,它允许子项目继承和复用父项目的配置&am…

多态、接口、类练习题

代码: public static void main(String[] args) {Person2 personnew Person2("唐僧",new Horse());person.passRiver();person.onRoad();} 接口: interface Vehicles{public void work(); } lass Horse implements Vehicles{Overridepubli…

《从零开始做个摸鱼小网站! · 序》灵感来源

序 大家好呀,我是summo,这次来写写我在上班空闲(摸鱼)的时候做的一个小网站的事。去年阿里云不是推出了个活动嘛,2核2G的云服务器一年只要99块钱,懂行的人应该知道这个价格在业界已经是非常良心了,虽然优惠只有一年&a…