树下薰衣草

封装时间格式组件

suxiaojun — Tue, 02 Dec 2025 17:37:07 +0800

// utils/formatDate.ts

/**
 * 按指定格式格式化时间戳
 * @param timestamp 时间戳（number | string），可为毫秒数或可被 new Date() 解析的字符串
 * @param format 输出格式，默认 YYYY-MM-DD hh:mm:ss
 *  - YYYY: 4 位年份
 *  - YY: 2 位年份
 *  - MM/M: 月（两位/一位）
 *  - DD/D: 日（两位/一位）
 *  - HH/H: 24 小时制（两位/一位）
 *  - hh/h: 12 小时制（两位/一位）
 *  - mm/m: 分钟（两位/一位）
 *  - ss/s: 秒（两位/一位）
 *  - A: AM / PM
 */
export function formatDate(timestamp: number | string, format = 'YYYY-MM-DD hh:mm:ss'): string {
  // 若传入空值，返回空字符串
  if (!timestamp) return ''

  let ts: any = null

  // 如果 timestamp 不是数字，则直接作为日期字符串处理
  // 否则转为数字（时间戳）
  if (isNaN(Number(timestamp))) {
    ts = timestamp
  } else {
    ts = Number(timestamp)
  }

  const date = new Date(ts)

  // new Date 无法解析时，返回 Invalid Date
  if (isNaN(date.getTime())) return 'Invalid Date'

  // 基本日期结构
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hours24 = date.getHours()
  const minutes = date.getMinutes()
  const seconds = date.getSeconds()

  // 处理 12 小时制 AM/PM
  const ampm = hours24 >= 12 ? 'PM' : 'AM'
  const hours12 = hours24 % 12 || 12 // 0 点转换成 12 点

  // 格式中是否出现 A（表示使用 12 小时制）
  const use12Hour = format.includes('A')

  /**
   * 占位符映射表
   * 不同的 key 会对应不同的日期组件内容
   */
  const map: Record = {
    YYYY: String(year),
    YY: String(year).slice(-2),
    MM: String(month).padStart(2, '0'),
    M: String(month),
    DD: String(day).padStart(2, '0'),
    D: String(day),
    hh: String(hours12).padStart(2, '0'),
    h: String(hours12),
    HH: String(hours24).padStart(2, '0'),
    H: String(hours24),
    mm: String(minutes).padStart(2, '0'),
    m: String(minutes),
    ss: String(seconds).padStart(2, '0'),
    s: String(seconds),
    A: ampm, // AM/PM
  }

  // 如果格式包含 A，则 hh/h 应使用 12 小时制
  if (use12Hour) {
    map.hh = String(hours12).padStart(2, '0')
    map.h = String(hours12)
  } else {
    // 未使用 A，则 hh/h 默认等同于 24 小时制（HH/H）
    map.hh = map.HH
    map.h = map.H
  }

  // 遍历所有占位符并进行替换
  let formatted = format
  for (const key in map) {
    formatted = formatted.replace(new RegExp(key, 'g'), map[key])
  }

  return formatted
}

防抖节流函数封装成独立组件

suxiaojun — Tue, 02 Dec 2025 17:26:06 +0800

防抖函数

/**
 * @description 防抖函数
 * @param fn 需要防抖的方法
 * @param delay 延迟时间
 * @returns
 */
export function debounce void>(
  fn: T,
  delay = 300
) {
  let timer: ReturnType | null = null

  const debounced = (...args: Parameters) => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn(...args)
    }, delay)
  }

  debounced.cancel = () => {
    if (timer) clearTimeout(timer)
    timer = null
  }

  return debounced as T & { cancel: () => void }
}

节流函数

/**
 * 节流函数（throttle）
 * 在一定时间内，只会执行一次目标函数。
 * 适用于滚动触发、窗口缩放、按钮频繁点击等场景。
 *
 * @param func 需要执行的目标函数
 * @param wait 间隔时间（单位：毫秒）
 * @returns 返回包装后的节流函数
 */
export function throttle(func: (...args: any[]) => void, wait = 300) {
  // 记录上一次执行的时间戳
  let lastTime = 0
  // 定时器，用于 trailing 触发（可选）
  let timer: any = null

  return function (this: any, ...args: any[]) {
    const now = Date.now()

    // 如果当前时间 - 上次执行时间 >= 间隔时间，则立即执行
    if (now - lastTime >= wait) {
      lastTime = now
      func.apply(this, args)
    } else {
      // 清除之前的定时器，重新设置（保证最后一次触发会执行）
      clearTimeout(timer)
      timer = setTimeout(() => {
        lastTime = Date.now()
        func.apply(this, args)
      }, wait - (now - lastTime))
    }
  }
}

页面中使用

import { debounce } from '@/utils/debounce'
import { throttle } from '@/utils/throttle'

const handleChangeDebounce = debounce(需要防抖的Function, time)
const handleChangeThrottle = throttle(需要节流的Function, time)

vue3请求封装

suxiaojun — Tue, 24 Dec 2024 20:01:54 +0800

/**
 * axios setup to use mock service
 */

    import axios from 'axios';
    import { ElMessage } from 'element-plus';
    import { router } from '@/router'
    // 引入i18
    import { i18n } from '@/utils/i18n';

    // 获取浏览器默认语言
    const defaultLanguage = navigator.language;

    // 获取本地存储语言
    const localStorageLanguage = localStorage.getItem('language')
    // 优先使用本地存储语言
    let useLanguage = localStorageLanguage ? localStorageLanguage : defaultLanguage
    let regex = /cn/i

    const service = axios.create({
      baseURL: import.meta.env.VITE_BASE_API, // 所有的请求地址前缀部分
      timeout: 60000 // 请求超时时间(毫秒)
    });

    // 请求拦截
    service.interceptors.request.use(
      (config) => {
        //设置 token
        config.headers.Authorization = localStorage.getItem('jwt_token'); //token  代表从后台传过来的cookie的令牌
        config.headers['Language'] = regex.test(useLanguage) ? 'cn' : 'en' // 判断浏览器默认语言是否包含CN(表示中国)

        // config.headers['Content-Type'] = 'application/json';
        // config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        if (config.method === 'get' && config.params) {
          let url = config.url + '?';
          let keys = Object.keys(config.params);
          for (let key of keys) {
            url += `${key}=${encodeURIComponent(config.params[key])}&`;
          }
          url = url.slice(0, -1);
          config.params = {};
          config.url = url;
        }
        return config;
      },
      (err) => {
        return Promise.reject(err);
      }
    );
    let isMessageShown = false; // 标识变量，避免多次提示
    // 响应拦截
    service.interceptors.response.use(
      (response) => {
        const data = response.data;
        // 如果后台返回的报错码和报错信息的话
        if (data.code === 0 || data.code === 200) {
          return data;
        } else if (data.code >= 1500 && data.code <= 1511) {
          if (!isMessageShown) {
            isMessageShown = true; // 设置标识，避免多次提示
            ElMessage({
              type: 'error',
              message: data.message || data.msg,
              duration: 2000,
              onClose: () => {
                isMessageShown = false; // 提示结束后恢复标识
              }
            });
          }
          return data;
        } else {
          if (!isMessageShown) {
            isMessageShown = true; // 设置标识，避免多次提示
            ElMessage({
              type: 'error',
              message: data.message || data.msg,
              duration: 2000,
              onClose: () => {
                isMessageShown = false; // 提示结束后恢复标识
              }
            });
          }
          return data;
        }
      },
      (error) => {
        if (error.response.status === 401) {
          localStorage.removeItem('jwt_token');
          localStorage.removeItem('userInfo');
          router.push('/auth/login')
          if (!isMessageShown) {
            isMessageShown = true; // 设置标识，避免多次提示
            ElMessage({
              type: 'error',
              message: i18n.global.t('No Login'),
              duration: 2000,
              onClose: () => {
                isMessageShown = false; // 提示结束后恢复标识
              }
            });
          }
        } else if (error.response.status === 50003) {
          if (!isMessageShown) {
            isMessageShown = true; // 设置标识，避免多次提示
            ElMessage({
              type: 'error',
              message: '服务器维护中',
              duration: 2000,
              onClose: () => {
                isMessageShown = false; // 提示结束后恢复标识
              }
            });
          }
        } else {
          if (!isMessageShown) {
            isMessageShown = true; // 设置标识，避免多次提示
            ElMessage({
              type: 'error',
              message: error,
              duration: 2000,
              onClose: () => {
                isMessageShown = false; // 提示结束后恢复标识
              }
            });
          }
        }
      }
    );

    export default service;

vue3+ts封装表格

suxiaojun — Tue, 24 Dec 2024 19:43:15 +0800

更新于2025-12-2；
修改

新增搜索栏下拉框配置
新增自定义行元素内容或者与行原数据内容并存
新增自定义行内元素样式

这里使用了elementplus+vuetify框架封装的

下面是使用这个封装组件的父组件
HTML文件

JS部分

import { ref, reactive, onMounted, computed, provide, h } from 'vue';
/* 为了使用动态使用icon引入组件 */
import { VIcon } from 'vuetify/components';

/* 列表数据 */
const TableDataList: any = ref([])

/* 搜索查询 */
const getList = async (value: string) => {
  const data: any = {
    page: tablePage.value,
    size: itemsPerPage.value,
    ...searchFrom.value
  }
  const res: any = await getListApi(data)
  if (res.code !== 0) return
  TableDataList.value = res.data.list
  total.value = res.data.total
}

/* 动态DOM元素的事件 */
const handleRowClick = async (row: any, value: string) => {
  const params = {
    key: row[value]
  }
  const res: any = await decryptApi(params)
  if (res.code !== 0) return

};
/* 定义表头 */
const TableHeaderList = computed(() => {
  return ([
    {
      field: 'field',
      label: '不需要搜索',
      width: '130px',
      search: {
        hidden: true
      }
    },
    {
      field: 'field',
      label: '输入框搜索',
      width: '60px',
      search: {
        component: 'Input',
      }
    },
    {
      field: 'time',
      label: '时间格式搜索',
      type: 'time',
      search: {
        component: 'DatePicker',
        componentProps: {
          type: 'daterange',
          unlinkPanels: true,
          valueFormat: 'YYYY-MM-DD'
        }
      }
    },
    {
      field: 'field',
      label: '下拉菜单搜索和根据数据回显',
      width: '130px',
      search: {
        component: 'Select',
        optionApi: () => {
          const res = [
            {
              value: 0,
              label: '下拉选项1'
            },
            {
              value: 1,
              label: '下拉选项2'
            }
          ]
          return res
        }
      },
      formatter: (cellValue: string | number) => {
        let typeText: string | number = ''
        switch (cellValue) {
          case 0:
            typeText = '回显数据1'
            break
          case 1:
            typeText = '回显数据1'
            break
          default:
            typeText = cellValue
            break
        }
        return typeText
      }
    },
    {
      field: 'field',
      label: '自定义行元素内容',
      width: '130px',
      search: {
        hidden: true
      },
      customize: true,
      render: (row: any) => {
        return h(
          'div',
          {},
          `${row.pay_amount} ${row.pay_coin_name}`
        )
      }
    },
    {
      field: 'field',
      label: '在原有行元素内容增加一个自定义内容并配置属性',
      width: '160px',
      search: {
        hidden: true
      },
      renderFloat：left,
      // Vue3特性--动态插入DOM元素
      render: (row: any) => h(VIcon, { icon: 'mdi-eye-outline', style: 'color: #939a9d; cursor: pointer;', onClick: () => handleRowClick(row, '') })
    },
    {
      field: 'operate',
      label: t("operate"),
      width: '50px',
      search: {
        hidden: true
      }
    }
  ])
});

NVM安装和使用

suxiaojun — Wed, 21 Aug 2024 07:45:47 +0800

一、NVM安装
镜像源
官方源：https://nodejs.org/dist/
淘宝源：https://npm.taobao.org/mirrors/node/
NVM 官方源：https://nodejs.org/download/
使用方法：例如：nvm node_mirror https://nodejs.org/dist/

注意：安装NVM之前，要彻底卸载node.js

NVM下载地址：nvm下载地址：https://github.com/coreybutler/nvm-windows/releases

选择：nvm-setup.zip进行下载

第一步：解压.zip压缩包到指定目录

第二步：双击nvm-setup.exe开始安装

这里是设置nvm的安装路径，注意nvm安装的路径不能有空格或者中文

这里是设置使用nvm安装node时，node的安装路径，防止node没删除干净就最好不要修改node路径，默认路径就好

安装完成后，在CMD命令窗口输入nvm -v,输出如下版本号即证明安装成功

修改nvm配置文件
nvm安装完成后，打开nvm安装目录下的settingst文件:

将settings改为
root: D:\nvm
path: C:\Program Files\nodejs
arch: 64
proxy: none
node_mirror: http://npmmirror.com/mirrors/node/
npm_mirror: http://npmmirror.com/mirrors/npm/

二、安装node
查看nvm支持安装的node版本
1、命令：nvm list available

注意：如果镜像源错误如下
nvm list available
Error retrieving "http://npm.taobao.org/mirrors/node/index.json": HTTP Status 404
那么就更换官方镜像源
命令：nvm node_mirror https://nodejs.org/dist/

使用nvm install 版本号安装指定版本node
比如同时安装：nvm install 18.18.1 和nvm install 15.2.1

切换node版本
初次使用nvm安装node之后，必须先使用nvm use 版本号切换到已安装版本的node才可以
比如：nvm use 18.18.1

查看当前node版本 node -v

下面是查看安装在本机的所有node.js版本，切换node版本和删除node版本
我之前已经装过两个版本的node，这条命令可以查看装的所有node版本
nvm ls

切换到另一个的版本
nvm use 版本号

删除不要的版本，卸载指定版本的nodejs，当安装失败时可以卸载使用
nvm uninstall 版本号

一些nvm其他命令
nvm off // 禁用node.js版本管理(不卸载任何东西)
nvm on // 启用node.js版本管理
nvm -v // 显示nvm版本
nvm install stable // 安装最新稳定版
nvm current // 显示当前使用中的nvm版本

vue请求封装

suxiaojun — Thu, 25 Jul 2024 10:09:41 +0800

1.创建环境文件.env.development和.env.production

// 开发环境
# 页面标题
VUE_APP_TITLE = 'Blog'

# 开发环境配置
ENV = 'development'

# 开发环境
VUE_APP_BASE_API = '开发环境域名'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

// 生产环境
# 页面标题
VUE_APP_TITLE = 'Blog'

# 生产环境配置
ENV = 'production'

# 生产环境
VUE_APP_BASE_API = '生产环境域名'

2.二次封装请求

// 1.引入 axios
import axios from 'axios';
import { Message } from 'element-ui';
// 引入 cookie
import { getCookie } from './cookie';

// 2.创建 axios 实例
const service = axios.create({
  // 3.配置
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 60 * 1000 //请求的超时时间
})

// 4.请求拦截
service.interceptors.request.use(
  config => {
      config.baseURL = process.env.VUE_APP_FastAdmin_API;

    //设置 token
    if (localStorage.getItem('token')) {
      config.headers.token = localStorage.getItem('token');//token  代表从后台传过来的token的令牌
    } else {
      config.headers.token = getCookie('token');//token  代表从后台传过来的cookie的令牌
      if (getCookie('token')) {
        localStorage.setItem('Token', getCookie('token'))
      }
    }
    if (config.method === 'get' && config.params) {
      let url = config.url + '?';
      let keys = Object.keys(config.params);
      for (let key of keys) {
        url += `${key}=${encodeURIComponent(config.params[key])}&`;
      }
      // let url = config.url + '?' + tansParams(config.params);
      url = url.slice(0, -1);
      config.params = {};
      config.url = url
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
)

// 5.响应拦截
service.interceptors.response.use(
  res => {
    // console.log(res);
    const data = res.data;
    //如果后台返回的报错码和报错信息的话
    if (data.code === 1 || (data.code >= 200 && data.code <= 299)) {
      return data;
    } else if (data.code == 0) {
      Message({
        type: "error",
        message: data.msg,
        duration: 2000
      });
      return data;
    }
  },
  err => {
    console.log(err);
    if (err.response.data.code === 401) {
      localStorage.removeItem("UserInfo");
      localStorage.removeItem("myInfo");
      localStorage.removeItem("Token");
      Message({
        type: "error",
        message: '请先登录',
        duration: 2000
      })
    } else if (err.response.data.code === 50003) {
      Message({
        type: "error",
        message: '服务器维护中',
        duration: 2000
      })
    } else {
      Message({
        type: "error",
        message: err,
        duration: 2000
      })
    }
  }
)

// 6.导出
export default service;

3.cookie配置

// 封装了cookie
import Cookies from "js-cookie";

// 创建cookie
export function setCookie(key, value, expires) {
    return Cookies.set(key, value, { expires: expires })
}

// 获取 cookie
export function getCookie(key) {
    return Cookies.get(key);
}

// 删除cookie
export function removeCookie(key) {
    return Cookies.remove(key);
}

使用element-plus表格合并

suxiaojun — Tue, 16 Jul 2024 16:22:11 +0800

可以使用element-plus的在线编辑查看效果

小程序请求二次封装

suxiaojun — Tue, 07 May 2024 15:04:33 +0800

创建config文件，将配置文件放入一个目录中, 目录结构如下

config/
    ├── index.js  # 入口文件
    ├── env.js    # 环境获取
    ├── dev.js    # 开发环境配置
    └── pro.js    # 生产环境配置

index.js

/**
 * index
 */

import { getEnv } from './env.js';
import dev from './dev.js';
import pro from './pro.js';

const env = getEnv();
console.log('env', env);

let config = pro;

if (env == 'dev') {
  config = dev;
}

export default config;

env.js 使用微信小程序APIwx.getAccountInfoSync()获取小程序当前的环境

/**
 * env
 */

export function getEnv() {
  // let res = __wxConfig.envVersion; // 文档已经没了，但是还可以用，不知道啥时候会弃用!!!
  /* 
   * 获取当前账号信息
   * miniProgram {
   *  appId, envVersion, plugin
   * }
   **/
  let res = wx.getAccountInfoSync();
  // 客户端中host有值，本地开发的时候host为null
  if (res.miniProgram.envVersion == 'develop' || res.miniProgram.envVersion == 'trial') {
    return 'dev';
  } else {
    return 'pro';
  }
}

dev.js

/**
 * dev
 */
export default {
  BASE_URL: '本地域名', // http://127.0.0.1
};

pro.js

/**
 * pro
 */
export default {
  'BASE_URL': '线上域名', // https://www.baidu.com
}

接下来先随便封装请求后续再优化，先引入自己定义的config环境变量

// 引入环境变量
import config from '../config/index';
// 获取域名，小程序的域名需要在小程序后台配置相同的域名
const baseUrl = config.BASE_URL;

封装wx.request请求

module.exports = {
  /**
   * 二次封装wx.request
   * url:请求的接口地址
   * method:请求方式 GET,POST....
   * data:要传递的参数
   */
  request: (url, method, data) => {
    //这里使用ES6的写法拼接的字符串
    let _url = `${baseUrl}/${url}`;
    return new Promise((resolve, reject) => {
      wx.showLoading({
        title: '正在加载',
      });
      wx.request({
        url: _url,
        data: data,
        method: method,
        header: {
          'content-type': 'application/json',
          'token': wx.getStorageSync('Token')
        },
        success: (res) => {
          let {
            code
          } = res.data;
          if (code === 200 || code === 1) {
            resolve(res.data);
            wx.hideLoading();
          } else {
            console.log(res);
            wx.showToast({
              title: res.data.data,
              icon: "none",
              duration: 2000
            })
          }
        },
        fail() {
          reject('服务器连接中断')
        }
      });

    });
  },
}

简单弄一个format

suxiaojun — Tue, 19 Mar 2024 10:41:18 +0800

/**

@description 格式化时间
@param {number/String} timestamp 时间戳（毫秒）
@param {string} formatString 想要返回的格式
@returns {string} - 格式化后的日期字符串
*/
export const format = (timestamp, formatString) => {
const date = new Date(timestamp);
const year = date.getFullYear();
const month = padZero(date.getMonth() + 1); // 月份是从0开始的，所以需要加1
const day = padZero(date.getDate());
const hours = padZero(date.getHours());
const minutes = padZero(date.getMinutes());
const seconds = padZero(date.getSeconds());

// 填充前导零的函数
function padZero(number) {
return number.toString().padStart(2, '0');
}

// 替换格式字符串中的占位符
return formatString
.replace('yyyy', year)
.replace('MM', month)
.replace('dd', day)
.replace('hh', hours)
.replace('mm', minutes)
.replace('ss', seconds);

}

第二种方法
// utils/formatDate.js
export function formatDate(timestamp) {
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');

return ${year}-${month}-${day} ${hours}:${minutes}:${seconds};
}

抖音无水印视频

suxiaojun — Tue, 25 Jul 2023 17:46:39 +0800

1.复制抖音视频地址
例：https://v.douyin.com/XXXX/
2.浏览器切换手机模式请求这个视频地址，然后找到 https://www.iesdouyin.com/web/api/v2/aweme/iteminfo 这个请求
3.找到一下地址

4.拿到的这个地址是有水印的，把地址上的/palywm的wm去掉后请求则就是无水印的视频了
https://aweme.snssdk.com/aweme/v1/playwm/?video_id=v0300fg10000civj393c77uaarcdv9j0&ratio=720p&line=0