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

news2024/9/20 16:52:29

📢 大家好,我是 【战神刘玉栋】,有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.coloradmin.cn/o/1953922.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深入理解多态:发工资

看完目录就可以大概理解了,然后就需要去敲一敲代码,不过这个多态还确实挺厉害的。 目录 做一件事 员工1:干第一个过程 员工2:干第二个过程 员工3:干第三个过程 员工4:干第四个过程 员工5:…

Live555源码阅读笔记:哈希表的实现(C++)

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

重生之“我打数据结构,真的假的?”--6.排序

1.排序的概念 排序:所谓排序,就是使⼀串记录,按照其中的某个或某些关键字的⼤⼩,递增或递减的排列起来的 操作。 1.1排序分类 2.排序算法实现 2.1插入排序 直接插⼊排序是⼀种简单的插⼊排序法,其基本思想是&#…

深入探索Python3网络爬虫:构建数据抓取与解析的强大工具

前言 在当今这个信息爆炸的时代,数据成为了驱动各行各业发展的关键要素。无论是市场分析、用户行为研究,还是内容聚合与推荐系统,都需要从海量的互联网数据中提取有价值的信息。而网络爬虫,作为自动化获取网页数据的技术手段&…

FPGA开发——按键的使用及其消抖方法

一、概述 我们在进行各种硬件开发时通常都会实现多效果的综合和实现,而在实际的开发中,每个时刻只会显示单个效果,这就需要涉及到效果之间的切换了,而要实现状态切换最好的就是使用按键进行按键,所以按键在我们的日常…

Redis知识点总价

1 redis的数据结构 2 redis的线程模型 1) Redis 采用单线程为什么还这么快 之所以 Redis 采用单线程(网络 I/O 和执行命令)那么快,有如下几个原因: Redis 的大部分操作都在内存中完成,并且采用了高效的…

深度学习系列69:模型部署的基础知识

参考https://mp.weixin.qq.com/s?__bizMzI4MDcxNTY2MQ&mid2247488952&idx1&sn880d3ad47a8fb3eab56514135f0e643b&chksmebb51d5adcc2944c276af19e8cff5e73c934f8811706be0a94c5f47f9e767c902939903e6b95&scene21#wechat_redirect 1. 基本流水线 1.1 介绍…

掀桌子了!原来是咱们的大屏设计太酷,吓着前端开发老铁了

掀桌子了!原来是咱们的大屏设计太酷,吓着前端开发老铁了 艾斯视觉观点认为:在软件开发的世界里,有时候创意和设计的火花会擦得特别亮,以至于让技术实现的伙伴们感到既兴奋又紧张。这不,我们的设计团队刚刚…

故障诊断 | 基于Transformer故障诊断分类预测(Matlab)

文章目录 预测效果文章概述程序设计参考资料预测效果 文章概述 Transformer故障诊断/分类预测 | 基于Transformer故障诊断分类预测(Matlab) Transformer 模型本质上都是预训练语言模型,大都采用自监督学习 (Self-supervised learning) 的方式在大量生语料上进行训练,也就是…

【Django】开源前端库bootstrap,常用

文章目录 下载bootstrap源文件到本地项目引入bootstrap文件 官网:https://www.bootcss.com/V4版本入口:https://v4.bootcss.com/V5版本入口:https://v5.bootcss.com/ 这里使用成熟的V4版本,中文文档地址:https://v4.b…

优化mac outlook通过nginx反向代理后使用ews访问Exchange 2016邮件访问速度慢的有效方法

在nginx配置exchange的反向代理后,mac系统上通过exchange邮箱,通过nginx代理连接邮箱,发现速度很慢,通过查看日志,也存在大量的401失败日志。通过不断的优化和尝试,目前来看,基本上正常了,基本上没有出现大量访问失败的问题。以下就是优化过程中尝试过的方法。 1. 身份…

java学习--包装类

包装类 Boolean的关系图 Character关系图 其他关系图 包装类和基本数据转换 Debug进入之后可以看到底层代码如下 例题: 三元运算符是一个整体返回的数的类型看其中所含类型最高的那个是谁就会转成哪个 想要掌握这个这个知识,就要多看源码,直接…

深入理解计算机系统 CSAPP 家庭作业11.10

A: //home.html <form action"/cgi-bin/adder" method"GET"><ul><li><label for"n1">n1:</label><input type"text" id"n1" name"n1" /> //name的值决定页面提交后&#xf…

探索 Blockly:自定义积木实例

3.实例 3.1.基础块 无输入 , 无输出 3.1.1.json var textOneJson {"type": "sql_test_text_one","message0": " one ","colour": 30,"tooltip": 无输入 , 无输出 };javascriptGenerator.forBlock[sql_test_te…

JavaScript——常用库

文章目录 绪论jQuery选择器事件修改 css查找ajax setTimeout与setIntervalsetTimeoutsetInterval requestAnimationFrameMap与SetlocalStorageJSONDateWebSocketwindowcanvas结语 绪论 『时间是伟大的作家&#xff0c;总会写下完美的结局。』—— 「秋之回忆」 jQuery 这个是优…

特斯拉财报看点:FSD拳打华为,Robotaxi 脚踢百度

大数据产业创新服务媒体 ——聚焦数据 改变商业 特斯拉发最新财报了&#xff0c;这不仅是一份财务报告&#xff0c;更是一张未来发展的蓝图。在这份蓝图中&#xff0c;两个关键词格外耀眼——FSD&#xff08;全自动驾驶系统&#xff09;和Robotaxi&#xff08;无人驾驶出租车&…

【通俗理解】大脑网络结构理论解析——从小世界到无标度性的深度刻画

大脑网络结构理论解析——从小世界到无标度性的深度刻画 大脑网络结构的核心特性 大脑网络结构理论旨在揭示大脑神经元之间连接的复杂模式。其中&#xff0c;小世界特性和无标度性是大脑网络的两个重要特征。小世界特性意味着网络中大部分节点之间都通过较短的路径相连&#…

pycharm+pytorch+gpu开发环境搭建

一、安装anacoda 1、下载Anaconda安装包 官网下载地址 https://www.anaconda.com/distribution/ 清华镜像 Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 下载python3.8对应的版本Anaconda3-2021.04-Windows-x86_64.exe 下载完成…

.Net医院检验系统源码,lis源码,化验系统源码

系统概述&#xff1a; 医学实验室信息系统即LIS&#xff0c;系统把检验、检疫、放免、细菌微生物及科研使用的各类分析仪器&#xff0c;通过计算机联网&#xff0c;实现各类仪器数据结果的实时自动接收、自动控制及综合分析&#xff1b;与条码设备配套使用&#xff0c;自动生成…