Jeecgboot低代码平台单体模式二开实战系列（十三）实现jeecg前端系统界面背景添加水印

在实际的业务中，我们一般客户会要求对系统进行保密，防止他人拍照，截图等泄露机密数据，此时在jeecgboot中怎么实现呢？

其实实现水印的话，主要是前端来进行功能的开发，所以我在敲敲云上问了AI如何实现水印，敲敲云Ai给我的答复是：

奈何我不会编写前端，所以这块代码怎么放我也不知道，所以这里我是用阿里云的Qoder Ai编辑器来编写前端代码。

首先我用Qoder编辑器打开jeecgboot前端的VUE3代码

然后我使用AI进行提问：

想要给这个前端项目启动起来后，让背景自动添加上水印，官方给的案例是：function setWatermark(userName) {
let watermarkDiv = document.createElement('div');
watermarkDiv.id = 'watermark';
watermarkDiv.style.pointerEvents = 'none';
watermarkDiv.style.position = 'fixed';
watermarkDiv.style.top = '0';
watermarkDiv.style.left = '0';
watermarkDiv.style.width = '100vw';
watermarkDiv.style.height = '100vh';
watermarkDiv.style.zIndex = '9999';
watermarkDiv.style.background = `url('data:image/svg+xml;utf8,<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"><text x="0" y="20" font-size="18" fill="rgba(180,180,180,0.25)" transform="rotate(-20 20,20)">${userName}</text></svg>') repeat`;
document.body.appendChild(watermarkDiv);
} 怎么把这个代码融入进去，并让他有效果

然后就可以看到他开始思考和写代码了，最后他把代码写完如下图：

然后我把前端的代码运行起来，发现整个界面已经添加上水印了，如下图：

但是这个水印只是显示了用户的登录名，一般来说我们需要显示登录名，还需要显示时间戳，所以我们再修改下提问题：

这里添加的水印只是获取用户名，再添加一个时间显示，水印示例如： 张三  2025-09-03 13:47

最后经过AI一顿输出之后，我们把项目运行起来，可以看到背景已经添加上时间戳了

以上就是在jeecgboot中添加水印背景的二开案例。