前端写法建议【让项目更加易于维护】
背景
标题前提条件:
没有字典接口、或其他原因,需要前端手动维护的情况
示例环境: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)…...
【如何有效解决前端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——展开和收起
案例展示 代码 后台返回的数据格式如下: {1: "大富科技速度快放假手动阀",2: "第三方斯蒂芬斯蒂芬是的开发时间",4: "45345345",5: "电饭锅电饭锅地方" }<view class"tipTitle">温馨提示</view> &l…...
WebGL2学习(2): GLSL ES 3.0
更多精彩内容尽在 dt.sim3d.cn ,关注公众号【sky的数孪技术】,技术交流、源码下载请添加VX:digital_twin123 WebGL 2.0 给 GLSL 带来了重大变化。WebGL 1.0 中使用的 GLSL 版本是 GLSL ES 1.0。 WebGL 2.0 中仍然可用。但是,通过编…...
[大模型实战] 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 图像/视频渲染2.1.5 定制化部署 2.2 支持的GPU 三、在DAMODEL部署LLama3.13.1 在DAMODEL创建实例&…...
驱动开发系列09 - Linux设备模型之设备,驱动和总线
一:概述 Linux 设备模型(LDM)是 Linux 内核中引入的一个概念。用于管理内核对象(那些需要引用计数的对象、例如文件、设备、总线甚至驱动程序),以及描述它们之间的层次结构,以及这些内核对象之间绑定关系。Linux 设备模型引入了对象生命周期管理、引用计数、以及面向对象…...
HTML实现弹出层
leopard/ˈlepərd/ 豹子,豹纹 弹出层指的是鼠标悬停于某个元素之上时显示的一个界面组件。 关注和理解特性:z-index属性和动态生成HTML元素。 HTML5新增: figure:媒体内容(图像,音频,视频),用于包含一…...
Android控件详解
在Android应用程序中,界面由布局和组件组成。布局相当于框架,而控件则是框架里面的内容。了解过Android布局后,如果要设计ui界面,还需要了解和掌握各个控件的应用。 一个界面的设计,先从创建容器开始,再向…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上,你可以使用apt包管理器来安装NFS服务器。打开终端并运行: sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享,例如/shared: sudo mkdir /shared sud…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
windows系统MySQL安装文档
概览:本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容,为学习者提供全面的操作指导。关键要点包括: 解压 :下载完成后解压压缩包,得到MySQL 8.…...
多元隐函数 偏导公式
我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式,给定一个隐函数关系: F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 🧠 目标: 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z、 …...
归并排序:分治思想的高效排序
目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法,由约翰冯诺伊曼在1945年提出。其核心思想包括: 分割(Divide):将待排序数组递归地分成两个子…...
前端工具库lodash与lodash-es区别详解
lodash 和 lodash-es 是同一工具库的两个不同版本,核心功能完全一致,主要区别在于模块化格式和优化方式,适合不同的开发环境。以下是详细对比: 1. 模块化格式 lodash 使用 CommonJS 模块格式(require/module.exports&a…...
Axure Rp 11 安装、汉化、授权
Axure Rp 11 安装、汉化、授权 1、前言2、汉化2.1、汉化文件下载2.2、windows汉化流程2.3、 macOs汉化流程 3、授权 1、前言 Axure Rp 11官方下载链接:https://www.axure.com/downloadthanks 2、汉化 2.1、汉化文件下载 链接: https://pan.baidu.com/s/18Clf…...
学习 Hooks【Plan - June - Week 2】
一、React API React 提供了丰富的核心 API,用于创建组件、管理状态、处理副作用、优化性能等。本文档总结 React 常用的 API 方法和组件。 1. React 核心 API React.createElement(type, props, …children) 用于创建 React 元素,JSX 会被编译成该函数…...
可下载旧版app屏蔽更新的app市场
软件介绍 手机用久了,app越来越臃肿,老手机卡顿成常态。这里给大家推荐个改善老手机使用体验的方法,还能帮我们卸载不需要的app。 手机现状 如今的app不断更新,看似在优化,实则内存占用越来越大,对手机性…...
