熟悉RuoYi-Vue-Plus-前端（3）

src\utils

javascript 复制代码

src/utils/
├── auth.js            # 身份认证相关工具（Token管理）
├── dict.js            # 数据字典获取与管理
├── dynamicTitle.js    # 动态修改页面标题
├── errorCode.js       # 错误代码映射
├── index.js           # 通用工具函数集合
├── jsencrypt.js       # RSA加密解密工具
├── permission.js      # 权限校验工具
├── request.js         # Axios请求封装与拦截器
├── ruoyi.js           # 项目专用工具函数（基于若依框架）
├── scroll-to.js       # 页面滚动工具
├── theme.js           # 主题色彩处理工具
└── validate.js        # 数据验证工具

auth.js

auth.js 是项目中一个简单但非常重要的工具模块，它封装了Token的基本操作，为整个应用的身份验证提供了基础支持。

auth.js 文件内容

javascript 复制代码

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

功能解析

1. 依赖模块

js-cookie: 这是一个轻量级的JavaScript库，用于处理浏览器Cookie。它提供了简单易用的API来获取、设置和删除Cookie。

2. 核心常量

javascript 复制代码

const TokenKey = 'Admin-Token'

定义了存储Token的Cookie键名为 'Admin-Token'
使用常量的好处是便于统一管理和修改，避免在代码中硬编码字符串

3. 主要函数

getToken() - 获取Token

javascript 复制代码

export function getToken() {
  return Cookies.get(TokenKey)
}

功能: 从浏览器的Cookie中获取身份验证Token
返回值 : 返回存储的Token字符串，如果不存在则返回 undefined

setToken(token) - 设置Token

javascript 复制代码

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

功能: 将Token存储到浏览器的Cookie中
参数 : token - 要存储的Token字符串
返回值: 返回设置的结果

removeToken() - 删除Token

javascript 复制代码

export function removeToken() {
  return Cookies.remove(TokenKey)
}

功能: 从浏览器的Cookie中删除Token
返回值: 返回删除的结果

在

处使用，例：

dict.js

src/utils/dict.js 是项目中处理数据字典的核心工具模块。数据字典通常用于存储系统中常用的固定选项，如性别、状态、类型等，方便在前端界面中展示和使用。

文件内容

javascript 复制代码

import useDictStore from '@/store/modules/dict'
import { getDicts } from '@/api/system/dict/data'

/**
 * 获取字典数据
 */
export function useDict(...args) {
  const res = ref({});
  return (() => {
    args.forEach((dictType, index) => {
      res.value[dictType] = [];
      const dicts = useDictStore().getDict(dictType);
      if (dicts) {
        res.value[dictType] = dicts;
      } else {
        getDicts(dictType).then(resp => {
          res.value[dictType] = resp.data.map(p => ({ 
            label: p.dictLabel, 
            value: p.dictValue, 
            elTagType: p.listClass, 
            elTagClass: p.cssClass 
          }))
          useDictStore().setDict(dictType, res.value[dictType]);
        })
      }
    })
    return toRefs(res.value);
  })()
}

功能解析

1. 依赖模块

useDictStore : 字典状态管理模块，位于 @/store/modules/dict ，负责字典数据的本地缓存和访问
getDicts : API请求函数，位于 @/api/system/dict/data ，用于从后端获取字典数据

2. 核心函数：useDict

useDict 是一个组合式函数（Composable），符合Vue 3的Composition API风格，用于获取和缓存字典数据。

函数签名

javascript 复制代码

export function useDict(...args)

参数： args - 可变参数，可以传入多个字典类型代码

实现逻辑

初始化响应式对象
javascript 复制代码
```
const res = ref({});
```
- 创建一个空的响应式引用对象，用于存储获取到的字典数据
处理每个字典类型
javascript 复制代码
```
args.forEach((dictType, index) => {
  // 处理逻辑
})
```
- 遍历传入的所有字典类型
首先尝试从本地缓存获取
javascript 复制代码
```
const dicts = useDictStore().getDict(dictType);
if (dicts) {
  res.value[dictType] = dicts;
}
```
- 先从字典状态管理中尝试获取已缓存的字典数据
- 如果缓存中存在，直接使用缓存数据
缓存不存在时从服务器获取
javascript 复制代码
```
else {
  getDicts(dictType).then(resp => {
    res.value[dictType] = resp.data.map(p => ({ 
      label: p.dictLabel, 
      value: p.dictValue, 
      elTagType: p.listClass, 
      elTagClass: p.cssClass 
    }))
    useDictStore().setDict(dictType, res.value[dictType]);
  })
}
```
- 调用API从后端获取字典数据
- 将原始数据转换为前端需要的格式：
  - label : 显示标签
  - value : 实际值
  - elTagType : Element Plus标签类型
  - elTagClass : Element Plus标签样式类
- 将转换后的数据存入响应式对象和本地缓存
返回响应式引用
javascript 复制代码
```
return toRefs(res.value);
```
- 使用 toRefs 将响应式对象解构为多个响应式引用，便于在组件中使用

在main,js处全局方法挂载

在

处使用，例：

dynamicTitle.js

工具函数，用于动态修改浏览器标签页的标题。

文件结构

javascript 复制代码

import store from '@/store'
import defaultSettings from '@/settings'
import useSettingsStore from '@/store/modules/settings'

/**
 * 动态修改标题
 */
export function useDynamicTitle() {
  const settingsStore = useSettingsStore();
  if (settingsStore.dynamicTitle) {
    document.title = settingsStore.title + ' - ' + defaultSettings.title;
  } else {
    document.title = defaultSettings.title;
  }
}

导入依赖

javascript 复制代码

import store from '@/store'
import defaultSettings from '@/settings'
import useSettingsStore from '@/store/modules/settings'

store：整个状态管理的入口
defaultSettings：系统默认设置，包含基本的应用标题
useSettingsStore：设置状态管理模块，包含动态标题开关和当前页面标题

核心功能

useDynamicTitle 函数实现了动态标题的功能：

获取设置状态 ：从 settingsStore 获取当前设置状态

javascript 复制代码

 const settingsStore = useSettingsStore();

判断动态标题开关 ：检查 settingsStore.dynamicTitle 是否开启
设置标题 ：
- 如果开启动态标题：显示 页面标题 - 应用名称
- 如果关闭动态标题：只显示应用名称

javascript 复制代码

  if (settingsStore.dynamicTitle) {
    document.title = settingsStore.title + ' - ' + defaultSettings.title;
  } else {
    document.title = defaultSettings.title;
  }

工作流程

用户访问页面：路由变化触发标题更新
调用函数 ：在路由守卫或页面组件中调用 useDynamicTitle
检查设置：检查用户是否启用了动态标题功能
更新标题：根据设置更新浏览器标签页的标题

在

处使用，例：

errorCode.js

错误码映射表，用于将 HTTP 状态码和其他错误码转换为用户友好的错误提示信息。

文件结构

javascript

复制代码

export default {
  '401': '认证失败，无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误，请反馈给管理员'
}

错误码定义

文件定义了以下错误码和对应的提示信息：

401 - 认证失败
- 提示信息：'认证失败，无法访问系统资源'
- 场景：用户未登录或 token 过期时访问受保护资源
403 - 权限不足
- 提示信息：'当前操作没有权限'
- 场景：用户已登录但没有访问特定资源的权限
404 - 资源不存在
- 提示信息：'访问资源不存在'
- 场景：请求的资源不存在或已被删除
default - 默认错误
- 提示信息：'系统未知错误，请反馈给管理员'
- 场景：处理未明确定义的其他错误

在

处使用，例：

index.js

工具函数库的入口文件，包含了大量的常用工具函数，涵盖了日期格式化、URL处理、对象操作、DOM操作等多个方面。

文件结构

javascript 复制代码

import { parseTime } from './ruoyi'

// 各种工具函数
export function formatDate(cellValue) { ... }
export function formatTime(time, option) { ... }
export function getQueryObject(url) { ... }
// ...更多函数

主要功能分类

1. 日期时间处理

formatDate 函数

javascript 复制代码

export function formatDate(cellValue) {
  if (cellValue == null || cellValue == "") return "";
  var date = new Date(cellValue) 
  var year = date.getFullYear()
  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() 
  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() 
  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() 
  var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
}

将日期格式化为 "YYYY-MM-DD HH:mm:ss" 格式
处理空值情况
确保月、日、时、分、秒为两位数

formatTime 函数

javascript 复制代码

export function formatTime(time, option) {
  if (('' + time).length === 10) {
    time = parseInt(time) * 1000
  } else {
    time = +time
  }
  const d = new Date(time)
  const now = Date.now()
  const diff = (now - d) / 1000
  
  if (diff < 30) {
    return '刚刚'
  } else if (diff < 3600) {
    return Math.ceil(diff / 60) + '分钟前'
  } else if (diff < 3600 * 24) {
    return Math.ceil(diff / 3600) + '小时前'
  } else if (diff < 3600 * 24 * 2) {
    return '1天前'
  }
  // ...更多逻辑
}

将时间戳转换为相对时间（如"5分钟前"）
支持10位和13位时间戳
处理不同时间范围的显示格式

2. URL 和查询参数处理

getQueryObject 函数

javascript 复制代码

export function getQueryObject(url) {
  url = url == null ? window.location.href : url
  const search = url.substring(url.lastIndexOf('?') + 1)
  const obj = {}
  const reg = /([^?&=]+)=([^?&=]*)/g
  search.replace(reg, (rs, $1, $2) => {
    const name = decodeURIComponent($1)
    let val = decodeURIComponent($2)
    val = String(val)
    obj[name] = val
    return rs
  })
  return obj
}

解析 URL 查询参数为对象
自动 URL 解码
默认使用当前页面 URL

param 函数

javascript 复制代码

export function param(json) {
  if (!json) return ''
  return cleanArray(
    Object.keys(json).map(key => {
      if (json[key] === undefined) return ''
      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
    })
  ).join('&')
}

将对象转换为 URL 查询字符串
自动 URL 编码
忽略 undefined 值

3. 字符串处理

byteLength 函数

javascript 复制代码

export function byteLength(str) {
  let s = str.length
  for (var i = str.length - 1; i >= 0; i--) {
    const code = str.charCodeAt(i)
    if (code > 0x7f && code <= 0x7ff) s++
    else if (code > 0x7ff && code <= 0xffff) s += 2
    if (code >= 0xDC00 && code <= 0xDFFF) i--
  }
  return s
}

计算 UTF-8 字符串的字节长度
处理多字节字符
支持不同 Unicode 范围的字符

html2Text 函数

javascript 复制代码

export function html2Text(val) {
  const div = document.createElement('div')
  div.innerHTML = val
  return div.textContent || div.innerText
}

将 HTML 字符串转换为纯文本
使用 DOM API 进行转换
支持 textContent 和 innerText

4. 数组和对象操作

cleanArray 函数

javascript 复制代码

export function cleanArray(actual) {
  const newArray = []
  for (let i = 0; i < actual.length; i++) {
    if (actual[i]) {
      newArray.push(actual[i])
    }
  }
  return newArray
}

移除数组中的假值（falsy values）
保留真值（truthy values）

objectMerge 函数

javascript 复制代码

export function objectMerge(target, source) {
  if (typeof target !== 'object') {
    target = {}
  }
  if (Array.isArray(source)) {
    return source.slice()
  }
  Object.keys(source).forEach(property => {
    const sourceProperty = source[property]
    if (typeof sourceProperty === 'object') {
      target[property] = objectMerge(target[property], sourceProperty)
    } else {
      target[property] = sourceProperty
    }
  })
  return target
}

深度合并两个对象
源对象属性覆盖目标对象属性
处理数组和对象的不同情况

deepClone 函数

javascript 复制代码

export function deepClone(source) {
  if (!source && typeof source !== 'object') {
    throw new Error('error arguments', 'deepClone')
  }
  const targetObj = source.constructor === Array ? [] : {}
  Object.keys(source).forEach(keys => {
    if (source[keys] && typeof source[keys] === 'object') {
      targetObj[keys] = deepClone(source[keys])
    } else {
      targetObj[keys] = source[keys]
    }
  })
  return targetObj
}

深度克隆对象或数组
递归处理嵌套对象
保持数据类型

5. DOM 操作

toggleClass 函数

javascript 复制代码

export function toggleClass(element, className) {
  if (!element || !className) {
    return
  }
  let classString = element.className
  const nameIndex = classString.indexOf(className)
  if (nameIndex === -1) {
    classString += '' + className
  } else {
    classString =
      classString.substr(0, nameIndex) +
      classString.substr(nameIndex + className.length)
  }
  element.className = classString
}

切换元素的 CSS 类
如果类不存在则添加，存在则删除

addClass、removeClass、hasClass 函数

javascript 复制代码

export function hasClass(ele, cls) {
  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
}

export function addClass(ele, cls) {
  if (!hasClass(ele, cls)) ele.className += ' ' + cls
}

export function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
    ele.className = ele.className.replace(reg, ' ')
  }
}

检查、添加和删除元素的 CSS 类
使用正则表达式处理类名

6. 性能优化

debounce 函数

javascript 复制代码

export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result

  const later = function() {
    const last = +new Date() - timestamp
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }

  return function(...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    if (!timeout) timeout = setTimeout(later, wait)
    if (callNow) {
      result = func.apply(context, args)
      context = args = null
    }
    return result
  }
}

防抖函数，限制函数的执行频率
支持立即执行选项
常用于搜索框输入、窗口调整等场景

7. 数组处理

uniqueArr 函数

javascript 复制代码

export function uniqueArr(arr) {
  return Array.from(new Set(arr))
}

数组去重，使用 ES6 Set 结构

createUniqueString 函数

javascript 复制代码

export function createUniqueString() {
  const timestamp = +new Date() + ''
  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
  return (+(randomNum + timestamp)).toString(32)
}

生成唯一字符串标识符
结合时间戳和随机数

8. 字符串转换

titleCase、camelCase 函数

javascript 复制代码

export function titleCase(str) {
  return str.replace(/( |^)[a-z]/g, L => L.toUpperCase())
}

export function camelCase(str) {
  return str.replace(/_[a-z]/g, str1 => str1.substr(-1).toUpperCase())
}

titleCase：将字符串转换为标题格式（每个单词首字母大写）
camelCase：将下划线命名转换为驼峰命名

9. 验证函数

isNumberStr 函数

javascript 复制代码

export function isNumberStr(str) {
  return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
}

验证字符串是否为有效的数字格式
支持正负号和小数点

10. 配置对象

beautifierConf 对象

javascript 复制代码

export const beautifierConf = {
  html: {
    indent_size: '2',
    indent_char: ' ',
    max_preserve_newlines: '-1',
    preserve_newlines: false,
    keep_array_indentation: false,
    break_chained_methods: false,
    indent_scripts: 'separate',
    brace_style: 'end-expand',
    space_before_conditional: true,
    unescape_strings: false,
    jslint_happy: false,
    end_with_newline: true,
    wrap_line_length: '110',
    indent_inner_html: true,
    comma_first: false,
    e4x: true,
    indent_empty_lines: true
  },
  js: {
    indent_size: '2',
    indent_char: ' ',
    max_preserve_newlines: '-1',
    preserve_newlines: false,
    keep_array_indentation: false,
    break_chained_methods: false,
    indent_scripts: 'normal',
    brace_style: 'end-expand',
    space_before_conditional: true,
    unescape_strings: false,
    jslint_happy: true,
    end_with_newline: true,
    wrap_line_length: '110',
    indent_inner_html: true,
    comma_first: false,
    e4x: true,
    indent_empty_lines: true
  }
}

代码格式化工具的配置选项

jsencrypt.js

RSA 加密/解密工具库，使用了 jsencrypt 库来实现前端数据的加密和解密功能。

文件结构

javascript 复制代码

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'

// 密钥对生成 http://web.chacuo.net/netrsakeypair

const publicKey = '...'
const privateKey = '...'

// 加密
export function encrypt(txt) { ... }

// 解密
export function decrypt(txt) { ... }

依赖库

javascript 复制代码

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'

导入了 jsencrypt 库，这是一个用于在浏览器中实现 RSA 加密的 JavaScript 库
使用了库的压缩版本 jsencrypt.min.js

RSA 密钥对

公钥 (Public Key)

javascript 复制代码

const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +
  'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='

用于加密数据的公钥
采用 Base64 编码格式
通常在客户端使用，用于加密要发送到服务器的数据

私钥 (Private Key)

javascript 复制代码

const privateKey = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +
  '7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +
  'PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n' +
  'kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n' +
  'cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n' +
  'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +
  'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +
  'UP8iWi1Qw0Y='

用于解密数据的私钥
采用 Base64 编码格式
通常在服务端使用，用于解密客户端发送的数据

核心功能

1. 加密函数

javascript 复制代码

export function encrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPublicKey(publicKey) // 设置公钥
  return encryptor.encrypt(txt) // 对数据进行加密
}

创建 JSEncrypt 实例
设置公钥
对输入文本进行加密
返回加密后的字符串

2. 解密函数

javascript 复制代码

export function decrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPrivateKey(privateKey) // 设置私钥
  return encryptor.decrypt(txt) // 对数据进行解密
}

创建 JSEncrypt 实例
设置私钥
对输入的加密文本进行解密
返回解密后的原始字符串

在src\views\login.vue 处使用

如果用户勾选了"记住我"，则设置用户名、密码(加密)和记住我选项的Cookie，有效期30天

permission.js

一个权限验证工具库，提供了基于角色和权限的验证功能，用于在前端进行权限控制。

文件结构

javascript 复制代码

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

// 字符权限校验
export function checkPermi(value) { ... }

// 角色权限校验
export function checkRole(value) { ... }

依赖

javascript 复制代码

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

导入用户状态管理模块，用于获取当前用户的角色和权限信息

核心功能

1. 字符权限校验 (checkPermi)

javascript 复制代码

export function checkPermi(value) {
  if (value && value instanceof Array && value.length > 0) {
    const permissions = useUserStore().permissions
    const permissionDatas = value
    const all_permission = "*:*:*";

    const hasPermission = permissions.some(permission => {
      return all_permission === permission || permissionDatas.includes(permission)
    })

    if (!hasPermission) {
      return false
    }
    return true
  } else {
    console.error(`need roles! Like checkPermi="['system:user:add','system:user:edit']"`)
    return false
  }
}

功能说明：

检查用户是否拥有指定的权限
支持多个权限的"或"关系检查
超级权限 *:*:* 表示拥有所有权限

参数：

value ：权限标识数组，如 ['system:user:add', 'system:user:edit']

返回值：

true ：用户拥有任一权限或超级权限
false ：用户不拥有任何指定权限

工作流程：

检查输入参数是否为有效的非空数组
获取用户权限列表
检查用户是否拥有超级权限或任一指定权限
返回验证结果

2. 角色权限校验 (checkRole)

javascript 复制代码

export function checkRole(value) {
  if (value && value instanceof Array && value.length > 0) {
    const roles = useUserStore().roles
    const permissionRoles = value
    const super_admin = "admin";

    const hasRole = roles.some(role => {
      return super_admin === role || permissionRoles.includes(role)
    })

    if (!hasRole) {
      return false
    }
    return true
  } else {
    console.error(`need roles! Like checkRole="['admin','editor']"`)
    return false
  }
}

功能说明：

检查用户是否拥有指定的角色
支持多个角色的"或"关系检查
超级管理员角色 admin 拥有所有权限

参数：

value ：角色名称数组，如 ['admin', 'editor']

返回值：

true ：用户拥有任一角色或超级管理员角色
false ：用户不拥有任何指定角色

工作流程：

检查输入参数是否为有效的非空数组
获取用户角色列表
检查用户是否拥有超级管理员角色或任一指定角色
返回验证结果

request.js

文件整体结构

javascript 复制代码

import axios from 'axios'
import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { tansParams, blobValidate } from '@/utils/ruoyi'
import cache from '@/plugins/cache'
import { saveAs } from 'file-saver'
import useUserStore from '@/store/modules/user'

let downloadLoadingInstance;
export let isRelogin = { show: false };

// axios默认配置
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
axios.defaults.headers['Content-Language'] = 'zh_CN'

// 创建axios实例
const service = axios.create({...})

// 请求拦截器
service.interceptors.request.use(config => { ... }, error => { ... })

// 响应拦截器
service.interceptors.response.use(res => { ... }, error => { ... })

// 通用下载方法
export function download(url, params, filename, config) { ... }

export default service

依赖库

javascript 复制代码

import axios from 'axios'  // HTTP 请求库
import { ElNotification, ElMessageBox, ElMessage, ElLoading } from 'element-plus'  // UI组件
import { getToken } from '@/utils/auth'  // 获取认证token
import errorCode from '@/utils/errorCode'  // 错误码映射
import { tansParams, blobValidate } from '@/utils/ruoyi'  // 工具函数
import cache from '@/plugins/cache'  // 缓存插件
import { saveAs } from 'file-saver'  // 文件保存
import useUserStore from '@/store/modules/user'  // 用户状态管理

核心配置

1. Axios 基础配置

javascript 复制代码

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
axios.defaults.headers['Content-Language'] = 'zh_CN'

const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,  // API基础URL
  timeout: 10000  // 请求超时时间
})

设置默认的请求头
创建 axios 实例，配置基础 URL 和超时时间
使用环境变量配置 API 基础路径

请求拦截器

javascript 复制代码

service.interceptors.request.use(config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  // 是否需要防止数据重复提交
  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
  
  // 设置认证token
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken()
  }
  
  // 处理get请求参数
  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')
    // ...防重复提交逻辑
  }
  
  return config
}, error => {
  console.log(error)
  Promise.reject(error)
})

请求拦截器主要功能：

Token 处理：自动添加认证 token 到请求头
参数处理：处理 GET 请求参数，将参数拼接到 URL
防重复提交：通过缓存最近请求信息，防止短时间内重复提交
国际化支持：设置请求的语言标识

响应拦截器

javascript 复制代码

service.interceptors.response.use(res => {
  // 未设置状态码则默认成功状态
  const code = res.data.code || 200;
  // 获取错误信息
  const msg = errorCode[code] || res.data.msg || errorCode['default']
  
  // 二进制数据直接返回
  if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
    return res.data
  }
  
  // 处理各种响应状态码
  if (code === 401) {
    // 处理登录过期
    if (!isRelogin.show) {
      isRelogin.show = true;
      ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { 
        confirmButtonText: '重新登录', 
        cancelButtonText: '取消', 
        type: 'warning' 
      }).then(() => {
        isRelogin.show = false;
        useUserStore().logOut().then(() => {
          location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
        })
      }).catch(() => {
        isRelogin.show = false;
      });
    }
    return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
  } else if (code === 500) {
    ElMessage({ message: msg, type: 'error' })
    return Promise.reject(new Error(msg))
  } else if (code === 601) {
    ElMessage({ message: msg, type: 'warning' })
    return Promise.reject(new Error(msg))
  } else if (code !== 200) {
    ElNotification.error({ title: msg })
    return Promise.reject('error')
  } else {
    return Promise.resolve(res.data)
  }
}, error => {
  // 处理网络错误
  console.log('err' + error)
  let { message } = error;
  if (message == "Network Error") {
    message = "后端接口连接异常";
  } else if (message.includes("timeout")) {
    message = "系统接口请求超时";
  } else if (message.includes("Request failed with status code")) {
    message = "系统接口" + message.substr(message.length - 3) + "异常";
  }
  ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
  return Promise.reject(error)
})

响应拦截器主要功能：

状态码处理：根据不同的状态码执行不同的处理逻辑
错误信息转换：将状态码转换为用户友好的错误提示
登录状态管理：处理登录过期和重新登录流程
二进制数据处理：直接返回二进制数据，用于文件下载
网络错误处理：处理各种网络连接错误

通用下载方法

javascript 复制代码

export function download(url, params, filename, config) {
  downloadLoadingInstance = ElLoading.service({ 
    text: "正在下载数据，请稍候", 
    background: "rgba(0, 0, 0, 0.7)", 
  })
  
  return service.post(url, params, {
    transformRequest: [(params) => { return tansParams(params) }],
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    responseType: 'blob',
    ...config
  }).then(async (data) => {
    const isBlob = blobValidate(data);
    if (isBlob) {
      const blob = new Blob([data])
      saveAs(blob, filename)
    } else {
      const resText = await data.text();
      const rspObj = JSON.parse(resText);
      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
      ElMessage.error(errMsg);
    }
    downloadLoadingInstance.close();
  }).catch((r) => {
    console.error(r)
    ElMessage.error('下载文件出现错误，请联系管理员！')
    downloadLoadingInstance.close();
  })
}

下载方法功能：

加载提示：显示下载进度提示
请求配置：配置适合文件下载的请求参数
响应处理：处理二进制数据和错误响应
文件保存：使用 file-saver 库保存文件
错误处理：处理下载过程中的错误

在

处使用，例：

ruoyi.js

一个通用工具函数库，包含了基于若依框架的常用方法，主要涉及日期处理、表单操作、数据字典处理、树形结构构造等多种实用功能。

文件结构

javascript 复制代码

// 日期格式化
export function parseTime(time, pattern) { ... }

// 表单重置
export function resetForm(refName) { ... }

// 添加日期范围
export function addDateRange(params, dateRange, propName) { ... }

// 回显数据字典
export function selectDictLabel(datas, value) { ... }
export function selectDictLabels(datas, value, separator) { ... }

// 字符串格式化
export function sprintf(str) { ... }

// 转换字符串
export function parseStrEmpty(str) { ... }

// 数据合并
export function mergeRecursive(source, target) { ... }

// 构造树型结构数据
export function handleTree(data, id, parentId, children) { ... }

// 参数处理
export function tansParams(params) { ... }

// 返回项目路径
export function getNormalPath(p) { ... }

// 验证是否为blob格式
export function blobValidate(data) { ... }

核心功能详解

1. 日期格式化 (parseTime)

javascript 复制代码

export function parseTime(time, pattern) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time = parseInt(time)
    } else if (typeof time === 'string') {
      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}

功能：将各种格式的时间数据格式化为指定格式的字符串

特点：

支持多种输入格式：Date对象、时间戳、时间字符串
自动转换10位时间戳为13位时间戳
支持自定义格式模板
自动补零，保证格式统一

例子：

2. 表单重置 (resetForm)

javascript 复制代码

export function resetForm(refName) {
  if (this.$refs[refName]) {
    this.$refs[refName].resetFields();
  }
}

功能：重置Vue组件中的表单字段

例子：

3. 添加日期范围 (addDateRange)

javascript 复制代码

export function addDateRange(params, dateRange, propName) {
  let search = params;
  search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
  dateRange = Array.isArray(dateRange) ? dateRange : [];
  if (typeof (propName) === 'undefined') {
    search.params['beginTime'] = dateRange[0];
    search.params['endTime'] = dateRange[1];
  } else {
    search.params['begin' + propName] = dateRange[0];
    search.params['end' + propName] = dateRange[1];
  }
  return search;
}

功能：将日期范围参数添加到查询参数中

使用示例：

4. 数据字典回显 (selectDictLabel、selectDictLabels)

javascript 复制代码

export function selectDictLabel(datas, value) {
  if (value === undefined) {
    return "";
  }
  var actions = [];
  Object.keys(datas).some((key) => {
    if (datas[key].value == ('' + value)) {
      actions.push(datas[key].label);
      return true;
    }
  })
  if (actions.length === 0) {
    actions.push(value);
  }
  return actions.join('');
}

export function selectDictLabels(datas, value, separator) {
  if (value === undefined || value.length ===0) {
    return "";
  }
  if (Array.isArray(value)) {
    value = value.join(",");
  }
  var actions = [];
  var currentSeparator = undefined === separator ? "," : separator;
  var temp = value.split(currentSeparator);
  Object.keys(value.split(currentSeparator)).some((val) => {
    var match = false;
    Object.keys(datas).some((key) => {
      if (datas[key].value == ('' + temp[val])) {
        actions.push(datas[key].label + currentSeparator);
        match = true;
      }
    })
    if (!match) {
      actions.push(temp[val] + currentSeparator);
    }
  })
  return actions.join('').substring(0, actions.join('').length - 1);
}

功能：根据字典值返回对应的字典标签

使用示例：

5. 字符串格式化 (sprintf)

javascript 复制代码

export function sprintf(str) {
  var args = arguments, flag = true, i = 1;
  str = str.replace(/%s/g, function () {
    var arg = args[i++];
    if (typeof arg === 'undefined') {
      flag = false;
      return '';
    }
    return arg;
  });
  return flag ? str : '';
}

功能：类似C语言的sprintf函数，用于字符串格式化

使用示例：无

6. 字符串转换 (parseStrEmpty)

javascript 复制代码

export function parseStrEmpty(str) {
  if (!str || str == "undefined" || str == "null") {
    return "";
  }
  return str;
}

功能：将undefined、null等值转换为空字符串

使用示例：

7. 数据合并 (mergeRecursive)

javascript 复制代码

export function mergeRecursive(source, target) {
  for (var p in target) {
    try {
      if (target[p].constructor == Object) {
        source[p] = mergeRecursive(source[p], target[p]);
      } else {
        source[p] = target[p];
      }
    } catch (e) {
      source[p] = target[p];
    }
  }
  return source;
};

功能：递归合并两个对象，目标对象的属性会覆盖源对象的同名属性

使用示例：无

8. 构造树形结构 (handleTree)

javascript 复制代码

export function handleTree(data, id, parentId, children) {
  let config = {
    id: id || 'id',
    parentId: parentId || 'parentId',
    childrenList: children || 'children'
  };

  var childrenListMap = {};
  var nodeIds = {};
  var tree = [];

  for (let d of data) {
    let parentId = d[config.parentId];
    if (childrenListMap[parentId] == null) {
      childrenListMap[parentId] = [];
    }
    nodeIds[d[config.id]] = d;
    childrenListMap[parentId].push(d);
  }

  for (let d of data) {
    let parentId = d[config.parentId];
    if (nodeIds[parentId] == null) {
      tree.push(d);
    }
  }

  for (let t of tree) {
    adaptToChildrenList(t);
  }

  function adaptToChildrenList(o) {
    if (childrenListMap[o[config.id]] !== null) {
      o[config.childrenList] = childrenListMap[o[config.id]];
    }
    if (o[config.childrenList]) {
      for (let c of o[config.childrenList]) {
        adaptToChildrenList(c);
      }
    }
  }
  return tree;
}

功能：将扁平数据转换为树形结构数据

使用示例：

9. 参数处理 (tansParams)

javascript 复制代码

export function tansParams(params) {
  let result = ''
  for (const propName of Object.keys(params)) {
    const value = params[propName];
    var part = encodeURIComponent(propName) + "=";
    if (value !== null && value !== "" && typeof (value) !== "undefined") {
      if (typeof value === 'object') {
        for (const key of Object.keys(value)) {
          if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
            let params = propName + '[' + key + ']';
            var subPart = encodeURIComponent(params) + "=";
            result += subPart + encodeURIComponent(value[key]) + "&";
          }
        }
      } else {
        result += part + encodeURIComponent(value) + "&";
      }
    }
  }
  return result
}

功能：将对象转换为URL查询字符串

使用示例：

10. 路径处理 (getNormalPath)

javascript 复制代码

export function getNormalPath(p) {
  if (p.length === 0 || !p || p == 'undefined') {
    return p
  };
  let res = p.replace('//', '/')
  if (res[res.length - 1] === '/') {
    return res.slice(0, res.length - 1)
  }
  return res;
}

功能：规范化路径，处理多余的分隔符和尾部斜杠

使用示例：

11. Blob验证 (blobValidate)

javascript 复制代码

export function blobValidate(data) {
  return data.type !== 'application/json'
}

功能：验证数据是否为Blob格式（通过检查MIME类型）

使用示例：

在 src\main.js 全局挂载方法

scroll-to.js

一个页面滚动动画工具库，提供了平滑滚动的功能，用于创建流畅的滚动体验。它使用了缓动函数和 requestAnimationFrame 来实现高性能的滚动动画。

文件结构

javascript 复制代码

// 缓动函数
Math.easeInOutQuad = function(t, b, c, d) { ... }

// 动画帧请求封装
var requestAnimFrame = (function() { ... })()

// 滚动位置设置函数
function move(amount) { ... }

// 获取当前滚动位置函数
function position() { ... }

// 主要滚动函数
export function scrollTo(to, duration, callback) { ... }

核心功能详解

1. 缓动函数 (easeInOutQuad)

javascript 复制代码

Math.easeInOutQuad = function(t, b, c, d) {
  t /= d / 2
  if (t < 1) {
    return c / 2 * t * t + b
  }
  t--
  return -c / 2 * (t * (t - 2) - 1) + b
}

这是一个二次缓动函数，实现了先加速后减速的平滑动画效果。

参数说明：

t ：当前时间（已过去的时间）
b ：起始值
c ：变化量（结束值减去起始值）
d ：持续时间（总时间）

特点：

前半段：加速运动（t < 1）
后半段：减速运动（t >= 1）
创造了自然的滚动效果

2. 动画帧请求封装 (requestAnimFrame)

javascript 复制代码

var requestAnimFrame = (function() {
  return window.requestAnimationFrame || 
         window.webkitRequestAnimationFrame || 
         window.mozRequestAnimationFrame || 
         function(callback) { window.setTimeout(callback, 1000 / 60) }
})()

这是一个跨浏览器的 requestAnimationFrame 封装，确保在各种浏览器中都能使用最优的动画性能。

特点：

使用原生 requestAnimationFrame API
提供浏览器兼容性回退方案
默认60fps（每秒60帧）

3. 滚动位置设置 (move)

javascript 复制代码

function move(amount) {
  document.documentElement.scrollTop = amount
  document.body.parentNode.scrollTop = amount
  document.body.scrollTop = amount
}

功能：设置页面的滚动位置

特点：

同时设置多个可能的滚动元素
确保在各种浏览器中都能正常工作
解决了不同浏览器中滚动容器不同的问题

为什么需要设置三个元素？ 不同的浏览器使用不同的元素作为滚动容器：

document.documentElement ：HTML元素，在标准模式下使用
document.body.parentNode ：BODY的父元素（即HTML）
document.body ：BODY元素，在怪异模式下使用

4. 获取当前滚动位置 (position)

javascript 复制代码

function position() {
  return document.documentElement.scrollTop || 
         document.body.parentNode.scrollTop || 
         document.body.scrollTop
}

功能：获取当前页面的滚动位置

特点：

从多个可能的滚动元素中获取第一个有效的值
使用逻辑或操作符返回第一个非0值
确保在各种浏览器中都能获取正确的位置

5. 主滚动函数 (scrollTo)

javascript 复制代码

export function scrollTo(to, duration, callback) {
  const start = position()                // 获取起始位置
  const change = to - start                // 计算变化量
  const increment = 20                     // 时间增量
  let currentTime = 0                      // 当前时间
  duration = (typeof (duration) === 'undefined') ? 500 : duration
  
  var animateScroll = function() {
    currentTime += increment               // 增加时间
    var val = Math.easeInOutQuad(currentTime, start, change, duration) // 计算当前位置
    move(val)                             // 设置滚动位置
    
    if (currentTime < duration) {
      requestAnimFrame(animateScroll)     // 继续动画
    } else {
      if (callback && typeof (callback) === 'function') {
        callback()                        // 动画完成，执行回调
      }
    }
  }
  
  animateScroll()                          // 开始动画
}

参数：

to ：目标滚动位置
duration ：动画持续时间（毫秒），默认500毫秒
callback ：动画完成后的回调函数

工作流程：

获取当前滚动位置作为起始点
计算需要滚动的距离
设置默认持续时间为500毫秒
创建动画循环函数
在每次循环中计算新位置并更新滚动
使用缓动函数使滚动更自然
动画完成后执行回调函数

使用示例：

theme.js

主题处理工具库，主要用于动态修改应用主题颜色，包括生成颜色变体和主题样式。

文件结构

javascript 复制代码

// 处理主题样式
export function handleThemeStyle(theme) { ... }

// hex颜色转rgb颜色
export function hexToRgb(str) { ... }

// rgb颜色转Hex颜色
export function rgbToHex(r, g, b) { ... }

// 变浅颜色值
export function getLightColor(color, level) { ... }

// 变深颜色值
export function getDarkColor(color, level) { ... }

核心功能详解

1. 主题样式处理 (handleThemeStyle)

javascript 复制代码

export function handleThemeStyle(theme) {
  // 设置主题色
  document.documentElement.style.setProperty('--el-color-primary', theme)
  
  // 生成浅色变体
  for (let i = 1; i <= 9; i++) {
    document.documentElement.style.setProperty(
      `--el-color-primary-light-${i}`, 
      `${getLightColor(theme, i / 10)}`
    )
  }
  
  // 生成深色变体
  for (let i = 1; i <= 9; i++) {
    document.documentElement.style.setProperty(
      `--el-color-primary-dark-${i}`, 
      `${getDarkColor(theme, i / 10)}`
    )
  }
}

功能：设置应用的主题颜色及其变体

工作原理：

设置基础主题色 --el-color-primary
生成9个浅色变体，从 --el-color-primary-light-1 到 --el-color-primary-light-9
生成9个深色变体，从 --el-color-primary-dark-1 到 --el-color-primary-dark-9
通过 CSS 变量应用到整个应用

2. 颜色转换函数

HEX 转 RGB (hexToRgb)

javascript 复制代码

export function hexToRgb(str) {
  str = str.replace('#', '')            // 移除#号
  let hexs = str.match(/../g)           // 分割为两位数组
  for (let i = 0; i < 3; i++) {
    hexs[i] = parseInt(hexs[i], 16)     // 转换为十进制
  }
  return hexs                             // 返回[红, 绿, 蓝]
}

功能：将十六进制颜色值转换为RGB值

使用示例：

RGB 转 HEX (rgbToHex)

javascript 复制代码

export function rgbToHex(r, g, b) {
  let hexs = [r.toString(16), g.toString(16), b.toString(16)]  // 转换为十六进制
  for (let i = 0; i < 3; i++) {
    if (hexs[i].length == 1) {
      hexs[i] = `0${hexs[i]}`                                // 补零
    }
  }
  return `#${hexs.join('')}`                                   // 组合为HEX值
}

功能：将RGB值转换为十六进制颜色值

使用示例：

3. 颜色变体生成函数

变浅颜色 (getLightColor)

javascript 复制代码

export function getLightColor(color, level) {
  let rgb = hexToRgb(color)                    // 转换为RGB
  for (let i = 0; i < 3; i++) {
    // 计算变浅后的值：(255 - 原色) * 变浅级别 + 原色
    rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])
  }
  return rgbToHex(rgb[0], rgb[1], rgb[2])     // 转换回HEX
}

功能：将颜色变浅

参数：

color ：原始颜色（HEX格式）
level ：变浅级别（0-1之间的小数）

算法解释：

通过将原色向白色(255,255,255)靠拢来实现变浅
变浅级别越高，颜色越接近白色

使用示例：

变深颜色 (getDarkColor)

javascript 复制代码

export function getDarkColor(color, level) {
  let rgb = hexToRgb(color)                    // 转换为RGB
  for (let i = 0; i < 3; i++) {
    // 计算变深后的值：原色 * (1 - 变深级别)
    rgb[i] = Math.floor(rgb[i] * (1 - level))
  }
  return rgbToHex(rgb[0], rgb[1], rgb[2])     // 转换回HEX
}

功能：将颜色变深

参数：

color ：原始颜色（HEX格式）
level ：变深级别（0-1之间的小数）

算法解释：

通过将原色向黑色(0,0,0)靠拢来实现变深
变深级别越高，颜色越接近黑色

使用示例：

使用场景

这些工具函数主要应用于以下场景：

主题切换：在应用中实时切换主题颜色
颜色计算：生成基于主题色的各种变体
UI组件开发：开发需要主题色变体的组件
自定义样式：根据主题色动态生成相关样式

在

处使用，例：

validate.js

数据验证工具库，包含了一系列常用的数据验证函数，用于检查各种格式的数据是否符合特定规则。

文件结构

javascript 复制代码

// URL相关验证
export function isHttp(url) { ... }
export function isExternal(path) { ... }
export function validURL(url) { ... }

// 用户名验证
export function validUsername(str) { ... }

// 字符串格式验证
export function validLowerCase(str) { ... }
export function validUpperCase(str) { ... }
export function validAlphabets(str) { ... }

// 邮箱验证
export function validEmail(email) { ... }

// 数据类型检查
export function isString(str) { ... }
export function isArray(arg) { ... }

核心功能详解

1. URL相关验证

HTTP/HTTPS URL检查 (isHttp)

javascript 复制代码

export function isHttp(url) {
  return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
}

功能：检查URL是否为HTTP或HTTPS协议

参数：

url ：要检查的URL字符串

返回值：

true ：是HTTP或HTTPS URL
false ：不是HTTP或HTTPS URL

使用示例：

外链检查 (isExternal)

javascript 复制代码

export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

功能：检查路径是否为外部链接（包括http、https、mailto和tel协议）

参数：

path ：要检查的路径字符串

返回值：

true ：是外部链接
false ：不是外部链接

使用示例：

URL格式验证 (validURL)

javascript 复制代码

export function validURL(url) {
  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
}

功能：验证URL格式是否正确，支持HTTP、HTTPS和FTP协议

参数：

url ：要验证的URL字符串

返回值：

true ：URL格式正确
false ：URL格式不正确

使用示例：无

2. 用户名验证

javascript 复制代码

export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}

功能：验证用户名是否在预定义的有效用户名列表中

参数：

str ：要验证的用户名

返回值：

true ：用户名有效
false ：用户名无效

使用示例：无

3. 字符串格式验证

小写字母验证 (validLowerCase)

javascript 复制代码

export function validLowerCase(str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}

功能：验证字符串是否只包含小写字母

参数：

str ：要验证的字符串

返回值：

true ：只包含小写字母
false ：包含其他字符

使用示例：无

大写字母验证 (validUpperCase)

javascript 复制代码

export function validUpperCase(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

功能：验证字符串是否只包含大写字母

参数：

str ：要验证的字符串

返回值：

true ：只包含大写字母
false ：包含其他字符

使用示例：无

字母验证 (validAlphabets)

javascript 复制代码

export function validAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}

功能：验证字符串是否只包含字母（不区分大小写）

参数：

str ：要验证的字符串

返回值：

true ：只包含字母
false ：包含其他字符

使用示例：无

4. 邮箱验证

javascript 复制代码

export function validEmail(email) {
  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return reg.test(email)
}

功能：验证邮箱地址格式是否正确

参数：

email ：要验证的邮箱地址

返回值：

true ：邮箱格式正确
false ：邮箱格式不正确

使用示例：无

5. 数据类型检查

字符串类型检查 (isString)

复制代码

export function isString(str) {
  if (typeof str === 'string' || str instanceof String) {
    return true
  }
  return false
}

功能：检查参数是否为字符串类型

参数：

str ：要检查的参数

返回值：

true ：是字符串
false ：不是字符串

使用示例：无

数组类型检查 (isArray)

javascript 复制代码

export function isArray(arg) {
  if (typeof Array.isArray === 'undefined') {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
  return Array.isArray(arg)
}

功能：检查参数是否为数组类型

参数：

arg ：要检查的参数

返回值：

true ：是数组
false ：不是数组

使用实例：

在

处使用，例：

熟悉RuoYi-Vue-Plus-前端 （3）

src\utils

auth.js

auth.js 文件内容

功能解析

1. 依赖模块

2. 核心常量

3. 主要函数

dict.js

文件内容

功能解析

1. 依赖模块

2. 核心函数：useDict

实现逻辑

dynamicTitle.js

文件结构

导入依赖

核心功能

工作流程

errorCode.js

文件结构

错误码定义

index.js

文件结构

主要功能分类

1. 日期时间处理

formatDate 函数

formatTime 函数

2. URL 和查询参数处理

getQueryObject 函数

param 函数

3. 字符串处理

byteLength 函数

html2Text 函数

4. 数组和对象操作

cleanArray 函数

objectMerge 函数

deepClone 函数

5. DOM 操作

toggleClass 函数

addClass、removeClass、hasClass 函数

6. 性能优化

debounce 函数

7. 数组处理

uniqueArr 函数

createUniqueString 函数

8. 字符串转换

titleCase、camelCase 函数

9. 验证函数

isNumberStr 函数

10. 配置对象

beautifierConf 对象

jsencrypt.js

文件结构

依赖库

RSA 密钥对

公钥 (Public Key)

私钥 (Private Key)

核心功能

1. 加密函数

2. 解密函数

permission.js

文件结构

依赖

核心功能

1. 字符权限校验 (checkPermi)

2. 角色权限校验 (checkRole)

request.js

依赖库

核心配置

1. Axios 基础配置

请求拦截器

响应拦截器

通用下载方法

ruoyi.js

文件结构

核心功能详解

1. 日期格式化 (parseTime)

2. 表单重置 (resetForm)

3. 添加日期范围 (addDateRange)

熟悉RuoYi-Vue-Plus-前端（3）