【JeecgBoot使用心得】JeecgBoot前端页面添加水印：基于用户姓名的实现方法

在JeecgBoot前端页面添加水印是一个很实用的功能，它能够为页面增添独特标识并且在一定程度上保障信息安全等多种用途。下面将详细介绍如何实现这一功能。

1.关键组件的引入（App.vue中）

• 在App.vue文件里，我们需要引入两个重要的组件。首先是从/@/hooks/web/useWatermark引入useWatermark函数，这个函数是我们添加水印功能的核心部分，它封装了一系列与水印设置相关的逻辑，比如水印的样式、位置、透明度等相关的设置逻辑。
• 其次，从/@/store/modules/user引入useUserStore函数。这个函数的主要作用是获取用户相关的信息，在我们的水印设置场景下，它将为我们提供用户的姓名等信息以便添加到水印内容当中。

import {
   
    useWatermark } from '/@/hooks/web/useWatermark';
import {
   
    useUserStore } from '/@/store/modules/user';

2.水印的具体设置逻辑

• 当我们成功引入这两个组件后，就可以进行水印的设置了。通过调用useWatermark函数，我们可以得到一个包含setWatermark方法的对象。
• 接着，我们调用setWatermark方法来设置水印内容。这里我们使用useUserStore函数获取用户信息中的真实姓名（如果用户已经登录并且有相关的姓名信息）。如果用户没有登录或者getUserInfo中没有realname属性，我们就使用默认值’游客’作为水印内容。

const {
   
    setWatermark } = useWatermark();
setWatermark(useUserStore().getUserInfo?.realname || '游客');

3.完整的App.vue文件内容

<template>
  <ConfigProvider :theme="appTheme" :locale="getAntdLocale">
    <AppProvider>
      <RouterView />
    </AppProvider>
  </ConfigProvider>
</template>

<script lang="ts" setup>
  import {
   
    watch, ref } from 'vue';
  import {
   
    theme } from 'ant-design-vue';
  import {
   
    ConfigProvider } from 'ant-design-vue';
  import