### Start Docker Service

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Command to start the Docker service on the server.

```bash
systemctl start docker

```

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

### Standard Route Example

Source: https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html

Example of a standard route configuration, including path, component, redirect, visibility, and meta information for a menu item.

```javascript
{
  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'
    }
  }]
}

```

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

### Install Dependencies

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Install project dependencies using npm, specifying a mirror registry for potentially faster downloads.

```bash
npm install --registry=https://registry.npmmirror.com
```

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

### Install Node.js Dependencies

Source: https://doc.ruoyi.vip/ruoyi-vue/document/hjbs.html

Installs project dependencies using npm. It's recommended to use a specific registry to improve installation speed and avoid potential issues with cnpm.

```bash
cd ruoyi-ui

npm install

# Strongly recommended not to use cnpm directly, as it can cause various strange bugs. You can solve the slow npm installation problem by re-specifying the registry.
npm install --registry=https://registry.npmmirror.com
```

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

### Start RuoYi-Vue Frontend Development Server

Source: https://doc.ruoyi.vip/ruoyi-vue/document/hjbs.html

Starts the frontend development server for the RuoYi-Vue project. Access the application via http://localhost:8080.

```bash
npm run dev
```

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

### Install Docker and Docker Compose

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Commands to install Docker and Docker Compose on a CentOS-based system. Ensure you have the necessary repositories and packages.

```bash
yum install https://download.docker.com/linux/fedora/30/x86_64/stable/Packages/containerd.io-1.2.6-3.3.fc30.x86_64.rpm
yum install -y yum-utils device-mapper-persistent-data lvm2
yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
yum install -y docker-ce
curl -L "https://github.com/docker/compose/releases/download/1.25.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

```

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

### Electron Main Process Setup

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

This is the main process file for an Electron application, handling window creation, protocol registration, and application lifecycle events.

```javascript
'use strict'

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'
const additionalData = { myKey: 'myValue' }
let myWindow = null
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }
}

const gotTheLock = app.requestSingleInstanceLock(additionalData)
if (!gotTheLock) {
  app.quit()
} else {
  app.on('second-instance', (event, commandLine, workingDirectory, additionalData) => {
    if (myWindow) {
      if (myWindow.isMinimized()) myWindow.restore()
      myWindow.focus()
    }
  })

  // Quit when all windows are closed.
  app.on('window-all-closed', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })

  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })

  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
  app.on('ready', async () => {
    if (isDevelopment && !process.env.IS_TEST) {
      // Install Vue Devtools
      try {
        await installExtension(VUEJS_DEVTOOLS)
      } catch (e) {
        console.error('Vue Devtools failed to install:', e.toString())
      }
    }
    createWindow()
  })

  // Exit cleanly on request from parent process in development mode.
  if (isDevelopment) {
    if (process.platform === 'win32') {
      process.on('message', (data) => {
        if (data === 'graceful-exit') {
          app.quit()
        }
      })
    } else {
      process.on('SIGTERM', () => {
        app.quit()
      })
    }
  }
}

```

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

### Verify Docker and Docker Compose Installation

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Check if Docker and Docker Compose have been installed successfully by running their version commands.

```bash
docker version
docker-compose --version

```

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

### Start Docker Containers

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Starts the Docker containers in detached mode, as defined in the docker-compose.yml file.

```bash
docker-compose up -d

```

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

### Knife4j Simple Configuration

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Configure basic Knife4j settings, including enabling the feature, setting production mode, and configuring basic authentication if needed. This example shows how to set a custom name for the entity class list.

```yaml
knife4j:
  enable: true
  production: false
  basic:
    enable: false
    username: ruoyi
    password: 123456
  setting:
    swagger-model-name: 实体类列表
```

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

### Environment Configuration for Staging Build

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

Example of environment variables configuration for a staging build. This includes setting the application title, Babel environment, Node environment, and API base URL for the staging server.

```dotenv
# 页面标题
VUE_APP_TITLE = 若依管理系统

BABEL_ENV = production

NODE_ENV = production

# 测试环境配置
ENV = 'staging'

# 若依管理系统/测试环境
VUE_APP_BASE_API = '/stage-api'
```

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

### External Link Route Example

Source: https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html

Configuration for an external link route, specifying the URL and display title/icon.

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

```

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

### Usage Examples for RedisLock

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Demonstrates how to use the RedisLock utility class to acquire and release locks with different parameters. Ensure RedisLock is injected via @Autowired.

```java
@Autowired
private RedisLock redisLock;

// lockKey 锁实例key waitTime 最多等待时间 leaseTime 上锁后自动释放锁时间  unit 时间颗粒度
redisLock.lock(lockKey);
redisLock.tryLock(lockKey, leaseTime);
redisLock.tryLock(lockKey, leaseTime, unit);
redisLock.tryLock(lockKey, waitTime, leaseTime, unit);
redisLock.unlock(lockKey);
redisLock.unlock(lock);
```

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

### Install External Vue Component (vue-count-to)

Source: https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html

Provides the command to install the 'vue-count-to' package using npm. It's recommended to use the '--save' flag to automatically add the dependency to your project's package.json file.

```bash
$ npm install vue-count-to --save
```

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

### Access Environment Variables

Source: https://doc.ruoyi.vip/ruoyi-vue/document/hjbs.html

Demonstrates how to access environment variables, which must start with 'VUE_APP_', within the application code using process.env.

```javascript
console.log(process.env.VUE_APP_xxxx)
```

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

### Configure AI Model in application.yml

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Configure AI model settings in `ruoyi-admin`'s `application.yml`. This includes selecting the provider, API key, model name, and optional parameters like base URL, max tokens, temperature, and system prompt. Examples for switching between providers like DashScope, OpenAI, DeepSeek, and Ollama are provided.

```yaml
#  AI 模型配置 —— 添加到 ruoyi 的 application.yml
#  切换模型只需修改 provider + 对应的 api-key / model-name
# ============================================================

ai:
  model:
    # ── 当前启用的提供商 ────────────────────────────────────────
    # 可选值: dashscope | openai | deepseek | ollama
    provider: dashscope

    # ── API Key（dashscope / openai / deepseek 需要）────────────
    api-key: sk-xxxxxxxxxxxxxxxxxxxxxx

    # ── 模型名称 ────────────────────────────────────────────────
    # dashscope : qwen-turbo（快/便宜）| qwen-plus（均衡）| qwen-max（最强）
    # openai    : gpt-4o-mini | gpt-4o
    # deepseek  : deepseek-chat | deepseek-reasoner
    # ollama    : qwen2.5 | llama3.2 | mistral（本地运行）
    model-name: qwen-plus

    # ── Ollama 专用（本地部署时填写）────────────────────────────
    base-url: http://localhost:11434

    # ── 通用参数 ────────────────────────────────────────────────
    max-tokens: 2048
    temperature: 0.7
    max-history-messages: 20

    # ── 系统提示词（支持自定义 AI 角色与行为）───────────────────
    system-prompt: 你是一个专业、友好的 AI 助手，请用中文回答问题。

# ============================================================
#  切换示例
# ============================================================
#
#  → 切换为 DeepSeek：
#    provider: deepseek
#    api-key: sk-deepseek的key
#    model-name: deepseek-chat
#
#  → 切换为本地 Ollama（完全免费，需先运行 ollama serve）：
#    provider: ollama
#    base-url: http://localhost:11434
#    model-name: qwen2.5
#
#  → 切换为 OpenAI：
#    provider: openai
#    api-key: sk-openai的key
#    model-name: gpt-4o-mini

```

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

### Vue Request Service Implementation

Source: https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html

Shows how to define API request functions using the utility from '@/utils/request.js', which is an Axios wrapper. This example demonstrates fetching a user list and handling the response within a Vue component.

```javascript
// api/system/user.js
import request from '@/utils/request'

// 查询用户列表
export function listUser(query) {
  return request({
    url: '/system/user/list',
    method: 'get',
    params: query
  })
}

// views/system/user/index.vue
import { listUser } from "@/api/system/user";

export default {
  data() {
    userList: null,
    loading: true
  },
  methods: {
    getList() {
      this.loading = true
      listUser().then(response => {
        this.userList = response.rows
        this.loading = false
      })
    }
  }
}
```

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

### Get User Info Asynchronously

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

To retrieve user information asynchronously, you need to enable asynchronous calls in the startup class and annotate the method with @Async. Ensure you use the framework's provided thread pool for proper context propagation.

```java
LoginUser loginUser = SecurityUtils.getLoginUser()
```

```java
// Enable asynchronous calls in the startup class
@EnableAsync
// Annotate the method for asynchronous execution
@Async
```

```java
package com.ruoyi.framework.config;

import java.util.concurrent.Executor;
import java.util.concurrent.Executors;
import org.springframework.context.annotation.Configuration;
import org.springframework.scheduling.annotation.AsyncConfigurerSupport;
import org.springframework.security.concurrent.DelegatingSecurityContextExecutorService;

@Configuration
public class AsyncConfig extends AsyncConfigurerSupport
{
    /**
     * Asynchronous execution requires the use of the framework's built-in thread pool to ensure the propagation of permission information
     */
    @Override
    public Executor getAsyncExecutor()
    {
        return new DelegatingSecurityContextExecutorService(Executors.newFixedThreadPool(5));
    }
}
```

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

### Implement RegionUtil for IP Location

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

This Java utility class initializes the ip2region database and provides a method to get the region information for a given IP address. It handles copying the database to a temporary file if it's not found, which is necessary for JAR deployments.

```java
package com.ruoyi.common.utils;

import java.io.File;
import java.io.InputStream;
import java.lang.reflect.Method;
import org.apache.commons.io.FileUtils;
import org.lionsoul.ip2region.DataBlock;
import org.lionsoul.ip2region.DbConfig;
import org.lionsoul.ip2region.DbSearcher;
import org.lionsoul.ip2region.Util;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.core.io.ClassPathResource;

/**
 * 根据ip离线查询地址
 *
 * @author ruoyi
 */
public class RegionUtil
{
    private static final Logger log = LoggerFactory.getLogger(RegionUtil.class);

    private static final String JAVA_TEMP_DIR = "java.io.tmpdir";

    static DbConfig config = null;
    static DbSearcher searcher = null;

    /**
     * 初始化IP库
     */
    static
    {
        try
        {
            // 因为jar无法读取文件,复制创建临时文件
            String dbPath = RegionUtil.class.getResource("/ip2region/ip2region.db").getPath();
            File file = new File(dbPath);
            if (!file.exists())
            {
                String tmpDir = System.getProperties().getProperty(JAVA_TEMP_DIR);
                dbPath = tmpDir + "ip2region.db";
                file = new File(dbPath);
                ClassPathResource cpr = new ClassPathResource("ip2region" + File.separator + "ip2region.db");
                InputStream resourceAsStream = cpr.getInputStream();
                if (resourceAsStream != null)
                {
                    FileUtils.copyInputStreamToFile(resourceAsStream, file);
                }
            }
            config = new DbConfig();
            searcher = new DbSearcher(config, dbPath);
            log.info("bean [{}]", config);
            log.info("bean [{}]", searcher);
        }
        catch (Exception e)
        {
            log.error("init ip region error:{}", e);
        }
    }

    /**
     * 解析IP
     *
     * @param ip
     * @return
     */
    public static String getRegion(String ip)
    {
        try
        {
            // db
            if (searcher == null || StringUtils.isEmpty(ip))
            {
                log.error("DbSearcher is null");
                return StringUtils.EMPTY;
            }
            long startTime = System.currentTimeMillis();
            // 查询算法
            int algorithm = DbSearcher.MEMORY_ALGORITYM;
            Method method = null;
            switch (algorithm)
            {
                case DbSearcher.BTREE_ALGORITHM:
                    method = searcher.getClass().getMethod("btreeSearch", String.class);
                    break;
                case DbSearcher.BINARY_ALGORITHM:
                    method = searcher.getClass().getMethod("binarySearch", String.class);
                    break;
                case DbSearcher.MEMORY_ALGORITYM:
                    method = searcher.getClass().getMethod("memorySearch", String.class);
                    break;
            }

            DataBlock dataBlock = null;
            if (Util.isIpAddress(ip) == false)
            {
                log.warn("warning: Invalid ip address");
            }
            dataBlock = (DataBlock) method.invoke(searcher, ip);
            String result = dataBlock.getRegion();
            long endTime = System.currentTimeMillis();
            log.debug("region use time[{}] result[{}]", endTime - startTime, result);
            return result;

        }
        catch (Exception e)
        {
            log.error("error:{}", e);
        }
        return StringUtils.EMPTY;
    }

}
```

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

### Build Production and Staging Environments

Source: https://doc.ruoyi.vip/ruoyi-vue/document/hjbs.html

Builds the frontend application for either the production or staging environment. The output is placed in the 'dist' folder.

```bash
# Build for production environment
npm run build:prod

# Build for staging environment
npm run build:stage
```

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

### Add MyBatis-Plus Boot Starter Dependency (Spring Boot 2)

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Integrate the `mybatis-plus-boot-starter` dependency into the `ruoyi-common` module's pom.xml for MyBatis-Plus functionality in Spring Boot 2 projects.

```xml
<!-- ruoyi-springboot2 / mybatis-plus 配置 -->
<dependency>
	<groupId>com.baomidou</groupId>
	<artifactId>mybatis-plus-boot-starter</artifactId>
	<version>3.5.1</version>
</dependency>
```

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

### Fix Node-Sass Installation Failures

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

Troubleshoot `node-sass` installation issues caused by network timeouts when downloading binary files. Solutions include using the Taobao mirror, `cnpm`, or configuring a `.npmrc` file.

```bash
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
```

```bash
# linux、mac 下
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass

# window 下
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ && npm install node-sass
```

```bash
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
```

```bash
cnpm install node-sass
```

```properties
phantomjs_cdnurl=http://cnpmjs.org/downloads
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org
```

```bash
npm uninstall node-sass
```

```bash
npm install node-sass
```

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

### Create Index Controller for Access

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

Implement an IndexController in the backend to handle root, index, and login requests, returning the 'index' view.

```java
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class IndexController
{
    // 系统首页
    @GetMapping(value = { "/", "/index", "/login" })
    public String index()
    {
        return "index";
    }
}
```

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

### Get Student Details

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Retrieves the details of a specific student by their ID.

```APIDOC
## GET /system/student/{studentId}

### Description
Retrieves the details of a specific student.

### Method
GET

### Endpoint
/system/student/{studentId}

### Parameters
#### Path Parameters
- **studentId** (string) - Required - The ID of the student to retrieve.
```

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

### Get Student Information by ID

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Retrieves the details of a specific student using their unique ID.

```APIDOC
## GET /system/student/{studentId}

### Description
Gets the details of a student by their ID.

### Method
GET

### Endpoint
/system/student/{studentId}

### Parameters
#### Path Parameters
- **studentId** (long) - Required - The unique identifier of the student.

### Response
#### Success Response (200)
- **code** (integer) - Response code.
- **msg** (string) - Message associated with the response.
- **data** (object) - Student object containing details.
  - **studentId** (long) - Student's unique identifier.
  - **studentName** (string) - Student's name.
  - **age** (integer) - Student's age.
  - **classId** (long) - ID of the class the student belongs to.

### Response Example
```json
{
  "code": 200,
  "msg": "Operation successful",
  "data": {
    "studentId": 1,
    "studentName": "John Doe",
    "age": 20,
    "classId": 101
  }
}
```
```

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

### Build Electron Application

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Execute the npm script to build the Electron application for distribution.

```bash
npm run electron:build
```

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

### Component Usage After Global Registration

Source: https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html

Example of using a globally registered component in a template after it has been registered in `main.js`.

```vue
<template>
  <count-to :startVal='startVal' :endVal='endVal' :duration='3000'></count-to>
</template>

```

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

### 修改登录页跳转逻辑

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

在 `login.vue` 文件中修改 `$router.push` 的逻辑，去掉 `redirect` 参数，使登录后直接跳转到根路径。

```javascript
// this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
this.$router.push({ path: "/" }).catch(()=>{});
```

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

### Import Global DictData Component (v3.7.0+)

Source: https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html

Import and install the global DictData component in main.js for versions 3.7.0 and above.

```javascript
import DictData from '@/components/DictData'
DictData.install()
```

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

### Navigate with query parameters

Source: https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html

Shows how to navigate to a route and pass query parameters using the `query` property within the `router.push` method.

```javascript
this.$router.push({ path: "/system/user", query: {id: "1", name: "若依"} });

```

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

### 打开页签

Source: https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html

使用$tab.openPage打开新的页面标签。可以链式调用.then()来执行完成后的逻辑。

```javascript
this.$tab.openPage("用户管理", "/system/user");
```

```javascript
this.$tab.openPage("用户管理", "/system/user").then(() => {
  // 执行结束的逻辑
})
```

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

### 配置匿名访问接口 (Java)

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

在 `SecurityConfig.java` 中配置 `httpSecurity`，使用 `permitAll()` 或 `anonymous()` 方法允许匿名访问指定路径。`permitAll()` 允许所有访问，`anonymous()` 仅允许匿名访问。

```java
// 使用 permitAll() 方法所有人都能访问，包括带上 token 访问
.antMatchers("/admins/**").permitAll()

// 使用 anonymous() 所有人都能访问，但是带上 token 访问后会报错
.antMatchers("/admins/**").anonymous()
```

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

### SysStudentServiceImpl Implementation

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Provides the implementation for the ISysStudentService interface. This snippet is a starting point and would typically include method bodies for service operations.

```java
package com.ruoyi.system.service.impl;

import java.util.List;
import org.springframework.stereotype.Service;

```

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

### Configure Electron Mirrors

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Set npm configuration for Electron mirrors to ensure reliable downloads of Electron and related binaries. This is useful if direct downloads fail.

```bash
# 配置electron镜像地址
npm config set registry https://registry.npmmirror.com/
npm config set electron_mirror="https://npmmirror.com/mirrors/electron/"
npm config set electron_builder_binaries_mirror="https://npmmirror.com/mirrors/electron-builder-binaries/"

# 安装 electron
cnpm install electron --save-dev

# 安装 electron 管理开发者工具
cnpm install electron-devtools-installer

# 安装 electron 持久化数据存储库
cnpm install electron-store

# 安装 electron 打包和构建
cnpm install vue-cli-plugin-electron-builder
```

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

### Add Browser Compatibility with Babel-Polyfill

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

Enhance browser compatibility by installing and importing `babel-polyfill`. It can be added to the entry point in `webpack.config.js` or included via a CDN.

```bash
// 下载依赖
npm install --save babel-polyfill
```

```javascript
import 'babel-polyfill'
// 或者
require('babel-polyfill') //es6
```

```javascript
module.exports = {
  entry: ['babel-polyfill', './app/js']
}
```

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

### Format Date with parseTime Method

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

Use the `parseTime` method in the frontend Vue components to format date and timestamp values. Example format: `{y}-{m}-{d} {h}:{i}:{s}`.

```vue
<el-table-column label="Creation Time" align="center" prop="createTime" width="160">
	<template slot-scope="scope">
	  <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
	</template>
</el-table-column>
```

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

### Configure Server Settings

Source: https://doc.ruoyi.vip/ruoyi-vue/document/hjbs.html

Sets the server port and application context path in the application.yml configuration file.

```yaml
# Development environment configuration
server:
    # Server HTTP port, default is 80
    port: Port
    servlet:
        # Application access path
        context-path: /Application path
```

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

### 获取当前用户信息 (Vue 3)

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

在 Vue 3 项目中，通过 `import useUserStore from '@/store/modules/user'` 导入用户 store，然后使用 `useUserStore().id` 和 `useUserStore().name` 获取用户 ID 和用户名。

```javascript
import useUserStore from '@/store/modules/user'

const userid = useUserStore().id;
const username = useUserStore().name;
```

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

### Implement File Download

Source: https://doc.ruoyi.vip/ruoyi-vue/document/htsc.html

Add a download button and implement the handleDownload function to trigger file downloads. This function constructs a temporary anchor element to initiate the download.

```html
<el-button
  size="mini"
  type="text"
  icon="el-icon-edit"
  @click="handleDownload(scope.row)"
>下载</el-button>
```

```javascript
// 文件下载处理
handleDownload(row) {
  var name = row.fileName;
  var url = row.filePath;
  var suffix = url.substring(url.lastIndexOf("."), url.length)
  const a = document.createElement('a')
  a.setAttribute('download', name + suffix)
  a.setAttribute('target', '_blank')
  a.setAttribute('href', url)
  a.click()
}
```

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

### Scoped CSS Example

Source: https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html

Demonstrates how scoped CSS is compiled to prevent global style pollution. Styles applied with the 'scoped' attribute are automatically appended with a unique identifier.

```css
/* 编译前 */
.example {
  color: red;
}

/* 编译后 */
.example[_v-f3f3eg9] {
  color: red;
}
```

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

### Get Student List Method

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Fetches the list of students from the API. Sets loading state and updates the student list and total count upon successful response.

```javascript
/** 查询学生信息列表 */
    getList() {
      this.loading = true;
      listStudent(this.queryParams).then(response => {
        this.studentList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
```

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

### Use getConfigKey to Fetch Parameter

Source: https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html

Fetch a system configuration parameter by its key using the globally registered getConfigKey function and store the result.

```javascript
this.getConfigKey("参数键名").then(response => {
  this.xxxxx = response.msg;
});
```

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

### Node.js Version Too High Solution 3: Use Lower Version

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

If other solutions fail, consider downgrading your Node.js version. A link to a specific Node.js installer (v14.16.1) is provided.

```text
https://pan.baidu.com/s/1E9J52g6uW_VFWY34fHL6zA 提取码: vneh

路径地址：微服务工具包/基础工具包/node-v14.16.1-x64.msi
```

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

### Format Date with JsonFormat Annotation

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

Use the `@JsonFormat` annotation in Java backend code to format date and timestamp fields. Example format: `yyyy-MM-dd HH:mm:ss`.

```java
/** Creation time */
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date time;
```

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

### Configure MinIO in application.yml

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Configure MinIO connection details, including URL, access keys, and bucket name, in the application.yml file.

```yaml
# Minio配置
minio:
  url: http://localhost:9000
  accessKey: minioadmin
  secretKey: minioadmin
  bucketName: ruoyi
```

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

### Image Preview in Table (Recommended Image Preview Component)

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

Utilize the `image-preview` component for displaying images in tables. It automatically handles API base URLs and proxying, making it the recommended approach.

```html
<!-- 内链地址预览 -->
<el-table-column label="图片" align="center" prop="url" width="100">
  <template slot-scope="scope">
	  <image-preview :src="scope.row.url" :width="50" :height="50"/>
  </template>
</el-table-column>

<!-- 外链地址预览 -->
<el-table-column label="图片" align="center" prop="url" width="100">
  <image-preview src="http://ruoyi.vip/images/logo.png" />
</el-table-column>
```

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

### Node.js Version Too High Solution 1: Environment Variable

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

If your Node.js version is too high and causing issues with `vue-cli`, set the `NODE_OPTIONS` environment variable to `--openssl-legacy-provider` before starting your project.

```bash
set NODE_OPTIONS=--openssl-legacy-provider
```

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

### Set Custom Upload URL for Rich Text Editor

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

Specify the upload URL for the rich text editor by setting the :uploadUrl attribute. This example shows how to configure it in a Vue component.

```vue
<editor v-model="form.noticeContent" :min-height="192" :uploadUrl="uploadUrl" />

export default {
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
}

```

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

### Manual Route Parameter Passing with Path and Query

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

Demonstrates passing route parameters using `path` and `query`. Parameters passed via `query` will be visible in the URL as `?key=value`.

```javascript
this.$router.push({
    path: '/user/profile',
    query: {
      id: id
    }
})
```

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

### Create Student Table SQL

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

SQL script to create the `sys_student` table with fields for student ID, name, age, hobby, sex, status, and birthday.

```sql
drop table if exists sys_student;
create table sys_student (
  student_id           int(11)         auto_increment    comment '编号',
  student_name         varchar(30)     default ''        comment '学生名称',
  student_age          int(3)          default null      comment '年龄',
  student_hobby        varchar(30)     default ''        comment '爱好（0代码 1音乐 2电影）',
  student_sex          char(1)         default '0'       comment '性别（0男 1女 2未知）',
  student_status       char(1)         default '0'       comment '状态（0正常 1停用）',
  student_birthday     datetime                          comment '生日',
  primary key (student_id)
) engine=innodb auto_increment=1 comment = '学生信息表';
```

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

### Set CaptchaCacheService Implementation

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Create a service file in META-INF/services to specify the implementation class for CaptchaCacheService, pointing to the Redis implementation.

```properties
com.ruoyi.framework.web.service.CaptchaRedisService
```

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

### Enable Image Drag and Resize in Rich Text Editor

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

To enable image drag and resize functionality in the rich text editor, install the 'quill-image-resize-module' dependency, configure webpack in vue.config.js, and register the module in your rich text editor component.

```bash
npm install quill-image-resize-module
```

```javascript
const webpack = require('webpack');
....

plugins: [
  ....
  new webpack.ProvidePlugin({
	'window.Quill': 'quill/dist/quill.js',
	'Quill': 'quill/dist/quill.js',
  })
],


```

```javascript
....
....
<script>
....
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize);

export default {
  name: "Editor",
  data() {
    return {
      ....
      options: {
        ....
        modules: {
          ....
          // Image resizing
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
        },
        ....
      },
    };
  },
  ....
};
</script>

```

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

### Add PostgreSQL Dependency

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

Replace the MySQL dependency with the PostgreSQL driver in the ruoyi-admin pom.xml file.

```xml
<!-- PostgreSql驱动包 -->
<dependency>
	<groupId>org.postgresql</groupId>
	<artifactId>postgresql</artifactId>
</dependency>

```

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

### Get IP Address Location with ip2region

Source: https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html

This Java code snippet retrieves the geographical location of an IP address using the ip2region library. It handles internal IPs and external lookups, returning a formatted string of region and city. Ensure the ip2region database is correctly placed and enabled in configuration.

```java
            return "内网IP";
        }
        if (RuoYiConfig.isAddressEnabled())
        {
            try
            {
                String rspStr = RegionUtil.getRegion(ip);
                if (StringUtils.isEmpty(rspStr))
                {
                    log.error("获取地理位置异常 {}", ip);
                    return UNKNOWN;
                }
                String[] obj = rspStr.split("\|");
                String region = obj[2];
                String city = obj[3];

                return String.format("%s %s", region, city);
            }
            catch (Exception e)
            {
                log.error("获取地理位置异常 {}", e);
            }
        }
        return address;
```

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

### Configure Static Resource Mapping

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

Add a static resource mapping in ResourcesConfig.java to serve static resources from the classpath.

```java
/** 前端静态资源配置 */
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
```

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

### Implement Custom Redis Key Serialization with Prefix

Source: https://doc.ruoyi.vip/ruoyi-vue/other/faq.html

Create a `RedisKeySerializer` to prepend a project-specific prefix to Redis keys, preventing conflicts when multiple projects share a Redis instance. Ensure the `RuoYiConfig` provides the project name for the prefix.

```java
@Component
public class RedisKeySerializer implements RedisSerializer<String>
{
    @Autowired
    private RuoYiConfig config;

    private final Charset charset;

    public RedisKeySerializer()
    {
        this(Charset.forName("UTF8"));
    }

    public RedisKeySerializer(Charset charset)
    {
        Assert.notNull(charset, "字符集不允许为NULL");
        this.charset = charset;
    }

    @Override
    public byte[] serialize(String string) throws SerializationException
    {
        // 通过项目名称ruoyi.name来定义Redis前缀，用于区分项目缓存
        if (StringUtils.isNotEmpty(config.getName()))
        {
            return new StringBuilder(config.getName()).append(":").append(string).toString().getBytes(charset);
        }
        return string.getBytes(charset);
    }

    @Override
    public String deserialize(byte[] bytes) throws SerializationException
    {
        return (bytes == null ? null : new String(bytes, charset));
    }
}

```

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

### Switch to SpringBoot3 Branch

Source: https://doc.ruoyi.vip/ruoyi-vue/document/hjbs.html

Switches the local repository to the 'springboot3' branch, which requires JDK 17+ and keeps the code synchronized with the main RuoYi-Vue repository.

```bash
git checkout springboot3
```

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

### 刷新页签

Source: https://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html

提供刷新当前页签或指定页签的功能。可以链式调用.then()来执行完成后的逻辑。

```javascript
// 刷新当前页签
this.$tab.refreshPage();
```

```javascript
// 刷新指定页签
const obj = { path: "/system/user", name: "User" };
this.$tab.refreshPage(obj);
```

```javascript
this.$tab.refreshPage(obj).then(() => {
  // 执行结束的逻辑
})
```