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

实习随笔【前端技术实现全局添加水印】

        有一些数据比较重要的项目,往往需要对数据进行保护措施,本文介绍常见策略——全局添加水印。

1、创建水印组件
<template><div class="water-mark"><div class="water-mark-content"><span class="phone">{{ phone }}</span><span class="time">{{ time }}</span></div></div>
</template>
<script>
export default {name: 'WaterMark',props: {phone: {type: String,required: true,},time: {type: Number,required: true,},},
};
</script>
<style scoped>.water-mark {position: relative;width: 300px;height: 300px;background: url('../../assets/logo.png') no-repeat center;background-size: 80px;filter: brightness(0.7);pointer-events: none;color: rgba(26, 26, 26, 0.3);font-size: 10px;transform: rotate(-45deg);display: inline-block;opacity: 0.5;}.water-mark-content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;}.phone {display: block;position: absolute;top: -15px;left: 50px;}.time {display: block;position: absolute;top: 0px;left: 50px;}
</style>
2、在公共组件使用水印组件 

        这里需要注意,水印的位置以及多少可由样式具体决定

<div class="water-wrap"><WaterMarkv-for="(item, index) in waterArr":key="`water-mark-${index}`":phone="userInfo.username":time="time.getTime()"/>
</div>// 水印内容——当前时间
time = new Date()// 水印数组控制水印数量
waterArr = Array(100).fill(1)// 水印样式控制水印显示区域
.water-wrap {position: fixed;bottom: 0;left: 0;top: 0;right: 0;overflow: hidden;z-index: 100000;pointer-events: none;}
3、对于不需要水印的页面(登录页)

        可以用计算属性来判断,并用v-if(vue)或&&(react)控制显隐

// 以下例子以登录页不显示水印为例
<div v-if="isLoginPage" class="water-wrap"><WaterMarkv-for="(item, index) in waterArr":key="`water-mark-${index}`":phone="userInfo.username":time="time.getTime()"/>
</div>computed: {isLoginPage() {// 检查当前路由路径是否包含 '/login'return !this.$route.path.includes('/login');},
},

相关文章:

实习随笔【前端技术实现全局添加水印】

有一些数据比较重要的项目&#xff0c;往往需要对数据进行保护措施&#xff0c;本文介绍常见策略——全局添加水印。 1、创建水印组件 <template><div class"water-mark"><div class"water-mark-content"><span class"phone&qu…...

【软件测试】编写测试用例篇

前面部分主要是编写测试用例的方法和方向&#xff0c;后面一部分是编写出具体的测试用例 目录 什么是测试用例 1.设计测试用例的万能公式 1.1.从思维出发 1.2.万能公式 1.3.弱网测试 1.4.安装与卸载测试 2.设计测试用例的方法 2.1.基于需求的设计方法 2.2.等价类 2.3…...

转型AI产品经理需要掌握的硬知识(二):AI常见概念和算法梳理

上一篇文章介绍AI产品经理能力模型&#xff0c;人工智能的发展历史&#xff0c;人工智能常见概念的结构梳理&#xff0c;也简要做了BAT人工智能的优势分析&#xff0c;感兴趣的朋友可以点击链接查看上文。转型AI产品经理需要掌握的硬知识一&#xff1a;AI产品能力框架和看待AI的…...

mysql-connector-java 8.0.33 反序列化漏洞

前言 经过与oracle官方沟通&#xff0c;在最新的mysql-connector-j 9.0.0里不存在这个问题&#xff0c;所以他们不认为这是个漏洞 不过确实&#xff0c;mysql-connector-java这个分支已经迁移到mysql-connector-j了&#xff0c;当时没注意&#xff0c;交的时候只注意了mysql-c…...

基于Faster R-CNN的安全帽目标检测

基于Faster R-CNN的安全帽目标检测项目通常旨在解决工作场所&#xff0c;特别是建筑工地的安全监管问题。这类项目使用计算机视觉技术&#xff0c;特别是深度学习中的Faster R-CNN算法&#xff0c;来自动检测工人是否正确佩戴了安全帽&#xff0c;从而确保遵守安全规定并减少事…...

linux中vim切换输入中文

linux中vim切换输入中文 遇到问题 在虚拟机linux下vim 编辑器中注释的时候无法使用中文 解决方案 Linux系统中的vim编辑器中安装中文输入法软件包 1.在终端中输入以下命令 sudo apt-get install fcitx fcitx-bin fcitx-table-wubi fcitx-table-wbpy2. 安装完成后&#xf…...

嵌入式C++、Qt/QML和MQTT:智能工厂设备监控系统的全流程介绍(附代码示例)

1. 项目概述 本项目旨在开发一套先进的智能工厂设备监控系统&#xff0c;集成嵌入式技术、工业通信协议和人机界面等多项技术&#xff0c;实现对工厂设备的全方位实时监控、高精度数据采集和智能化分析。该系统将显著提升工厂设备的运行效率&#xff0c;大幅降低维护成本&…...

监控易V7.6.6.15升级详解8:机房动环管理功能

随着企业IT基础设施的不断发展&#xff0c;机房动环管理成为保障系统稳定运行的关键环节。为了满足广大用户对于机房动环管理的高效、精准需求&#xff0c;监控易系统近期完成了一次重要版本升级。本次升级不仅优化了原有功能&#xff0c;还新增了一系列实用特性&#xff0c;旨…...

C++ | Leetcode C++题解之第232题用栈实现队列

题目&#xff1a; 题解&#xff1a; class MyQueue { private:stack<int> inStack, outStack;void in2out() {while (!inStack.empty()) {outStack.push(inStack.top());inStack.pop();}}public:MyQueue() {}void push(int x) {inStack.push(x);}int pop() {if (outStac…...

Git-Updates were rejected 解决

Git-Updates were rejected 解决 文章目录 1. 杂话2. 问题3. 解决3.1 拉取远程的最新版本&#xff08;AC&#xff09;3.2 解决可能的冲突3.3 提交3.4 再次推送 1. 杂话 大伙儿应该都用过Git吧&#xff0c;具体是个啥东西我就不说了哈。之前我在用git push的时候遇到了这个报错&…...

Java常用的API_02(正则表达式、爬虫)

Java正则表达式 七、正则表达式7.1 格式7.1.1 字符类注意字符类示例代码1例2 7.1.2 预定义字符预定义字符示例代码例2 7.1.3 区别总结 7.2 使用Pattern和Matcher类与直接使用String类的matches方法的区别。&#xff08;1&#xff09; 使用Pattern和Matcher类示例代码 &#xff…...

2024最新图纸加密软件Top5排行榜

“小张&#xff0c;你听说了吗&#xff1f;最近我们部门又发生了一起图纸泄露事件&#xff0c;真是让人头疼。”小李眉头紧锁&#xff0c;手中紧握着一份重要的设计图纸。 “是啊&#xff0c;这图纸可是咱们的心血&#xff0c;一旦泄露出去&#xff0c;后果不堪设想。”小张回…...

每日一练 - IEEE 802.1Q中STP协议

01 真题题目 关于设备 SWC 的上述配置说法正确的是 (多选) A.SWC 为根交换机 B.stp instance 1 priority 4096 是配置交换机在实例 1 中的优先级为 4096&#xff0c; 该优先级默认为0 C.gtp edged-port enable 该命令是启用交换机 5WC 的 Ethernet 1/0/2 为边缘端口 D.sto …...

设计模式--工厂设计模式

什么是工厂模式&#xff1f; 工厂模式是一种创建型设计模式&#xff0c;它定义了一个用于创建对象的接口&#xff0c;但由子类决定要实例化的类是哪一个。这样&#xff0c;工厂方法模式让类的实例化延迟到子类。通过工厂方法模式&#xff0c;我们可以在不修改现有代码的情况下…...

消息队列-MQ

消息队列-MQ 1、什么是MQ?为什么要使用MQ?2、MQ有什么优缺点?3、有哪些常见的MQ实现?都有什么区别?4、MQ如何保证消息的可靠传输?消息丢了怎么办?5、如何保证消息的顺序性?6、如何解决消息队列的延时以及过期失效问题?7、消息队列满了以后该怎么处理?8、假设有几百万…...

近源渗透简介

什么是近源渗透 通过乔装、社工等方式实地物理侵入企业办公区域&#xff0c;通过其内部各种潜在攻击面&#xff08;如Wi-Fi网络、RFID门禁、暴露的有线网口、USB接口等&#xff09;获得“战果”&#xff0c;最后以隐秘的方式将评估结果带出上报&#xff0c;由此证明企业安全防…...

13 IP层协议-网际控制报文协议ICMP

计算机网络资料下载&#xff1a;CSDNhttps://mp.csdn.net/mp_blog/creation/editor/140148186 为了更有效的转发IP数据报和提高交付成果的机会&#xff0c;在网际层使用了网际控制报文协议ICMP。ICMP允许主机或路由器报告差错情况和提供有关异常情况的报告。ICMP不是高层协议数…...

第一节Linux常见指令

目录 1.Linux下基本指令 ls指令 pwd 命令 cd 指令 知识点:理解树形结构 touch 指令 mkdir指令(重要) rmdir指令 && rm指令(重要) 知识点:ls file* 可以找到当前目录下任何以file开头的文件​编辑 知识点:热键 man指令()重要 补充知识点:nano cp…...

嵌入式全栈设计思路:STM32G4+ChibiOS+FreeRTOS+PID控制+PFC算法构建高效智能电源管理系统(附代码示例)

智能电源管理系统是一个基于STM32G4微控制器的高性能数字电源控制解决方案。本项目旨在设计一个功能全面、高效稳定的电源管理系统,可广泛应用于工业控制、新能源、通信设备等领域。 1.1 系统主要特点 高精度数字电源控制&#xff1a;利用STM32G4的高性能ADC和定时器,实现精确…...

Linux驱动开发-04LED灯驱动实验(直接操作寄存器)

一、Linux 下LED 灯驱动原理 Linux 下的任何外设驱动&#xff0c;最终都是要配置相应的硬件寄存器。驱动访问底层的硬件除了使用内存映射将物理地址空间转化为虚拟地址空间&#xff0c;去进行读写修改&#xff0c;还可以通过各种子系统函数去进行操作 1.1 地址映射 MMU 全称…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...