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

📢 大家好,我是 【战神刘玉栋】,有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.mzph.cn/bicheng/51167.shtml

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

相关文章

nodejs - MongoDB 学习笔记

一、简介 1、MongoDB 是什么 MongoDB 是一个基于分布式文件存储的数据库,官方地址 https://www.mongodb.com/ 2、数据看是什么 数据库(DataBase)是按照数据结构来组织、存储和管理数据的应用程序。 3、数据库的作用 主要作用是 管理数据…

RedHat9 | Ansible 编写循环和条件任务

环境版本说明 RedHat9 [Red Hat Enterprise Linux release 9.0]Ansible [core 2.13.3]Python [3.9.10]jinja [3.1.2] 1. 利用循环迭代任务 通过利用循环,管理员无需编写多个使用同一模块的任务。Ansible支持使用loop关键字对一组项目迭代任务,通过配置…

音视频入门基础:WAV专题(3)——FFmpeg源码中,判断某文件是否为WAV音频文件的实现

一、引言 通过FFmpeg命令: ./ffmpeg -i XXX.wav 可以判断出某个文件是否为WAV格式的音频文件: 所以FFmpeg是怎样判断出某个文件是否为WAV格式的音频文件呢?它内部其实是通过wav_probe函数来判断的。从文章《FFmpeg源码:av_prob…

Spring Boot集成OpenPDF和Freemarker实现PDF导出功能并附水印

😄 19年之后由于某些原因断更了三年,23年重新扬帆起航,推出更多优质博文,希望大家多多支持~ 🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志 🎐 个人CSND主页——Mi…

关于@JsonSerialize序列化与@JsonDeserialize反序列化注解的使用(密码加密与解密举例)

注:另一种方式参考 关于TableField中TypeHandler属性,自定义的类型处理器的使用(密码加密与解密举例)http://t.csdnimg.cn/NZy4G 1.简介 1.1 序列化与反序列化 学习注解之前,我们可以先了解一下什么是序列化与反序列…

遵义网站建设安全性保证

随着互联网的发展和普及,网站的建设成为了一个重要的工作,也是企业宣传的重要渠道。然而,随之而来的安全问题也是不容忽视的。为了保证遵义网站建设的安全性,我们需要采取一系列的措施。 首先,要选择合适的服务器和主机…

【Unity2D 2022:Data】读取csv格式文件的数据

一、创建csv文件 1. 打开Excel,创建xlsx格式文件 2. 编辑卡牌数据:这里共写了两类卡牌,第一类是灵物卡,具有编号、卡名、生命、攻击四个属性;第二类是法术卡,具有编号、卡名、效果三个属性。每类卡的第一…

(39)智能电池

文章目录 前言 1 通过任务规划器进行设置 2 补充信息 3 限制条件 4 参数说明 前言 虽然还不是很普遍,但智能电池更容易从飞行器上安装和拆卸,并且能够提供更多关于电池状态的信息,包括容量、单个电池电压、温度等。 ArduPilot 支持几种…

开发环境搭建——Node.js

在启动前端项目的时候我们通常会用到Node.js,下面是对Node.js的下载安装以及配置的讲解 一、Node.js的安装 1.1、通过Node.js官网下载:Node.js — Run JavaScript Everywhere 下载后双击.msi安装文件后一直点击下一步即可 1.2、配置node 1.2.1、查看…

js 替换json中的转义字符 \

例如有以下字符串 "\"{\\\"account\\\":\\\"66\\\",\\\"name\\\":\\\"66\\\"}\"" 想得到如下字符串 {"account":"66","name":"66"} 执行替换字符串 "\"{…

组队学习——决策树(以泰坦尼克号公共数据集为例)

本次我们挑战的数据集为泰坦尼克号公共数据集,为了降低难度,我们在原有数据集的基础上进行了优化,具体数据集介绍如下: 在这里也介绍一下数据的含义吧 数据介绍: Survived:是否存活(label&#…

paraFoam 运行 报错 usr/lib/x86_64-linux-gnu/libQt5Core.so 已解决

在日常项目开发中。使用ubuntu 视图开发的时候。报错 缺少 libQt5Core 核心组件! whereis libQt5Core.so.5sudo strip --remove-section.note.ABI-tag /usr/lib/x86_64-linux-gnu/libQt5Core.so.5 完美解决,并且能正常打开,前提是&#xff0c…

【python】python生活管理费系统(源码+论文)【独一无二】

👉博__主👈:米码收割机 👉技__能👈:C/Python语言 👉公众号👈:测试开发自动化【获取源码商业合作】 👉荣__誉👈:阿里云博客专家博主、5…

加载chatglm3模型时出现ValueError: too many values to unpack (expected 2)的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

基于Libero的工程创建

基于Libero的工程创建 第一步:双击进入到工程界面,编写项目详细信息。 Project Name:标识您的项目名称。不要使用空格或保留的Verilog或VHDL关键字。 Project Location:在磁盘上标识您的项目位置。 Description:关于…

Linux系统下安装MySQL

前言: 本篇教程是使用Centos8来进行安装部署,如果使用的Linux系统发行版不同安装部署过程中可能会有差异,相同环境下可以跟着操作流程进行部署。本篇文章的主要目的是为了学习分享使用如有疑问欢迎提出并共同讨论。 1、安装前的准备工作 移除…

Power App学习笔记以及基础项目管理demo

Power App学习笔记以及基础项目管理demo 最近学习了一点Power App,感觉挺有意思。配置式组件开发。浅浅记录一下自己实现的项目管理系统(即Excel数据的增删改查)关于函数的一点皮毛认识。 效果图 筛选数据 编辑 详情 数据源 PowerApp 网…

SpringCloud - Nacos配置中心、命名空间

一、 Nacos配置中心 1、在gulimall-common公共模块添加依赖 <!--服务注册发现--><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId></dependency><!--…

为RTEMS Raspberrypi4 BSP添加SPI支持

为RTEMS Raspberrypi4 BSP添加SPI支持 主要参考了dev/bsps/shared/dev/spi/cadence-spi.c RTEMS 使用了基于linux的SPI框架&#xff0c;SPI总线驱动已经在内核中实现。在这个项目中我需要实习的是 RPI4的SPI主机控制器驱动 SPI在RTEMS中的实现如图&#xff1a; 首先需要将S…

day06 项目实践:router,axios

vue组件的生命周期钩子 今天几乎没有讲什么新内容&#xff0c;就是一起做项目&#xff0c;只有一个小小的知识点&#xff0c;就是关于vue组件的生命周期钩子&#xff0c;其中最重要的四个函数—— beforeCreate()&#xff1a;组件创建之间执行 created()&#xff1a;组件创建…