### Frontend Setup Commands - Bash

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/home.md

Provides the necessary bash commands to clone the frontend project repository, install its dependencies using npm, start the development server, and build the project for a production environment.

```bash
# 克隆项目
git clone https://gitee.com/JavaLionLi/plus-ui.git

# 安装依赖
npm install --registry=https://registry.npmmirror.com

# 启动服务
npm run dev

# 构建生产环境
npm run build:prod

# 前端访问地址 http://localhost:80
```

--------------------------------

### Starting SkyWalking Containers with Docker Compose (Shell)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/extend-function/skywalking.md

Executes the docker-compose command to start the necessary containers for SkyWalking, including Elasticsearch, OAP (Observability Analysis Platform), and the UI. Requires a pre-configured docker-compose file.

```Shell
docker-compose up -d elasticsearch sky-oap sky-ui
```

--------------------------------

### Start ELK Containers with Docker Compose (Shell)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/extend-function/elk.md

Starts the elasticsearch, kibana, and logstash services defined in the docker-compose.yml file in detached mode (-d). This command brings up the core components of the ELK stack.

```shell
docker-compose up -d elasticsearch kibana logstash
```

--------------------------------

### Example Standard RuoYi-Vue-Plus Route (JSON)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/router_use.md

Provides a concrete example of a standard route configuration object in JSON format, including nested children routes, component loading using `require`, and meta properties like title and icon.

```JSON
{
  path: '/system/test',
  component: Layout,
  redirect: 'noRedirect',
  hidden: false,
  alwaysShow: true,
  meta: { title: '系统管理', icon : "system" },
  children: [{
    path: 'index',
    component: (resolve) => require(['@/views/index'], resolve),
    name: 'Test',
    meta: {
      title: '测试管理',
      icon: 'user'
    }
  }]
}
```

--------------------------------

### Start Elasticsearch Service via Docker Compose (Shell)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/extend-function/es.md

This command starts the Elasticsearch service defined in the project's docker-compose.yml file. The '-d' flag runs the service in detached mode, allowing it to run in the background.

```Shell
docker-compose up -d elasticsearch
```

--------------------------------

### Start Prometheus and Grafana Containers using Docker Compose (Shell)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/extend-function/prometheus_grafana.md

This command uses docker-compose to start the Prometheus and Grafana containers defined in the framework's docker-compose file. The '-d' flag runs the containers in detached mode.

```Shell
docker-compose up -d prometheus grafana
```

--------------------------------

### Adding SkyWalking Log Collection Dependency (XML)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/extend-function/skywalking.md

Adds the ruoyi-common-skylog dependency to the project's pom.xml file. This module provides encapsulated functionality for pushing logs to SkyWalking, although the text notes this method is not recommended.

```XML
<!-- skywalking 日志收集 -->
<dependency>
    <groupId>com.ruoyi</groupId>
    <artifactId>ruoyi-common-skylog</artifactId>
</dependency>
```

--------------------------------

### Apifox OpenAPI Data Source URLs

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/association/doc.md

These are example URLs for configuring data sources in Apifox to pull OpenAPI documentation from different services within the project. Replace "网关ip:端口" with your actual gateway address.

```URLs
http://localhost:8080/demo/v3/api-docs 演示服务
http://localhost:8080/auth/v3/api-docs 认证服务
http://localhost:8080/resource/v3/api-docs 资源服务
http://localhost:8080/system/v3/api-docs 系统服务
http://localhost:8080/code/v3/api-docs 代码生成服务
```

--------------------------------

### Chaining Global Component Registrations in Vue

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/component_use.md

Demonstrates how the `.component()` method returns the application instance itself, allowing multiple global component registrations to be chained together for a more concise setup.

```javascript
app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)
```

--------------------------------

### Importing Dependencies and Initial Setup in Axios Utility

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/exception_handling.md

This section imports necessary libraries and modules for the Axios wrapper, including store management, utility functions, caching, encryption helpers, and router. It also defines global variables and a helper function for common request headers.

```typescript
import axios, {AxiosResponse, InternalAxiosRequestConfig} from 'axios';
import {useUserStore} from '@/store/modules/user';
import {getToken} from '@/utils/auth';
import {tansParams, blobValidate} from '@/utils/ruoyi';
import cache from '@/plugins/cache';
import {HttpStatus} from '@/enums/RespEnum';
import {errorCode} from '@/utils/errorCode';
import {LoadingInstance} from 'element-plus/es/components/loading/src/loading';
import FileSaver from 'file-saver';
import {getLanguage} from '@/lang';
import {encryptBase64, encryptWithAes, generateAesKey, decryptWithAes, decryptBase64} from '@/utils/crypto';
import {encrypt, decrypt} from '@/utils/jsencrypt';
import router from "@/router";

const encryptHeader = 'encrypt-key';
let downloadLoadingInstance: LoadingInstance;
// 是否显示重新登录
export const isRelogin = {show: false};
export const globalHeaders = () => {
    return {
        Authorization: 'Bearer ' + getToken(),
        clientid: import.meta.env.VITE_APP_CLIENT_ID
    };
};
```

--------------------------------

### Configure Database Connection in YML (Dameng Example)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/questions/domestic_databases.md

Configure the database connection details in the application's YAML configuration file (application.yml). This involves specifying the JDBC URL, username, password, and the correct driver class name for the Dameng database.

```YAML
datasource:
  dynamic:
    datasource:
      master:
        url: jdbc:dm://localhost:5236/ry-vue?schema=RY
        username: root
        password: 123456
        driver-class-name: dm.jdbc.driver.DmDriver
```

--------------------------------

### Get Current User Info - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/user.md

Retrieves the LoginUser object for the currently logged-in user. Requires the user to be authenticated.

```Java
LoginUser user = LoginHelper.getLoginUser();
```

--------------------------------

### Example External Link RuoYi-Vue-Plus Route (JSON)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/router_use.md

Shows how to configure a route that acts as an external link in JSON format, typically used for adding external websites to the navigation menu by specifying the URL in the `path`.

```JSON
{
  path: 'http://ruoyi.vip',
  meta: { title: '若依官网', icon : "guide" }
}
```

--------------------------------

### Example Service for SpEL Expression - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/quickstart/worker_init.md

This Java service class demonstrates how to create methods that can be invoked using SpEL expressions within the Warm-Flow process designer. These methods can be used to retrieve dynamic data, such as a department leader's ID, or utilize workflow variables as parameters for custom logic.

```Java
// 简单案例参考 请按实际业务为准
// #{@deptService.getLeader()}
// #{@deptService.getLeader1(#handler1)}
@Service
// @Service("ssssss") // 重命名成自己喜欢的名字 方便书写查找 #{@ssssss.getLeader()}
public class DeptService {
    
    // 获取部门领导
    public String getLeader() {
        return "1";
    }

    // 获取其他流程变量当参数
    public String getLeader1(String handler1) {
        return "1";
    }
    
}
```

--------------------------------

### Get Current Username - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/user.md

Retrieves the account name or username of the currently logged-in user. Requires the user to be authenticated.

```Java
String username = LoginHelper.getUsername();
```

--------------------------------

### Local Component Registration in Vue SFC (TypeScript)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/component_use.md

Demonstrates how to import and register a component locally within a Vue Single File Component (SFC) using the `<script setup>` syntax and then use it in the template. The component is only available within this specific SFC.

```typescript
<script setup lang=ts>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>
```

--------------------------------

### Get Current Login Username - Sa-Token - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/user.md

Retrieves the username or account name of the currently logged-in user. Requires the user to be authenticated.

```Java
String username = LoginHelper.getUsername();
```

--------------------------------

### Login API Call Example - TypeScript

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/exception_handling.md

This function demonstrates how to make a login API call using the configured request service. It prepares the request parameters, including default client ID and grant type, and sets specific headers (`isToken: false`, `isEncrypt: true`, `repeatSubmit: false`) to control token inclusion, data encryption, and repeat submission prevention for this specific endpoint.

```TypeScript
export function login(data: LoginData): AxiosPromise<LoginResult> {
  const params = {
    ...data,
    clientId: data.clientId || clientId,
    grantType: data.grantType || 'password'
 };
 return request({
 url: '/auth/login',
    headers: {
      isToken: false,
      isEncrypt: true,
      repeatSubmit: false
    },
    method: 'post',
    data: params
  });
}
```

--------------------------------

### Get Login User by Token - Sa-Token - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/user.md

Retrieves the LoginUser object associated with a specific token string. Useful for scenarios where the token is available but not necessarily in the current request context.

```Java
LoginUser user = LoginHelper.getLoginUser(token);
```

--------------------------------

### Set ELK Elasticsearch Directory Permissions (Shell)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/extend-function/elk.md

Grants full read, write, and execute permissions to the specified Elasticsearch data, logs, and plugins directories within the Docker volume path. This is required for Elasticsearch to function correctly within the container environment.

```shell
chmod 777 /docker/elk/elasticsearch/data
chmod 777 /docker/elk/elasticsearch/logs
chmod 777 /docker/elk/elasticsearch/plugins
```

--------------------------------

### Set Elasticsearch Directory Permissions (Shell)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/extend-function/es.md

These commands set write permissions (777) for the Elasticsearch data, logs, and plugins directories within the Docker volume path. This is required for Elasticsearch to function correctly, especially for storing data, writing logs, and loading plugins.

```Shell
chmod 777 /docker/elk/elasticsearch/data
```

```Shell
chmod 777 /docker/elk/elasticsearch/logs
```

```Shell
chmod 777 /docker/elk/elasticsearch/plugins
```

--------------------------------

### Get User Info by Token - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/user.md

Retrieves the LoginUser object associated with a specific authentication token. Useful for scenarios where the token is available but not necessarily tied to the current thread's context.

```Java
LoginUser user = LoginHelper.getLoginUser(token);
```

--------------------------------

### Get Current Tenant ID - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/user.md

Retrieves the tenant identifier associated with the currently logged-in user. Relevant in multi-tenant environments. Requires the user to be authenticated.

```Java
String tenantId = LoginHelper.getTenantId();
```

--------------------------------

### Add Logstash Dependency to Maven POM (XML)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/extend-function/elk.md

Adds the `ruoyi-common-logstash` dependency to the project's Maven or Gradle build file (pom.xml). This dependency is required to enable log collection and forwarding to Logstash from the application.

```xml
<!-- ELK 日志收集 -->
<dependency>
    <groupId>com.ruoyi</groupId>
    <artifactId>ruoyi-common-logstash</artifactId>
</dependency>
```

--------------------------------

### Using $cache for Session and Local Storage in TypeScript

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/common_func.md

Demonstrates setting, getting, and removing values (including JSON objects) using both session (`$cache.session`) and local (`$cache.local`) storage methods provided by the `$cache` object.

```typescript
// local 普通值
proxy?.$cache.local.set('key', 'local value')
console.log(proxy?.$cache.local.get('key')) // 输出'local value'

// session 普通值
proxy?.$cache.session.set('key', 'session value')
console.log(proxy?.$cache.session.get('key')) // 输出'session value'

// local JSON值
proxy?.$cache.local.setJSON('jsonKey', { localProp: 1 })
console.log(proxy?.$cache.local.getJSON('jsonKey')) // 输出'{localProp: 1}'

// session JSON值
proxy?.$cache.session.setJSON('jsonKey', { sessionProp: 1 })
console.log(proxy?.$cache.session.getJSON('jsonKey')) // 输出'{sessionProp: 1}'

// 删除值
proxy?.$cache.local.remove('key')
proxy?.$cache.session.remove('key')
```

--------------------------------

### Get Current Login User ID - Sa-Token - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/user.md

Retrieves the unique identifier (ID) of the currently logged-in user. Requires the user to be authenticated.

```Java
Long userId = LoginHelper.getUserId();
```

--------------------------------

### Get Current User ID - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/user.md

Retrieves the unique identifier (ID) of the currently logged-in user. Requires the user to be authenticated.

```Java
Long userId = LoginHelper.getUserId();
```

--------------------------------

### Get Current Department ID - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/user.md

Retrieves the department identifier associated with the currently logged-in user. Requires the user to be authenticated.

```Java
Long deptId = LoginHelper.getDeptId();
```

--------------------------------

### Get Current User Type - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/user.md

Retrieves the type of the currently logged-in user (e.g., 'sys_user', 'app_user'). Requires the user to be authenticated.

```Java
UserType userType = LoginHelper.getUserType();
```

--------------------------------

### Get Current Login Tenant ID - Sa-Token - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/user.md

Retrieves the tenant ID associated with the currently logged-in user. Useful in multi-tenant applications. Requires the user to be authenticated.

```Java
String tenantId = LoginHelper.getTenantId();
```

--------------------------------

### Get Current Login Department ID - Sa-Token - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/user.md

Retrieves the department ID associated with the currently logged-in user. Requires the user to be authenticated.

```Java
Long deptId = LoginHelper.getDeptId();
```

--------------------------------

### Get Current Login User - Sa-Token - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/user.md

Retrieves the LoginUser object for the currently logged-in user. Requires the user to be authenticated and the token to be present in the request header (Authorization: Bearer token).

```Java
LoginUser user = LoginHelper.getLoginUser();
```

--------------------------------

### Apply Annotations for Data Permission Filtering (Mapper Method) (Java)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/permissions.md

Apply @DataPermission and @DataColumn annotations to a Mapper method to configure which fields (dept_id, user_id in this example) should be used for data filtering based on the user's assigned data scopes.

```Java
@DataPermission(deptAlias = "d", userAlias = "u")
List<YourEntity> selectList(@Param("ew") Wrapper<YourEntity> queryWrapper,
                            @DataColumn(key = "deptName", alias = "d", column = "dept_id") String deptIdColumn,
                            @DataColumn(key = "userName", alias = "u", column = "user_id") String userIdColumn);
```

--------------------------------

### Configuring Axios Request Interceptor

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/exception_handling.md

This interceptor is executed before each request is sent. It adds the language header, includes the authorization token unless explicitly excluded, serializes GET parameters, implements a mechanism to prevent duplicate form submissions within a short interval using session storage, and applies AES encryption to POST/PUT request data if the encryption feature is enabled.

```typescript
// 请求拦截器
service.interceptors.request.use(
    (config: InternalAxiosRequestConfig) => {
        // 对应国际化资源文件后缀
        config.headers['Content-Language'] = getLanguage();

        const isToken = config.headers?.isToken === false;
        // 是否需要防止数据重复提交
        const isRepeatSubmit = config.headers?.repeatSubmit === false;
        // 是否需要加密
        const isEncrypt = config.headers?.isEncrypt === 'true';

        if (getToken() && !isToken) {
            config.headers['Authorization'] = 'Bearer ' + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
        }
        // get请求映射params参数
        if (config.method === 'get' && config.params) {
            let url = config.url + '?' + tansParams(config.params);
            url = url.slice(0, -1);
            config.params = {};
            config.url = url;
        }

        if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
            const requestObj = {
                url: config.url,
                data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
                time: new Date().getTime()
            };
            const sessionObj = cache.session.getJSON('sessionObj');
            if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
                cache.session.setJSON('sessionObj', requestObj);
            } else {
                const s_url = sessionObj.url; // 请求地址
                const s_data = sessionObj.data; // 请求数据
                const s_time = sessionObj.time; // 请求时间
                const interval = 500; // 间隔时间(ms)，小于此时间视为重复提交
                if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
                    const message = '数据正在处理，请勿重复提交';
                    console.warn(`[${s_url}]: ` + message);
                    return Promise.reject(new Error(message));
                } else {
                    cache.session.setJSON('sessionObj', requestObj);
                }
            }
        }
        if (import.meta.env.VITE_APP_ENCRYPT === 'true') {
            // 当开启参数加密
            if (isEncrypt && (config.method === 'post' || config.method === 'put')) {
                // 生成一个 AES 密钥
                const aesKey = generateAesKey();
                config.headers[encryptHeader] = encrypt(encryptBase64(aesKey));
                config.data = typeof config.data === 'object' ? encryptWithAes(JSON.stringify(config.data), aesKey) : encryptWithAes(config.data, aesKey);
            }
        }
        // FormData数据去请求头Content-Type
        if (config.data instanceof FormData) {
            delete config.headers['Content-Type'];
        }
        return config;
    },
    (error: any) => {
        return Promise.reject(error);
    }
);
```

--------------------------------

### Get Extra User Attribute - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/user.md

Retrieves a specific extra attribute stored with the user's login session using a provided key. Requires the user to be authenticated.

```Java
Object obj = LoginHelper.getExtra(key);
```

--------------------------------

### Using ImageUpload Component in Vue

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/component_doc.md

This snippet illustrates how to use the ImageUpload component within an Element Plus form in a Vue 3 setup script. It demonstrates binding the component's value to a reactive form property using v-model and configuring various props such as upload limits (quantity and size), allowed file types, tip visibility, compression support, and compression target size.

```Vue
<template>
  <el-form>
    <el-form-item label="上传图片">
      <ImageUpload
        v-model="form.imageIds"
        :limit="5"
        :file-size="5"
        :file-type="['png', 'jpg']"
        :is-show-tip="true"
        :compress-support="true"
        :compress-target-size="300"
      />
    </el-form-item>
  </el-form>
</template>
```

```TypeScript
<script setup lang="ts">

const form = reactive({
  imageIds: [] // 初始值为空数组
});
</script>
```

--------------------------------

### Get Current Login User Type - Sa-Token - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/user.md

Retrieves the type of the currently logged-in user, represented by a UserType enum or similar structure. Requires the user to be authenticated.

```Java
UserType userType = LoginHelper.getUserType();
```

--------------------------------

### Get Login User Extra Attribute - Sa-Token - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/user.md

Retrieves an extra attribute associated with the logged-in user by its key. This allows storing custom data with the user session. Requires the user to be authenticated.

```Java
Object obj = LoginHelper.getExtra(key);
```

--------------------------------

### Applying Custom Validation Annotation (@Xss) on Field in Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/param_check.md

Shows an example of how a custom validation annotation, like @Xss, is applied to a field alongside standard validation annotations to enforce custom validation rules.

```Java
@Xss(message = "用户账号不能包含脚本字符")
@NotBlank(message = "用户账号不能为空")
@Size(min = 0, max = 30, message = "用户账号长度不能超过{max}个字符")
private String userName;
```

--------------------------------

### Using Custom @Xss Validation Annotation on Field in Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/param_check.md

Provides an example of applying a custom validation annotation, @Xss, alongside standard validation annotations on a field within a Java object.

```Java
@Xss(message = "用户账号不能包含脚本字符")
@NotBlank(message = "用户账号不能为空")
@Size(min = 0, max = 30, message = "用户账号长度不能超过{max}个字符")
private String userName;
```

--------------------------------

### Importing Dictionary Hook (TypeScript)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/dict_use.md

Imports a specific dictionary (`sys_normal_disable`) using a custom `useDict` hook and makes its properties reactive using `toRefs` for use in a Vue 3 composition API setup script.

```typescript
const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
```

--------------------------------

### Basic Keep-Alive Wrapper for Router View (HTML)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/page_cache.md

This HTML template snippet shows the basic usage of the <keep-alive> component wrapping the <router-view>. This setup enables caching for all components rendered by the router view, provided they have a matching 'name' property between their route and component definition.

```html
<template>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>
```

--------------------------------

### Configuring Vue Route for Caching (TypeScript)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/page_cache.md

This TypeScript snippet shows a typical route configuration object within a Vue Router setup. The 'name' property is crucial for <keep-alive> to identify and cache the corresponding component. The 'path' defines the URL segment, 'component' specifies the view file, and 'meta' holds additional route information like title and icon.

```typescript
{
  path: 'config',
  component: () => import('@/views/system/config/index'),
  name: 'Config',
  meta: { title: '参数设置', icon: 'edit' }
}
```

--------------------------------

### Basic Global Component Registration in Vue

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/component_use.md

Shows how to create a Vue application instance using `createApp` and globally register a component using the `.component()` method. The first argument is the registration name (as a string), and the second is the component's implementation (an options object or a component definition).

```javascript
import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)
```

--------------------------------

### Apifox Authentication Configuration (Version 1.X)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/association/doc.md

Configuration details for setting up authentication in Apifox for project versions 1.X. This typically involves adding a header for authorization using an API Key with a Bearer prefix.

```Text
Key: Authorization
Value: Bearer {{token}}
Add to: Header
Type: API Key
```

--------------------------------

### Creating Axios Instance and Setting Defaults

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/exception_handling.md

This snippet configures default headers for all requests, setting the Content-Type and client ID. It then creates the main Axios instance (`service`) with a predefined base URL from environment variables and a global timeout duration.

```typescript
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.headers['clientid'] = import.meta.env.VITE_APP_CLIENT_ID;
// 创建 axios 实例
const service = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
    timeout: 50000
});
```

--------------------------------

### Apifox Authentication Configuration (Version >= 2.X)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/association/doc.md

Configuration details for setting up authentication in Apifox for project versions >= 2.X. This typically involves adding a header for authorization using a Bearer token.

```Text
Key: Authorization
Value: {{token}}
Add to: Header
Type: Bearer Token
```

--------------------------------

### Retrieving System Parameter

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/param_use.md

This snippet demonstrates how to retrieve a system configuration parameter value using its key. It imports the necessary API function and calls it with the desired parameter key. The resulting value is available in `res.data`, corresponding to the `config_value` in the `sys_config` database table.

```TypeScript
// 导入 api
import {getConfigKey} from '@/api/system/config';

const res = getConfigKey('参数键名');
```

--------------------------------

### TenantHelper: Dynamic Tenant Switch (With Return)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/tenant.md

Temporarily switch the execution context to a specific tenant ID for a block of code and capture the result. Use this for special cross-tenant operations that return a value and should be used cautiously.

```Java
Class result = TenantHelper.dynamic(租户id, () -> { return 业务代码 });
```

--------------------------------

### Swagger, SpringDoc, and Javadoc Equivalents

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/association/doc.md

This table provides a mapping between common annotations and Javadoc elements used for API documentation in Swagger, SpringDoc, and standard Java comments. It helps in migrating documentation from Swagger to SpringDoc.

```Text
| swagger                          | springdoc                       | javadoc            |
|----------------------------------|---------------------------------|--------------------|
| @Api(name = "xxx")               | @Tag(name = "xxx")              | java类注释第一行         |
| @Api(description= "xxx")         | @Tag(description= "xxx")        | java类注释            |
| @ApiOperation                    | @Operation                      | java方法注释           |
| @ApiIgnore                       | @Hidden                         | 无                  |
| @ApiParam                        | @Parameter                      | java方法@param参数注释   |
| @ApiImplicitParam                | @Parameter                      | java方法@param参数注释   |
| @ApiImplicitParams               | @Parameters                     | 多个@param参数注释       |
| @ApiModel                        | @Schema                         | java实体类注释          |
| @ApiModelProperty                | @Schema                         | java属性注释           |
| @ApiModelProperty(hidden = true) | @Schema(accessMode = READ_ONLY) | 无                  |
| @ApiResponse                     | @ApiResponse                    | java方法@return返回值注释 |
```

--------------------------------

### TenantHelper: Dynamic Tenant Switch (No Return)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/tenant.md

Temporarily switch the execution context to a specific tenant ID for a block of code. Use this for special cross-tenant operations. This version is for void operations and should be used cautiously.

```Java
TenantHelper.dynamic(租户id, () -> { 业务代码 });
```

--------------------------------

### Basic Element Plus Icon Usage - HTML

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/icon_use.md

Demonstrates the basic usage of an Element Plus icon component directly within a template.

```HTML
<el-icon>
    <edit/>
</el-icon>
```

--------------------------------

### Running Java JAR with UTF-8 Encoding (Command Line)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/questions/jar_run_fail.md

Demonstrates how to launch a Java application packaged as a JAR file from the command line on Windows, explicitly setting the file encoding to UTF-8 to prevent issues caused by the default GBK encoding. This is achieved by adding the -Dfile.encoding=utf-8 JVM argument before the -jar option.

```Shell
java -Dfile.encoding=utf-8 -jar ruoyi-xxx.jar
```

--------------------------------

### Add Dameng JDBC Driver Dependency (Maven)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/questions/domestic_databases.md

Add the JDBC driver dependency for the Dameng database to the project's Maven configuration file (pom.xml). This dependency is essential for establishing a connection to the Dameng database from the application.

```XML
<dependency>
    <groupId>com.dm</groupId>
    <artifactId>DmJdbcDriver18</artifactId>
    <version>8.1.1.161</version>
</dependency>
```

--------------------------------

### Add Dameng Code Generator Dependency (Maven)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/questions/domestic_databases.md

Include the dependency for the Dameng database generator in the code generator module's Maven configuration (pom.xml). This dependency enables the code generation tool (anyline) to interact with and generate code based on the Dameng database schema.

```XML
<dependency>
    <groupId>org.anyline</groupId>
    <artifactId>anyline-jdbc-dameng</artifactId>
    <version>8.2.1</version>
</dependency>
```

--------------------------------

### Downloading File by OSS ID with $download in TypeScript

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/common_func.md

Initiates a file download using the `$download.oss` method, typically fetching the file from storage based on its OSS ID.

```typescript
// 默认下载方法
proxy?.$download.oss(ossId);
```

--------------------------------

### Using Excel Import Utility Method - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/import.md

This Java controller method handles an Excel file upload for user data import. It uses `ExcelUtil.importExcel` with the input stream, the import DTO class (`SysUserImportVo`), and a custom listener (`SysUserImportListener`) to process the data.

```Java
    /**
     * 导入数据
     *
     * @param file          导入文件
     * @param updateSupport 是否更新已存在数据
     */
    @Log(title = "用户管理", businessType = BusinessType.IMPORT)
    @SaCheckPermission("system:user:import")
    @PostMapping(value = "/importData", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public R<Void> importData(@RequestPart("file") MultipartFile file, boolean updateSupport) throws Exception {
        // 导入方法
        ExcelResult<SysUserImportVo> result = ExcelUtil.importExcel(file.getInputStream(), SysUserImportVo.class, new SysUserImportListener(updateSupport));
        return R.ok(result.getAnalysis());
    }
```

--------------------------------

### Navigating with router.push in RuoYi-Vue-Plus (TypeScript)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/router_use.md

Demonstrates the basic usage of the `router.push` method from `vue-router` to programmatically navigate to a specific path within the application.

```TypeScript
const router = useRouter();
router.push({ path: "/system/user" });
```

--------------------------------

### Check Multiple Permissions (AND) with StpUtil (Exception) (Java)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/permissions_control.md

Uses the StpUtil.checkPermissionAnd method to verify if the current user holds all of the provided permission codes. If the user is missing any of the specified permissions, a NotPermissionException is thrown.

```Java
StpUtil.checkPermissionAnd("system:user:list", "system:user:query");
```

--------------------------------

### Check Multiple Roles (AND) with StpUtil (Exception) (Java)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/permissions_control.md

Uses the StpUtil.checkRoleAnd method to verify if the current user holds all of the provided role characters. If the user is missing any of the specified roles, a NotRoleException is thrown. Note: The code snippets use permission-like strings, but the context describes role checking.

```Java
StpUtil.checkRoleAnd("system:user:list", "system:user:query");
```

--------------------------------

### Configuring RuoYi-Vue-Plus Route Options (TypeScript)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/router_use.md

Details various configuration properties available for routes in RuoYi-Vue-Plus, explaining their purpose and effect on navigation, sidebar visibility, caching, breadcrumbs, and active menu highlighting.

```TypeScript
// 当设置 true 的时候该路由不会在侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
hidden: true // (默认 false)

//当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
redirect: 'noRedirect'

// 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
// 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
// 若你想不管路由下面的 children 声明的个数都显示你的根路由
// 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
alwaysShow: true

name: 'router-name' // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
query: '{"id": 1, "name": "ry"}'     // 访问路由的默认传递参数
roles: ['admin', 'common']           // 访问路由的角色权限
permissions: ['a:a:a', 'b:b:b']      // 访问路由的菜单权限
 
meta: {
  title: 'title' // 设置该路由在侧边栏和面包屑中展示的名字
  icon: 'svg-name' // 设置该路由的图标，支持 svg-class，也支持 el-icon-x element-ui 的 icon
  noCache: true // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
  breadcrumb: false //  如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
  affix: true // 如果设置为true，它则会固定在tags-view中(默认 false)

  // 当路由设置了该属性，则会高亮相对应的侧边栏。
  // 这在某些场景非常有用，比如：一个文章的列表页路由为：/article/list
  // 点击文章进入文章详情页，这时候路由为/article/1，但你想在侧边栏高亮文章列表的路由，就可以进行如下设置
  activeMenu: '/article/list'
}
```

--------------------------------

### Using ExcelUtil for Data Import - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/import.md

Demonstrates the usage of the `ExcelUtil.importExcel` method within a Spring MVC controller (`SysUserController#importData`) to perform the actual data import operation. It takes a `MultipartFile`, the entity class type, and a custom listener (`SysUserImportListener`) as parameters.

```Java
    /**
     * 导入数据
     *
     * @param file          导入文件
     * @param updateSupport 是否更新已存在数据
     */
    @Log(title = "用户管理", businessType = BusinessType.IMPORT)
    @SaCheckPermission("system:user:import")
    @PostMapping(value = "/importData", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public R<Void> importData(@RequestPart("file") MultipartFile file, boolean updateSupport) throws Exception {
        // 导入方法
        ExcelResult<SysUserImportVo> result = ExcelUtil.importExcel(file.getInputStream(), SysUserImportVo.class, new SysUserImportListener(updateSupport));
        return R.ok(result.getAnalysis());
    }
```

--------------------------------

### Granting Write Permissions to Redis Data Directory (Shell)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/questions/permission_denied.md

This command uses `chmod` to set permissions for the Redis data directory. The `777` mode grants read, write, and execute permissions to the owner, group, and others, resolving 'Permission denied' errors that prevent Redis from saving data or RDB files in that location. Ensure the path `/docker/redis/data` matches your actual Redis data directory.

```Shell
chmod 777 /docker/redis/data
```

--------------------------------

### Export Data using ExcelUtil - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/export.md

Demonstrates how to use the framework's `ExcelUtil.exportExcel` method to perform data export. It involves querying data, converting it to the export VO list, and calling the utility method with the data list, sheet name, export VO class, and HttpServletResponse.

```Java
    /**
     * 导出用户列表
     */
    @PostMapping("/export")
    public void export(SysUserBo user, HttpServletResponse response) {
        // 根据参数查询导出的用户列表数据
        List<SysUserVo> list = userService.selectUserList(user);
        // 将列表转换为导出对象列表
        List<SysUserExportVo> listVo = MapstructUtils.convert(list, SysUserExportVo.class);
        // 导出方法
        ExcelUtil.exportExcel(listVo, "用户数据", SysUserExportVo.class, response);
    }
```

--------------------------------

### Configure Maven Resource Filtering Exclusion in pom.xml

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/questions/deploy_vue.md

This XML snippet configures Maven's resource handling in the `pom.xml` file. It adds a `<resource>` entry to specify a directory (`src/main/resources/页面目录`) and explicitly disables filtering (`<filtering>false</filtering>`) for its contents. This is crucial in RuoYi-Vue 3.X for ensuring frontend static resources are copied without modification during the build process, preventing issues with placeholders or unwanted transformations.

```XML
<resource>
    <directory>src/main/resources/页面目录</directory>
    <!-- 关闭过滤 -->
    <filtering>false</filtering>
</resource>
```

--------------------------------

### Downloading Zip File by URL with $download in TypeScript

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/common_func.md

Downloads a zip file from a specified URL using the `$download.zip` method. It takes the URL and an optional file name.

```typescript
const url = '/tool/gen/batchGenCode?tables=' + tableNames;
const name = 'ruoyi';

// 默认方法
proxy?.$download.zip(url, name);
```

--------------------------------

### TenantHelper: Ignore Tenant Filtering (No Return)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/tenant.md

Execute a block of code in the business layer without tenant filtering. This is the recommended approach for operations that should not be tenant-restricted. This version is for void operations.

```Java
TenantHelper.ignore(() -> { 业务代码 });
```

--------------------------------

### TenantHelper: Ignore Tenant Filtering (With Return)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/tenant.md

Execute a block of code in the business layer without tenant filtering and capture the result. This is the recommended approach for operations that should not be tenant-restricted and return a value.

```Java
Class result = TenantHelper.ignore(() -> { return 业务代码 });
```

--------------------------------

### Navigating with Query Parameters using router.push (TypeScript)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/router_use.md

Shows how to use the `query` property within the object passed to `router.push` to include URL query parameters when navigating to a new route.

```TypeScript
const router = useRouter();
router.push({ path: "/system/user", query: {id: "1", name: "若依"} });
```

--------------------------------

### Applying Dictionary Converter with readConverterExp - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/import.md

Illustrates using the `@ExcelProperty` annotation with `converter = ExcelDictConvert.class` and the custom `@ExcelDictFormat` annotation specifying the `readConverterExp` attribute for inline expression-based value conversion during import.

```Java
    /**
     * 用户性别
     */
    @ExcelProperty(value = "用户性别", converter = ExcelDictConvert.class)
    @ExcelDictFormat(readConverterExp="0=男,1=女,2=未知", separator=",")
    private String sex;
```

--------------------------------

### Check Multiple Permissions (OR) with StpUtil (Exception) (Java)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/permissions_control.md

Uses the StpUtil.checkPermissionOr method to check if the current user possesses at least one of the provided permission codes. If the user lacks all specified permissions, a NotPermissionException is thrown.

```Java
StpUtil.checkPermissionOr("system:user:list", "system:user:query");
```

--------------------------------

### Check Single Permission with StpUtil (Exception) (Java)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/permissions_control.md

Uses the StpUtil.checkPermission method to verify if the current user holds a specific permission code. If the user does not have the required permission, a NotPermissionException is thrown, halting execution.

```Java
StpUtil.checkPermission("system:user:list");
```

--------------------------------

### Apply Dictionary Converter with Expression - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/export.md

Illustrates applying the `ExcelDictConvert` using `@ExcelProperty` and providing a direct conversion expression (`readConverterExp`) within the `@ExcelDictFormat` annotation, specifying the mapping and separator for value conversion.

```Java
    /**
     * 用户性别
     */
    @ExcelProperty(value = "用户性别", converter = ExcelDictConvert.class)
    @ExcelDictFormat(readConverterExp="0=男,1=女,2=未知", separator=",")
    private String sex;
```

--------------------------------

### Global Registration of Vue Single File Component

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/component_use.md

Illustrates how to import a `.vue` file component and register it globally with the Vue application instance using the `.component()` method. Once registered globally, this component can be used in any component's template within this application.

```javascript
import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)
```

--------------------------------

### Applying Dictionary Conversion Annotations - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/import.md

These Java snippets demonstrate how to annotate a field (`sex`) in an import entity (`SysUserImportVo`) to apply dictionary conversion during Excel import. It uses `@ExcelProperty` to map the column and specify the `ExcelDictConvert` converter, and `@ExcelDictFormat` to define the dictionary type (`sys_user_sex`) or provide explicit conversion expressions (`readConverterExp`). Requires `ExcelDictConvert` and `@ExcelDictFormat`.

```Java
    /**
     * 用户性别
     */
    @ExcelProperty(value = "用户性别", converter = ExcelDictConvert.class)
    @ExcelDictFormat(dictType = "sys_user_sex")
    private String sex;
```

```Java
    /**
     * 用户性别
     */
    @ExcelProperty(value = "用户性别", converter = ExcelDictConvert.class)
    @ExcelDictFormat(readConverterExp="0=男,1=女,2=未知", separator=",")
    private String sex;
```

--------------------------------

### Using Globally Registered Components in Template

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/component_use.md

Shows the syntax for using components that have been registered globally with the Vue application instance. These components can be used directly by their registration name in the template of any component within the application.

```vue
// 这在当前应用的任意组件中都可用
<ComponentA/>
<ComponentB/>
<ComponentC/>
```

--------------------------------

### Opening Tab with $tab in TypeScript

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/common_func.md

Uses the `$tab.openPage` method to open a new tab. It can take just the path or the path and a custom title. The method returns a Promise.

```typescript
// 打开页签
proxy?.$tab.openPage('/system/user');
// 打开页签并指定页签标题
proxy?.$tab.openPage('/system/user', '用户管理');
proxy?.$tab.openPage('/system/user', '用户管理').then(() => {
    // 执行结束的逻辑
})
```

--------------------------------

### Check Single Role with StpUtil (Exception) (Java)

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/permissions_control.md

Uses the StpUtil.checkRole method to verify if the current user holds a specific role character. If the user does not have the required role, a NotRoleException is thrown, halting execution. Note: The code snippet uses a permission-like string, but the context describes role checking.

```Java
StpUtil.checkRole("system:user:list");
```

--------------------------------

### Setting WebSocket Authentication Headers in JavaScript

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/extend/websocket.md

Illustrates how to structure headers for WebSocket connections, including the Authorization token and client ID. Note that due to JavaScript limitations, these are often passed as URL parameters instead of headers for WebSocket.

```JavaScript
headers: {
    Authorization: "Bearer " + getToken(),
    clientid: import.meta.env.VITE_APP_CLIENT_ID
}
```

--------------------------------

### Managing Loading Overlay with $modal in TypeScript

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/common_func.md

Displays a loading overlay using `$modal.loading` with a message and hides it using `$modal.closeLoading`.

```typescript
// 打开遮罩层
proxy?.$modal.loading("正在导出数据，请稍后...");

// 关闭遮罩层
proxy?.$modal.closeLoading();
```

--------------------------------

### Applying Enum Conversion Annotations - Java

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-vue-plus/framework/basic/import.md

This Java snippet demonstrates how to annotate a field (`userStatus`) in an import entity to apply enum conversion during Excel import. It uses `@ExcelProperty` to map the column and specify the `ExcelEnumConvert` converter, and `@ExcelEnumFormat` to define the target enum class (`UserStatus`) and the field (`info`) to use for conversion. Requires `ExcelEnumConvert` and `@ExcelEnumFormat`.

```Java
    /**
     * 用户类型
     * </p>
     * 使用ExcelEnumFormat注解需要进行下拉选的部分
     */
    @ExcelProperty(value = "用户类型", index = 1, converter = ExcelEnumConvert.class)
    @ExcelEnumFormat(enumClass = UserStatus.class, textField = "info")
    private String userStatus;
```

--------------------------------

### Defining Validation Constraints on Fields in Java POJO

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/ruoyi-cloud-plus/framework/basic/param_check.md

Illustrates how to use standard validation annotations like @NotBlank, @Size, and @Email on the fields of a Java class (like a BO or DTO) to define the validation rules for those fields.

```Java
public class SysUserBo {

    @NotBlank(message = "用户账号不能为空")
    @Size(min = 0, max = 30, message = "用户账号长度不能超过{max}个字符")
    private String userName;
    
    @NotBlank(message = "用户昵称不能为空")
    @Size(min = 0, max = 30, message = "用户昵称长度不能超过{max}个字符")
    private String nickName;
    
    @Email(message = "邮箱格式不正确")
    @Size(min = 0, max = 50, message = "邮箱长度不能超过{max}个字符")
    private String email;
    
}
```

--------------------------------

### Using checkPermi and checkRole Functions with v-if in HTML

Source: https://github.com/wei201806/ruoyi-vue-plus-doc/blob/master/plus-ui/devdoc/permissions_use.md

This snippet demonstrates using global permission checking functions (`checkPermi` and `checkRole`) within a `v-if` directive. This approach is useful when directives like `v-hasPermi` are not suitable, such as with certain component tags like `el-tab-pane`. The functions take an array of strings (permissions or roles) and return a boolean.

```HTML
<el-tabs>
    <el-tab-pane v-if="checkPermi(['system:user:add'])" label="用户管理" name="user">用户管理</el-tab-pane>
    <el-tab-pane v-if="checkPermi(['system:user:add', 'system:user:edit'])" label="参数管理" name="menu">参数管理</el-tab-pane>
    <el-tab-pane v-if="checkRole(['admin'])" label="角色管理" name="role">角色管理</el-tab-pane>
    <el-tab-pane v-if="checkRole(['admin','common'])" label="定时任务" name="job">定时任务</el-tab-pane>
</el-tabs>
```