当前位置: 首页 > news >正文

前端写法建议【让项目更加易于维护】

背景

标题前提条件:

没有字典接口、或其他原因,需要前端手动维护的情况
示例环境:vue2,其他项目同理

示例

如果项目有某种类别,前端和后端约定好了,某些情况下,需要前端写死时。
比如有字段dangerType对应下列内容:

  • 1 表示:一般危险
  • 2 表示:非常危险
  • 3 表示:未知危险
  • 4 表示:可能安全
  • 5 表示:确定安全

如果,此时需要写个页面,有搜索、列表、弹框、详情页,都需要显示dangerType值,为了易于维护,,这里可以单独抽离一个枚举类的js,比如/src/utils/enum.js

export const dangerTypeOptions = [{ value: 1, label: '一般危险' },{ value: 2, label: '非常危险' },{ value: 3, label: '未知危险' },{ value: 4, label: '可能安全' },{ value: 5, label: '确定安全' },
]

然后在页面中直接引用,做搜索下拉,做列表回显、做详情回显,都写单独的回显函数即可,这样,当后面需要修改类型对应的值、或者新增某种类型时,直接在这个枚举文件中添加即可!

相关文章:

前端写法建议【让项目更加易于维护】

背景 标题前提条件: 没有字典接口、或其他原因,需要前端手动维护的情况 示例环境:vue2,其他项目同理 示例 如果项目有某种类别,前端和后端约定好了,某些情况下,需要前端写死时。 比如有字段…...

EasyExcel 自定义转换器、自定义导出字典映射替换、满足条件内容增加样式,完整代码+详细注释说明

虽然最之前是在其他地方看到的,但最终因缘巧合下找到了原文,还是尊重一下原作者。 参考引用了这位佬的博客,确实方便使用。 https://blog.csdn.net/qq_45914616/article/details/137200688?spm1001.2014.3001.5502 这是一个基于Easyexcel通过…...

C语言学习笔记 Day10(指针--中)

Day10 内容梳理: 目录 Chapter 7 指针 7.4 指针 & 数组 (1)指针操作数组元素 (2)指针加减运算 1)加法 2)减法 (3)指针数组 7.5 多级指针 Chapter 7 指针 …...

网页显示打印 pdf

文件服务使用 minio,使用 nginx 反向代理。 将文件存放在 minio 上,如果是公开的文件,则统一放到一个桶,设置为公开只读。 如果是私有文件,则使用临时链接,给有权限的用户查看和打印。 要实现在 html 页…...

1948-2024.5金融许可信息明细数据

1948-2024.5金融许可信息明细数据 1、时间:1948-2024.5 2、指标:来源表、机构编码、机构名称、所属银行、机构类型、业务范围、机构住所、地理坐标、行政区划代码、所属区县、所属城市、所属省份、邮政编码、发证日期、批准日期、发证机关、流水号、是…...

【笔记】从零开始做一个精灵龙女-画贴图阶段(终)

这篇主要是细节,包括花纹和其它一些细化 皮肤 脖子 脖子一定要压暗,不然前后关系体现不出来 脸 1. 忘了有uv缝了,记得打开投影模式画 顺着头发轨迹长的方向画出发际线 背包手镯 1.先画出暗色花纹: 2.再加亮色,亮…...

从MySQL到Elasticsearch:创建酒店索引案例

在现代的数据管理中,Elasticsearch(简称ES)因其强大的搜索功能和灵活的索引结构而受到广泛欢迎。本篇博客将介绍如何根据MySQL数据库中的酒店表定义,创建一个相应的Elasticsearch索引。 MySQL与Elasticsearch的对比 在开始之前&…...

Webkit与Web Push API:提升用户体验的推送技术

Web Push API是一种允许网站向用户发送通知的Web技术,即使用户没有打开网站也能接收到信息。这项技术可以显著提升用户的参与度和满意度。Webkit,作为Safari和其他浏览器的内核,对Web Push API的支持情况如何?本文将深入探讨Web P…...

Java线程池的拒绝策略

在 Java 线程池中,常见的拒绝策略: AbortPolicy(中止策略) 特点:直接抛出 RejectedExecutionException 异常来拒绝新任务的提交。应用场景:适用于对系统的稳定性要求较高,不希望丢失任务&#…...

【C++进阶】继承

【C进阶】继承 🥕个人主页:开敲🍉 🔥所属专栏:C🥭 🌼文章目录🌼 1. 继承的概念及定义 1.1 继承的概念 1.2 继承定义 1.2.1 定义格式 1.2.2 继承父类成员访问方式的变化 1.3 继承类模…...

立体相机镜面重建(一)镜面标定

无论是单目、双目或者是多屏幕镜面重建,都需要事先对屏幕和相机的相对位置进行标定,求得相机到屏幕之间的相对变换关系。如果求得屏幕和相机之间的变换关系呢?接下来是标定流程。 (一)准备: 1&#xff09…...

【如何有效解决前端Vue中的常见难题】

🐟作者简介:一名大三在校生,喜欢编程🪴 🐙个人主页🥇:Aic山鱼🐠WeChat:z7010cyy 🦈系列专栏:🏞️ 前端-JS基础专栏✨前端-Vue框架专栏…...

CLAMP-1靶机渗透测试

一、靶机下载地址 https://www.vulnhub.com/entry/clamp-101,320/ 二、信息收集 1、主机发现 # 使用命令 nmap 192.168.145.0/24 -sn | grep -B 2 "00:0C:29:88:B4:BF" 2、端口扫描 # 使用命令 nmap 192.168.145.0/24 -p- -sV 3、指纹识别 # 使用命令 whatweb …...

JavaScript中的Truthy Falsy值以及等号判断

1.Falsy & Truthy Falsy的值false,0,-0, “”, null, undefined,NaNTruthy的值除了以上之外的其他值 2.等号判断 console.log(10 10); console.log(0 ); console.log(0 false); console.log( fa…...

uniapp——展开和收起

案例展示 代码 后台返回的数据格式如下&#xff1a; {1: "大富科技速度快放假手动阀",2: "第三方斯蒂芬斯蒂芬是的开发时间",4: "45345345",5: "电饭锅电饭锅地方" }<view class"tipTitle">温馨提示</view> &l…...

WebGL2学习(2): GLSL ES 3.0

更多精彩内容尽在 dt.sim3d.cn &#xff0c;关注公众号【sky的数孪技术】&#xff0c;技术交流、源码下载请添加VX&#xff1a;digital_twin123 WebGL 2.0 给 GLSL 带来了重大变化。WebGL 1.0 中使用的 GLSL 版本是 GLSL ES 1.0。 WebGL 2.0 中仍然可用。但是&#xff0c;通过编…...

[大模型实战] DAMODEL云算力平台部署LLama3.1大语言模型

[大模型实战] DAMODEL云算力平台部署LLama3.1大语言模型 目录 一、LLama3.1二、DAMODEL云算力平台2.1 提供的服务2.1.1 AI训练2.1.2 AI推理2.1.3 高性能计算2.1.4 图像&#xff0f;视频渲染2.1.5 定制化部署 2.2 支持的GPU 三、在DAMODEL部署LLama3.13.1 在DAMODEL创建实例&…...

驱动开发系列09 - Linux设备模型之设备,驱动和总线

一:概述 Linux 设备模型(LDM)是 Linux 内核中引入的一个概念。用于管理内核对象(那些需要引用计数的对象、例如文件、设备、总线甚至驱动程序),以及描述它们之间的层次结构,以及这些内核对象之间绑定关系。Linux 设备模型引入了对象生命周期管理、引用计数、以及面向对象…...

HTML实现弹出层

leopard/ˈlepərd/ 豹子&#xff0c;豹纹 弹出层指的是鼠标悬停于某个元素之上时显示的一个界面组件。 关注和理解特性&#xff1a;z-index属性和动态生成HTML元素。 HTML5新增&#xff1a; figure:媒体内容(图像&#xff0c;音频&#xff0c;视频)&#xff0c;用于包含一…...

Android控件详解

在Android应用程序中&#xff0c;界面由布局和组件组成。布局相当于框架&#xff0c;而控件则是框架里面的内容。了解过Android布局后&#xff0c;如果要设计ui界面&#xff0c;还需要了解和掌握各个控件的应用。 一个界面的设计&#xff0c;先从创建容器开始&#xff0c;再向…...

做seo网站优化大概需要多少钱

SEO网站优化的费用&#xff1a;一个详细的解析 在当今数字化时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;已成为企业网站推广和品牌建设的重要手段。做SEO网站优化大概需要多少钱呢&#xff1f;这不仅是企业决策者关心的问题&#xff0c;也是许多网站运营者需要深…...

2000-2024年县域就业人数乡村从业人员数数据

数据介绍 国家统计局统计&#xff0c;乡村从业人员数量庞大&#xff0c;且随着农业现代化和农村经济的发展&#xff0c;乡村从业人员的结构也在发生变化。农林牧渔业从业人员数量有所减少&#xff0c;而农村电商、乡村旅游等新兴产业的从业人员数量在增加。 数据名称&#xf…...

PS软件自动化:利用SenseVoice-Small语音指令批量处理图片

PS软件自动化&#xff1a;利用SenseVoice-Small语音指令批量处理图片 你是不是也厌倦了在Photoshop里一遍又一遍地重复那些机械性的操作&#xff1f;给几十张图片统一调整尺寸、批量添加水印、或者对一组照片执行同样的滤镜效果。这些工作既枯燥又耗时&#xff0c;还容易因为手…...

嵌入式CLI框架:轻量级树形命令行调试系统

1. 项目概述debug-cli是一个专为嵌入式系统设计的轻量级、模块化、面向对象的调试命令行接口&#xff08;CLI&#xff09;框架。它不依赖标准C库的stdio或动态内存分配&#xff0c;完全适配资源受限的MCU环境&#xff08;如 Cortex-M0/M3/M4、RISC-V 32位内核&#xff09;&…...

OpenClaw+Docker部署:Kimi-VL-A3B-Thinking多模态环境快速构建

OpenClawDocker部署&#xff1a;Kimi-VL-A3B-Thinking多模态环境快速构建 1. 为什么选择Docker部署OpenClaw 去年我在本地折腾OpenClaw时&#xff0c;被各种依赖冲突和权限问题折磨得够呛。直到尝试用Docker容器化部署&#xff0c;才发现这才是个人开发者快速搭建AI助手环境的…...

PTP协议避坑指南:1588v2时间同步测试中常见的5个错误及解决方法

PTP协议避坑指南&#xff1a;1588v2时间同步测试中常见的5个错误及解决方法 在工业自动化、电信网络和电力系统等对时间同步精度要求极高的领域&#xff0c;1588v2协议&#xff08;Precision Time Protocol&#xff09;已经成为实现微秒级甚至纳秒级时间同步的事实标准。然而&a…...

Matlab处理遥感影像必看:地理坐标和投影坐标的GeoTIFF读写,别再搞混了!

Matlab遥感影像处理实战&#xff1a;地理坐标与投影坐标的GeoTIFF读写全解析 遥感影像处理中&#xff0c;坐标系的选择与正确读写是许多初学者容易踩坑的环节。今天我们就来深入探讨Matlab环境下如何处理这两种不同坐标系的GeoTIFF文件&#xff0c;从原理到实践&#xff0c;帮你…...

《高效能人士的七个习惯》:从内圣到外王的完整方法论

这本书在全世界卖了千万册&#xff0c;斯蒂芬柯维用七个习惯构建了一套从自我管理到影响他人的完整体系。一、前言&#xff1a;比七个习惯更重要的两件事 很多人读这本书只关注七个习惯本身&#xff0c;却忽略了前言中两个至关重要的前提&#xff1a; 1. 积极乐观是一切的起点 …...

三步生成炫酷3D魔鬼面具:用快马AI快速构建交互式视觉原型

今天想和大家分享一个超实用的技巧——如何用InsCode(快马)平台快速生成3D魔鬼面具的交互式原型。作为一个经常需要做创意展示的设计师&#xff0c;这个工具真的帮我省去了大量开发时间。 从创意到原型的极速转换 以前做3D展示需要先建模再写代码&#xff0c;现在只需要在快马平…...

单片机老鸟的汇编优化:给那个255上限的脉冲计数器升个级

单片机老鸟的汇编优化&#xff1a;给那个255上限的脉冲计数器升个级 在嵌入式开发领域&#xff0c;脉冲计数是一个经典而实用的功能模块。许多开发者都曾用51单片机实现过基础版本——通过T1计数器接收脉冲信号&#xff0c;将计数值显示在数码管上。但当我们翻看这些"教科…...