编程随笔

vuepress搭建网站

Tue, 21 Nov 2023 12:42:43 +0000

使用本项目

克隆到本地

 git clone https://github.com/liyao52033/vuepress-default.git

yarn install

脚本说明

 "scripts": {
 "docs:dev": "vuepress dev docs", //启动项目
 "docs:build": "vuepress build docs", // 打包项目
 "docs:nav": "vuepress nav docs -f" , // 生成导航栏与侧边栏
 "deploy": "./docs/.vuepress/deploy.sh", //部署到github.io
 "push": "./docs/push.sh" //推送到github
 },

启动项目

 yarn run docs:dev

在docs构建目录如下

 docs
├─ README.md
├─ contact.md
├─ about.md
├─ foo/
│ ├─ test
│ ├─ ├─ README.md 
│ ├─ README.md
│ ├─ one.md
│ └─ two.md
└─ bar/
 ├─ README.md
 ├─ three.md
 └─ four.md

文件夹可以嵌套，但每个文件夹都必须有README目录，不然会报404

引入第三方组件库

Wed, 29 Nov 2023 01:14:36 +0000

当你在开发一个 VuePress 应用时，由于所有的页面在生成静态 HTML 时都需要通过 Node.js 服务端渲染，因此所有的 Vue 相关代码都应当遵循编写通用代码 (opens new window)的要求。简而言之，请确保只在 beforeMount 或者 mounted 访问浏览器 / DOM 的 API。

 // docs/.vuepress/enhanceApp.js

export default ({
 Vue,
 options,
 router,
 siteData,
}) => {
// FIXME:解决加载 import 'v-dialogs' 报错的问题
 Vue.mixin({
 mounted() {
 let dialog = require('v-dialogs')
 Vue.use(dialog)
 },
 });
}

如果你的模块通过 export default 导出一个 Vue 组件，那么你可以动态注册它：

优化改进

Thu, 07 Dec 2023 22:20:33 +0000

打包报超出500kB

执行 npm run build 打包出现如下问题 [BABEL] Note: The code generator has deoptimised the styling of docs test.md as it exceeds the max of 500KB

解决方案如下

1.提高参数 –max_old_space_size （提高到 102400）

  "scripts": {
 "docs:build": "set NODE_OPTIONS=--openssl-legacy-provider && node -- max_old_space_size=102400 ./node_modules/vuepress/cli.js build docs"
 }

2.项目根目录创建 .babelrc 并添加如下代码

 {
 "compact": false,
 "presets": ["env", "react", "stage-0"],
 "plugins": [
 "transform-runtime"
 ]
}

然后执行如下docs:build命令即可

站点信息模块

Tue, 23 Apr 2024 10:31:17 +0000

::: tip 说明

本内容介绍如何搭建本站首页的站点信息，以及每篇文章的浏览量统计，主要改动了文章页的浏览量统计，其余部分参考站点信息模块

:::

前言

本内容将在首页和每篇的文章页加入了一些元素，目前适用版本是 Vdoing v1.x。

如果你想集成到其他 Vuepress 主题，那么要添加卡片样式，修改挂载元素即可（建议先按照步骤完成一次再考虑集成）。

为什么添加卡片样式？本模块的站点信息是基于 Vdoing 自带的卡片样式，模块并没有添加任何卡片样式，所以想集成到其他主题，则需要参考 Vdoing 卡片样式进行添加，或者按照自己喜欢的样式进行添加

为什么修改挂载元素？本模块的挂载元素是基于 Vdoing 标签提供的 class 或 id，而其他主题的标签不一样，所以自行进行调试

本模块的所有功能支持大部分 Vuepress 主题，但是如何将所有功能展示到其他主题页面合适的地方，以及展示的样式等 DOM 技术，需要自己适配。

本站主题包

Sat, 14 Jun 2025 19:07:08 +0000

github地址

本站主题包

vitepress主题

基于teek的 Vitepress主题，只需少量配置即可使用，支持脚手架安装。

teek主题

vitepress主题

Teek 是一个轻量、简洁高效、灵活配置、易于扩展的 VitePress 主题。

本站主题包(hugo版)

hugo主题

基于 Hugo 框架，具备极速编译、跨平台支持、强大内容管理与纯静态部署优势的文档站

快速开始

Fri, 28 Mar 2025 10:40:47 +0000

依赖引用

lightbulb 提示

依赖可能非最新版本，请前往maven获取最新版本

Spring Boot 2地址

BackTop

Wed, 26 Mar 2025 06:54:48 +0000

说明

网页往下滑一定高度后点击可直接返回顶部，可注册为全局组件

使用

 <script setup lang="ts">
 import { BackTop } from "liyao-vue-common"
</script>

<template>
 <BackTop />
</template>

组件安装

Tue, 25 Feb 2025 07:51:59 +0000

基于 Vue 3 和 Element Plus 的上传组件库。

安装

 pnpm install liyao-vue-common

使用方法

全局引入

 import { createApp } from 'vue'
import App from './App.vue'
import liyaoVueCommon from 'liyao-vue-common'
import 'liyao-vue-common/dist/style.css'

const app = createApp(App)
app.use(liyaoVueCommon)
app.mount('#app')

然后在组件中直接使用：

 <template>
 <uploadCos :uploadFileApi="yourUploadFunction" />
 <uploadLocal :importFile="yourImportFunction" />
</template>

按需引入

 import { uploadCos, uploadLocal } from 'liyao-vue-common'
import 'liyao-vue-common/dist/style.css'

然后在组件中注册和使用：

kiftd使用docker部署

Fri, 24 Nov 2023 10:55:40 +0000

在/usr/local/kiftd下新建文件夹，后续文件都在此目录

上传kiftd文件到/usr/local/kiftd下

新建Dockerfile如下

::: tip 提示

Dockerfile必须跟文件同一目录，如果只有一个jar包，则跟jar包同一个目录；

:::

 # 使用jdk8镜像
FROM openjdk:8-jre-alpine

# 设置工作目录
WORKDIR /app

# 设置时区，否则跟北京时间有8个小时时间差
RUN rm -f /etc/localtime \
&& ln -sv /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
&& echo "Asia/Shanghai" > /etc/timezone

# 将kiftd-1.1.1-release文件夹拷贝到工作目录下,最后一个/表示是目录
# 如果只有一个jar包，则为COPY kiftd.jar /app/kiftd.jar
COPY kiftd-1.1.1-release/ /app/kiftd-1.1.1-release/

# 暴露端口
EXPOSE 8080

# 启动程序，如果只有一个jar包，则为 "/app/kiftd.jar"
CMD ["java","-jar","/app/kiftd-1.1.1-release/kiftd.jar","-start"]

WORKDIR /app跟VOLUME /tmp区别

WORKDIR 和 VOLUME 是 Dockerfile 中两个不同的指令，它们分别用于不同的目的。

增加登录页面

Tue, 28 Nov 2023 15:13:36 +0000

安装插件

安装v-dialogs模态对话框插件

:::: el-tabs

::: el-tab-pane label=yarn

 yarn add v-dialogs -D

::: ::: el-tab-pane label=npm

 npm i v-dialogs -D

::: ::::

创建登录表单文件

添加helper.js

 export const STORAGE_KEY = 'employee-auth'

// Do user authorization verify
export function checkAuth () {
 const auth = JSON.parse(localStorage.getItem(STORAGE_KEY))
 return auth && Object.keys(auth).length
}

添加Login.vue登录表单文件，显示在模态对话框中

 <template>
 <div class="login-container">
 <div class="login-form">
	<Date />
	<div class="form-row">
		<div class="form-header">账号</div>
		<input type="text" class="form-control" v-model="username">
	</div>
	<div class="form-row">
		<div class="form-header">密码</div>
		<input type="password" class="form-control" v-model="password">
	</div>
	<div class="btn-row">
		<button class="btn" @click="login">
		登录
		</button>
	</div>
 </div>
 </div>
</template>

<script>
import { STORAGE_KEY } from '../login/helper'

export default {
 name: 'Login',
 data () {
	return {
	 username: '',
	 password: ''
	}
 },
 methods: {
	login() {
		 let { expiration, token } = this.$themeConfig.loginInfo

		// 如果用户名和密码正确
		if (this.username && this.password) {
			// 创建用户数据对象
			const data = JSON.stringify({
				name: this.username,
				time: Math.round(new Date().getTime()/1000),
				expire: 86400 * expiration,
				accesskey: token
			})
			// 将用户数据存储到本地存储
			window.localStorage.setItem(STORAGE_KEY, data)
			// 跳转到首页
			this.$router.push('/', () => {
				// 显示登录成功提示
				dialog.DialogToast('登录成功', {
					messageType: 'success',
					position: 'topCenter',
					closeTime: 3
				})
			}, (error) => {
				// 显示系统错误提示
				dialog.DialogToast('系统错误', {
					messageType: 'error',
					position: 'topCenter',
					closeTime: 3
				})
			})
		} else {
			// 显示账号或密码错误提示
			dialog.DialogToast('账号或密码错误!', {
				messageType: 'error',
				position: 'topCenter',
				closeTime: 3
			})
		}
	}
 }
}
</script>

<style lang="stylus">
.login-container {
 width: 100%;
 height: 100vh;
 background-color: #2d3a4b;
}
.form-row {
 display: flex;
 flex-direction: row;
 margin-top: 1rem;
}
.login-form {
 padding: 1rem;
 display: flex;
 flex-direction: column;
 box-sizing: border-box;
 background-color: #2d3a4b;
 width:50%;
 position:absolute;
 left:50%; /* 定位父级的50% */
 top:50%;
 transform: translate(-50%,-50%); /*自己的50% */
}

.login-form .btn-row {
 margin: 2rem auto;
}

.login-form .btn {
 padding: 0.6rem 2rem;
 outline: none;
 background-color: #60C084;
 color: white;
 border: 0;
 width: 13rem;
}

.login-form .form-header {
 color: #f08d49;
 margin-bottom: 0.5rem;
 width: 3rem;
 padding-top: .5rem;
}

.login-form .form-control {
 padding: 0.6rem;
 border: 2px solid #ddd;
 margin-bottom: 0.5rem;
 box-sizing: border-box;
 outline: none;
 flex: 1;
 transition: border 0.2s ease;
}

.login-form .form-control:focus {
 border: 2px solid #aaa;
}
</style>

VuePress 配置

添加enhanceApp.js文件于/.vuepress

添加登录并启用全局前置守卫

Tue, 16 Jan 2024 17:32:13 +0000

新增登录页面

在.vuepress/components新增Login.vue

 <template>
 <div class="login-container">
 <div class="login-form">
	<Date />
	<div class="form-row">
		<div class="form-header">账号</div>
		<input type="text" class="form-control" v-model="username">
	</div>
	<div class="form-row">
		<div class="form-header">密码</div>
		<input type="password" class="form-control" v-model="password">
	</div>
	<div class="btn-row">
		<button class="btn" @click="login">
		登录
		</button>
	</div>
 </div>
 </div>
</template>

<script>
import { STORAGE_KEY } from '../login/helper'
import { DialogToast } from 'v-dialogs'

export default {
 data () {
	return {
	 username: '',
	 password: ''
	}
 },
 methods: {
	 login() {
		 let { time, token } = this.$themeConfig.loginInfo
	 if (this.username && this.password ) {
		const data = JSON.stringify({
		 name: this.username,
		 time: Math.round(new Date().getTime()/1000),
		 expire: 86400 * time,
		 accesskey: token
		})
		window.localStorage.setItem(STORAGE_KEY, data)
		this.$router.push({ name: 'v-413f20b7' }, () => {
			DialogToast('登录成功', {
				messageType: 'success',
				position: 'topCenter',
				closeTime: 3
			})
		}, (error) => {
			DialogToast('系统错误', {
				messageType: 'error',
				position: 'topCenter',
				closeTime: 3
			})
		})		
	 } else {
		DialogToast('账号或密码错误!', {
			messageType: 'error',
			position: 'topCenter',
			closeTime: 3 
		})
	 }
	}
 }
}
</script>

<style lang="stylus">
.login-container {
 width: 100%;
 height: 100vh;
 background-color: #2d3a4b;
}
.form-row {
 display: flex;
 flex-direction: row;
 margin-top: 1rem;
}
.login-form {
 padding: 1rem;
 display: flex;
 flex-direction: column;
 box-sizing: border-box;
 background-color: #2d3a4b;
 width:50%;
 position:absolute;
 left:50%; /* 定位父级的50% */
 top:50%;
 transform: translate(-50%,-50%); /*自己的50% */
}

.login-form .btn-row {
 margin: 2rem auto;
}

.login-form .btn {
 padding: 0.6rem 2rem;
 outline: none;
 background-color: #60C084;
 color: white;
 border: 0;
 width: 13rem;
}

.login-form .form-header {
 color: #f08d49;
 margin-bottom: 0.5rem;
 width: 3rem;
 padding-top: .5rem;
}

.login-form .form-control {
 padding: 0.6rem;
 border: 2px solid #ddd;
 margin-bottom: 0.5rem;
 box-sizing: border-box;
 outline: none;
 flex: 1;
 transition: border 0.2s ease;
}

.login-form .form-control:focus {
 border: 2px solid #aaa;
}
</style>

 module.exports = {
 ...
 
 additionalPages: [
 {
 path: '/login/',
 frontmatter: {
 layout: 'Login', //.vuepress/components新增的页面，名称得同名
 article: false // 设置为非文章页
 }
 }
 ],
 
 themeConfig: {
 ...
 }
 
}

添加登录验证逻辑helper.js

 export const STORAGE_KEY = 'employee-auth'

export function checkAuth() {
 // 通过 localStorage 对象从浏览器本地存储中获取指定键（STORAGE_KEY）对应的值
 // 使用 JSON.parse 将其转换为对象。
 const auth = JSON.parse(localStorage.getItem(STORAGE_KEY))
 // Object.keys(auth) 返回一个由对象的键组成的数组，而 .length 属性表示数组的长度，因此这个条件检查对象是否非空。
 // 返回值是一个布尔值。如果 auth 存在且至少包含一个键，那么表达式的结果为 true，否则为 false。
 return auth && Object.keys(auth).length 
}

添加路由守卫

安装v-dialogs模态对话框插件

Cos对象存储

Fri, 28 Mar 2025 11:46:49 +0000

引用

 @RestController
@Slf4j
@RequestMapping("/cos")
public class CosController {
 ...
 @Resource
 private CosService cosService;
 ...
}

文件上传

 @PostMapping("/upload")
@Operation(summary = "文件上传")
public BaseResponse<String> upload(MultipartFile file, String biz) {
 return cosService.uploadObject(file, biz);
}

文件下载到本地

  @PostMapping("/downloadLocal")
 @Operation(summary = "文件下载到本地")
 public void downloadToLocal(String url, String localFilePath) {
 cosService.download(url, localFilePath);
}

文件下载到流

  @PostMapping("/download")
 @Operation(summary = "文件下载到流")
 public byte[] download(String url) throws IOException {
 return cosService.getObject(url);
}

文件删除

 @PostMapping("/delete")
@Operation(summary = "文件删除")
public BaseResponse<String> delete(String url) {
 return cosService.deleteObject(url);
}

完整代码

 @RestController
@Slf4j
@RequestMapping("/cos")
public class CosController {

 @Resource
 private CosService cosService;

 @PostMapping("/upload")
 @Operation(summary = "文件上传")
 public BaseResponse<String> upload(MultipartFile file, String biz) {

 return cosService.uploadObject(file, biz);

 }

 @PostMapping("/downloadLocal")
 @Operation(summary = "文件下载到本地")
 public void downloadToLocal(String url, String localFilePath) {

 cosService.download(url, localFilePath);

 }

 @PostMapping("/download")
 @Operation(summary = "文件下载到流")
 public byte[] download(String url) throws IOException {

 return cosService.getObject(url);

 }

 @PostMapping("/delete")
 @Operation(summary = "文件删除")
 public BaseResponse<String> delete(String url) {

 return cosService.deleteObject(url);

 }


}

GlobalTip

Wed, 26 Mar 2025 06:54:48 +0000

说明

在页面上出现时间提示及问候语，3秒后自动消失，可注册为全局组件，vitepress使用时可插入doc-top插槽

使用

 <script setup lang="ts">
 import { GlobalTip } from "liyao-vue-common"
</script>

<template>
 <GlobalTip />
</template>

基于本库开发新组件

Tue, 25 Mar 2025 07:54:43 +0000

注册新组件

在 src/components 目录下创建新组件，然后在入口文件 src/index.ts 中导入并注册该组件。

 // 导入新组件
import uploadCos from '../Upload/uploadCos.vue';
import uploadLocal from '../Upload/uploadLocal.vue';
import newComponent from '../Your/NewComponent.vue'; // 添加新组件导入

// 组件注册表 - 只需要在这里添加新组件
const componentList = {
 uploadCos,
 uploadLocal,
 newComponent // 添加新组件到注册表
};

添加类型声明

在 types/index.d.ts 文件中添加类型声明，需要在四个地方添加

 // 1. 导入时的组件类型定义
declare module 'liyao-vue-common' {
 export const uploadCos: DefineComponent<{}, {}, any>;
 export const uploadLocal: DefineComponent<{}, {}, any>;
 export const newComponent: DefineComponent<{}, {}, any>; // 添加新组件类型
 export const install: (app: App) => void;
}

// 2. Vue 全局组件类型定义
declare module 'vue' {
 export interface GlobalComponents {
 uploadCos: DefineComponent<{}, {}, any>;
 uploadLocal: DefineComponent<{}, {}, any>;
 newComponent: DefineComponent<{}, {}, any>; // 添加全局组件类型
 }
}

// 3. 组件文件模块声明
declare module '@/components/Upload/uploadCos.vue' {
 const component: DefineComponent<{}, {}, any>;
 export default component;
}

declare module '@/components/Upload/uploadLocal.vue' {
 const component: DefineComponent<{}, {}, any>;
 export default component;
}

// 添加新组件的模块声明
declare module '@/components/Your/NewComponent.vue' {
 const component: DefineComponent<{}, {}, any>;
 export default component;
}

// 4. 默认导出
declare const _default: {
 install: (app: App) => void;
 uploadCos: DefineComponent<{}, {}, any>;
 uploadLocal: DefineComponent<{}, {}, any>;
 newComponent: DefineComponent<{}, {}, any>; // 添加默认导出类型
};

更新版本号并发布:

 # 修改 package.json 中的版本号
pnpm pub

Captcha验证码使用

Fri, 28 Mar 2025 11:46:03 +0000

引用

首先在项目中引用EasyCaptchaService

 public class CaptchaController {
 ...
 @Resource
 private EasyCaptchaService captchaService;
 ...
}

生成验证码

 @PostMapping("/get")
@Operation(summary = "生成验证码")
public BaseResponse<CaptchaResult> captcha() {
 return captchaService.generateCaptcha();
}

校验验证码

 @PostMapping("/check")
@Operation(summary = "校验验证码")
public BaseResponse<String> verifyCaptcha(@RequestBody CaptchaCheck CaptchaCheck){
 String verifyCode = CaptchaCheck.getVerifyCode();
 String verifyCodeKey = CaptchaCheck.getVerifyCodeKey();
 return captchaService.verifyCaptcha(verifyCode, verifyCodeKey);
}

完整代码

 @RestController
@Slf4j
@RequestMapping("/captcha")
public class CaptchaController {

 @Resource
 private EasyCaptchaService captchaService;

 @PostMapping("/get")
 @Operation(summary = "生成验证码")
 public BaseResponse<CaptchaResult> captcha() {
 return captchaService.generateCaptcha();
 }

 @PostMapping("/check")
 @Operation(summary = "校验验证码")
 public BaseResponse<String> verifyCaptcha(@RequestBody CaptchaCheck CaptchaCheck) {
 String verifyCode = CaptchaCheck.getVerifyCode();
 String verifyCodeKey = CaptchaCheck.getVerifyCodeKey();
 return captchaService.verifyCaptcha(verifyCode, verifyCodeKey);

 }
}

GithubCorner

Thu, 27 Mar 2025 08:30:07 +0000

说明

Github角标

使用

 <script setup lang="ts">
 import { GithubCorner } from "liyao-vue-common"
</script>


<template>
// 需要自己写css确定要放的位置， href为跳转的链接
 <GithubCorner :href="'https://github.com'"/> 
</template>

参数

 const props = defineProps({
 href: {
 type: String,
 default: '',
 }
})

vue3组件封装

Mon, 24 Mar 2025 17:21:56 +0000

Vue 3 组件封装与 npm 发布指南

一、概述

Vue 3 提供了强大的组件化能力，通过封装组件，可以实现高度灵活的复用。本文将介绍如何封装两种类型的 Vue 3 组件：

动态插槽组件：支持宿主项目按需定义任意数量的插槽。
普通组件：封装一个简单的功能组件，例如一个按钮组件。

我们将把这两种组件封装到一个 npm 包中，方便其他开发者下载和使用。

二、封装组件

创建项目结构

创建项目文件夹，例如 vue3-components。
在项目文件夹中初始化 npm 项目：

 npm init -y

安装 Vue 3 和其他必要的依赖：

 npm install vue@3

编写动态插槽组件

在 src 文件夹中创建动态插槽组件文件，例如 DynamicSlots.vue：

 <template>
 <div class="dynamic-slots">
 <slot v-for="(_, name) in $slots" :name="name" :key="name" />
 </div>
</template>

<script>
export default {
 name: "DynamicSlots",
};
</script>

<style scoped>
.dynamic-slots {
 display: flex;
 flex-direction: column;
 gap: 10px;
}
</style>

编写普通组件

在 src 文件夹中创建普通组件文件，例如 MyButton.vue：

自动生成frontmatter

Tue, 18 Mar 2025 00:03:50 +0000

vitepress-plugin-setfrontmatter使用

github地址

vitepress-plugin-setfrontmatter

vitepress插件

这是一个适用于vitepress的 Vite 插件，vitepress启动时，插件会给指定的 markdown 自动生成frontmatter

特性

✨ 自动为Markdown文件添加缺失的frontmatter字段（标题、日期、永久链接等）
🔄 支持自定义frontmatter转换函数
📁 支持自动生成基于文件路径的分类信息
🗑️ 支持删除指定的frontmatter字段
🌐 兼容VitePress的国际化配置

安装

安装 vitepress-plugin-setfrontmatter 插件

License使用

Fri, 28 Mar 2025 11:46:49 +0000

引用

 @RestController
@Slf4j
@RequestMapping("/license")
public class LicenseController {
 
 @Resource
 private LicenseService licenseService;

 @Resource
 private LicenseVerify licenseVerify;
}

获取服务器硬件信息

 @Operation(summary = "获取服务器硬件信息")
@GetMapping("/getServerInfos")
public BaseResponse<LicenseCheckModel> getServerInfos(@RequestParam String osName) {
 return licenseService.getServerInfos(osName);
}

生成证书

 @Operation(summary = "生成证书")
@PostMapping("/generateLicense")
public Map<String, Object> generateLicense(@RequestBody @Valid LicenseCreatorParam param) {
 return licenseService.generateLicense(param);
}

上传授权文件

 @Operation(summary = "上传授权文件")
@PostMapping("/uploadLicense")
public BaseResponse<String> uploadLicense(@RequestParam("file") MultipartFile file) throws Exception {
 return licenseService.uploadFileByParam(file);
}

校验证书

 @Operation(summary = "校验证书")
@GetMapping("/verifyLicense")
public BaseResponse<Long> verifyLicense() throws Exception {
 return licenseVerify.verifyLicense();
}

wangEditor

Thu, 27 Mar 2025 08:30:07 +0000

说明

在线Marndown编辑器

使用

  <script setup lang="ts">
 import { WangEditor } from "liyao-vue-common"
 </script>
 
 <template>
 <WangEditor />
 </template>

可选参数

 // 定义 props
const props = defineProps({
 modelValue: {
 type: String,
 default: '',
 },
 mode: {
 type: String,
 default: 'default',
 },
 readOnly: {
 type: Boolean,
 default: false,
 },
 toolbarConfig: {
 type: Object,
 default: () => ({
 excludeKeys: ['fullScreen'],
 }),
 },
 uploadFileApi: Function,
 uploadVideoApi: Function,
})

// 定义 emits
const emit = defineEmits(['update:modelValue'])

更多配置请查看wangEditor官方文档

vitepress-plugin-link使用

Tue, 25 Mar 2025 09:24:59 +0000

vitepress-plugin-link

github地址

vitepress-plugin-link

vitepress插件

这是一个适用于 vitepress的 Vite 插件，在vitepress启动后读取 markdown 文档 frontmatter的 url

特性

🚀🚀 支持给 markdown 文档设置唯一的访问 永久链接，不再因为 markdown 文档路径移动而导致访问地址发生变化
🚀 读取 markdown 文档 frontmatter 的 url，挂载到 themeConfig.urls
🚀 提供 useurl hooks 函数拓展 router 方法，支持 router.push(href) 跳转到永久链接或实际的文件路径
🚀 支持 locales 国际化，自动给 永久链接 添加语言前缀，不同语言的永久链接不会重复
🚀 支持 rewrite 路由重写，最终得到的文档路径是 rewrite 路由重写后的路径
🚀 永久链接 支持导航栏激活高亮

安装

安装 vitepress-plugin-link 插件

Hooks封装

Mon, 24 Mar 2025 17:12:29 +0000

Vue 3 Hooks 封装与 npm 使用指南

一、概述

Vue 3 的 Composition API 提供了强大的逻辑复用能力，通过封装 Hooks，可以将组件的逻辑进行模块化封装，方便在多个组件中复用。本文将介绍如何封装 Vue 3 Hooks 并将其发布到 npm，以便其他开发者可以方便地下载和使用。

二、封装 Hooks

创建项目结构

1、创建项目文件夹，例如 vue3-hooks。

2、在项目文件夹中初始化 npm 项目：

 npm init -y

3、安装 Vue 3 和其他必要的依赖：

 npm install vue@3

编写 Hooks

在 src 文件夹中创建一个 Hook 文件，例如 useCounter.js：

 // src/useCounter.js
import { ref } from 'vue';

export function useCounter() {
 const count = ref(0);
 const increment = () => {
 count.value++;
 };
 const decrement = () => {
 count.value--;
 };
 return {
 count,
 increment,
 decrement
 };
}

配置构建工具

使用 Vite 进行构建配置：

正则校验

Wed, 02 Jul 2025 19:59:46 +0000

安装

 npm install regular-plus -D

 yarn add regular-plus -D

 pnpm add regular-plus -D

使用

正则校验

 import regular from 'regular-plus';
 
console.log(regular.email.test('someemail@gmail.com')) // outputs true

可用校验

 email: RegExp; // 邮箱地址
url: RegExp; // URL地址
domain: RegExp; // 域名
ipv4: RegExp; // IPv4地址
creditCard: RegExp; // 信用卡号
slug: RegExp; // 全部由小写字母（a-z）、数字（0-9）、或 - 构成且不能有空格、下划线、大写字母、中文、特殊符号等
number: RegExp; // 正整数数字字符串
html: RegExp; // HTML标签匹配,
phone: RegExp; // 手机号码
sfzReg: RegExp; // 身份证号码
hexcolor: RegExp; // 十六进制颜色
date: RegExp; // 日期格式 YYYY-MM-DD
dateReg: RegExp; // 日期时间格式 YYYY-MM-DD HH:mm:ss
int: RegExp; // 整数
float: RegExp; // 浮点数
post: RegExp; // 邮政编码
qqReg: RegExp; // QQ号
wxReg: RegExp; // 微信号
carNoReg: RegExp; // 车牌号
password: RegExp; // 密码，至少8位，包含大小写字母和数字
fileExt: RegExp; // 文件拓展名的校验

自定义文件扩展名校验

默认可用类型

 type FileType = 'image' | 'doc' | 'archive';
const fileTypeExtMap: Record<FileType, string[]> = {
 image: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'],
 doc: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'md'],
 archive: ['zip', 'rar'],
};

扩展 FileType

可以通过 TypeScript 的联合类型扩展 FileType

Excel导入导出

Fri, 28 Mar 2025 11:47:47 +0000

引用

 @RestController
@RequestMapping("/excel")
public class ExcelController {
 ...
 @Resource
 private ExcelService excelService;
 ...
}

Excel导入

基本导入

 @PostMapping("/upload")
@Operation(summary = "excel导入")
@ResponseBody
public List<Excel> upload(@RequestExcel List<Excel> dataList) {

 // 数据校验
 if (dataList == null || dataList.isEmpty()) {
 throw new BusinessException(ErrorCode.PARAMS_ERROR, "上传数据为空");
 }

 // 批量保存到数据库
 boolean result = excelService.saveBatch(dataList);
 if (!result) {
 throw new BusinessException(ErrorCode.OPERATION_ERROR);
 }

 return dataList;
}

忽略部分字段

导入的字段会按给定的实体类顺序来，所以当某个字段不需要导入时必须用@ExcelIgnore，使得导入的Excel表字段的顺序与实体类一致

monacoEditor

Thu, 27 Mar 2025 08:30:07 +0000

说明

在线代码编辑器

使用

  <script setup lang="ts">
 import { MonacoEditor } from "liyao-vue-common"
 </script>
 
 <template>
 <MonacoEditor />
 </template>

可选参数

 export const editorProps = {
 width: {
 type: [String, Number] as PropType<string | number>,
 default: '100%'
 },
 height: {
 type: [String, Number] as PropType<string | number>,
 default: '500px'
 },
 theme: {
 type: String as PropType<Theme>,
 validator(value: string): boolean {
 return ['vs', 'hc-black', 'vs-dark'].includes(value)
 },
 default: 'vs-dark'
 },
 options: {
 type: Object as PropType<Partial<Options>>,
 default() {
 return {
 automaticLayout: true,
 foldingStrategy: 'indentation',
 renderLineHighlight: 'all',
 selectOnLineNumbers: true,
 minimap: {
 enabled: false
 },
 readOnly: false,
 contextmenu: true,
 fontSize: 16,
 scrollBeyondLastLine: false,
 overviewRulerBorder: false
 }
 }
 }
}

更多配置请查看MonacoEditor官方文档

自动生成侧边栏

Tue, 25 Mar 2025 09:26:56 +0000

github地址

vitepress-plugin-sidebar-depth

vitepress插件

这是一个适用于vitepress的 Vite 插件，在vitepress启动后扫描 markdown 文档来自动生成侧边栏

特性

🚀 扫描项目的目录，自动生成侧边栏数据，挂载到 themeConfig.sidebar
🚀 支持自定义扫描的递归深度
🚀 支持 01.guide.md 带有序号的文件格式，在渲染侧边栏数据时，带序号的文件位置比不带序号的文件高
🚀 支持 locales 国际化，挂载到 locales.[lang].themeConfig.sidebar

说明：在同层目录下，如果存在相同序号的文件时，后面的文件会覆盖前面的文件

nginx常用配置

Wed, 02 Jul 2025 20:40:06 +0000

配置HTTPS

 server {
 listen 443 ssl;
 server_name xiaoying.org.cn;
 root /usr/local/dist; #前端打包文件位置

 #域名证书文件名称
 ssl_certificate /etc/nginx/fullchain.cer;
 #域名证书私钥文件名称
 ssl_certificate_key /etc/nginx/xiaoying.org.cn.key;
 
 #请按照以下协议配置
 ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
 #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
 ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
 ssl_prefer_server_ciphers on;
 ssl_session_cache shared:SSL:1m;
 ssl_session_timeout 10m;

 location ^~ /api/ { #后端接口前缀
 proxy_set_header Host $host;
 proxy_set_header X-Forwarded-Proto $scheme;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_pass http://127.0.0.1:8080; #后端接口地址
 }

 include /etc/nginx/default.d/*.conf;

 error_page 404 /404.html;
 location = /40x.html {
 }

 error_page 500 502 503 504 /50x.html;
 location = /50x.html {
 }
 }

开启gzip压缩静态文件

配置 GZip 压缩

gzip 可以在 http, server, location 中和配置，这里配置到 http 下是全局配置，

重写文章路由

Sat, 31 May 2025 00:40:58 +0000

VitePress 插件：自动生成 sidebar 侧边栏和 url rewrites 映射，支持数字前缀排序、collapsed 配置、url 匹配高亮、目录/文件名美化等。

github地址

vitepress-plugin-sidebar-url

vitepress插件

这是一个适用于vitepress的 Vite 插件，vitepress启动时，插件会重写路由用url作为链接并生成侧边栏

安装

 npm install vitepress-plugin-sidebar-url -D

 yarn add vitepress-plugin-sidebar-url -D

 pnpm i vitepress-plugin-sidebar-url -D

用法

配置

 import { defineConfig } from 'vitepress'
import SidebarurlPlugin, { generatedSidebar, generatedRewrites } from 'vitepress-plugin-sidebar-url'
// import rewritesJson from '../rewrites.json'

export default defineConfig({
 vite: {
 plugins: [
 SidebarurlPlugin({
 root: 'docs', //根目录
 dir: 'docs/articles', //Markdown文章目录路径
 rewritesPath: 'docs/rewrites.json', //重写规则文件路径
 // rewrites: rewritesJson.rewrites, //直接提供的重写规则，启动时注释这个，生成json后再写，后续优先使用这个本地的json
 options: { collapsed: true }, //侧边栏是否折叠
 ignoreDirs: { //忽略目录
 rewriteIgnores: [], 
 sidebarIgnores: [] 
 },
 navLinks: [ //导航栏
 { text: '组件', link: '/pages/fe4521' },
 { text: '后端', link: '/pages/571de5' },
 { text: '资源', link: '/pages/87a36a' }
 ],
 })
 ]
 },
 // 使用插件自动生成的侧边栏和重写规则
 rewrites: generatedRewrites, 
 themeConfig: {
 sidebar: generatedSidebar
 }
})

 export interface SidebarurlOptions {
 /**
 * 根目录, 默认为 'docs'
 */
 root?: string; 
 /**
 * Markdown文章目录路径，默认为 'docs/articles'
 */
 dir?: string; 
 /**
 * 重写规则文件路径，默认为 'docs/rewrites.json'
 */
 rewritesPath?: string; 
 /**
 * 直接提供的重写规则，一般为rewritesJson.rewrites，rewritesJson为生成的json文件
 *
 */
 rewrites?: Record<string, string>, 
 /**
 * sidebar配置，是否折叠
 */
 options?: { collapsed: boolean }, 
 /**
 * 导航栏
 */
 navLinks?: { text: string, link?: string, items?: any[] }[] | null | undefined, 
 /**
 * 忽略的侧边栏目录列表
 *
 * */
 ignoreDirs?: IgnoreDirs; 
}


export interface IgnoreDirs {
 /**
 * 重写规则默认忽略目录为 [".vitepress", "node_modules", "public", "dist"] 
 */
 rewriteIgnores: string[];
 /**
 * 侧边栏默认忽略目录为 [".vitepress", "node_modules", "public", "dist", "@pages", "index.md"] 
 */
 sidebarIgnores: string[];
}

插件会在启动时生成侧边栏和重写规则，优先从rewrites参数获取重写规则，其次从生成的json文件读取，建议生成json文件后配置该参数

CopyButton

Fri, 04 Apr 2025 03:25:42 +0000

说明

复制组件，点击即可复制对应的内容

使用

 <template>
 <div>
 <copy-button :text="InputText"></copy-button>
 <el-input v-model="InputText" />
 </div>
</template>

<script setup lang="ts">
import CopyButton from 'liyao-vue-common';

const InputText = ref('');
</script>

数据脱敏

Fri, 28 Mar 2025 13:10:11 +0000

添加注解脱敏

在字段上加上@Desensitization注解及对应的类型即可脱敏

 @Data
public class Person {
 @Desensitization(type = DesensitizationTypeEnum.PHONE)
 private String phone;

 @Desensitization(type = DesensitizationTypeEnum.MY_RULE, startInclude = 3, endExclude = 7)
 private String customPhone;

 @Desensitization(type = DesensitizationTypeEnum.EMAIL)
 private String email;
 
}

所有类型如下

 MY_RULE //可自定义脱敏的位置
USER_ID //用户id
CHINESE_NAME //中文姓名
ID_CARD // 身份证号
FIXED_PHONE //座机号码
PHONE //手机号码
ADDRESS //地址
EMAIL //电子邮件
PASSWORD //密码
CAR_LICENSE //中国大陆车牌，包含普通车辆、新能源车辆
BANK_CARD //银行卡号

使用

 @PostMapping("/")
public Person testDesensitization(){
 Person person = new Person();
 person.setPhone("12345678901");
 person.setCustomPhone("12345678901");
 person.setEmail("12345678901@qq.com");
 System.out.println(person);
 return person;
}

集成Coze国际版

Sun, 10 Aug 2025 23:10:46 +0000

创建智能体

访问扣子主页填写自己的智能体信息，这里可以自定义，想填写什么就填写什么就行。

编排智能体

创建好了之后就需要去编排这个智能体，我仅仅填写了一小部分的人设与回复逻辑，然后就让 AI 润色了一下，设置技能，例如开场白和预置问题。

防重提交

Sat, 05 Apr 2025 09:57:38 +0000

lightbulb info

为防止用户在短时间内多次提交相同请求，系统提供了防重复提交功能。通过简单的注解配置，即可实现此功能。

使用防重提交

在需要防重复提交的接口上添加 @RepeatSubmit 注解即可。通过注解参数 expire，可以灵活控制重复提交的时间间隔（单位：秒）。如果不设置，默认时间为 5 秒。

uploadCos使用

Tue, 25 Mar 2025 08:27:21 +0000

说明

拖拽式文件上传组件，主要用于图片上传到对象存储服务（如COS、OSS等）。

参数

属性名	类型	必填	默认值	说明
`uploadFileApi`	`Function`	是	-	上传文件的API函数
`modelValue`	`String`	否	""	图片URL，支持v-model双向绑定
`maxFileSize`	`Number`	否	10	单个文件上传大小限制（单位：MB）
`accept`	`String`	否	“*”	允许上传的文件类型
`dataPath`	`Array<String>`	否	`['data']`	数据在响应中的路径，如`['result','url']`表示取`response.result.url`

插槽

插槽名	说明
`default`	默认插槽，可自定义拖拽区域内容
`tip`	提示信息插槽，显示在上传区域下方

使用示例

基本使用

 <upload-cos v-model="imageUrl" :uploadFileApi="uploadToServer" xmlns=""></upload-cos>

带参数使用

 <!-- 带参数使用示例 -->
<template>
 <upload-cos
 v-model="imageUrl"
 :uploadFileApi="uploadToServer"
 :maxFileSize="5"
 accept="image/png, image/jpeg"
 :dataPath="['result', 'path']"
 ></upload-cos> <!-- 确保闭合标签 -->
</template>

使用插槽自定义内容

 <template>
 <div>
 <upload-cos :uploadFileApi="uploadToServer">
 <!-- 自定义上传区域 -->
 <template #default>
 <div class="custom-upload-area">
 <i class="el-icon-upload"></i>
 <div>点击或拖拽图片到此区域上传</div>
 </div>
 </template>
 
 <!-- 自定义提示信息 -->
 <template #tip>
 <div class="custom-tip">支持jpg、png格式，文件小于5MB</div>
 </template>
 </upload-cos>
 </div>
</template>

<script setup>
// 上传函数示例
function uploadToServer(file: File) {
 const formData = new FormData();
 formData.append("file", file);
 formData.append("biz", "user_avatar");
 return request({
 url: "/api/cos/upload",
 method: "post",
 data: formData,
 headers: {
 "Content-Type": "multipart/form-data",
 },
 });
 }
</script>

管理API响应和错误处理

Tue, 15 Apr 2025 20:00:07 +0000

简介

这是一个基于Spring Boot 的轻量级工具包，用于统一处理应用程序中的错误码、异常和响应格式。该starter提供了一套完整的异常处理机制，帮助开发者更加规范和高效地管理API响应和错误处理。

功能特点

统一错误码管理：预定义常用错误码，支持自定义扩展
自定义业务异常：提供BusinessException类，支持错误码和自定义错误信息
异常抛出工具类：ThrowUtils工具类简化异常抛出操作
全局异常处理：自动捕获并处理各类异常，转换为统一的响应格式
响应结果封装：统一API响应格式，提供成功和失败响应的快捷方法
参数校验异常处理：自动处理参数校验失败的情况
自动配置：支持Spring Boot自动配置，零配置即可使用

安装方法

lightbulb info

依赖可能非最新版本，请前往maven获取最新版本

Spring Boot 2地址

uploadLocal使用

Tue, 25 Mar 2025 07:59:00 +0000

说明

按钮式文件上传组件

参数

属性名	类型	必填	默认值	说明
importFile	Function	是	-	导入文件处理函数，接收文件对象作为参数
allowedExtensions	Array	否	[]	允许的文件扩展名，如 [’.xlsx’, ‘.xls’, ‘.csv’]
maxFileSize	Number	否	10	单个文件上传大小限制（单位：MB）
acceptType	String	否	“*”	允许上传的文件类型

插槽

插槽名	说明
default	默认插槽，用于自定义上传按钮文本
trigger	触发按钮插槽，可完全自定义上传按钮

使用示例

基本使用

  <uploadLocal :importFile="handleImportFile">
 导入Excel
 </uploadLocal>

带参数使用

 <uploadLocal 
 :importFile="handleImportFile"
 :allowedExtensions="['.xlsx', '.xls', '.csv']"
 :maxFileSize="20"
 acceptType=".xlsx,.xls,.csv"
>
 导入
</uploadLocal>

使用插槽自定义内容

 <template>
 <div>
 <uploadLocal :importFile="handleImportFile">
 <!-- 自定义按钮文本 -->
 点击导入数据文件
 </uploadLocal>
 
 <!-- 完全自定义按钮 -->
 <uploadLocal :importFile="handleImportFile">
 <template #trigger>
 <el-button type="success" icon="el-icon-upload">
 导入数据
 </el-button>
 </template>
 </uploadLocal>
 </div>
</template>

<script setup>
// 处理导入Excel文件
const handleImportFile = (file) => {
 console.log('处理导入的文件:', file.name)
 // 实际项目中在这里处理Excel文件
 console.log('文件大小:', (file.size / 1024 / 1024).toFixed(2) + 'MB')
 console.log('文件类型:', file.type)
}
</script>

使用uploadLocal实现uploadCos的UI

可以通过利用uploadLocal组件的插槽功能，实现与uploadCos相似的UI效果：

配置meilisearch

Sat, 06 Sep 2025 16:44:03 +0000

_1、服务端配置

_1.1、部署

官方对于部署的介绍非常详细，各种方案都提供了，我这里选择使用 docker 来进行部署。

添加服务启动脚本start.sh到/tmp/scraper目录

 docker run -itd --name meilisearch -p 7700:7700 --restart=always \
 -e MEILI_ENV="production" -e MEILI_NO_ANALYTICS=true \
 -e MEILI_MASTER_KEY="自定义一个不少于16字节的秘钥" \
 -v $(pwd)/meili_data:/meili_data \
 getmeili/meilisearch

自建的时候，需要将环境变量声明为生产，并且必须指定 master-key，否则将会提示无法使用。

然后运行该脚本，服务启动，通过监听日志，查看服务状态是否正常。

也可以请求服务的健康接口进行验证：

 $ curl -s http://localhost:7700/health | jq
{
 "status": "available"
}

注意，生产模式下，只有这一个接口是不需要秘钥认证即可访问的，其他接口访问的时候都需要带上秘钥。

_1.2、创建搜索的key

上边有了一个 master-key 用于爬虫抓取使用，还需要创建一个只有搜索权限的 key，可通过如下命令进行创建search.sh到 /tmp/scraper目录

 curl \
 -X POST 'http://localhost:7700/keys' \
 -H 'Content-Type: application/json' \
 -H 'Authorization: Bearer 你自定义的秘钥' \
 --data-binary '{
 "description": "vp.xiaoying.org.cn key",
 "actions": ["search"],
 "indexes": ["blog"], // 第四步建立索引抓取配置中的index_uid的值需与该值保持一致
 "expiresAt": "2099-01-01T00:00:00Z"
 }'

创建完成之后，能看到返回内容中有一个 key 的字段，就是这个只有搜索权限的 key 了。

认证模块

Sat, 26 Apr 2025 11:01:09 +0000

Spring Boot 3 认证模块

简介

liyao-spring-boot3-starter-auth 是一个基于 Spring Boot 3 的认证组件，提供了用户认证、权限校验等功能，可以快速集成到 Spring Boot 3 项目中，简化认证和授权的开发工作。

功能特性

用户登录认证
基于注解的权限校验
可配置的路径过滤
支持用户角色管理
与 Spring Boot 3 无缝集成

安装方法

lightbulb info

依赖可能非最新版本，请前往maven获取最新版本

1、在项目的 pom.xml 文件中添加以下依赖

pagination

Thu, 27 Mar 2025 08:31:18 +0000

说明

分页组件

使用

 <template>
 ...
 <Pagination
 v-model:limit="page.pageSize"
 v-model:page="page.current"
 :total="total"
 @pagination="getUser"
 >
 </Pagination>
 ...
 </div>
</template>

<script lang="ts" setup>
import { Pagination } from "liyao-vue-common"

const page: Record<string, any> = ref<UserQueryRequest>({
 current: 1,
 pageSize: 10
});

let total: number;

onMounted(() => {
 getUser();
});

 
function getUser() {
 return new Promise((resolve) => {
 // 后端获取数据接口...
 UserControllerService.listPageVo(page.value).then((res) => {
 ...
 total = parseInt(res.data?.total);
 ...
 });
 });
}

</script>

Chrome开启GeminiAI

Wed, 04 Feb 2026 18:29:56 +0000

谷歌重大更新：国内手动开启 Gemini AI 侧边栏与 Auto Browse 自动浏览全攻略

🛠️ 功能亮点

Google Chrome 集成 Gemini 3 模型后，已从单一工具转变为智能助手：

Gemini 侧边栏 (Side Panel)： 无需切换标签页即可总结内容、对比评论或同步日历。
Auto Browse (自动浏览)： 具备代理能力 (Agentic Action)，可代劳预订、填表、收集文件或智能购物。
Nano Banana： 支持通过提示词直接在线修改网页图像。
个人智能化： 具备长期记忆，根据历史对话提供个性化建议。

第一步：修改 Local State 配置文件

注意：操作前请彻底关闭 Chrome 浏览器并备份该文件。

文件路径

Windows: %LOCALAPPDATA%\Google\Chrome\User Data\Local State
macOS: ~/Library/Application Support/Google/Chrome/Local State
Linux: ~/.config/google-chrome/Local State

编辑内容

使用文本编辑器（如记事本、VS Code）打开 Local State 文件，搜索并修改以下三项：

variations_permanent_consistency_country: 将值由 ["版本号","cn"] 改为 ["版本号","us"]。
variations_country: 将值由 "cn" 改为 "us"。
is_glic_eligible: 将值由 false 改为 true。

第二步：配置 Chrome Flags 标志位

在 Chrome 地址栏输入：chrome://flags
搜索以下项并将其状态从 Default 修改为 Enabled：
- #glic
- #glic-side-panel

第三步：语言与环境设置

修改首选语言： * 进入 Chrome 设置 -> 语言 (Languages)。
- 添加 English，点击右侧三个点，选择“置顶”并设置为浏览器显示语言。
- 注：若不使用英文界面，可能仅能使用“帮我写 (Help me write)”功能，无法开启完整智能体。
网络环境： 必须确保处于美国节点网络环境下运行。
重启浏览器： 重启并登录 Chrome 后，右上角会出现 Gemini 图标，点击即可开启侧边栏。

💡 自动化进阶工具

打开powershell执行以下命令即可

login

Thu, 02 Oct 2025 15:22:25 +0000

about

Tue, 16 Sep 2025 00:00:00 +0000

归档

Sun, 14 Sep 2025 00:00:00 +0000

pandas 基础操作

Thu, 24 Jul 2025 14:39:10 +0000

热门数据分析项目推荐

pandas-dev/pandas ⭐ 43.8k GitHub地址: https://github.com/pandas-dev/pandas

简介: Python数据分析的核心库，提供数据结构和数据分析工具适合: 必学基础库，所有数据分析项目的基础

ydataai/ydata-profiling ⭐ 12.4k GitHub地址: https://github.com/ydataai/ydata-profiling

简介: 一行代码生成数据质量报告和探索性数据分析适合: 初学者快速了解数据集特征

模板转换器

Tue, 15 Apr 2025 18:39:21 +0000

Spring Boot Velocity转换器

简介

这是一个用于将Java、Vue、TS和XML文件转换为Velocity模板。这个starter可以帮助开发者快速实现代码生成功能，特别适用于需要从实体类生成VO类、表单类等场景。

特性

支持多种文件类型转换：Java、Vue、TS、XML
自动检测文件类型并应用相应的转换规则
支持实体类与VO类的转换
支持包名、模块名的自定义替换
支持批量处理（ZIP文件）
自动变量替换和模板生成

安装

lightbulb info

依赖可能非最新版本，请前往maven获取最新版本

Spring Boot 2地址

table

Fri, 04 Apr 2025 06:01:30 +0000

说明

基于el-table封装的表单

可选参数

isPopover为false为表单，为true则为Select选择器，选择的内容为表单内容

 // 定义接收的属性
export interface ISelectConfig<T = any> {
 // 宽度
 width?: string;
 // 占位符
 placeholder?: string;
 // popover组件属性
 popover?: Partial<Omit<PopoverProps, "visible" | "v-model:visible">>;
 // 列表的网络请求函数(需返回promise)
 indexAction: (_queryParams: T) => Promise<any>;
 // 主键名(跨页选择必填,默认为id)
 pk?: string;
 // 多选
 multiple?: boolean;
 // 表单项
 formItems: Array<{
 // 组件类型(如input,select等)
 type?: "input" | "select" | "tree-select" | "date-picker";
 // 标签文本
 label: string;
 // 键名
 prop: string;
 // 组件属性
 attrs?: IObject;
 // 初始值
 initialValue?: any;
 // 可选项(适用于select组件)
 options?: { label: string; value: any }[];
 }>;
 // 列选项
 tableColumns: Array<{
 type?: "default" | "selection" | "index" | "expand";
 label?: string;
 prop?: string;
 width?: string | number;
 [key: string]: any;
 }>;
}

const props = withDefaults(
 defineProps<{
 selectConfig: ISelectConfig;
 isPopover?: boolean; // 属性控制弹出框行为
 }>(),
 {
 isPopover: false //为false为表单，为true则为Select选择器
 }
);

// 自定义事件
const emit = defineEmits<{
 confirmClick: [selection: any[]];
}>();

使用示例

select.ts

GPIO概述与配置

Mon, 20 Jan 2025 16:56:44 +0000

基于STM32F429II的GPIO配置与使用的代码示例，包括输入模式、输出模式和外部中断模式的实现。代码基于HAL库开发。

GPIO输出模式

以下代码将GPIOA的第0引脚配置为推挽输出模式，并控制其输出高电平和低电平。

 #include "stm32f4xx_hal.h"

void SystemClock_Config(void);
void GPIO_Init(void);

int main(void)
{
 HAL_Init(); // 初始化HAL库
 SystemClock_Config(); // 配置系统时钟
 GPIO_Init(); // 初始化GPIO

 while (1)
 {
 HAL_GPIO_WritePin(GPIOA, GPIO_PIN_0, GPIO_PIN_SET); // 设置GPIOA的第0引脚为高电平
 HAL_Delay(1000); // 延时1秒

 HAL_GPIO_WritePin(GPIOA, GPIO_PIN_0, GPIO_PIN_RESET); // 设置GPIOA的第0引脚为低电平
 HAL_Delay(1000); // 延时1秒
 }
}

void GPIO_Init(void)
{
 GPIO_InitTypeDef GPIO_InitStruct = {0};

 // 使能GPIOA时钟
 __HAL_RCC_GPIOA_CLK_ENABLE();

 // 配置GPIOA的第0引脚为推挽输出模式，无上拉下拉，速度为高速
 GPIO_InitStruct.Pin = GPIO_PIN_0;
 GPIO_InitStruct.Mode = GPIO_MODE_OUTPUT_PP;
 GPIO_InitStruct.Pull = GPIO_NOPULL;
 GPIO_InitStruct.Speed = GPIO_SPEED_FREQ_HIGH;
 HAL_GPIO_Init(GPIOA, &GPIO_InitStruct);
}

GPIO输入模式

以下代码将GPIOB的第0引脚配置为输入模式，并读取其电平状态。

常用网址

Fri, 25 Aug 2023 11:43:46 +0000

vuepress-plugin

awesome-vuepress

VuePress 社区

MyBatis Plus使用

Thu, 24 Aug 2023 10:48:10 +0000

::: info 提示

maven依赖

 <dependency>
 <groupId>com.baomidou</groupId>
 <artifactId>mybatis-plus-boot-starter</artifactId>
 <version>3.5.3.2</version>
</dependency>

yml配置

 mybatis-plus:
 configuration:
 map-underscore-to-camel-case: false
 log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
 global-config:
 db-config:
 logic-delete-field: isDelete # 全局逻辑删除的实体字段名
 logic-delete-value: 1 # 逻辑已删除值（默认为 1）
 logic-not-delete-value: 0 # 逻辑未删除值（默认为 0）

:::

常用CRUD及基本流程

 基本流程 mapper.xml => mapper => serviceImpl => service => controller => 前端

CRUD使用

mapper，mapper.xml及基本的service层由MybatisX生成，基本使用直接在controller层调用即可，如下

  @GetMapping("/")
 public Website listConfig() {
 QueryWrapper<Website> queryWrapper = new QueryWrapper<>();
 queryWrapper.select("config");
 return websiteService.getOne(queryWrapper);
 }

也可在service层自定义接口，serviceImpl层写具体逻辑，controller层调用

npm 和 yarn

Mon, 21 Aug 2023 09:11:30 +0000

::: info 提示

作为前端开发者我们经常会使用npm或yarn，我们都知道npm和yarn默认镜像在国外，国内访问这些镜像速度会比较慢，下面介绍修改npm和yarn源的方法

:::

清除缓存

npm

 npm cache clean --force

yarn

 yarn cache clean

pnpm

 pnpm store prune

npm和yarn源的简单修改（以淘宝镜像为例）

npm

临时修改（只生效一次）

 npm install 包的名字 --registry https://registry.npmmirror.com

设置npm的配置项（全局配置）

查看npm源的当前地址

 npm config get registry

设置淘宝镜像

numpy

Thu, 24 Jul 2025 14:44:53 +0000

1111111111111111

keil调试

Tue, 21 Jan 2025 10:53:44 +0000

在工程配置菜单中，User选项卡，编译后执行的命令，设置为

 fromelf --bin -o "$L@L.bin" "#L"

当然也可以使用绝对路径的方式，需要指定fromelf文件的路径，输出BIN文件的路径和生成的AXF文件的路径。

springboot2引入swagger3

Thu, 24 Aug 2023 10:48:32 +0000

引入依赖

填写yml配置文件

dev环境

 springdoc:
 swagger-ui:
 path: /swagger-ui.html
 tags-sorter: alpha
 operations-sorter: method
 api-docs:
 path: /v3/api-docs
 group-configs:
 - group: 'default'
 paths-to-match: '/**'
 packages-to-scan: com.yupi.springbootinit.controller
# knife4j的增强配置，不需要增强可以不配
knife4j:
 enable: true
 setting:
 language: zh_cn

prod环境

RTC实时时钟

Wed, 12 Feb 2025 17:46:38 +0000

RTC 简介

RTC（Real Time Clock），即实时时钟，类似于钟表一般，能够持续记录时间，为程序提供精确的日期和时间信息，即使在断电期间也能确保准确运行。

原理和特点

在STM32中，存在两个时钟源：高速时钟（8 MHz）和低速时钟（32.768 kHz）。高速时钟用于驱动CPU、外设和定时器等核心组件，而低速时钟则负责管理看门狗和RTC等功能。
RTC依赖低速时钟运行。
RTC模块内部包含了一个独立的32位寄存器来保存当前的时间戳信息。
低速时钟以极低的功耗运行，即使在断电情况下，通过备用电源（如纽扣电池），RTC也能持续运行以确保时间准确性。

RTC的一般使用方法

在CubeMX中找到Timers -> RTC，勾选Activate Clock Source，即可激活RTC时钟功能。
即使学习板断电，RTC依然能够持续记录时间。
HAL库的RTC驱动未实现日期的断电走时功能，即断电后时间可以继续走时，但日期会重置。
keysking提供了RTC库，可以实现断电走时功能，具体代码见下文。
需要获取当前日期和时间时，只需调用相应函数即可实现。

RTC实时时钟实现

工程配置

**开启外部晶振：**在Pinout&Configuration -> System Core -> RCC 页面，将 High Speed Clock (HSE) 以及 Low Speed Clock (LSE) 都配置为 Crystal/Ceramic Resonator

**配置主时钟频率：**在Clock Configuration 页面，将PLL Source 选择为 HSE，将System Clock Mux 选择为 PLLCLK，然后在HCLK (MHz) 输入72并回车，将HCLK频率配置为 72 MHz

EasyCaptcha验证码存入redis的使用

Thu, 24 Aug 2023 10:40:12 +0000

引入Maven依赖

 <!-- EasyCaptcha -->
<dependency>
 <groupId>com.github.whvcse</groupId>
 <artifactId>easy-captcha</artifactId>
 <version>1.6.2</version>
</dependency>

 <!-- redis -->
<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<dependency>
 <groupId>org.springframework.session</groupId>
 <artifactId>spring-session-data-redis</artifactId>
</dependency>

yml配置

 # 验证码配置
easy-captcha:
 # 验证码类型: arithmetic-算术
 type: arithmetic
 # 验证码有效时间(单位：秒)
 ttl: 300
 
# Redis 配置
spring
 redis:
 database: 1
 host: localhost
 port: 6379
 timeout: 5000
 password: 123456
 lettuce:
 pool:
 # 连接池最大连接数 默认8 ，负数表示没有限制
 max-active: 8
 # 连接池最大阻塞等待时间（使用负值表示没有限制） 默认-1
 max-wait: -1
 # 连接池中的最大空闲连接 默认8
 max-idle: 8
 # 连接池中的最小空闲连接 默认0
 min-idle: 0

验证码类型枚举

 public enum CaptchaTypeEnum {

 /**
 * 算数
 */
 ARITHMETIC,
 /**
 * 中文
 */
 CHINESE,
 /**
 * 中文闪图
 */
 CHINESE_GIF,
 /**
 * 闪图
 */
 GIF,
 SPEC
}

配置类

Captcha配置类

 @ConfigurationProperties(prefix = "easy-captcha")
@Configuration
@Data
public class CaptchaConfig {

 /**
 * 验证码类型
 */
 private CaptchaTypeEnum type = CaptchaTypeEnum.ARITHMETIC;


 /**
 * 验证码缓存过期时间(单位:秒)
 */
 private long ttl = 300L;

 /**
 * 验证码内容长度
 */
 private int length = 4;
 /**
 * 验证码宽度
 */
 private int width = 120;
 /**
 * 验证码高度
 */
 private int height = 36;


 /**
 * 验证码字体
 */
 private String fontName = "Verdana";

 /**
 * 字体风格
 */
 private Integer fontStyle = Font.PLAIN;

 /**
 * 字体大小
 */
 private int fontSize = 20;


}

redis配置类

 @Configuration
@EnableCaching //开启注解
public class RedisConfig extends CachingConfigurerSupport {
 /**
 * retemplate相关配置
 * 序列化配置，如果没有配置序列化的话可能会出现往redis存了值，但是获取不到
 */
 @Bean
 public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory factory) {
 RedisTemplate<String, Object> template = new RedisTemplate<>();
 template.setConnectionFactory(factory);
 Jackson2JsonRedisSerializer jacksonSeial = new Jackson2JsonRedisSerializer(Object.class);
 ObjectMapper om = new ObjectMapper();
 om.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY);
 om.enableDefaultTyping(ObjectMapper.DefaultTyping.NON_FINAL);
 jacksonSeial.setObjectMapper(om);
 template.setValueSerializer(jacksonSeial);
 template.setKeySerializer(new StringRedisSerializer());
 template.setHashKeySerializer(new StringRedisSerializer());
 template.setHashValueSerializer(jacksonSeial);
 template.afterPropertiesSet();
 return template;
 }
}

添加dto类

 @Schema(description ="验证码校验对象")
@Builder
@Data
public class CaptchaCheck {

 @Schema(description = "验证码缓存key")
 private String verifyCodeKey;

 @Schema(description = "用户输入验证码")
 private String verifyCode;
}

@Schema(description ="验证码响应对象")
@Builder
@Data
public class CaptchaResult {

 @Schema(description = "验证码缓存key")
 private String verifyCodeKey;

 @Schema(description = "验证码图片Base64字符串")
 private String verifyCodeBase64;

}

验证码生成

 @Component
@RequiredArgsConstructor
public class EasyCaptchaProducer {

 private final CaptchaConfig captchaConfig;

 public Captcha getCaptcha() {
 Captcha captcha;
 int width = captchaConfig.getWidth();
 int height = captchaConfig.getHeight();
 int length = captchaConfig.getLength();
 String fontName = captchaConfig.getFontName();

 switch (captchaConfig.getType()) {
 case ARITHMETIC:
 captcha = new ArithmeticCaptcha(width, height);
 //固定设置为两位，图片为算数运算表达式
 captcha.setLen(2);
 break;
 case CHINESE:
 captcha = new ChineseCaptcha(width, height);
 captcha.setLen(length);
 break;
 case CHINESE_GIF:
 captcha = new ChineseGifCaptcha(width, height);
 captcha.setLen(length);
 break;
 case GIF:
 captcha = new GifCaptcha(width, height);//最后一位是位数
 captcha.setLen(length);
 break;
 case SPEC:
 captcha = new SpecCaptcha(width, height);
 captcha.setLen(length);
 break;
 default:
 throw new RuntimeException("验证码配置信息错误！正确配置查看 CaptchaTypeEnum ");
 }
 captcha.setFont(new Font(fontName, captchaConfig.getFontStyle(), captchaConfig.getFontSize()));
 return captcha;

 }


}

获取验证码并将验证码文本缓存至Redis，用于登录校验

 @Component
@RequiredArgsConstructor
public class EasyCaptchaService {

 private final EasyCaptchaProducer easyCaptchaProducer;

 private final RedisTemplate<String, String> redisTemplate;

 private final CaptchaConfig captchaConfig;

 /**
 * 获取验证码
 *
 * @return
 */
 public CaptchaResult getCaptcha() {
 // 获取验证码
 Captcha captcha = easyCaptchaProducer.getCaptcha();
 String captchaText = captcha.text(); // 验证码文本
 String captchaBase64 = captcha.toBase64(); // 验证码图片Base64字符串

 // 验证码文本缓存至Redis，用于登录校验
 String verifyCodeKey = IdUtil.fastSimpleUUID();
 redisTemplate.opsForValue().set(SecurityConstants.VERIFY_CODE_CACHE_PREFIX + verifyCodeKey, captchaText,
 captchaConfig.getTtl(), TimeUnit.SECONDS);

 return CaptchaResult.builder()
 .verifyCodeKey(verifyCodeKey)
 .verifyCodeBase64(captchaBase64)
 .build();
 }

}

校验验证码

 @Component
public class VerifyCodeFilter {

 public boolean doFilterInternal(String verifyCode, String verifyCodeKey, HttpServletRequest request) {

 // 缓存中的验证码
 RedisTemplate redisTemplate = SpringUtil.getBean("redisTemplate", RedisTemplate.class);
 Object cacheVerifyCode = redisTemplate.opsForValue().get(SecurityConstants.VERIFY_CODE_CACHE_PREFIX + verifyCodeKey);
 if (cacheVerifyCode == null) {
 throw new BusinessException(ErrorCode.VERIFY_CODE_TIMEOUT);
 }
 // 验证码比对
 if (!StrUtil.equals(verifyCode, Convert.toStr(cacheVerifyCode))) {
 throw new BusinessException(ErrorCode.VERIFY_CODE_ERROR);
 }
 return true;
 }
}

验证码接口

 @Tag(name = "CaptchaController")
@RequestMapping("/captcha")
@RestController
@Slf4j
public class CaptchaController {

 private final EasyCaptchaService easyCaptchaService;
 private final VerifyCodeFilter verifyCodeFilter;


 public CaptchaController(EasyCaptchaService easyCaptchaService, VerifyCodeFilter verifyCodeFilter) {
 this.easyCaptchaService = easyCaptchaService;
 this.verifyCodeFilter = verifyCodeFilter;
 }

 @Operation(summary = "获取验证码")
 @PostMapping("/get")
 public BaseResponse<CaptchaResult> getCaptcha() {
 CaptchaResult captcha = easyCaptchaService.getCaptcha();
 return ResultUtils.success(captcha);
 }

 @Operation(summary = "校验验证码")
 @PostMapping("/check")
 public BaseResponse<Boolean> checkCaptcha(@RequestBody CaptchaCheck CaptchaCheck, HttpServletRequest request) {
 String verifyCode = CaptchaCheck.getVerifyCode();
 String verifyCodeKey = CaptchaCheck.getVerifyCodeKey();
 boolean result = verifyCodeFilter.doFilterInternal(verifyCode, verifyCodeKey, request);
 return ResultUtils.success(result);
 }
}

常用方法

Thu, 24 Aug 2023 10:48:23 +0000

查询数据是否存在

 //导入依赖
<dependency>
 <groupId>org.springframework.data</groupId>
 <artifactId>spring-data-jpa</artifactId>
 <version>3.0.5</version>
</dependency>

 // 创建类
@Repository
public interface UserRepository extends CrudRepository<User, Long> {
 // CrudRepository内置boolean existsById(ID id)，这个方法将会返回一个布尔值，表示该ID是否存在。
}

//调用
 @GetMapping("/delete")
 public Result<String> deleteById(String id){
 boolean existsById = postEsDao.existsById(id);
 if (!existsById) {
 return Result.failure(ErrorCode.NOT_FOUND_ERROR);
 }
 postEsDao.deleteById(id);
 return Result.success("删除成功");
 }

yml文件常用配置

 spring:
 datasource:
 driver-class-name: com.mysql.cj.jdbc.Driver
 url: jdbc:mysql://localhost:3306/mybatisdemo
 username: root
 password: Hik@1234
 mvc:
 pathmatch:
 matching-strategy: ant_path_matcher // 使用ant_path_matcher策略来匹配请求的URL路径
 validation:
 enabled: true
 application:
 name: spring-boot
 profiles:
 active: dev
 jackson:
 default-property-inclusion: non_null //返回消息为null则不显示
 date-format: yyyy-MM-dd HH:mm:ss // 全局格式化时间
 elasticsearch:
 uris: http://localhost:9200
 username: root
 password: 123456

mybatis-plus:
 configuration:
 call-setters-on-nulls: true // 如果数据库字段的值为NULL,将NULL作为参数传递给setter方法,避免了空指针异常。
 map-underscore-to-camel-case: false
 log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
 sql-parser-cache: true
 global-config:
 db-config:
 logic-delete-field: isDelete
 logic-delete-value: 1
 logic-not-delete-value: 0
 column-format: ''
 
knife4j:
 enable: true
 setting:
 language: zh_cn

MapStruct代码映射工具

它简化了Java Bean之间映射的过程。它在编译时生成映射代码，从而消除了开发人员手动编写重复且容易出错的映射代码的需要。

Elasticsearch全文搜索

Thu, 24 Aug 2023 10:48:13 +0000

在 Windows 上安装 Elasticsearch 作为服务

Elasticsearch 可以作为服务安装在后台运行，或者在启动时自动启动，无需任何用户交互。elasticsearch-service.bat这可以通过文件夹中的脚本实现，bin\该脚本允许从命令行安装、删除、管理或配置服务并可能启动和停止服务。

 D:\elasticsearch-7.17.9\bin>elasticsearch-service.bat

Usage: elasticsearch-service.bat install|remove|start|stop|manager [SERVICE_ID]

该脚本需要一个参数（要执行的命令），后跟一个指示服务 ID 的可选参数（在安装多个 Elasticsearch 服务时很有用）。

可用的命令是：

`install`	将 Elasticsearch 安装为服务
`remove`	删除已安装的 Elasticsearch 服务（如果启动则停止该服务）
`start`	启动 Elasticsearch 服务（如果已安装）
`stop`	停止 Elasticsearch 服务（如果已启动）
`manager`	启动用于管理已安装服务的 GUI

添加依赖

要使用 Elasticsearch，需要添加 Elasticsearch 的 Java 客户端依赖。可以在项目的 pom.xml 文件中添加以下依赖

 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-data-elasticsearch</artifactId>
</dependency>

配置连接信息

 spring:
 elasticsearch:
 uris: http://localhost:9200
 socket-timeout: "10s"
 username: "user"
 password: "secret"

创建实体类

创建一个Java类来表示您要存储在Elasticsearch中的数据。此类应该使用@Document注解进行注释，并且每个字段都应该使用相应的注解进行注释，以指定字段名称、数据类型和Elasticsearch中的数据类型。

canal同步mysql数据到es中

Thu, 24 Aug 2023 10:48:15 +0000

::: info 提示

maven依赖

 <dependency>
 <groupId>com.alibaba.otter</groupId>
 <artifactId>canal.client</artifactId>
 <version>1.1.4</version>
</dependency>

:::

开启mysql的binlog

使用canal-server需要先准备mysql，对于自建 MySQL , 需要先开启 Binlog 写入功能，配置 binlog-format 为 ROW 模式

vi /etc/my.cnf

 [mysqld]
log-bin=mysql-bin # 开启 binlog
binlog-format=ROW # 选择 ROW 模式
server_id=1 # 配置 MySQL replaction 需要定义，不要和 canal 的 slaveId 重复

配置完成后重启mysql，并查询是否配置生效：ON就是开启

systemctl restart mysqld

可以进入数据库再次查看下

 mysql> show variables like 'log_bin';
+---------------+-------+
| Variable_name | Value |
+---------------+-------+
| log_bin | ON |
+---------------+-------+
1 row in set (0.01 sec)
 
mysql> show variables like 'binlog_format%';
+---------------+-------+
| Variable_name | Value |
+---------------+-------+
| binlog_format | ROW |
+---------------+-------+
1 row in set (0.00 sec)

mysql用户数据准备

创建一个canal用户并对其进行授权

SpringSecurity使用

Fri, 15 Sep 2023 09:24:20 +0000

简介

Spring Security 是 Spring 家族中的一个安全管理框架。相比与另外一个安全框架Shiro，它提供了更丰富的功能，社区资源也比Shiro丰富。

一般来说中大型的项目都是使用SpringSecurity 来做安全框架。小项目有Shiro的比较多，因为相比与SpringSecurity，Shiro的上手更加的简单。

一般Web应用的需要进行认证和授权。

认证：验证当前访问系统的是不是本系统的用户，并且要确认具体是哪个用户

授权：经过认证后判断当前用户是否有权限进行某个操作

而认证和授权也是SpringSecurity作为安全框架的核心功能。

快速入门

准备工作

我们先要搭建一个简单的SpringBoot工程

① 设置父工程添加依赖

  <parent>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-parent</artifactId>
 <version>2.5.0</version>
 </parent>
 <dependencies>
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-web</artifactId>
 </dependency>
 <dependency>
 <groupId>org.projectlombok</groupId>
 <artifactId>lombok</artifactId>
 <optional>true</optional>
 </dependency>
 </dependencies>

② 创建启动类

 @SpringBootApplication
public class SecurityApplication {

 public static void main(String[] args) {
 SpringApplication.run(SecurityApplication.class,args);
 }
}

③ 创建Controller

 import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

 @RequestMapping("/hello")
 public String hello(){
 return "hello";
 }
}

引入SpringSecurity

在SpringBoot项目中使用SpringSecurity我们只需要引入依赖即可实现入门案例。

StringUtils 工具类使用

Tue, 03 Oct 2023 22:38:19 +0000

概览

大部分方法都提供了很多重载方法，比如不区分大小写xxIgnoreCase、匹配任何xxAny、还有参数类型不同、参数个数不同的重载等，能适应绝大多数业务场景的需求。

静态常量

StringUtils 提供了最常用的常量如下，使用定义的常量能让我们的代码更清晰。

花式截取字符串

 @Test
public void testSubstring() {
 // 最基本的截取
 System.out.println( StringUtils.substring("abcde", 1, 2) ); // b
 // 截取前半部分
 System.out.println( StringUtils.substringBefore("role/site/admin-(1.site.1)", "-(") ); // role/site/admin
 // 截取后半部分
 System.out.println( StringUtils.substringAfter("role/site/admin-(1.site.1)", "-") ); // (1.site.1)
 // 截取之间的
 System.out.println( StringUtils.substringBetween("role/site/admin-(1.site.1)", "(", ")") ); // 1.site.1
 // 截取左边的部分
 System.out.println( StringUtils.left("aabbcc", 4) ); // aabb
 // 截取右边的部分
 System.out.println( StringUtils.right("aabbcc", 4) ); // bbcc
 // 截取中间部分
 System.out.println( StringUtils.mid("aabbcc", 1, 2) ); // ab
}

各种判断空与非空

 @Test
public void testIsEmpty() {
 // 判断是否为空 只有为 null 或 "" 的时候才会true
 System.out.println( StringUtils.isEmpty(" ") ); // false
 // 判断不为空
 System.out.println( StringUtils.isNotEmpty(" ") ); // true
 // 判断是否为空 null、""、全空格 都为true
 System.out.println( StringUtils.isBlank(" ") ); // true
 // 判读不为空
 System.out.println( StringUtils.isNotBlank(" ") ); // false
 // 任何一个为空
 System.out.println( StringUtils.isAnyEmpty("ab", " ") ); // false
 // 任何一个为空
 System.out.println( StringUtils.isAnyBlank("ab", " ") ); // true
 // 没有为空的
 System.out.println( StringUtils.isNoneEmpty("ab", "") ); // false
 // 所有的都为空
 System.out.println( StringUtils.isAllBlank("ab", " ") ); // false
}

判断是否相等

 @Test
public void testEqual() {
 // 判断是否相等 区分大小写
 System.out.println( StringUtils.equals("ab", "Ab") ); // false
 // 判断是否相等 不区分大小写
 System.out.println( StringUtils.equalsIgnoreCase("ab", "Ab") ); // true
 // 判断其中一个相等
 System.out.println( StringUtils.equalsAny("ab", "Ab", "ab", "abc") ); // true
 // 判断其中一个相等
 System.out.println( StringUtils.equalsAnyIgnoreCase("ab", "Ab", "abc") ); // true
}

补齐

 @Test
public void testPad() {
 // 左边补齐
 System.out.println( StringUtils.leftPad("abc", 5, "x") ); // xxabc
 // 右边补齐
 System.out.println( StringUtils.rightPad("abc", 5, "x") ); // abcxx
 // 两边补齐
 System.out.println( StringUtils.center("abc", 5, "x") ); // xabcx
}

缩短省略

 @Test
public void testAbb() {
 // 共计10位数 超出省略 默认 ...
 System.out.println( StringUtils.abbreviate("abcdefghijklmn", 10) ); // abcdefg...
 // 指定省略符
 System.out.println( StringUtils.abbreviate("abcdefghijklmn", "***", 10) ); // abcdefg***
 // 两边省略
 System.out.println( StringUtils.abbreviate("abcdefghijklmn", 5, 10) ); // ...fghi...
}

去掉控制字符和指定字符

 @Test
public void testTrim() {
 // trim 主要用于去掉控制字符 ,即ASC码表小于等于32的字符，strip主要用于去掉指定字符，默认空格

 // 去掉两边空白
 System.out.println("[" + StringUtils.trim(" ab cd ") + "]"); // [ab cd]
 // trim 去掉的是ASC码表小于等于32的字符(特殊字符)
 System.out.println("[" + StringUtils.trim(" \n ab cd ") + "]"); // [ab cd]
 // trim 去掉的是ASC码表小于等于32的字符(特殊字符)
 System.out.println("[" + StringUtils.trim(" ab \n cd ") + "]"); // [ab \n cd]
 // 如果为空则返回null
 System.out.println("[" + StringUtils.trimToNull(" ") + "]"); // [null]
 // 如果为空返回空
 System.out.println("[" + StringUtils.trimToEmpty(null) + "]"); // []

 // strip 行为和trim基本一样，可以指定去掉的字符串
 char ch = 30;
 System.out.println("[" + StringUtils.strip(ch+" ab cd ") + "]"); // [ab cd]
 // 去掉开头的字符，null默认为空格
 System.out.println("[" + StringUtils.stripStart(" ab cd ", null) + "]"); // [ab cd ]
 // 去掉开头的字符，null默认为空格
 System.out.println("[" + StringUtils.stripStart("ab cd ", "a") + "]"); // [b cd ]
 // 去掉末尾的空格
 System.out.println("[" + StringUtils.stripEnd(" ab cd ", null) + "]"); // [ ab cd]

HTTP各种参数发送

Thu, 05 Oct 2023 12:22:10 +0000

利用Idea的HttpClient向SpringBoot发起各种请求参数。后端使用@RequestParam，@ModelAttribute，@PathVariable，@RequestBody，@RequestPart去接收。

spring mvc 中的参数接受之 GET 请求

Get 请求是没有 body 的，参数都是放在 url 上面。根据在 url 参数格式不同，一共有下面这几种

Path Variable
Query

path variable

使用 `@PathVariable`

 GET http://localhost:7720/user/find/123/abc
 \ /
 这里的"123"和"abc"是参数

这种传参格式就如同名字一样"路径变量"，参数在路径上。

针对这种传参方式后端可以这么接受。

  // 在路径中用id占位，代表这个地方将会是参数
 @GetMapping("find/{id}/{username}")
 // 方法上面通过占位名称得到参数
 public R<Boolean> pathVariable(@PathVariable String id, @PathVariable String username) {
 log.info(id);
 log.info(username);
 return R.ok(true);
 }

query 传参

使用 `@RequestParam`

 ### GET http://localhost:7720/user/find?username=yupi&password=123456

在路径的最后用 “?” 隔开要传输的参数。通过 “&” 分割多个 key=value

test

Thu, 05 Mar 2026 18:19:22 +0000

%% 用Mermaid复刻你图片中的目录结构
graph TD
 A[content/] --> B[docs/]
 A --> C[pages/]
 A --> D[posts/]
 B --> B1[sidebar.en.md]
 B --> B2[sidebar.zh.md]
 C --> C1[about.md]
 C --> C2[contact.md]
 D --> D1[2024-03-05-xxx.md]
 D --> D2[2024-03-06-yyy.md]

MERMAID

graph TD
 A[Markdown内容] --> B[Hugo静态生成器]
 B --> C[Lotus Docs主题]
 B --> D[构建工具链]
 
 subgraph 构建工具链
 direction TB
 E[Node.js脚本] --> F[Yarn包管理器]
 F --> G[Scoop包管理器]
 end
 
 C --> H[静态HTML/CSS/JS]
 H --> I[部署平台]
 
 classDef subgraphStyle fill:#fff9c4,stroke:#fbc02d,stroke-width:2px
 class 构建工具链 subgraphStyle

MERMAID

sequenceDiagram
 participant User
 participant Script as add-frontmatter.js
 participant FS as FileSystem
 participant Hugo

 User->>Script: 执行 yarn run server
 Script->>FS: 扫描content目录
 FS-->>Script: 返回.md文件列表
 loop 分析每个文件Front Matter
 Script->>Script: 分析每个文件Front Matter
 end
 Script->>FS: 补全缺失字段
 Script->>Hugo: 启动本地服务器
 Hugo-->>User: 服务就绪 localhost:1313

MERMAID

asar解包与打包

Mon, 02 Mar 2026 21:03:43 +0000

适用于 Electron 应用 app.asar 文件的解压与重新打包

安装依赖

安装 asar 工具

 npm install -g @electron/asar

验证是否安装成功

 asar --version

解压 asar 文件

 # 通用命令
asar extract 文件名.asar 解压到的文件夹

# 示例（解压 app.asar 到 app_extracted 目录）
asar extract app.asar ./app_extracted

仅查看文件列表

 asar list app.asar

只提取单个文件

 asar extract-file app.asar main.js

重新打包为 asar

 # 通用命令
asar pack 源文件夹 输出文件名.asar

# 示例（把修改后的文件夹打包回 app.asar）
asar pack ./app_extracted app.asar

打包时排除目录（推荐）

排除 node_modules 等不需要打进 asar 的文件：

代码生成器

Tue, 15 Apr 2025 17:28:08 +0000

Spring Boot 代码生成器

基于Spring Boot + Velocity的代码生成器，用于快速生成项目代码，提高开发效率。

简介

这是一个基于Spring Boot 的代码生成器，支持通过数据库表结构自动生成Controller、Service、Mapper、Entity等相关代码，大幅提高开发效率。

特性

使用Velocity模板引擎生成代码
支持自定义模板
支持多种代码生成模式
支持字段级别的配置（表单显示、列表显示、查询条件等）
支持代码预览和下载

快速开始

_1. 基本配置

_1.1 引入依赖

lightbulb info

依赖可能非最新版本，请前往maven获取最新版本

Spring Boot 2地址

InputTag

Fri, 04 Apr 2025 06:01:30 +0000

说明

基于el-tag的封装

可选参数

 defineProps({
 config: {
 type: Object as () => {
 buttonAttrs: Record<string, any>; 
 inputAttrs: Record<string, any>;
 tagAttrs: Record<string, any>;
 },
 default: () => ({
 buttonAttrs: {}, //可配置 el-button 的所有 props 和自定义属性
 inputAttrs: {}, //可配置 el-input 的所有 props 和自定义属性：
 tagAttrs: {}, //可配置 el-tag 的所有 props 和自定义属性：
 }),
 },
});

使用

 <script setup lang="ts">
	import InputTag from "liyao-vue-common"
 
 const attr = {
 buttonAttrs: {
 btnText: "新增标签"
 }

}

</script>

<template>
 <div>
 <InputTag :config="attr"></InputTag>
 </div>
</template>

EasyExcel之Excel导入导出

Mon, 06 Nov 2023 13:42:38 +0000

基本导入导出

Pom依赖

::: info 提示

图片的绿色小字就是最新版本：

如果看不到图片则直接打开：https://mvnrepository.com/artifact/com.alibaba/easyexcel

EasyExcel具体使用

Thu, 09 Nov 2023 10:16:01 +0000

UploadData（dto类）

 @EqualsAndHashCode(callSuper = false)
@Data
public class UploadData extends PageRequest implements Serializable {

 /**
 * 姓名
 */
 @ExcelProperty("姓名")
 private String name;

 /**
 * 年龄
 */
 @ExcelProperty("年龄")
 private Integer age;

 /**
 * 手机号
 */
 @ExcelProperty("手机号")
 private Long phone;

 /**
 * 工资
 */
 @ExcelProperty("工资")
 private Long salary;

 /**
 * 生日
 */
 @JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd")
 @DateTimeFormat(Pattern = "yyyy-MM-dd")
 @ExcelProperty("生日")
 private Date birthday;

 private static final long serialVersionUID = 1L;

 public static UploadData convertToDto(Excel excel) {
 UploadData uploadData = new UploadData();
 uploadData.setName(excel.getName());
 uploadData.setAge(excel.getAge());
 uploadData.setPhone(excel.getPhone());
 uploadData.setSalary(excel.getSalary());
 uploadData.setBirthday(excel.getBirthday());
 return uploadData;
 }

}

DateConverter（日期格式转换）

 public class DateConverter implements Converter<Date> {

 private static final String PATTERN_YYYY_MM_DD = "yyyy-MM-dd";

 @Override
 public Class<?> supportJavaTypeKey() {
 return Converter.super.supportJavaTypeKey();
 }

 @Override
 public CellDataTypeEnum supportExcelTypeKey() {
 return Converter.super.supportExcelTypeKey();
 }

 @Override
 public WriteCellData<?> convertToExcelData(Date value, ExcelContentProperty contentProperty, GlobalConfiguration globalConfiguration) throws Exception {
 SimpleDateFormat sdf = new SimpleDateFormat(PATTERN_YYYY_MM_DD);
 String dateValue = sdf.format(value);
 return new WriteCellData<>(dateValue);
 }
}

UploadDataVO（VO类）

 @Data
public class UploadDataVO implements Serializable {

 /**
 * 姓名
 */
 @ColumnWidth(15)
 @ExcelProperty(value = "姓名", index = 0)
 private String name;

 /**
 * 年龄
 */
 @ColumnWidth(10)
 @ExcelProperty(value = "年龄", index = 1)
 private Integer age;

 /**
 * 手机号
 */
 @ColumnWidth(25)
 @ExcelProperty(value = "手机号", index = 2)
 private Long phone;

 /**
 * 工资
 */
 @ColumnWidth(20)
 @ExcelProperty(value = "工资", index = 3)
 private Long salary;

 /**
 * 生日
 */
 @ColumnWidth(30)
 @JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd")
 @ExcelProperty(value = "生日", index = 4, converter = DateConverter.class)
 private Date birthday;

 private static final long serialVersionUID = 1L;

 public static UploadDataVO convertToVO(Excel excel) {
 UploadDataVO uploadData = new UploadDataVO();
 uploadData.setName(excel.getName());
 uploadData.setAge(excel.getAge());
 uploadData.setPhone(excel.getPhone());
 uploadData.setSalary(excel.getSalary());
 uploadData.setBirthday(excel.getBirthday());
 return uploadData;
 }

}

UploadDAO（DAO层）

 @Repository
public class UploadDAO {

 @Resource
 private ExcelService excelService;

 public void save(List<Excel> list) {
 excelService.saveBatch(list);
 }

 public List<Excel> list(Wrapper<Excel> list) {

 return excelService.list(list);
 }

 public List<Excel> convertToEntityList(List<UploadData> uploadDataList) {
 List<Excel> excelList = new ArrayList<>();

 for (UploadData uploadData : uploadDataList) {
 Excel excel = convertToEntity(uploadData);
 excelList.add(excel);
 }

 return excelList;
 }

 public List<UploadDataVO> convertToDtoList(List<Excel> uploadDataList) {
 List<UploadDataVO> excelList = new ArrayList<>();

 for (Excel uploadData : uploadDataList) {
 UploadDataVO excel = UploadDataVO.convertToVO(uploadData);
 excelList.add(excel);
 }

 return excelList;
 }

 public Excel convertToEntity(UploadData uploadData) {
 Excel excel = new Excel();
 excel.setName(uploadData.getName());
 excel.setAge(uploadData.getAge());
 excel.setPhone(uploadData.getPhone());
 excel.setSalary(uploadData.getSalary());
 excel.setBirthday(uploadData.getBirthday());
 return excel;
 }
}

UploadDataListener（监听器）

 /**
 * 模板的读取类
 *
 * @author Jiaju Zhuang
 */
// 有个很重要的点 DemoDataListener 不能被spring管理，要每次读取excel都要new,然后里面用到spring可以构造方法传进去
@Slf4j
public class UploadDataListener implements ReadListener<UploadData> {
 /**
 * 每隔5条存储数据库，实际使用中可以100条，然后清理list ，方便内存回收
 */
 private static final int BATCH_COUNT = 100;
 private List<UploadData> cachedDataList = ListUtils.newArrayListWithExpectedSize(BATCH_COUNT);

 @Resource
 private UploadDAO uploadDAO;

 @Resource
 private ExcelMapper excelMapper;

 public UploadDataListener() {
 // 这里是demo，所以随便new一个。实际使用如果到了spring,请使用下面的有参构造函数
 uploadDAO = new UploadDAO();
 }

 /**
 * 如果使用了spring,请使用这个构造方法。每次创建Listener的时候需要把spring管理的类传进来
 *
 * @param uploadDAO
 */
 public UploadDataListener(UploadDAO uploadDAO) {
 this.uploadDAO = uploadDAO;
 }

 /**
 * 这个每一条数据解析都会来调用
 *
 * @param data one row value. It is same as {@link AnalysisContext#readRowHolder()}
 * @param context
 */
 @Override
 public void invoke(UploadData data, AnalysisContext context) {
 log.info("解析到一条数据:{}", JSON.toJSONString(data));
 cachedDataList.add(data);
 // 达到BATCH_COUNT了，需要去存储一次数据库，防止数据几万条数据在内存，容易OOM
 if (cachedDataList.size() >= BATCH_COUNT) {
 saveData();
 // 存储完成清理 list
 cachedDataList = ListUtils.newArrayListWithExpectedSize(BATCH_COUNT);
 }
 }

 /**
 * 异常方法 (类型转换异常也会执行此方法) （读取一行抛出异常也会执行此方法)
 *
 * @param exception
 * @param context
 * @throws Exception
 */
 @Override
 public void onException(Exception exception, AnalysisContext context) {
 // 如果是某一个单元格的转换异常 能获取到具体行号
 // 如果要获取头的信息 配合invokeHeadMap使用
 if (exception instanceof ExcelDataConvertException) {
 ExcelDataConvertException excelDataConvertException = (ExcelDataConvertException)exception;
 log.error("第{}行，第{}列解析异常，数据为:{}", excelDataConvertException.getRowIndex(),
 excelDataConvertException.getColumnIndex(), excelDataConvertException.getCellData());
 throw new BusinessException(ErrorCode.OPERATION_ERROR,"第"+excelDataConvertException.getRowIndex()+"行" + "，第" + (excelDataConvertException.getColumnIndex() + 1) + "列读取错误");
 }
 }

 /**
 * 所有数据解析完成了 都会来调用
 *
 * @param context
 */
 @Override
 public void doAfterAllAnalysed(AnalysisContext context) {
 // 这里也要保存数据，确保最后遗留的数据也存储到数据库
 saveData();
 log.info("所有数据解析完成！");
 }

 /**
 * 返回数据
 *
 * @return 返回读取的数据集合
 **/
 public List<UploadData> listData() {
 return cachedDataList;
 }

 /**
 * 加上存储数据库
 */
 private void saveData() {
 log.info("{}条数据，开始存储数据库！", cachedDataList.size());

 // 检查是否重复导入
 QueryWrapper<Excel> queryWrapper = new QueryWrapper<>();
 queryWrapper.in("phone", cachedDataList.stream().map(UploadData::getPhone).toArray());
 List<Excel> databaseData = uploadDAO.list(queryWrapper);

 for (UploadData excelRecord : cachedDataList) {
 for (Excel dbRecord : databaseData) {
 if (excelRecord.getPhone().equals(dbRecord.getPhone()) && excelRecord.getName().equals(dbRecord.getName())) {
 throw new BusinessException(ErrorCode.OPERATION_ERROR, "重复导入: " + excelRecord);
 }
 }
 }

 // 保存到数据库
 List<Excel> list = uploadDAO.convertToEntityList(cachedDataList);
 uploadDAO.save(list);
 log.info("存储数据库成功！");
 }
}

ExcelService

 public interface ExcelService extends IService<Excel> {

 /**
 * 分页获取帖子封装
 *
 * @param excelPage
 * @param request
 * @return
 */
 Page<UploadData> getExcelPage(Page<Excel> excelPage, HttpServletRequest request);

 /**
 * 获取查询条件
 *
 * @param uploadData
 * @return
 */
 QueryWrapper<Excel> getQueryWrapper(UploadData uploadData);

}

ExcelServiceImpl

 @Service
public class ExcelServiceImpl extends ServiceImpl<ExcelMapper, Excel>
 implements ExcelService{

 /**
 * 分页获取帖子封装
 *
 * @param excelPage
 * @param request
 * @return
 */
 @Override
 public Page<UploadData> getExcelPage(Page<Excel> excelPage, HttpServletRequest request) {
 List<Excel> excellists = excelPage.getRecords();
 Page<UploadData> fileListVOPage = new Page<>(excelPage.getCurrent(), excelPage.getSize(),
 excelPage.getTotal());
 List<UploadData> fileListVOList = excellists.stream().map(fileList -> {
 UploadData fileListVO = UploadData.convertToDto(fileList);
 return fileListVO;
 }).collect(Collectors.toList());
 fileListVOPage.setRecords(fileListVOList);
 return fileListVOPage;
 }

 /**
 * 获取查询条件
 *
 * @param uploadData
 * @return
 */
 @Override
 public QueryWrapper<Excel> getQueryWrapper(UploadData uploadData) {

 QueryWrapper<Excel> wrapper = new QueryWrapper<>();
 if (uploadData == null) {
 return wrapper;
 }

 String name = uploadData.getName();
 Integer age = uploadData.getAge();
 Long phone = uploadData.getPhone();
 Long salary = uploadData.getSalary();


 wrapper.like(StringUtils.isNotBlank(name),"name",name);
 wrapper.like(ObjectUtils.isNotEmpty(age),"age",age);
 wrapper.like(ObjectUtils.isNotEmpty(phone),"phone",phone);
 wrapper.like(ObjectUtils.isNotEmpty(salary),"salary",salary);

 return wrapper;
 }
}

ExcelController

 /**
 * Excel文件接口
 *
 */
@RestController
@RequestMapping("/excel")
@Slf4j
@Tag(name = "ExcelController")
public class ExcelController {

 @Resource
 private UserService userService;

 @Resource
 private UploadDAO uploadDAO;

 @Resource
 private ExcelService excelService;

 /**
 * 文件上传
 * <p>
 * 1. 创建excel对应的实体对象 参照{@link UploadData}
 * <p>
 * 2. 由于默认一行行的读取excel，所以需要创建excel一行一行的回调监听器，参照{@link UploadDataListener}
 * <p>
 * 3. 直接读即可
 */
 @PostMapping("upload")
 @Operation(summary = "easyExcel上传")
 @ResponseBody
 public BaseResponse<List<UploadData>> upload(MultipartFile file, HttpServletRequest request) throws IOException {

 userService.getLoginUser(request);

 UploadDataListener uploadListener = new UploadDataListener(uploadDAO);
 EasyExcel.read(file.getInputStream(), UploadData.class, uploadListener).sheet().doRead();
 return ResultUtils.success(uploadListener.listData());
 }

 /**
 * 文件下载（失败了会返回一个有部分数据的Excel）
 * <p>
 * 1. 创建excel对应的实体对象 参照{@link UploadData}
 * <p>
 * 2. 设置返回的 参数
 * <p>
 * 3. 直接写，这里注意，finish的时候会自动关闭OutputStream,当然你外面再关闭流问题不大
 */
 @GetMapping("download")
 @Operation(summary = "easyExcel下载")
 public void download(HttpServletResponse response, HttpServletRequest request) throws IOException {

 userService.getLoginUser(request);

 // 这里注意 有同学反应使用swagger 会导致各种问题，请直接用浏览器或者用postman
 response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
 response.setCharacterEncoding("utf-8");
 // 这里URLEncoder.encode可以防止中文乱码
 Date now = new Date();
 long timestamp = now.getTime();
 String uuid = RandomStringUtils.randomAlphanumeric(8);
 String filename = uuid + "-" + timestamp + "-模板";
 String fileName = URLEncoder.encode(filename, "UTF-8").replaceAll("\\+", "%20");
 response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");

 List<Excel> data = excelService.list();
 List<UploadDataVO> list = uploadDAO.convertToDtoList(data);

 // 头的策略
 WriteCellStyle headWriteCellStyle = new WriteCellStyle();
 // 背景设置为红色
 WriteFont headWriteFont = new WriteFont();
 headWriteFont.setFontHeightInPoints((short)20);
 headWriteCellStyle.setWriteFont(headWriteFont);
 headWriteCellStyle.setHorizontalAlignment(HorizontalAlignment.CENTER);


 // 内容的策略
 WriteCellStyle contentWriteCellStyle = new WriteCellStyle();
 WriteFont contentWriteFont = new WriteFont();
 //contentWriteFont.setFontName("微软雅黑");
 contentWriteFont.setFontHeightInPoints((short) 16);
 contentWriteFont.setColor(IndexedColors.BLACK.getIndex());
 // 字体大小
 contentWriteCellStyle.setWriteFont(contentWriteFont);

 contentWriteCellStyle.setBorderLeft(BorderStyle.THIN); // 左边框线
 contentWriteCellStyle.setBorderRight(BorderStyle.THIN); // 右边框线
 contentWriteCellStyle.setBorderTop(BorderStyle.THIN); // 上边框线
 contentWriteCellStyle.setBorderBottom(BorderStyle.THIN); // 下边框线
 contentWriteCellStyle.setWrapped(false); //设置自动换行;
 contentWriteCellStyle.setHorizontalAlignment(HorizontalAlignment.CENTER);//设置水平对齐的样式为居中对齐;
 contentWriteCellStyle.setVerticalAlignment(VerticalAlignment.CENTER); //设置垂直对齐的样式为居中对齐;
 contentWriteCellStyle.setShrinkToFit(true);//设置文本收缩至合适

 // 这个策略是 头是头的样式 内容是内容的样式 其他的策略可以自己实现
 HorizontalCellStyleStrategy horizontalCellStyleStrategy =
 new HorizontalCellStyleStrategy(headWriteCellStyle, contentWriteCellStyle);

 EasyExcel.write(response.getOutputStream(), UploadDataVO.class).registerWriteHandler(horizontalCellStyleStrategy).sheet("sheet1").doWrite(list);
 }

 /**
 * 分页获取列表（封装类）
 *
 * @param uploadData
 * @param request
 * @return
 */
 @Operation(summary = "获取Excel文件列表")
 @PostMapping("/list/page")
 public BaseResponse<Page<UploadData>> listExcelList(@RequestBody UploadData uploadData,
 HttpServletRequest request) {
 long current = uploadData.getCurrent();
 long size = uploadData.getPageSize();

 userService.getLoginUser(request);

 ThrowUtils.throwIf(size > 80, ErrorCode.PARAMS_ERROR);
 Page<Excel> postPage = excelService.page(new Page<>(current, size),
 excelService.getQueryWrapper(uploadData));
 return ResultUtils.success(excelService.getExcelPage(postPage, request));
 }
}

FreeMarker 模板引擎入门

Sun, 19 Nov 2023 13:23:33 +0000

一、简述

在线文档：http://freemarker.foofun.cn/

FreeMarker 也是一款模板引擎技术，它是一种基于模板和要改变的数据，并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。当然它也是一个Java类库，可以将之作为一个普通的组件嵌入到我们的产品中。

FreeMarker被设计用来生成HTML Web页面，特别是基于MVC模式的应用程序，将视图从业务逻辑中抽离出来，业务中不再包括视图的展示，而是将视图交给FreeMarker来输出。虽然FreeMarker具有一些编程的能力，但通常先让Java程序准备要显示的数据，然后再用FreeMarker生成具体页面。

FreeMarker生成文件及WEB使用

Thu, 23 Nov 2023 15:20:08 +0000

生成本地文件

创建一个Configuration对象，直接new一个对象。构造方法的参数就是freemarker对于的版本号。
设置模板文件所在的路径。
设置模板文件使用的字符集。一般就是utf-8.
加载一个模板，创建一个模板对象。
创建一个模板使用的数据集，可以是pojo也可以是map。一般是Map。
创建一个Writer对象，一般创建一FileWriter对象，指定生成的文件名。
调用模板对象的process方法输出文件。
关闭流.

示例模板index.ftl如下

 <!DOCTYPE html>
<html lang="">
<head>
 <meta charset="utf-8">
 <title>Hello World!</title>
</head>
<body>
<b>普通文本 String 展示：</b><br><br>
Hello ${name} <br>
<hr>
<b>对象Student中的数据展示：</b><br/>
姓名：${stu.name}<br/>
年龄：${stu.age}
<hr>
</body>
</html>

业务层代码如下

 /**
 * FreeMarker一般的使用方式 示例
 */
@SpringBootTest
public class NormalTests {

 @Test
 public void test() throws IOException, TemplateException {

 String templateDir = String templateDir = "src/main/resources/templates/";

 // -> 获取FreeMarker配置实例
 Configuration conf = new Configuration(Configuration.VERSION_2_3_32);

 // -> 指定模板文件所在文件夹
 // 直接指明文件夹路径的方式
 conf.setDirectoryForTemplateLoading(new File(templateDir));
 // 通过类加载器，使用相对路径的方式
 // conf.setClassLoaderForTemplateLoading(ClassLoader.getSystemClassLoader(), "/templates/");

 // -> 设置编码(注:如果不设置或设置错了此项的话，那么加载模板的时候，可能导致中文乱码)
 conf.setDefaultEncoding("utf-8");

 // -> 获取ftl模板
 Template template = conf.getTemplate("index.ftl");

 // -> 准备数据数据
 Map<String, Object> root = new HashMap<>(8);
 // 注意:因为freemarker模板会试着解析key,所以key命名时不要有敏感词汇；如:这里key取的是【root-key】的话，那么就会出错
 Map<String, Object> root = new HashMap<>(8);
 root.put("name","小舞");
 //实体类
 Student student = new Student();
 student.setAge(22);
 student.setName("张三");
 student.setBirthday(new Date());
 root.put("stu",student);

 // -> 准备输出流
 // 此方式可能导致输出时中文乱码
 // Writer out = new FileWriter(new File("E:/demo/templates/normal.html"));
 // 此方式可保证输出时中文不乱码
 Writer out =
 new BufferedWriter(new OutputStreamWriter(Files.newOutputStream(new File(templateDir + "index.html").toPath()),
 StandardCharsets.UTF_8));
 
 // -> 数据 + 输出流 = 生成的文件
 template.process(root, out);

 // -> 释放资源
 out.flush();
 out.close();
 }
}

通过WEB使用FreeMarker的方式

::: info 关键点说明

TrueLicense 创建及安装证书

Fri, 25 Oct 2024 17:23:15 +0000

使用 keytool 生成公私钥证书库

例如：私钥库密码为 priwd123456，公钥库密码为 pubwd123456，生成步骤如下：

 # 生成私钥库
# validity：私钥的有效期（天）
# alias：私钥别称
# keystore：私钥库文件名称（生成在当前目录）
# storepass：私钥库密码（获取 keystore 信息所需的密码，密钥库口令）
# keypass：别名条目的密码(密钥口令)
keytool -genkeypair -keysize 1024 -validity 3650 -alias "privateKey" -keystore "privateKeys.keystore" -storepass "pubwd123456" -keypass "priwd123456" -dname "CN=localhost, OU=localhost, O=localhost, L=SH, ST=SH, C=CN"

# 把私钥库内的公钥导出到一个文件当中
# alias：私钥别称
# keystore：私钥库的名称（在当前目录查找）
# storepass：私钥库的密码
# file：证书名称
keytool -exportcert -alias "privateKey" -keystore "privateKeys.keystore" -storepass "pubwd123456" -file "certfile.cer"

# 再把这个证书文件导入到公钥库，certfile.cer 没用了可以删掉了
# alias：公钥名称
# file：证书名称
# keystore：公钥文件名称
# storepass：公钥库密码
keytool -import -alias "publicCert" -file "certfile.cer" -keystore "publicCerts.keystore" -storepass "pubwd123456"

项目配置

 server:
 port: 8080
# License 相关配置
license:
 # 主题
 subject: license_demo
 # 公钥别称
 publicAlias: publicCert
 # 访问公钥的密码
 storePass: pubwd123456
 # license 位置
 licensePath: E:/licenseTest/license.lic
 # licensePath: /root/license-test/license.lic
 # 公钥位置
 publicKeysStorePath: E:/licenseTest/publicCerts.keystore
 # publicKeysStorePath: /root/license-test/publicCerts.keystore

使用方式

全局拦截过滤器

 public class CustomFilter extends OncePerRequestFilter {

 @Resource
 private LicenseVerify licenseVerify;
 
 @Resource
 private UserService userService;

 // 指定允许通过的接口路径
 private static final List<String> ALLOWED_PATHS = Arrays.asList(
 // 添加允许通过的接口路径
 //swagger接口
 "/api/webjars/**",
 "/api/doc.html",
 "/api/swagger-resources/**",
 "/api/v3/api-docs/**",
 "/api/swagger-ui/**",
 "/api/swagger-ui.html",
 "/api/ws/**",
 "/api/ws-app/**",
 "/api/v3/api-docs/swagger-config",
 "/api/v3/api-docs/default",
 // 用户接口
 "/api/user/login",
 "/api/user/register",
 "/api/user/logout",
 "/api/user/getInfo",
 "/api/user/login/wx_open",
 "/api/user/refresh",
 // 验证码接口
 "/api/captcha/get",
 "/api/captcha/check",
 //授权文件接口
 "/api/license/upload",
 "/api/license/multipartUpload",
 "/api/license/generateLicense",
 "/api/license/getServerInfos"
 );

 private final AntPathMatcher antPathMatcher = new AntPathMatcher();

 @Override
 protected void doFilterInternal(HttpServletRequest request, @NotNull HttpServletResponse response,
 @NotNull FilterChain filterChain) throws ServletException, IOException {

 if (request.getMethod().equals("OPTIONS")) {
 // 如果是预检请求，直接放行
 filterChain.doFilter(request, response);
 return;
 }

 String requestURI = request.getRequestURI();

 // 检查请求的URL是否在允许列表中
 if (ALLOWED_PATHS.stream().anyMatch(path -> antPathMatcher.match(path, requestURI))) {
 // 如果在允许列表中，则继续处理请求
 filterChain.doFilter(request, response);
 } else {

 try {

 boolean isLogin = userService.isLogin(request);
 if (!isLogin) {
 extracted(response, ErrorCode.NOT_LOGIN_ERROR);
 return;
 }

 licenseVerify.installLicense();
 filterChain.doFilter(request, response);

 } catch (Exception e) {

 // 处理 installLicense() 失败的情况
 extracted(response, ErrorCode.LICENCE_ERROR);

 }
 }
 }

 private static void extracted(@NotNull HttpServletResponse response, ErrorCode errorCode) throws IOException {
 response.setContentType("application/json");
 response.setCharacterEncoding("UTF-8");

 // 构建 JSON 响应
 JSONObject jsonResponse = new JSONObject();
 jsonResponse.put("code", errorCode.getCode());
 jsonResponse.put("message", errorCode.getMessage());

 // 写入响应体
 PrintWriter out = response.getWriter();
 out.print(jsonResponse);
 out.flush();
 out.close();
 }


}

跨域配置中使用

登录后重定向到原先路由

Fri, 19 Jan 2024 14:25:38 +0000

编写对应vue文件

login.vue

 <template>
... // 登录组件
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
import { postUserLogin } from '@/api/controller/UserController';
import router from '@/router';
import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
 
const route = useRoute()

/**
 * 按钮loading
 */
const loading = ref<boolean>(false);

const formState = reactive<UserLoginRequest>({
 userAccount: '',
 userPassword: '',
});


/**
 * 登录
 */
 function onSubmit() {
	loading.value = true;
	 postUserLogin(formState).then((res:any) => {
		 if (res.code === 0) {
			 localStorage.setItem('token', res.data.token);
			 const query: LocationQuery = route.query;
			const redirect = (query.redirect as LocationQueryValue) ?? "/";
			const otherQueryParams = Object.keys(query).reduce(
				(acc: any, cur: string) => {
					if (cur !== "redirect") {
						acc[cur] = query[cur];
					}
					return acc;
				},
				{}
			);

			 router.push({ path: redirect, query: otherQueryParams }).then(() => { 
					message.success('登录成功');
					loading.value = false;
			 })
			
		}
	}).catch((err) => {
		loading.value = false;
	});
}

</script>

redirect.vue

 <template>
 <div ></div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const { params, query } = route;
const { path } = params;

router.replace({ path: '/' + path, query });
</script>

router.js定义路由

 {
 path: '/login',
 name: 'Login',
 component: () => import('@/views/gen/login/index.vue')
 },
 {
 path: "/redirect/:path(.*)",
 component: () => import("@/views/gen/redirect/index.vue"),
 },

路由守卫使用

 import router from "@/router";

// 白名单路由
const whiteList = ["/login"];

router.beforeEach(async (to, from, next) => {
 const hasToken = localStorage.getItem("token");
 if (hasToken) {
 if (to.path === "/login") {
 next({ path: "/" });
 } else {
 // 未匹配到任何路由，跳转404
 if (to.matched.length === 0) {
 from.name ? next({ name: from.name }) : next("/404");
 } else {
 next();
 }
 }
 
 } else {
 // 未登录可以访问白名单页面
 if (whiteList.indexOf(to.path) !== -1) {
 next();
 } else {
 next(`/login?redirect=${to.path}`);
 
 }
 }
});

Javadoc自动填充maven插件

Sat, 26 Apr 2025 12:43:13 +0000

背景

发布到中央仓库时需要javadoc注释，所以写了这个maven插件用于在构建阶段自动生成注释。该插件同时支持Java 8和Java 17版本。

特性

同时支持Java 8和Java 17及以上
模块化设计：将代码按职责拆分为多个类，提高代码的可维护性和可扩展性
配置灵活性：增加了多个配置选项，允许用户自定义Javadoc生成行为
错误处理：改进了异常处理机制，提高代码的健壮性
代码复用：提取重复代码为通用方法，减少代码冗余

使用方法

lightbulb info

依赖可能非最新版本，请前往maven获取最新版本

单独使用

 <build>
 <plugins>
 <plugin>
 <groupId>io.github.liyao52033</groupId>
 <artifactId>autofill-javadoc-maven-plugin</artifactId>
 <version>1.2.0</version>
 <executions>
 <execution>
 <goals>
 <goal>autofill</goal>
 </goals>
 <phase>generate-sources</phase> 
 </execution>
 </executions>
 <configuration>
 <sourceDir>src/main/java</sourceDir> <!-- 指定源代码目录 -->
 <addClassJavadoc>true</addClassJavadoc> <!-- 是否添加类注释 -->
 <addMethodJavadoc>true</addMethodJavadoc> <!-- 是否添加方法注释 -->
 <addParamJavadoc>true</addParamJavadoc> <!-- 是否添加参数注释 -->
 <addReturnJavadoc>true</addReturnJavadoc> <!-- 是否添加返回值注释 -->
 <addThrowsJavadoc>true</addThrowsJavadoc> <!-- 是否添加异常注释 -->
 <!-- 高级配置选项 -->
 <excludePatterns>
 <excludePattern>.*\/generated\/.*</excludePattern> <!-- 排除生成的代码 -->
 <excludePattern>.*Test\.java</excludePattern> <!-- 排除测试文件 -->
 </excludePatterns>
 <includePrivateMethods>false</includePrivateMethods> <!-- 是否包含私有方法 -->
 </configuration>
 </plugin>
 </plugins>
</build>

与maven-javadoc-plugin集成发布到中央仓库

 <build>
 <plugins>
 <plugin>
 <groupId>org.sonatype.central</groupId>
 <artifactId>central-publishing-maven-plugin</artifactId>
 <version>0.5.0</version>
 <extensions>true</extensions>
 <configuration>
 <publishingServerId>xxx</publishingServerId>
 <checksums>required</checksums>
 <deploymentName>xxx</deploymentName>
 </configuration>
 </plugin>
 <plugin>
 <groupId>org.apache.maven.plugins</groupId>
 <artifactId>maven-source-plugin</artifactId>
 <version>3.2.1</version>
 <executions>
 <execution>
 <id>attach-sources</id>
 <phase>verify</phase>
 <goals>
 <goal>jar-no-fork</goal>
 </goals>
 </execution>
 </executions>
 </plugin>
 <plugin>
 <groupId>io.github.liyao52033</groupId>
 <artifactId>autofill-javadoc-maven-plugin</artifactId>
 <version>1.2.0</version>
 <executions>
 <execution>
 <goals>
 <goal>autofill</goal>
 </goals>
 <phase>generate-sources</phase> <!-- 确保在javadoc之前运行 -->
 </execution>
 </executions>
 <configuration>
 <sourceDir>src/main/java</sourceDir> <!-- 指定源代码目录 -->
 </configuration>
 </plugin>
 <plugin>
 <groupId>org.apache.maven.plugins</groupId>
 <artifactId>maven-javadoc-plugin</artifactId>
 <version>3.5.0</version>
 <configuration>
 <encoding>UTF-8</encoding>
 <charset>UTF-8</charset>
 <docencoding>UTF-8</docencoding>
 </configuration>
 <executions>
 <execution>
 <id>attach-javadocs</id>
 <goals>
 <goal>jar</goal>
 </goals>
 <phase>verify</phase> <!-- Javadoc 生成在 verify 阶段运行 -->
 </execution>
 </executions>
 </plugin>
 <plugin>
 <groupId>org.apache.maven.plugins</groupId>
 <artifactId>maven-gpg-plugin</artifactId>
 <version>3.2.7</version>
 <executions>
 <execution>
 <id>sign-artifacts</id>
 <phase>verify</phase>
 <goals>
 <goal>sign</goal>
 </goals>
 </execution>
 </executions>
 <configuration>
 <gpgArguments>
 <arg>--pinentry-mode</arg>
 <arg>loopback</arg>
 </gpgArguments>
 </configuration>
 </plugin>
 </plugins>
</build>

项目结构

项目结构如下：

ECharts

Fri, 04 Apr 2025 02:55:11 +0000

说明

ECharts封装，不需要再单独引入Echarts，只需给定配置即可，使用请参考官方文档

基本配置项

配置提示框组件，显示提示信息。

 tooltip: {
 trigger: 'item', // 数据项图形触发
 formatter: '{a} <br/>{b}: {c} ({d}%)' // 格式化显示内容
}

legend

配置图例组件，展示系列名称，提供点击筛选的功能。

Docker使用

Fri, 15 Sep 2023 17:48:16 +0000

docker概述

基本介绍

Docker 是一个开源的应用容器引擎，基于 Go 语言并遵从 Apache2.0 协议开源。

Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。

容器是完全使用沙箱机制，相互之间不会有任何接口,更重要的是容器性能开销极低。

Docker 从 17.03 版本之后分为 CE（Community Edition: 社区版）和 EE（Enterprise Edition: 企业版），我们用社区版就可以了。官网

patch-package使用

Thu, 31 Aug 2023 11:30:19 +0000

::: info

使用 patch-package 修改第三方模块，及时解决第三方依赖包的 bug

:::

安装

:::: el-tabs

::: el-tab-pane label=yarn

 yarn add --dev patch-package postinstall-postinstall

::: ::: el-tab-pane label=npm

 npm install patch-package --save-dev

::: ::::

创建补丁

直接在项目根目录下的 node_modules 文件夹中找到要修改依赖包的相关文件，然后回到根目录执行

:::: el-tabs

::: el-tab-pane label=yarn

 yarn patch-package package-name

::: ::: el-tab-pane label=npm

 npx patch-package package-name

::: ::::

TortosseGit的ssh配置

Thu, 31 Aug 2023 11:39:21 +0000

GIT的ssh配置

git生成密钥最好通过ssh-gen命令直接生成，因为会自动保存到 home/.ssh目录下。而且是openssh格式。使用命令

 ssh-keygen -t rsa -C ‘example@qq.com’

一路回车，将id_rsa.pub拷贝到github或其他服务器，就可以使用ssh登陆了。

TortoiseGit 设置ssh方式

TortoiseGit使用扩展名为ppk的密钥，而不是ssh-keygen生成的rsa密钥。

也就是说使用 ssh-keygen -t rsa -C “576953565@qq.com"产生的密钥，TortoiseGit中不能用。

TextScroll

Fri, 04 Apr 2025 01:38:17 +0000

说明

文本滚动公告

使用

 <template>
 <div class="app-container">
 <!-- 基础用法 -->
 <TextScroll text="这是一条基础的滚动公告，默认向左滚动。" typewriter />

 <!-- 使用不同的类型 -->
 <TextScroll type="success" text="这是一条成功类型的滚动公告" typewriter />

 <TextScroll type="warning" text="这是一条警告类型的滚动公告" />

 <TextScroll type="danger" text="这是一条危险类型的滚动公告" />

 <TextScroll type="info" text="这是一条信息类型的滚动公告" />

 <!-- 自定义速度和方向 -->
 <TextScroll text="这是一条速度较慢、向右滚动的公告" :speed="30" direction="right" showClose />
 </div>
</template>

<script setup lang="ts">
import { TextScroll } from "liyao-vue-common";
</script>

<style lang="scss" scoped>
.app-container {
 :deep(.text-scroll-container) {
 margin-bottom: 20px;
 }
}
</style>

nginx常用配置

Fri, 01 Sep 2023 09:58:20 +0000

配置HTTPS

 server {
 listen 443 ssl;
 server_name xiaoying.org.cn;
 root /usr/local/dist; #前端打包文件位置

 #域名证书文件名称
 ssl_certificate /etc/nginx/xiaoying.org.cn_bundle.crt;
 #域名证书私钥文件名称
 ssl_certificate_key /etc/nginx/xiaoying.org.cn.key;
 
 #请按照以下协议配置
 ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
 #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
 ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
 ssl_prefer_server_ciphers on;
 ssl_session_cache shared:SSL:1m;
 ssl_session_timeout 10m;

 location ^~ /api/ { #后端接口前缀
 proxy_set_header Host $host;
 proxy_set_header X-Forwarded-Proto $scheme;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_pass http://127.0.0.1:8080; #后端接口地址
 }

 include /etc/nginx/default.d/*.conf;

 error_page 404 /404.html;
 location = /40x.html {
 }

 error_page 500 502 503 504 /50x.html;
 location = /50x.html {
 }
 }

开启gzip压缩静态文件

配置 GZip 压缩

gzip 可以在 http, server, location 中和配置，这里配置到 http 下是全局配置，

Docker部署前后端分离项目

Sat, 16 Sep 2023 11:06:57 +0000

服务器要求

下面的建议不包含minio的内存占用，如需使用minio，请另外考虑

核心数和内存大小有两种方案：
- 2核4G（使用ES搜索策略）
- 2核2G（使用MySQL搜素策略）
带宽大小有两种方案：
- 使用oss对带宽没有要求（本人亲测：1M带宽+oss 访问速度很快）
- 使用minio需要大一点的带宽（小带宽也可以，但需要使用cdn加速）

docker的安装

以下命令基于CentOS环境。

下载工具
```
 yum install -y yum-utils
 
```

设置镜像的仓库

 yum-config-manager \
 --add-repo \
 https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo #配置阿里云的镜像

更新yum软件包索引
```
 yum makecache fast
 
```

安装docker相关配置

 yum install -y docker-ce docker-ce-cli containerd.io

启动docker

 systemctl start docker
# 查看当前版本号，是否启动成功
docker version
# 设置开机自启动
systemctl enable docker

安装mysql

方式1: 无挂载模式

这种方式直接运行mysql之后，所有关于mysql的内容都在容器中，后续如果需要修改mysql的内容，需要手动进入容器内进行操作。且在宿主机上无备份，一旦容器被删除，数据也会被删除。

node后端部署

Thu, 10 Apr 2025 16:06:22 +0000

目录结构

需要上传到服务器的文件如下

 ├── backend
│ └── server.js //node后端
├── deploy.sh
├── dist //打包产物
│ ├── assets
│ ├── favicon.ico
├── Dockerfile
├── nginx
│ └── default.conf
├── package.json

Dockerfile

 # 使用 Node 官方镜像
FROM node:18-alpine

# 设置工作目录
WORKDIR /app

# 拷贝后端文件（假设 server.js 和 package.json 都在当前目录）
COPY backend/server.js package.json ./

# 安装依赖和 pm2
RUN npm config set registry https://registry.npmmirror.com && \
 npm install --no-audit --no-fund && \
 npm install -g pm2 --no-audit --no-fund


# 开放端口（如果后端监听 3600）
EXPOSE 3600

# 使用 pm2 启动
CMD ["pm2-runtime", "server.js"]

deploy.sh

 #!/bin/bash
set -e

PROJECT_NAME=sha1-checker

echo "🔄 停止并删除旧容器..."
sudo docker stop $PROJECT_NAME || true
sudo docker rm $PROJECT_NAME || true

echo "🔧 构建镜像..."
sudo docker build -t $PROJECT_NAME .

echo "🚀 启动容器..."
sudo docker run -d \
 --name $PROJECT_NAME \
 -p 3600:3600 \
 $PROJECT_NAME

echo "✅ 部署完成！访问: https://maven.xiaoying.org.cn/"

# echo "📄 后端日志输出："
docker logs -f $PROJECT_NAME

nginx.conf

 server {
 listen 443 ssl;
 server_name maven.xiaoying.org.cn;

 ssl_certificate /etc/nginx/fullchain.cer;
 ssl_certificate_key /etc/nginx/xiaoying.org.cn.key;
 ssl_session_cache shared:SSL:1m;
 ssl_session_timeout 10m;
 ssl_ciphers HIGH:!aNULL:!MD5;
 ssl_prefer_server_ciphers on;

 client_max_body_size 50m;

 location / {
 root /usr/local/maven/dist;
 index index.html;
 try_files $uri $uri/ /index.html;
 }

 location /api/ {
 proxy_set_header Host $host;
 proxy_set_header X-Forwarded-Proto $scheme;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_pass http://127.0.0.1:3600;
 }
}

publish.sh

 #!/bin/bash

set -e
set -x

# 远程服务器信息
REMOTE_USER="root"
REMOTE_SERVER="服务器IP"
REMOTE_DIR="/usr/local/maven"
NGINX_DIR="/etc/nginx/conf.d"

FILES_TO_COPY="dist backend nginx Dockerfile deploy.sh package.json"

# === 打包并拷贝代码 ===
echo "📦 打包代码..."

rm -f app.tar.gz
tar czf app.tar.gz $FILES_TO_COPY

echo "🚀 拷贝代码到服务器 $REMOTE_SERVER ..."
scp app.tar.gz "$REMOTE_USER@$REMOTE_SERVER:/tmp/app.tar.gz"

# 上传到服务器后删除本地的包
rm -f app.tar.gz

# 远程登录并执行部署
ssh $REMOTE_USER@$REMOTE_SERVER << EOF

set -e

echo "🧹 清理旧文件..."
rm -rf "$REMOTE_DIR"
mkdir -p "$REMOTE_DIR"
tar xzf /tmp/app.tar.gz -C "$REMOTE_DIR"
rm /tmp/app.tar.gz

# 删除旧的nginx配置
cd $NGINX_DIR
rm -rf sha1Checker.conf

echo "拷贝 nginx 配置..."
cp $REMOTE_DIR/nginx/default.conf $NGINX_DIR/sha1Checker.conf

#重启nginx
systemctl restart nginx

echo "🎉 前端部署完成，开始部署后端！"

echo "Checking for deploy.sh..."
if [ -f "$REMOTE_DIR/deploy.sh" ]; then
 echo "deploy.sh found."
 cd $REMOTE_DIR
 chmod +x deploy.sh
 ./deploy.sh
else
 echo "deploy.sh not found."
fi
EOF

部署

打开Git Bash ，在项目根目录下执行

docker-compose使用

Sat, 30 Sep 2023 12:56:14 +0000

安装

需提前安装 Docker Engine 和 Docker CLI，参考docker安装

 yum install docker-compose

通过检查版本来验证 Docker Compose 是否正确安装

 docker-compose -version

使用

::: info 提示

常用hooks

Wed, 26 Mar 2025 03:05:58 +0000

useBusuanzi

给网站、博客文章添加阅读次数统计

 <script setup lang="ts">
import { useBusuanzi } from "liyao-vue-common";
const { site_pv, site_uv, page_pv, page_uv } = useBusuanzi();
</script>

<template>
 <div>
 <p>站点访问量: {{ site_pv }}</p>
 <p>站点访客数: {{ site_uv }}</p>
 <p>当前页面访问量: {{ page_pv }}</p>
 <p>当前页面访客数: {{ page_uv }}</p>
 </div>
</template>

useDayDiff

计算给定时间的相差天数

 import { useDayDiff } from "liyao-vue-common";
const { diffDays } = useDayDiff("2024-01-01");
console.log(diffDays.value);

useTimeDiff

计算给定时间的相差时间(年/月/日/时/分)

mounted阶段获取不到dom的原因及解决方法

Thu, 11 Jan 2024 22:39:33 +0000

问题描述

需要在dom渲染后，获取dom来进行页面自动滚动到需要的位置。在mounted阶段用document.querySelector()以及this.$refs获取元素均获取不到。用两种方式获取元素，打印出来的结果都是undefined。有解答说用this.nextTick(function(){…})，试了一下结果还是undefined

分析原因

1、Vue 推荐使用 template 来创建 HTML。但是模板毕竟是模板，不是真实的dom节点。vue会先利用对象中的render 函数**，**生成虚拟节点并挂载，挂载的真实DOM是进行异步渲染的，并且在修改完状态后也是异步的方式进行渲染。代码中将document.querySelector操作定义为同步任务，此时事件队列应该是：

同步队列：获取dom元素，
异步队列：从虚拟节点转真实节点并进行渲染

根据先同步后异步的执行流程，是获取不到dom元素的；

2、在mounted阶段，若需要获取的元素或组件有v-if，v-for属性。v-if的初始化结果为false。v-for遍历的数组初始化阶段无值。（即mounted阶段后，根据获得的后台数据来动态操作dom）这两种情况都会导致mounted阶段获取元素的语句获取不到dom。

解决方法

1、把获取元素的语句放在异步获取到数据，赋值给data中的key之后进行。同时需要给获取元素的语句加上setTimeout。因为setTimeout是宏任务，会在vue的render函数执行之后再执行。

  mounted() {
 setTimeout(() => {
 if (this.$route.path !== "/") {
 let rightbar = document.querySelector(".right-menu-wrapper");
 let arrow = document.querySelector(".page-nav-centre-next");

 if (rightbar) {
 arrow.style.right = "16rem";
 } else {
 arrow.style.right = "2rem"; 
 }
 }
 }, 200);
 
 },

2、把获取元素的语句放到updated周期中执行。这种情况下每次视图更新之后都会执行一次获取元素的语句，如果不需要每次视图更新之后都执行，可以在mounted周期中，使用可以在mounted周期中，使用this.$once让获取元素的语句只在updated阶段执行一次。

代码上线事故原因

Wed, 10 Jan 2024 09:24:03 +0000

本地代码误发线上

这个问题本质上是由于粗心导致的，很多同学为了自己本地开发方便，可能写了一些模拟数据、特殊逻辑（比如不判断用户权限），但是最后上线前不检查，就直接把特殊逻辑发到线上了，导致各种各样 “哭笑不得” 的问题。

这里有 2 种预防方式：

1）使用 CR（Code Review）机制，在自己的代码发布前，由同事或上级来检查代码，从而提前发现一些问题。

2）不要写仅本地可用的代码、尽量不写和环境有关的特殊逻辑，保证自己写的每行代码都是可发布上线的

虽然这个问题可以预防，但是无法根治，因为人本身就是最大的 Bug，一个再牛的人也可能会犯一些小错误。

环境差异

很多时候，同一套代码换一个环境可能就跑不通了。比如操作系统、网络连通、依赖服务、依赖版本、防火墙安全设置等等的差异。

举个典型的例子，本地的数据库新增了字段，测试通过了；结果上线前忘了在线上数据库同步新增字段，就导致数据库相关功能崩掉。

要解决这个问题，最好的办法就是尽量保证本地环境和线上环境一致，比如使用 Docker 容器等虚拟化技术来模拟线上环境运行。或者在正式上线前，通过测试环境、预发布环境来测试部署，降低环境差异的风险。

此外还有个建议，对于核心项目，团队内最好能整理出一个规范的部署文档、明确定义项目运行的环境，保证团队成员都能提前知晓这些信息并正确配置环境。

配置差异

由于本地和线上的环境可能存在差异，我们适用于本地的项目配置文件不一定适用于线上。

比如 Java 项目的 application.yml 文件，一般会定义项目启动的端口、依赖的数据库服务配置、cookie 配置等。如果在配置文件中指定项目在 8080 端口启动，你自己的电脑上运行可能没问题，但为啥发到线上就运行不起来或无法访问呢？

大概率是因为线上服务器的 8080 端口已经被其他人占用了；或者没有给该端口开启防火墙，导致无法访问。

为了解决这个问题，通常我们会分别为本地和线上指定不同的配置，比如区分 application-dev.yml 、application-prod.yml 等，不同的环境加载不同的配置文件。

还可以使用一些可视化的配置管理工具（比如 Apollo、Nacos），让管理员统一在工具上发布不同环境的配置，并通过工具校验配置并记录变更，减少人工导致的配置差错。

资源路径差异

如果你的项目中引用了本地文件（比如 C 盘的 xxx.txt），那么上线后大概率会报错。因为线上的服务器并没有该路径、或者在该路径下没有文件。

为了解决这个问题，建议大家尽量使用相对路径去加载资源；或者使用集中的分布式文件系统、对象存储服务等，给每个资源一个统一确定的标识（比如网址），保证各机器上都能用相同的路径找到该资源。

API 接口差异

这个问题更多地是出现在前端。一般情况下，前端本地调试时请求的是后端的开发服务，而上线后请求的是线上服务。不仅请求的路径不同的，还可能出现跨域问题，导致接口请求失败、无法登录等问题。

所以尽量保证开发和线上接口的路径规范一致，对于跨域问题可以使用 Nginx 网关的反向代理功能统一解决。

另外，在企业开发中，一般开发环境和线上环境的网络是隔离的。如果你的代码依赖一些第三方接口，一定要注意接口的网络连通性、接口的性能差异等问题，提前做好相关的测试。不要等到上线后才发现，我 c，接口怎么调不通啊？！

还有一种情况，在使用有回调功能的第三方服务（比如公众号开发）时经常会出现，那就是忘记了修改第三方服务的回调地址。而且这种错误不好排查，因为你能请求通别人的服务，只不过别人的服务通知不到你罢了。所以要格外留意这种情况。

用量差异

这是所有上线出 Bug 的情况中，我个人认为最高级的了，而且很难绝对避免。

Invoker Commands API 说明文档

Tue, 03 Mar 2026 20:14:24 +0000

HTML Invoker Commands API 是 Web 平台上一个新兴的声明式 API，通过 HTML 本身就能控制 UI 交互元素（如弹出框、对话框等），减少对手写 JavaScript 的依赖，从而改善页面首屏加载体验。

背景与目标

过去常见的交互模式，比如点击按钮弹出一个对话框、显示/隐藏弹出菜单等，需要开发者编写大量事件监听器和逻辑代码。在资源受限或初始加载场景下，这会导致延迟和性能问题。Invoker Commands API 的目标是用原生、声明式的方式，通过 HTML 直接表达这些行为，减少开发和运行时对 JavaScript 的依赖，从而提高交互的即时性和可访问性。

核心概念

声明式控制按钮

Invoker Commands API 为 <button> 元素增加了两个核心属性：

commandfor：指定该按钮控制的目标元素 ID
command：定义要执行的操作名称

这两者联合起来，使按键行为可以由浏览器原生执行，不再需要手写监听器。

HTML 属性详解

属性	类型	说明
`commandfor`	string	目标元素的 id，用于指定被控制元素
`command`	string	执行的命令标识（如内置命令或自定义命令）

内置命令

当前 API 内置了一些常用命令，用于控制 UI 组件：

toggle-popover：切换显示 / 隐藏状态
show-popover：显示弹出框
hide-popover：隐藏弹出框

对话框（Dialog）

show-modal：以模态方式展示对话框
close：关闭对话框

这些命令可以让按钮直接控制对应的组件行为，而不必绑定事件处理器。

useScript

Fri, 04 Apr 2025 07:53:35 +0000

异步加载第三方脚本

 <template>
 <div>
 <p v-if="isLoading">脚本正在加载中...</p>
 <p v-if="success">脚本加载成功！</p>
 <p v-if="error && isTimeout">脚本加载超时，已重试 {{ getRetryCount() }} 次。</p>
 <p v-if="error && !isTimeout">脚本加载出错，请检查脚本链接或网络状况。</p>
 <button @click="runScriptDependentFunction" :disabled="!success">运行依赖脚本的功能</button>
 </div>
</template>

<script setup lang="ts">
import { useScript } from 'liyao-vue-common';

const { isLoading, error, success, isTimeout } = useScript({
 src: 'https://example.com/your-script.js',
});

const runScriptDependentFunction = () => {
 if (success.value) {
 // 调用脚本中定义的函数
 window.doSomething(); 
 }
};
</script>

顺序加载多个脚本

顺序加载指的是按顺序依次加载脚本，前一个脚本加载完成后再加载下一个脚本。可以使用 async/await 或者 Promise 的链式调用来实现。

浏览器调试

Thu, 31 Aug 2023 11:00:59 +0000

调试网页和 Node.js 的代码，可以在代码某一行打个断点，代码执行到这里的时候就会断住，可以看它的作用域、调用栈等。

但有的时候，我们并不知道应该在哪里打断点：

比如代码抛了异常，你想打个断点看看异常出现的原因，但你并不知道异常在哪里发生的。

比如 dom 被某个地方修改了，你想打个断点看看怎么修改的，但你并不知道是哪段代码修改了它。

比如有的断点你想只在满足某个条件的时候断住，不满足条件就不需要断住。

类似的情况有很多，需要断住，但是普通的断点又不大合适，这时候就需要其他的断点类型了。

我们分别来看一下：

异常断点

代码抛了异常，你想知道在哪抛的，这时候就可以用异常断点。

比如这样一段代码：

function add(a, b) { throw Error(‘add’); return a + b; } console.log(add(1, 2));

add 函数里抛了个异常，你想在异常处断住，这时候就可以加个异常断点：

用 node 的调试来跑：

勾选 Uncaught Exceptions：

它可以在没有被处理的错误或者 Promise 的 reject 处断住。

上面那个 Caught Exception 是在被 catch 处理的异常出断住。

useWatermark

Fri, 04 Apr 2025 07:53:35 +0000

说明

设置防篡改水印

参数

 type waterMarkOptions = {
 // 自定义水印的文字大小
 fontSize?: number;
 // 自定义水印的文字颜色
 fontColor?: string;
 // 自定义水印的文字字体
 fontFamily?: string;
 // 自定义水印的文字对齐方式
 textAlign?: CanvasTextAlign;
 // 自定义水印的文字基线
 textBaseline?: CanvasTextBaseline;
 // 自定义水印的文字倾斜角度
 rotate?: number;
};

使用

默认添加到document.body，如果添加到其他元素要保证添加水印的元素（此例中为 #app）的 position 属性设为 relative 或者 absolute，这样水印才能正确定位。
可按需调整 waterMarkOptions 对象里的配置选项，例如 fontSize、fontColor、rotate 等。

 <template>
 <div id="app">
 <h1>水印示例</h1>
 <button @click="addWatermark">添加水印</button>
 <button @click="removeWatermark">移除水印</button>
 </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useWatermark } from 'liyao-vue-common'; 

const appRef = ref<HTMLElement | null>(null);

const { setWatermark, clear } = useWatermark(appRef, {
 // waterMarkOptions...
 fontSize: 16,
 fontColor: 'rgba(0, 0, 0, 0.2)',
 rotate: 30
});

const addWatermark = () => {
 setWatermark('自定义水印文本');
};

const removeWatermark = () => {
 clear();
};
</script>

<style scoped>
#app {
 position: relative;
 padding: 20px;
}
</style>

Webpack 的 sourcemap 配置

Sun, 14 Jan 2024 15:10:30 +0000

webpack 的 sourcemap 配置是比较麻烦的，比如这两个配置的区别：

eval-nosources-cheap-module-source-map
hidden-source-map

是不是分不清楚？

其实它是有规律的。

你把配置写错的时候，webpack 会提示你一个正则：

 ^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$

这个就是配置的规律，是几种基础配置的组合。

搞懂了每一种基础配置，比如 eval、nosources、cheap、module，按照规律组合起来，也就搞懂了整体的配置。

那这每一种配置都是什么意思呢？

我们分别来看一下。

eval

eval 的 api 是动态执行 JS 代码的。比如：

但有个问题，eval 的代码打不了断点。

怎么解决这个问题呢？

浏览器支持了这样一种特性，只要在 eval 代码的最后加上 //# sourceURL=xxx，那就会以 xxx 为名字把这段代码加到 sources 里。那不就可以打断点了么？

比如这样：

vscode调试 Vue 项目

Tue, 09 Jan 2024 12:30:42 +0000

Vue 项目的创建有两种方式：

用 @vue/cli 创建的 webpack 作为构建工具的项目

用 create-vue 创建的 vite 作为构建工具的项目

调试 @vue/cli 创建的 webpack 项目

首先安装 @vue/cli：

 yarn global add @vue/cli

然后执行以下命令创建 vue 项目：

 vue create vue-demo1

选择 vue3 的模版。

安装完之后进入到 vue-demo1 目录，执行 npm run serve 把开发服务跑起来。

.VSCode Chrome Debugger配置详解

Sun, 14 Jan 2024 14:18:30 +0000

首先，调试配置文件不用自己创建，可以直接点击 Debug 窗口的

create a launch.json file

快速创建：

launch/attach

创建 Chrome Debug 配置有两种方式：launch 和 attach：

它们只是 request 的配置不同：

我们知道，调试就是把浏览器跑起来，访问目标网页，这时候会有一个 ws 的调试服务，我们用 frontend 的 ws 客户端连接上这个 ws 服务，就可以进行调试了。

VSCode Chrome Debugger 断点映射的原理

Sun, 14 Jan 2024 16:15:33 +0000

经常会遇到一些断点相关的问题，比如：

在文件里打的断点是灰的，一直不生效
断点断在了奇怪的文件和位置

不知道什么原因导致的，该怎么解决。

这是因为不清楚 VSCode Debugger 里打的断点是怎么在网页里生效的。

断点映射的原理

我们在 VSCode 里打的断点是这样的：

VSCode 会记录你在哪个文件哪行打了个断点。

在 breakpoints 这里可以看到：

代码经过编译打包之后，可能会产生一个 bundle.js，网页里运行的是这个 js 文件：

我们打的断点最终还是在代码的运行时，也就是网页里断住的，所以在 VSCode 里打的断点会被传递给浏览器，通过 CDP 调试协议。

但是问题来了，我们本地打的断点是一个绝对路径，也就是包含 ${workspaceFolder} 的路径，而网页里根本没有这个路径，那怎么断住的呢？

调试 Vue 源码

Sun, 14 Jan 2024 14:44:59 +0000

首先，还是通过 vue cli 创建项目（要用 5.0 以上的 cli）：

安装 @vue/cli 后执行 vue create vue-demo 创建 vue 项目：

选择 vue3 的模版。

安装完之后进入到 vue-demo 目录，执行 npm run serve 把开发服务跑起来。

浏览器访问，会看到渲染出的页面：

修改下 vue.config.js，把 devtool 改成 source-map：

vuepress-plugin-element-ui

Fri, 01 Sep 2023 14:13:33 +0000

usage

:::: el-tabs

::: el-tab-pane label=install

 yarn add vuepress-plugin-element-ui -D
yarn add core-js@2.6.12

:::

::: el-tab-pane label=use

 // .vuepress/config.js
module.exports = {
 plugins: [
 'element-ui'
 ]
}

:::

::: el-tab-pane label=docs 使用文档 :::

vue-element-admin使用

Fri, 25 Aug 2023 11:12:39 +0000

移除mock

vue.config.js删除before: require(’./mock/mock-server.js')

 module.exports = {
 publicPath: '/',
 outputDir: 'dist',
 assetsDir: 'static',
 lintOnSave: process.env.NODE_ENV === 'development',
 productionSourceMap: false,
 devServer: {
 port: port,
 overlay: {
 warnings: false,
 errors: true
 }
 before: require('./mock/mock-server.js') //删除
 },

删除main.js如下代码

 import { mockXHR } from '../mock'
if (process.env.NODE_ENV === 'production') {
 mockXHR()
}

修改api的接口为后端真实接口

 // api/user.js
export function login(data) {
 return request({
 url: '/api/user/login',
 method: 'post',
 data
 })
}

export function getInfo(token) {
 return request({
 url: '/api/user/getInfo',
 method: 'get',
 params: { token }
 })
}

修改axios的baseURL为后端地址

 // .env.development
VUE_APP_BASE_API = 'http://localhost:8101/'

修改封装axios的request请求

 // create an axios instance
const service = axios.create({
 baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
 withCredentials: true, // send cookies when cross-domain requests
 timeout: 5000 // request timeout
})

//axios响应拦截器
 if (res.code !== 0) {
 Message({
 message: res.message || 'Error',
 type: 'error',
 duration: 5 * 1000
 })

 // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
 if (res.code === 40100) {
 // to re-login
 MessageBox.confirm('登录超时', 'Confirm logout', {
 confirmButtonText: '确定',
 cancelButtonText: '取消',
 type: 'warning'
 }).then(() => {
 store.dispatch('user/resetToken').then(() => {
 location.reload()
 })
 })
 }

修改 /store/modules/user的请求,将请求字段跟后端一致

  // user login
 login({ commit }, userInfo) {
 const { userAccount, userPassword } = userInfo
 return new Promise((resolve, reject) => {
 login({ userAccount: userAccount.trim(), userPassword: userPassword }).then(response => {
 const { data } = response
 commit('SET_TOKEN', data.token)
 setToken(data.token)
 resolve()
 }).catch(error => {
 reject(error)
 })
 })
 },

 // get user info
 getInfo({ commit, state }) {
 return new Promise((resolve, reject) => {
 getInfo(state.token).then(response => {
 const { data } = response

 if (!data) {
 reject('Verification failed, please Login again.')
 }

 const { userRole, userName, userAvatar, userProfile } = data

 // roles must be a non-empty array
 if (!userRole || userRole.length <= 0) {
 reject('getInfo: roles must be a non-null array!')
 }

 commit('SET_ROLES', userRole)
 commit('SET_NAME', userName)
 commit('SET_AVATAR', userAvatar)
 commit('SET_INTRODUCTION', userProfile)
 resolve(data)
 }).catch(error => {
 reject(error)
 })
 })
 },

修改store/getter字段与后端一致

  userAvatar: state => state.user.userAvatar,
 userName: state => state.user.userName,
 userProfile: state => state.user.userProfile,
 userRole: state => state.user.userRole,

修改permission如下两处

  if (hasToken) {
 if (to.path === '/login') {
 next({ path: '/' })
 NProgress.done()
 } else {
 const hasRoles = store.getters.userRole && store.getters.userRole.length > 0
 if (hasRoles) {
 next()
 } else {
 try {
 //将原本的roles改成userRole，跟后端一致
 const { userRole } = await store.dispatch('user/getInfo')

 const accessRoutes = await store.dispatch('permission/generateRoutes', userRole)

 router.addRoutes(accessRoutes)
 next({ ...to, replace: true })
 } catch (error) {
 await store.dispatch('user/resetToken')
 // 将error改成error.message
 Message.error(error.message || 'Has Error')
 next(`/login?redirect=${to.path}`)
 NProgress.done()
 }

修改login/index.vue

9.1 将账号密码请求字段与对应输入框ref字段改成userAccount，userPassword

el-upload封装

Fri, 25 Aug 2023 11:15:42 +0000

父组件模板

 <template>
 <div>
 <upload-component @file-selected="handleFileSelected"></upload-component>
 </div>
</template>

<script>
import UploadComponent from './UploadComponent.vue';

export default {
 components: {
 UploadComponent
 },
 methods: {
 handleFileSelected(file) {
 // 处理选中的文件
 console.log('选中的文件：', file);
 // 执行其他逻辑
 }
 }
};
</script>

子组件模板（UploadComponent.vue）

 <template>
 <div>
 <el-upload
 class="upload-demo"
 :action="uploadUrl"
 :on-change="handleFileChange"
 >
 <el-button slot="trigger">选取文件</el-button>
 <el-button style="margin-left: 10px;">上传到服务器</el-button>
 </el-upload>
 </div>
</template>

<script>
export default {
 methods: {
 handleFileChange(file) {
 // 触发自定义事件将文件传递给父组件
 this.$emit('file-selected', file);
 }
 }
};
</script>

在子组件中，当文件发生变化时，通过this.$emit方法触发file-selected事件，并将文件作为参数传递给父组件。

文件上传

Fri, 25 Aug 2023 11:15:40 +0000

自动上传

 <el-upload
 class="upload-demo"
 :on-success="handleSuccess" //上传成功后的回调
 :before-upload="beforeUpload"
 action="/api/file/upload" //上传地址
 data // 请求参数
 accept=".jpeg, .jpg, .svg, .png, .webp"
 multiple
>
 <img :src="imgUrl" v-if="flag" style="width: 100%" />
 <i class="el-icon-upload"/>
 <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
 <div class="el-upload__tip" slot="tip" style="color:red">只能上传jpeg, jpg, svg, png,
 webp文件,且大小不超过1M
 </div>
</el-upload>
 
<script>
export default {
 data() {
 return {
 data: {
 "biz": user_avatar
 }
 }
 }
}
</script>

手动上传

 <el-upload
 class="upload-demo"
 :before-upload="beforeUpload"
 :http-request="upload" //手动上传
 drag
 action="#" //手动上传随遍填，不可为空
 accept=".jpeg, .jpg, .svg, .png, .webp"
 multiple
>
 <img :src="imgUrl" v-if="flag" style="width: 100%" />
 <i class="el-icon-upload"/>
 <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
 <div class="el-upload__tip" slot="tip" style="color:red">只能上传jpeg, jpg, svg, png,
 webp文件,且大小不超过1M
 </div>
</el-upload>

async upload() {
 const formData = new FormData()
 formData.append('file', this.file)
 formData.append('biz', 'user_avatar')
 await changeAvatar(formData).then(res => {
 this.flag = true
 this.form.avatar = res.data
 this.imgUrl = res.data
 })
 },

上传前更改文件名

 /**
 先获取到源文件的后缀名，然后新建一个文件，将文件名改为时间戳加后缀名，防止名称重复，最后把新文件作为参数进行上传
**/
beforeUpload(file) {
 const fileExtension = file.name.split('.').pop().toLowerCase()
 const timeStamp = new Date().getTime()
 const copyFile = new File([file], `${timeStamp}` + '.' + fileExtension)
 this.file = copyFile
 },

mavon-editor局部引入

Fri, 25 Aug 2023 11:15:41 +0000

editor.vue

 <template>
 <div id="editor">
 <mavon-editor style="height: 100%"></mavon-editor>
 </div>
</template>
<script>
// Local Registration
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
 name: 'editor',
 components: {
 mavonEditor
 // or 'mavon-editor': mavonEditor
 }
}
</script>
<style>
#editor {
 margin: auto;
 width: 80%;
 height: 580px;
}
</style>

main.js

 import Vue from 'vue';
 var editor = require('./editor.vue');
 new Vue({
 el: '#main',
 render: h => h(editor)
});

将文件名与文件路径插入当前光标位置，这是mavon-editor 内置的方法

vuex使用

Fri, 25 Aug 2023 11:15:38 +0000

::: info 总体流程

store => mutation => action => 组件内this.$store.dispatch()调用(非async异步)

:::

store

  const getters = {
 token: state => state.user.token,
 userAvatar: state => state.user.userAvatar,
 userProfile: state => state.user.userProfile
}

mutation

 const mutations = {
 SET_TOKEN: (state, token) => {
 state.token = token
 },
 SET_PROFILE: (state, userProfile) => {
 state.userProfile = userProfile
 },
 SET_AVATAR: (state, userAvatar) => {
 state.userAvatar = userAvatar
 },
}

action

注意事项

Thu, 24 Aug 2023 14:21:59 +0000

setup不能使用this

 import { useRouter } from "vue-router"
const router = useRouter() 
router.push('/') //相当于this.$router.push('/')

import { useRoute } from "vue-router"
const route = useRoute() //route是页面的路由信息，相当于this.$route

题目详情页

  <router-link :to="'/interface/detail/'+item.id"></router-link>

子组件props

 const props = defineProps({
 page: {
 type: Number,
 default: 1,
 },
 limit: {
 type: Number,
 default: 10,
 }
});

const emit = defineEmits(["pagination", "update:page", "update:limit"]);

const currentPage = useVModel(props, "page", emit);

const pageSize = useVModel(props, "limit", emit);

function handleSizeChange(val: number) {
 emit("pagination", { page: currentPage, limit: val });
}

报错 Uncaught TypeError: Cannot read properties of null (reading ‘isCE‘) at renderSlot

swagger自动生成接口

Thu, 24 Aug 2023 14:21:56 +0000

生成js/ts接口代码

github地址： https://github.com/zeronejs/zerone

官方文档地址：https://zerone.top/guide/cli.html#api

安装

 npm i @zeronejs/cli --save-dev

编写swagger.config.json放置在src/api中

 {
 "docsUrl": "http://www.example.com/v3/api-docs", //json文档地址
 "includeTags": [], //要包含的标签（未填充或空数组表示全部包含）
 "excludeTags": ["bot-callback-controller"], //要排除的标签
 "axiosInstanceUrl": "@/utils/request", //axios实例地址（默认：@/utils/request）
 "prefix": "api" //接口添加的前缀
}

运行命令生成代码

 //package.json
"scripts": {
 "OpenAPI": "zerone api -p ./src/api -d -js"
 }

::: info 提示

动态路由

Thu, 24 Aug 2023 14:21:58 +0000

具体实现

创建vue实例的时候将vue-router挂载，但这个时候vue-router挂载一些登录或者不用权限的公用的页面。

当用户登录后，获取用role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。

调用router.addRoute(route)添加用户可访问的路由。

使用pinia管理路由表，根据vuex中可访问的路由渲染侧边栏组件。

路由文件分静态路由和动态路由

 export const constantRoutes: RouteRecordRaw[] = [
 {
 path: "/redirect",
 component: Layout,
 meta: { hidden: true },
 children: [
 {
 path: "/redirect/:path(.*)",
 component: () => import("@/views/redirect/index.vue"),
 },
 ],
 },

 {
 path: "/login",
 component: () => import("@/views/login/index.vue"),
 meta: { hidden: true },
 },

 {
 path: "/",
 component: Layout,
 redirect: "/dashboard",
 children: [
 {
 path: "dashboard",
 component: () => import("@/views/dashboard/index.vue"),
 name: "Dashboard",
 meta: { title: "dashboard", icon: "homepage", affix: true },
 },
 {
 path: "401",
 component: () => import("@/views/error-page/401.vue"),
 meta: { hidden: true },
 },
 {
 path: "404",
 component: () => import("@/views/error-page/404.vue"),
 meta: { hidden: true },
 },
 ],
 }
];

// 动态路由
export const asyncRoute: RouteRecordRaw[] = [
 // 多级嵌套路由
 {
 path: '/nested',
 component: Layout,
 redirect: '/nested/level1/level2',
 name: 'Nested',
 meta: {title: '多级菜单', icon: 'nested', userRole: ['user']},
 children: [
 {
 path: 'level1',
 component: () => import('@/views/nested/level1/index.vue'),
 name: 'Level1',
 meta: {title: '菜单一级',userRole: ['user']},
 redirect: '/nested/level1/level2',
 children: [
 {
 path: 'level2',
 component: () => import('@/views/nested/level1/level2/index.vue'),
 name: 'Level2',
 meta: {title: '菜单二级',userRole: ['user']},
 redirect: '/nested/level1/level2/level3',
 children: [
 {
 path: 'level3-1',
 component: () => import('@/views/nested/level1/level2/level3/index1.vue'),
 name: 'Level3-1',
 meta: {title: '菜单三级-1', userRole: ["admin"]}
 },
 {
 path: 'level3-2',
 component: () => import('@/views/nested/level1/level2/level3/index2.vue'),
 name: 'Level3-2',
 meta: {title: '菜单三级-2', userRole: ["admin"]}
 }
 ]
 }
 ]
 },
 ]
 },
 // 外部链接
 {
	path: '/external-link',
	component: Layout,
	name: "blogs",
	meta: {title: '外部链接', icon: 'nested', userRole: ['user']},
	redirect: 'https://www.cnblogs.com/haoxianrui/',
	children: [
	 {
		path: 'https://www.cnblogs.com/haoxianrui/',
		name: 'link',
		meta: { title: '有来技术官方博客', icon: 'link', userRole: ['user'] },
		redirect: 'https://www.cnblogs.com/haoxianrui/',
	 }
	]
 }
]

初始挂载静态路由

router.ts

整合 Element Plus

Thu, 24 Aug 2023 14:22:03 +0000

unplugin 自动导入

Element Plus 官方文档中推荐 按需自动导入 的方式，而此需要使用额外的插件 unplugin-auto-import 和 unplugin-vue-components 来导入要使用的组件。所以在整合 Element Plus 之前先了解下自动导入的概念和作用

概念

为了避免在多个页面重复引入 API 或 组件，由此而产生的自动导入插件来节省重复代码和提高开发效率。

插件	概念	自动导入对象
unplugin-auto-import	按需自动导入API	ref，reactive,watch,computed 等API
unplugin-vue-components	按需自动导入组件	Element Plus 等三方库和指定目录下的自定义组件

看下自动导入插件未使用和使用的区别：

插件名	未使用自动导入	使用自动导入
unplugin-auto-import
unplugin-vue-components

安装插件依赖

wangeditor使用

Thu, 24 Aug 2023 14:22:01 +0000

安装及使用https://www.wangeditor.com/v5/for-frame.html#vue3

工具栏配置

 const toolbars = reactive({
 // excludeKeys为排除不想要的菜单，只需填写写菜单组 key 的值即可
 excludeKeys: [
 // 全部菜单如下所示
	"header1",// 标题
	"header2",
	"header3",
	"|",
	"blockquote", // 引用
	"bold", // 加粗
	"underline", // 下划线
	"italic", // 斜体
	"group-more-style",
	"color", // 文字颜色

	"bgColor", // 背景色

	"fontSize", // 字号

	"fontFamily", // 字体

	"lineHeight", // 行高

	"bulletedList", // 无序列表

	"numberedList", // 有序列表
	
	"justifyLeft", //左对齐
	
	"justifyRight", //右对齐
	
 "justifyCenter", //居中对齐

	"todo", // 代办
	
	"emotion",// 表情
	
	"insertLink",// 插入链接
	
	"insertTable",// 插入表格
	
	"codeBlock", // 代码块
	
	"divider", // 分割线
	
	"undo", // 撤销
	
	"redo", // 重做
	
	"fullScreen", // 全屏
	
	"through", //中划线
	
	"clearStyle" , //清除格式
	
	"group-indent", // 缩进
	
	"group-image", // 上传图片
	
	"insertVideo" // 上传视频
 ]
})

图片及视频上传

 // 编辑器配置
const editorConfig = ref({
	placeholder: "请输入内容...",
 autoFocus : false,
 readOnly: props.readOnly,
	MENU_CONF: {
		uploadImage: {
			// 自定义图片上传
			async customUpload(file: any, insertFn: any) {
				uploadFileApi(file).then((response) => {
					const url = response.data;
					insertFn(url);
				});
			},
		},
		uploadVideo: {
		 // 自定义视频上传
		 async customUpload(file: any, insertFn: any) { // TS 语法
			uploadVideoApi(file).then((response) => {
				 const url = response.data;
				 insertFn(url);
			 });
		 }
		}
	},
});


//uploadApi接口如下

/**
 * 上传视频
 *
 * @param file
 */
export function uploadVideoApi(file: File): AxiosPromise<FileInfo> {
 const formData = new FormData();
 formData.append('file', file);
 formData.append('biz', 'file');
 return request({
	url: '/api/file/upload',
	method: 'post',
	data: formData,
	headers: {
	 'Content-Type': 'multipart/form-data'
	}
 });
}

monacoEditor使用

Thu, 24 Aug 2023 14:22:02 +0000

基于vue3 + vite4 + element-plus 官网： https://github.com/microsoft/monaco-editor 演示： https://microsoft.github.io/monaco-editor/playground.html?source=v0.40.0#example-creating-the-editor-hello-world

自定义404页面

Thu, 24 Aug 2023 14:22:07 +0000

vue2

 <script>
export default {
 data() {
	return {
	 message: "阿噢，一不小心来到了荒无人烟的沙漠"
	};
 }
};
</script>

<template>
 <div class="wscn-http404-container">
	<div class="wscn-http404">
	 <div class="pic-404">
		<img
		 class="pic-404__parent"
		 src="https://img.xiaoying.org.cn/img/202310012125958.png
		 alt="404"
		/>
		<img
		 class="pic-404__child left"
		 src="https://img.xiaoying.org.cn/img/202310012126428.png
		 alt="404"
		/>
		<img
		 class="pic-404__child mid"
		 src="https://img.xiaoying.org.cn/img/202310012126428.png
		 alt="404"
		/>
		<img
		 class="pic-404__child right"
		 src="https://img.xiaoying.org.cn/img/202310012126428.png
		 alt="404"
		/>
	 </div>
	 <div class="bullshit">
		<div class="bullshit__oops">OOPS!</div>
		<div class="bullshit__info">
		 All rights reserved
		 <a
			style="color: #20a0ff"
			href="https://vuepress.vuejs.org/zh/theme/option-api.html#globallayout"
			target="_blank"
		 >vuepress</a
		 >
		</div>
		<div class="bullshit__headline">{{ message }}</div>
		<div class="bullshit__info">
		 请检查您输入的网址是否正确，或返回首页。
		</div>
		<a href="/" class="bullshit__return-home">回首页</a>
	 </div>
	</div>
 </div>
</template>

<style lang="stylus" scoped>

.wscn-http404-container {
 position: relative !important;
}

.wscn-http404 {
 position: absolute !important;
 top: 50% !important;
 transform: translateY(50%) !important;
 width: 1200px;
 padding: 0 50px;
 overflow: hidden;
}

.wscn-http404 > .pic-404 {
 position: relative;
 float: left;
 width: 600px;
 overflow: hidden;
}

.pic-404__parent {
 width: 100%;
}

.pic-404__child {
 position: absolute;
}


.left {
 top: 17px;
 left: 220px;
 width: 80px;
 opacity: 0;
 animation-name: cloudLeft;
 animation-duration: 2s;
 animation-timing-function: linear;
 animation-delay: 1s;
 animation-fill-mode: forwards;
}

 .mid {
 top: 10px;
 left: 420px;
 width: 46px;
 opacity: 0;
 animation-name: cloudMid;
 animation-duration: 2s;
 animation-timing-function: linear;
 animation-delay: 1.2s;
 animation-fill-mode: forwards;
}

.right {
 top: 100px;
 left: 500px;
 width: 62px;
 opacity: 0;
 animation-name: cloudRight;
 animation-duration: 2s;
 animation-timing-function: linear;
 animation-delay: 1s;
 animation-fill-mode: forwards;
}

@keyframes cloudLeft {
 0% {
	top: 17px;
	left: 220px;
	opacity: 0;
 }
 
 20% {
	top: 33px;
	left: 188px;
	opacity: 1;
 }
 
 80% {
	top: 81px;
	left: 92px;
	opacity: 1;
 }
 
 100% {
	top: 97px;
	left: 60px;
	opacity: 0;
 }
}

@keyframes cloudRight {
 0% {
	top: 100px;
	left: 500px;
	opacity: 0;
 }
 
 20% {
	top: 120px;
	left: 460px;
	opacity: 1;
 }
 
 80% {
	top: 180px;
	left: 340px;
	opacity: 1;
 }
 
 100% {
	top: 200px;
	left: 300px;
	opacity: 0;
 }
}

.bullshit {
 position: relative;
 float: left;
 width: 300px;
 padding: 30px 0;
 overflow: hidden;
}

.bullshit__oops {
 margin-bottom: 20px;
 font-size: 32px;
 font-weight: bold;
 line-height: 40px;
 color: #1482f0;
 opacity: 0;
 animation-name: slideUp;
 animation-duration: 0.5s;
 animation-fill-mode: forwards;
}

.bullshit__headline {
 margin-bottom: 10px;
 font-size: 20px;
 font-weight: bold;
 line-height: 24px;
 color: #222;
 opacity: 0;
 animation-name: slideUp;
 animation-duration: 0.5s;
 animation-delay: 0.1s;
 animation-fill-mode: forwards;
}

.bullshit__info {
 margin-bottom: 30px;
 font-size: 13px;
 line-height: 21px;
 color: grey;
 opacity: 0;
 animation-name: slideUp;
 animation-duration: 0.5s;
 animation-delay: 0.2s;
 animation-fill-mode: forwards;
}

.bullshit__return-home {
 display: block;
 float: left;
 width: 110px;
 height: 36px;
 font-size: 14px;
 line-height: 36px;
 color: #fff;
 text-align: center;
 cursor: pointer;
 background: #1482f0;
 border-radius: 100px;
 opacity: 0;
 animation-name: slideUp;
 animation-duration: 0.5s;
 animation-delay: 0.3s;
 animation-fill-mode: forwards;
}

@keyframes slideUp {
 0% {
	opacity: 0;
	transform: translateY(60px);
 }
 
 100% {
	opacity: 1;
	transform: translateY(0);
 }
}


</style>

vue3

 <!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
<script lang="ts">
export default {
 name: "Page404",
};
</script>

<script setup lang="ts">
const message = "当前页面不存在"
</script>

<template>
 <div class="wscn-http404-container">
 <div class="wscn-http404">
 <div class="pic-404">
 <img
		 class="pic-404__parent"
		 src="https://img.xiaoying.org.cn/img/202310012125958.png
		 alt="404"
		/>
		<img
		 class="pic-404__child left"
		 src="https://img.xiaoying.org.cn/img/202310012126428.png
		 alt="404"
		/>
		<img
		 class="pic-404__child mid"
		 src="https://img.xiaoying.org.cn/img/202310012126428.png
		 alt="404"
		/>
		<img
		 class="pic-404__child right"
		 src="https://img.xiaoying.org.cn/img/202310012126428.png
		 alt="404"
		/>
 </div>
 <div class="bullshit">
 <div class="bullshit__oops">OOPS!</div>
 <div class="bullshit__info">
 All rights reserved
 <a
 style="color: #20a0ff"
 href="https://wallstreetcn.com"
 target="_blank"
 >wallstreetcn</a
 >
 </div>
 <div class="bullshit__headline">{{ message }}</div>
 <div class="bullshit__info">
					 请检查您输入的网址是否正确，或返回首页。
 </div>
 <a href="" class="bullshit__return-home">回首页</a>
 </div>
 </div>
 </div>
</template>

<style lang="scss" scoped>
.wscn-http404-container {
 position: absolute;
 top: 40%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.wscn-http404 {
 position: relative;
 width: 1200px;
 padding: 0 50px;
 overflow: hidden;

 .pic-404 {
 position: relative;
 float: left;
 width: 600px;
 overflow: hidden;

 &__parent {
 width: 100%;
 }

 &__child {
 position: absolute;

 &.left {
 top: 17px;
 left: 220px;
 width: 80px;
 opacity: 0;
 animation-name: cloudLeft;
 animation-duration: 2s;
 animation-timing-function: linear;
 animation-delay: 1s;
 animation-fill-mode: forwards;
 }

 &.mid {
 top: 10px;
 left: 420px;
 width: 46px;
 opacity: 0;
 animation-name: cloudMid;
 animation-duration: 2s;
 animation-timing-function: linear;
 animation-delay: 1.2s;
 animation-fill-mode: forwards;
 }

 &.right {
 top: 100px;
 left: 500px;
 width: 62px;
 opacity: 0;
 animation-name: cloudRight;
 animation-duration: 2s;
 animation-timing-function: linear;
 animation-delay: 1s;
 animation-fill-mode: forwards;
 }

 @keyframes cloudLeft {
 0% {
 top: 17px;
 left: 220px;
 opacity: 0;
 }

 20% {
 top: 33px;
 left: 188px;
 opacity: 1;
 }

 80% {
 top: 81px;
 left: 92px;
 opacity: 1;
 }

 100% {
 top: 97px;
 left: 60px;
 opacity: 0;
 }
 }

 @keyframes cloudMid {
 0% {
 top: 10px;
 left: 420px;
 opacity: 0;
 }

 20% {
 top: 40px;
 left: 360px;
 opacity: 1;
 }

 70% {
 top: 130px;
 left: 180px;
 opacity: 1;
 }

 100% {
 top: 160px;
 left: 120px;
 opacity: 0;
 }
 }

 @keyframes cloudRight {
 0% {
 top: 100px;
 left: 500px;
 opacity: 0;
 }

 20% {
 top: 120px;
 left: 460px;
 opacity: 1;
 }

 80% {
 top: 180px;
 left: 340px;
 opacity: 1;
 }

 100% {
 top: 200px;
 left: 300px;
 opacity: 0;
 }
 }
 }
 }

 .bullshit {
 position: relative;
 float: left;
 width: 300px;
 padding: 30px 0;
 overflow: hidden;

 &__oops {
 margin-bottom: 20px;
 font-size: 32px;
 font-weight: bold;
 line-height: 40px;
 color: #1482f0;
 opacity: 0;
 animation-name: slideUp;
 animation-duration: 0.5s;
 animation-fill-mode: forwards;
 }

 &__headline {
 margin-bottom: 10px;
 font-size: 20px;
 font-weight: bold;
 line-height: 24px;
 color: #222;
 opacity: 0;
 animation-name: slideUp;
 animation-duration: 0.5s;
 animation-delay: 0.1s;
 animation-fill-mode: forwards;
 }

 &__info {
 margin-bottom: 30px;
 font-size: 13px;
 line-height: 21px;
 color: grey;
 opacity: 0;
 animation-name: slideUp;
 animation-duration: 0.5s;
 animation-delay: 0.2s;
 animation-fill-mode: forwards;
 }

 &__return-home {
 display: block;
 float: left;
 width: 110px;
 height: 36px;
 font-size: 14px;
 line-height: 36px;
 color: #fff;
 text-align: center;
 cursor: pointer;
 background: #1482f0;
 border-radius: 100px;
 opacity: 0;
 animation-name: slideUp;
 animation-duration: 0.5s;
 animation-delay: 0.3s;
 animation-fill-mode: forwards;
 }

 @keyframes slideUp {
 0% {
 opacity: 0;
 transform: translateY(60px);
 }

 100% {
 opacity: 1;
 transform: translateY(0);
 }
 }
 }
}
</style>

验证码封装

Thu, 24 Aug 2023 15:16:11 +0000

 <template>
	<el-form-item class="login-container" prop="verifyCode" label="验证码">
		<el-input
			v-model="captchaData.verifyCode"
			auto-complete="off"
			placeholder="请输入右侧的计算结果"
			clearable
			class="input"
			size="large"
			@change="verifyCaptcha"
			@input="setVerifyCode"
		>
		 <template #prefix>
			<svg-icon icon-class="verify_code"/>
		 </template>
		</el-input>
		<div class="captcha">
			<img :src="captchaBase64" @click="getCaptcha"/>
		</div>
	</el-form-item>
</template>

<script lang="ts" setup>

import SvgIcon from "@/components/SvgIcon/index.vue";
import { getCaptchaApi } from "@/api/auth";
import { CaptchaCheck, CaptchaControllerService } from "@/generated";

const props = defineProps({
 verifyCode: {
	type: String,
	required: true
 },
 rules: {
	type: Object,
	required: true
 }
});


const emit = defineEmits(['update:verifyCode']);

const setVerifyCode = (value: string) => {
 emit('update:verifyCode', value); // 发送自定义事件更新父组件的 verifyCode 值
};

watch(() => props.verifyCode, (newValue) => {
 captchaData.value.verifyCode= newValue; // 当从父组件传来的 verifyCode 值变化时，更新本地的 verifyCode 值
});

/**
 * 验证码图片Base64字符串
 */
const captchaBase64 = ref();

const captchaData = ref<CaptchaCheck>({
	verifyCode: props.verifyCode,
	verifyCodeKey: "",
});

let selfRules = ref({})
const veriflCode = [{
 validator: verifyCaptcha,
 trigger: 'blur'
}]

/**
 * 获取验证码
 */
function getCaptcha() {
	getCaptchaApi().then(({ data }) => {
		const { verifyCodeBase64, verifyCodeKey } = data;
		captchaData.value.verifyCodeKey = verifyCodeKey;
		captchaBase64.value = verifyCodeBase64;
	});
}

/**
 * 校验
 */
async function verifyCaptcha (rule: any, value: any, callback: any) {
 if (value){
	return new Promise((resolve, reject) => {
	 CaptchaControllerService.checkCaptcha(captchaData.value)
		.then((res) => {
		 const code = res.data
		 if (code !== value){
			callback(new Error('验证码错误!'))
		 } else if(!code){
			callback(new Error('验证码超时!'))
		 }else {
			callback()
		 }
		})
		.catch((error: any) => {
		 reject(error);
		 getCaptcha();
		});
	})
 } else {
	callback(new Error('验证码不能为空!'))
 }
}

onBeforeMount(() => {
 selfRules.value = props.rules
 selfRules.value.verifyCode = veriflCode
})

onMounted(() => {
	getCaptcha();
});

</script>

<style lang="scss" scoped>
:deep(.el-form-item__content){
 display: flex;
 flex-grow: 1;
 flex-wrap: nowrap;
 align-items: center;
 justify-content: left;
}

:deep(.el-form-item__label){
 height: 48px;
 line-height: 48px;
}

.login-container {
	width: 500px;
	//padding: 20px 35px 0;
	display: flex;
	white-space: nowrap;

	.input {
		background: transparent;
		height: 48px;
	 flex-grow: 1;

		// 子组件 scoped 无效，使用 :deep
		//:deep(.el-input__wrapper) {
		// padding: 0;
		// background: transparent;
		// box-shadow: none;
		//
		// .el-input__inner {
		//	color: #fff;
		//	background: transparent;
		//	border: 0;
		//	border-radius: 0;
		//	caret-color: #fff;
		//
		//	&:-webkit-autofill {
		//	 box-shadow: 0 0 0 1000px transparent inset !important;
		//	 -webkit-text-fill-color: #fff !important;
		//	}
		//
		//	// 设置输入框自动填充的延迟属性
		//	&:-webkit-autofill,
		//	&:-webkit-autofill:hover,
		//	&:-webkit-autofill:focus,
		//	&:-webkit-autofill:active {
		//	 transition: color 99999s ease-out, background-color 99999s ease-out;
		//	 transition-delay: 99999s;
		//	}
		// }
		//}
	}

	.captcha {
		margin-left: 1px;

		img {
		 width: 120px;
		 height: 48px;
		 cursor: pointer;
		 display: flex;
		 align-items: center;
		}
	}
}
</style>

联表查询SQL

Thu, 24 Aug 2023 18:03:14 +0000

 <!-- 用户分页列表 -->
 <select id="getUserPage" resultType="com.youlai.system.model.bo.UserBO">
 SELECT
 u.id,
 u.username,
 u.nickname,
 u.mobile,
 u.gender,
 u.avatar,
 u.STATUS,
 d.NAME AS dept_name,
 GROUP_CONCAT( r.NAME ) AS roleNames,
 u.create_time
 FROM
 sys_user u
 LEFT JOIN sys_dept d ON u.dept_id = d.id
 LEFT JOIN sys_user_role sur ON u.id = sur.user_id
 LEFT JOIN sys_role r ON sur.role_id = r.id
 <where>
 u.deleted = 0 AND u.username != 'root'
 <if test='queryParams.keywords!=null and queryParams.keywords.trim() neq ""'>
 AND (
 u.username LIKE CONCAT('%',#{queryParams.keywords},'%')
 OR u.nickname LIKE CONCAT('%',#{queryParams.keywords},'%')
 OR u.mobile LIKE CONCAT('%',#{queryParams.keywords},'%')
 )
 </if>
 <if test='queryParams.status!=null'>
 AND u.status = #{queryParams.status}
 </if>
 <if test='queryParams.deptId!=null'>
 AND concat(',',concat(d.tree_path,',',d.id),',') like concat('%,',#{queryParams.deptId},',%')
 </if>
 </where>
 GROUP BY u.id
 </select>
 
 
 <!-- 获取路由列表 -->
 <select id="listRoutes" resultMap="RouteMap">
 SELECT
 t1.id,
 t1.name,
 t1.parentId,
 t1.path,
 t1.component,
 t1.icon,
 t1.sort,
 t1.visible,
 t1.redirect,
 t1.type,
 t3.code
 FROM
 sys_menu t1
 LEFT JOIN sys_role_menu t2 ON t1.id = t2.menuId
 LEFT JOIN sys_role t3 ON t2.roleId = t3.id
 WHERE
 t1.type != '${@com.youlai.system.common.enums.MenuTypeEnum@BUTTON.getValue()}'
 ORDER BY t1.sort asc
 </select>

 <!-- 获取角色拥有的权限集合 -->
 <select id="listRolePerms" resultType="java.lang.String">
 SELECT
 DISTINCT t1.perm
 FROM
 sys_menu t1
 INNER JOIN sys_role_menu t2 ON t1.id = t2.menuId
 INNER JOIN sys_role t3 ON t3.id = t2.roleId
 WHERE
 t1.type = '${@com.youlai.system.common.enums.MenuTypeEnum@BUTTON.getValue()}'
 AND t1.perm IS NOT NULL
 <choose>
 <when test="roles!=null and roles.size()>0">
 AND t3.CODE IN
 <foreach collection="roles" item="role" separator="," open="(" close=")">
 #{role}
 </foreach>
 </when>
 <otherwise>
 AND t1.id = -1
 </otherwise>
 </choose>
 </select>
 
<!-- 获取角色拥有的菜单ID集合 -->
 <select id="listMenuIdsByRoleId" resultType="java.lang.Long">
 SELECT
 rm.menuId
 FROM
 sys_role_menu rm
 INNER JOIN sys_menu m ON rm.menuId = m.id
 WHERE
 rm.roleId = #{roleId}
 </select>
 
 <!-- 获取用户导出列表 -->
 <select id="listExportUsers" resultType="com.youlai.system.model.vo.UserExportVO">
 SELECT
 u.username,
 u.nickname,
 u.mobile,
 CASE u.gender
 WHEN 1 THEN '男'
 WHEN 2 THEN '女'
 ELSE '未知'
 END gender,
 d.NAME AS dept_name,
 u.createTime
 FROM
 sys_user u
 LEFT JOIN sys_dept d ON u.deptId = d.id
 <where>
 u.isDelete = 0 AND u.username != 'root'
 <if test='keywords!=null and keywords.trim() neq ""'>
 AND (u.username LIKE CONCAT('%',#{keywords},'%')
 OR u.nickname LIKE CONCAT('%',#{keywords},'%')
 OR u.mobile LIKE CONCAT('%',#{keywords},'%'))
 </if>
 <if test='status!=null'>
 AND u.status = #{status}
 </if>
 <if test='deptId!=null'>
 AND concat(',',concat(d.tree_path,',',d.id),',') like concat('%,',#{deptId},',%')
 </if>
 </where>
 GROUP BY u.id
 </select>

element-plus多文件手动上传

Sun, 03 Nov 2024 17:41:35 +0000

::: info 提示

http-request上传多文件会导致每个文件都会自动上传从而多次请求后端接口，设置auto-upload=false，然后再添加一个上传按钮来请求后端接口，只提交一次上传多个文件，上传成功后清除上传文件列表

:::

接口文件

 /**
 * 上传多个文件
 */
export function multipartUploadLicense(files: File[], onProgress: (progressEvent: ProgressEvent) => void ): AxiosPromise<FileInfo> {
 const formData = new FormData();
	files.forEach((file) => {
			formData.append('files', file);
	});
	//@ts-ignore
	return request({
		url: "/api/license/multipartUpload",
		method: "post",
		data: formData,
		onUploadProgress: onProgress, // 设置上传进度回调
		headers: {
			"Content-Type": "multipart/form-data",
		},
	});
}

vue文件

 <template>
	<div>
		<el-upload
			ref="uploadRef"
			v-model:file-list="fileList"
			class="upload-demo"
			drag
			action=""
			accept=".lic, .keystore"
			:before-upload="beforeUpload"
			:on-change="handleChange"
			multiple
			:limit="2"
			:on-exceed="handleExceed"
			:auto-upload=false
			style="width: 50%;margin: 20px auto"
		>
			<el-icon class="el-icon--upload"><upload-filled /></el-icon>
			<div class="el-upload__text">
				拖拽或<em>点击上传</em>
			</div>
			<template #tip>
				<div class="el-upload__tip" style="color:red">
					只能上传.lic和.keystore等授权文件，不能超过2个，每个大小不超2M
				</div>
			</template>
		</el-upload>

		//进度条
		<el-progress
			v-if="uploading"
			:percentage="uploadProgress"
			:text-inside="true"
			:stroke-width="24"
			status="success"
			style="width: 80%;margin: 0 auto"
		/>

		<el-button type="primary" style="width: 300px;margin: 20px auto; display: block" @click="handleUpload">上传授权文件</el-button>

		<el-descriptions title="授权文件信息" :column="1" border class="margin-top">
			<el-descriptions-item
				label="开始时间"
				label-align="right"
				align="center"
			>
				<el-tag size="small">{{ LicenseInfo.startTime }} </el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="结束时间" label-align="right" align="center">
				<el-tag size="small">{{ LicenseInfo.endTime }} </el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="用户数量" label-align="right" align="center">
				<el-tag size="small">{{ LicenseInfo.userNum }} </el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="备注" label-align="right" align="center">
				<el-tag size="small">{{ LicenseInfo.remark }} </el-tag>
			</el-descriptions-item>
		</el-descriptions>

	</div>

</template>

<script setup lang="ts">

import { UploadFilled } from '@element-plus/icons-vue'
import { uploadLicense, multipartUploadLicense } from '@/api/file'
import { LicenseControllerService } from "@/generated"
import type { UploadProps, UploadRawFile, UploadUserFile, UploadInstance } from "element-plus";


let uploadRef=ref<UploadInstance>()
const fileList = ref<UploadUserFile[]>([])
const LicenseInfo = ref({
	startTime: '',
	endTime: '',
	userNum: '',
	remark: '',
})

// 上传状态和进度
const uploading = ref(false);
const uploadProgress = ref(0);

const handleExceed: UploadProps['onExceed'] = (files) => {
	ElMessageBox.alert(`当前限制选择 2 个文件，共选择了 ${files.length} 个文件,请重新选择`);
}

const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
 if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error('文件大小不能超过2MB')
		return false
	}

	const allowedExtensions = ['.lic', '.keystore']; // 允许的文件类型
	const fileExtension = rawFile.name.split('.').pop()?.toLowerCase();
	if (!fileExtension || !allowedExtensions.includes(`.${fileExtension}`)) {
		ElMessage.error('不支持的文件类型');
		return false;
	}

	return true
}

const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
	// 将上传的文件添加到 fileList 中
	fileList.value = uploadFiles.map(file => file as UploadUserFile);
};

function handleUpload() {
	// 提取所有文件的 raw 属性
	const files = fileList.value.map(file => file.raw as File);
	if(files.length === 0){
		ElMessage.error('请选择要上传的授权文件')
		return
	}
	// 上传文件
	multipartUploadLicense(files, (event: ProgressEvent) => {
		uploading.value = true; // 显示进度条
		uploadProgress.value = Math.round(event.loaded / event.total * 100); // 更新进度
		//防止进度条的进度和上传的对勾显示时机不一致
 if(uploadProgress.value > 98){
			uploadProgress.value = 99
		}
	}).then(() => {
		ElMessage({
			type: 'success',
			message: '上传成功',
			grouping: true,
		})

		uploadRef.value!.clearFiles()
		uploadProgress.value = 100;
		uploading.value = false; // 隐藏进度条
		uploadProgress.value = 0; // 重置进度
		loadLicense()

	})
}

function loadLicense(){
	LicenseControllerService.verifyLicense().then(res => {
		if(res.data && res.code === 0){
			LicenseInfo.value = res.data as any
		}
	})
}

onMounted(() => {
	loadLicense()
})

</script>


<style scoped>

.margin-top {
	width: 80%;
	margin: 50px auto;
}
</style>

rar for linux使用报错

Sat, 16 Sep 2023 21:53:42 +0000

问题：rar: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21’ not found (required by rar)

问题原因（缺乏动态库文件）

/lib64/libstdc++.so.6: version `GLIBCXX_3.4.21’下没有GLIBCXX_3.4.21这个版本，简而言之就是/lib64/libstdc++.so.6下的glibc版本太低了。

查看动态库中有哪些版本的glibc（发现缺少3.4.21的这个版本）

 strings /usr/lib64/libstdc++.so.6 | grep GLIBC

解决方法

由于anaconda中已经有了新版本glibc，所以复制anaconda中的glibc到/usr/lib64/中

查找annaconda的glibc所在位置

 find / -name "libstdc++.so*"

tsconfig.json详解与常用配置

Mon, 11 Mar 2024 15:56:29 +0000

参考文档：tsconfig.json · TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)

概述

如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。 tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。 tsconfig.json文件可以是个空文件，那么所有默认的文件都会以默认配置选项编译。在命令行上指定的编译选项会覆盖在tsconfig.json文件里的相应选项一个项目可以通过以下方式之一来编译：

不带任何输入文件的情况下调用tsc，编译器会从当前目录开始去查找tsconfig.json文件，逐级向上搜索父目录。
不带任何输入文件的情况下调用tsc，且使用命令行参数--project（或-p）指定一个包含tsconfig.json文件的目录。当命令行上指定了输入文件时，tsconfig.json文件会被忽略。

顶层配置

 {
 "extends": "",
 "compileOnSave": true,
 "compilerOptions": {},
 "files": [],
 "include": [],
 "exclude": [],
 "references": []
}

配置项	说明
extends	继承配置
compileOnSave	让IDE在保存文件的时候根据`tsconfig.json`重新生成文件要想支持这个特性需要Visual Studio 2015， TypeScript1.8.4以上并且安装atom-typescript插件。
compilerOptions	编译选项，详见compilerOptions
files	指定一个包含相对或绝对文件路径的列表
include	指定一个文件glob匹配模式列表
exclude	指定一个文件glob匹配模式列表
references	一个对象的数组，指明要引用的工程。每个引用的`path`属性都可以指向到包含`tsconfig.json`文件的目录，或者直接指向到配置文件本身（名字是任意的）

compilerOptions 编译选项

 {
 "extends": "",
 "compileOnSave": false,
 "compilerOptions": { //编译选项
 "allowJS": false, // 允许编译器编译JS，JSX文件
 "checkJs": false, // 	在 .js文件中报告错误。与allowJs配合使用。
 "allowSyntheticDefaultImports": false, //允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。默认值：module === "system" 或设置了 --esModuleInterop 且 module 不为 es2015 / esnext
 "allowUnreachableCode": false, //不报告执行不到的代码错误。
 "allowUnusedLabels": false, //不报告未使用的标签错误
 "alwaysStrict": false, // 在代码中注入'use strict',以严格模式解析并为每个源文件生成 "use strict"语句
 "charset": "utf8", //输入文件的字符集
 "declaration": false, // 生成声明文件.d.ts，开启后会自动生成声明文件
 "declarationDir": "", // 指定生成声明文件存放目录
 "diagnostics": false, // 显示诊断信息
 "extendedDiagnostics": false, //显示详细的诊段信息
 "experimentalDecorators":false,//启用实验性的ES装饰器
 "disableSizeLimit": false, //禁用JavaScript工程体积大小的限制
 "emitBOM": false, //在输出文件的开头加入BOM头（UTF-8 Byte Order Mark）。
 "forceConsistentCasingInFileNames": false, //禁止对同一个文件的不一致的引用
 "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度
 "isolatedModules":false,//将每个文件作为单独的模块（与“ts.transpileModule”类似）。
 "listEmittedFiles": false, //打印出编译后生成文件的名字
 "listFiles": false, // 编译过程中打印文件名
 "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置
 "target": "ES5", // 指定ECMAScript目标版本 "ES3"（默认）， "ES5"， "ES6"/ "ES2015"， "ES2016"， "ES2017"或 "ESNext"
 "module": "CommonJS", // 设置程序的模块系统， "None"， "CommonJS"， "AMD"， "System"， "UMD"， "ES6"或 "ES2015", "ESNext", "ES2020"，只有 "AMD"和 "System"能和 --outFile一起使用，"ES6"和 "ES2015"可使用在目标输出为 "ES5"或更低的情况下。默认值：target === "ES6" ? "ES6" : "commonjs"
 "moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入
 "jsx":"Preserve",//在 `.tsx`文件里支持JSX： `"React"`或 `"Preserve"`
 "jsxFactory":"React.createElement",//指定生成目标为react JSX时，使用的JSX工厂函数，比如 `React.createElement`或 `h`
 "newLine": "crlf", //当生成文件时指定行结束符： "crlf"（windows）或 "lf"（unix）。
 "noEmit": false, // 不输出文件,即编译后不会生成任何js文件
 "noEmitOnError": false, // 发送错误时不输出任何文件
 "noErrorTruncation": false, //不截短错误消息
 "noFallthroughCasesInSwitch": false, // 防止switch语句贯穿(即如果没有break语句后面不会执行)
 "noImplicitAny": false, // 不允许隐式的any类型,在表达式和声明上有隐含的 any类型时报错
 "noImplicitReturns": false, //每个分支都会有返回值，不是函数的所有返回路径都有返回值时报错
 "noImplicitThis": false, // 不允许this有隐式的any类型
 "noImplicitUseStrict": false, //模块输出中不包含 "use strict"指令
 "noLib": false, //不包含默认的库文件（ lib.d.ts）
 "noResolve": false, //不把 /// <reference``>或模块导入的文件加到编译文件列表。
 "noEmitHelpers": true, // 不生成helper函数，减小体积，需要额外安装，常配合importHelpers一起使用
 "noStrictGenericChecks": false, //禁用在函数类型里对泛型签名进行严格检查
 "noUnusedLocals": false, // 若有未使用的局部变量则抛错
 "noUnusedParameters": false, // 检若有未使用的函数参数则抛错
 "lib": [ //TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array",
 "DOM",
 "ES2015",
 "ScriptHost",
 "ES2019.Array"
 ],
 "outDir": "./dist", // 指定输出目录
 "outFile": "./app.js", // 将多个相互依赖的文件生成一个文件，可以用在AMD模块中，即开启时应设置"module": "AMD",
 "preserveSymlinks": false, //不把符号链接解析为其真实路径；将符号链接文件视为真正的文件
 "preserveWatchOutput": false, //保留watch模式下过时的控制台输出
 "removeComments": true, // 删除所有注释，除了以 /!*开头的版权信息
 "rootDir": "./", // 指定输出文件目录(用于输出)，用于控制输出目录结构
 "resolveJsonModule":true,//允许导入扩展名为“.json”的模块
 "emitDeclarationOnly": true, // 只生成声明文件，而不会生成js文件
 "sourceMap": true, // 生成目标文件的sourceMap文件
 "inlineSourceMap": false, // 生成目标文件的inline SourceMap，inline SourceMap会包含在生成的js文件中
 "inlineSources": false, // 将代码与sourcemaps生成到一个文件中，要求同时设置了 --inlineSourceMap或 --sourceMap属性
 "declarationMap": true, // 为声明文件生成sourceMap
 "types": [], // 要包含的类型声明文件名列表
 "typeRoots": [], // 声明文件目录，默认时node_modules/@types
 "importHelpers": true, // 通过tslib引入helper函数，文件必须是模块（比如 __extends， __rest等）
 "downlevelIteration": true, // 降级遍历器实现，如果目标源是es3/5，那么遍历器会有降级的实现
 "strict": true, // 启用所有严格类型检查选项。启用 --strict相当于启用 --noImplicitAny, --noImplicitThis, --alwaysStrict， --strictNullChecks和 --strictFunctionTypes和--strictPropertyInitialization
 "skipLibCheck": false, //忽略所有的声明文件（ *.d.ts）的类型检查
 "strictNullChecks": true, // 不允许把null、undefined赋值给其他类型的变量.在严格的 null检查模式下， null和 undefined值不包含在任何类型里，只允许用它们自己和 any来赋值（有个例外， undefined可以赋值到 void）
 "strictFunctionTypes": true, // 不允许函数参数双向协变
 "strictPropertyInitialization": true, // 	确保类的非undefined属性已经在构造函数里初始化。若要令此选项生效，需要同时启用--strictNullChecks
 "suppressExcessPropertyErrors": false, //阻止对对象字面量的额外属性检查
 "suppressImplicitAnyIndexErrors": false, //阻止 --noImplicitAny对缺少索引签名的索引对象报错
 "strictBindCallApply": true, // 严格的bind/call/apply检查
 "useDefineForClassFields": true, //详见 https://jkchao.github.io/typescript-book-chinese/new/typescript-3.7.html#usedefineforclassfields-%E6%A0%87%E8%AE%B0%E4%B8%8E-declare-%E5%B1%9E%E6%80%A7%E4%BF%AE%E9%A5%B0%E7%AC%A6
 "esModuleInterop": true, // 允许module.exports=xxx 导出，由import from 导入.因为很多老的js库使用了commonjs的导出方式，并且没有导出default属性
 "allowUmdGlobalAccess": true, // 允许在模块中全局变量的方式访问umd模块
 "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
 "paths": { // 模块名到基于 baseUrl的路径映射的列表
 // 如使用jq时不想使用默认版本，而需要手动指定版本，可进行如下配置
 "jquery": [
 "node_modules/jquery/dist/jquery.min.js"
 ]
 },
 "rootDirs": [
 "src",
 "out"
 ], // 将多个目录放在一个虚拟目录下，用于运行时，即编译后引入文件的位置可能发生变化，这也设置可以虚拟src和out在同一个目录下，不用再去改变路径也不会报错
 },
 "files": [],
 "include": [],
 "exclude": [],
 "references": []
}

files include exclude 文件包含

"files"指定一个包含相对或绝对文件路径的列表。 "include"和"exclude"属性指定一个文件glob匹配模式列表。支持的glob通配符有：

初始化客户端

Wed, 04 Oct 2023 14:33:24 +0000

安装 SDK

maven 安装在 maven 工程的 pom.xml 文件中添加相关依赖，内容如下：

 <dependency>
 <groupId>com.qcloud</groupId>
 <artifactId>cos_api</artifactId>
 <version>5.6.169</version>
</dependency>

::: info 注意

依赖坐标可能并非最新版本，请单击此处获取最新版本。

文件上传

Tue, 03 Oct 2023 22:58:38 +0000

后端

CosManager.java

 	/**
	 * 上传对象
	 *
	 * @param key 唯一键
	 * @param file 文件
	 */
	public void putObject(String key, File file) {
		// 调用 COS 接口之前必须保证本进程存在一个 COSClient 实例，如果没有则创建
		COSClient cosClient = createCOSClient();

		PutObjectRequest putObjectRequest = new PutObjectRequest(cosClientConfig.getBucket(), key,
				file);
		cosClient.putObject(putObjectRequest);

		// 确认本进程不再使用 cosClient 实例之后，关闭即可
		cosClient.shutdown();
 }

CosController

 import cn.hutool.core.io.FileUtil;
import com.hccake.ballcat.codegen.config.CosManager;
import com.hccake.ballcat.codegen.exception.BaseResponse;
import com.hccake.ballcat.codegen.exception.BusinessException;
import com.hccake.ballcat.codegen.exception.ErrorCode;
import com.hccake.ballcat.codegen.exception.ResultUtils;
import com.hccake.ballcat.codegen.model.entity.User;
import com.hccake.ballcat.codegen.model.enums.FileUploadBizEnum;
import com.hccake.ballcat.codegen.service.UserService;
import io.swagger.v3.oas.annotations.Operation;
import io.swagger.v3.oas.annotations.Parameter;
import io.swagger.v3.oas.annotations.tags.Tag;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.RandomStringUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestPart;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.util.Arrays;
import java.util.Date;

/**
 * cos对象操作
 *
 */
@RestController
@RequestMapping("/cos")
@Slf4j
@Tag(name = "CosController")
public class CosController {

	@Resource
	private UserService userService;

	@Resource
	private CosManager cosManager;


	/**文件上传
	 *
	 * @param multipartFile
	 * @param biz
	 * @param request
	 * @return
	 */
	@Operation(summary = "文件上传")
	@Parameter(name="biz",description = "cos文件地址，可选user,file",required = true)
	@PostMapping("/upload")
	public BaseResponse<String> upload(@RequestPart("file") MultipartFile multipartFile, String biz, HttpServletRequest request) {
		FileUploadBizEnum fileUploadBizEnum = FileUploadBizEnum.getEnumByValue(biz);
		if (fileUploadBizEnum == null) {
			throw new BusinessException(ErrorCode.PARAMS_ERROR);
		}
		validFile(multipartFile, fileUploadBizEnum);
		User loginUser = userService.getLoginUser(request);
		// 文件目录：根据业务、用户来划分
		Date now = new Date();
		long timestamp = now.getTime();
		String uuid = RandomStringUtils.randomAlphanumeric(8);
		String filename = uuid + "-" + timestamp;
		String fileSuffix = FileUtil.getSuffix(multipartFile.getOriginalFilename());
		String filepath = String.format("/%s/%s/%s.%s", fileUploadBizEnum.getValue(), loginUser.getId(), filename, fileSuffix);
		File file = null;
		try {
			// 上传文件
			file = File.createTempFile(filepath, null);
			multipartFile.transferTo(file);
			cosManager.putObject(filepath, file);
			// 返回可访问地址
			String HOST = "https://img.xiaoying.org.cn";
			return ResultUtils.success(HOST + filepath);
		} catch (Exception e) {
			log.error("file upload error, filepath = " + filepath, e);
			throw new BusinessException(ErrorCode.SYSTEM_ERROR, "上传失败");
		} finally {
			if (file != null) {
				// 删除临时文件
				boolean delete = file.delete();
				if (!delete) {
					log.error("file delete error, filepath = {}", filepath);
				}
			}
		}
	}

	/**
	 * 校验文件
	 *
	 * @param multipartFile
	 * @param fileUploadBizEnum 业务类型
	 */
	private void validFile(MultipartFile multipartFile, FileUploadBizEnum fileUploadBizEnum) {
		// 文件大小
		long fileSize = multipartFile.getSize();
		// 文件后缀
		String fileSuffix = FileUtil.getSuffix(multipartFile.getOriginalFilename());
		final long ONE_M = 1024 * 1024L;
		final long ONE_F = 300 * 1024 * 1024L;
		if (FileUploadBizEnum.USER_AVATAR.equals(fileUploadBizEnum)) {
			if (!Arrays.asList("jpeg", "jpg", "svg", "png", "webp").contains(fileSuffix)) {
				throw new BusinessException(ErrorCode.PARAMS_ERROR, "图片类型错误,只能上传jpeg，jpg，svg，png，webp格式");
			}
			if (fileSize > ONE_M) {
				throw new BusinessException(ErrorCode.PARAMS_ERROR, "图片大小不能超过 1M");
			}
		}
		if (FileUploadBizEnum.FILE_UPLOAD.equals(fileUploadBizEnum)) {
			if (fileSize > ONE_F) {
				throw new BusinessException(ErrorCode.PARAMS_ERROR, "文件大小不能超过 300M");
			}
 if (!Arrays.asList("jpeg", "jpg", "svg", "png", "webp").contains(fileSuffix)) {
 throw new BusinessException(ErrorCode.PARAMS_ERROR, "文件类型错误");
 }
		}
	}
}

前端

基于vue3 + ts + elementplus

文件下载

Tue, 03 Oct 2023 22:58:38 +0000

获取到文件下载输入流

后端

CosManager.java

  /**
 * 下载对象
 *
 * @param key 唯一键
 * @return 文件的字节数组
 */
 public byte[] getObject(String key)throws CosClientException, IOException {
 
 // 调用 COS 接口之前必须保证本进程存在一个 COSClient 实例，如果没有则创建
 COSClient cosClient = createCOSClient();
 
 //下载文件
 GetObjectRequest getObjectRequest = new GetObjectRequest(bucket, key);
 COSObjectInputStream cosObjectInput = null;

 try {
 COSObject cosObject = cosClient.getObject(getObjectRequest);
 cosObjectInput = cosObject.getObjectContent();
 } catch (CosServiceException e) {
 throw new BusinessException(ErrorCode.SYSTEM_ERROR, "下载失败");
 }


 // 处理下载到的流
 // 这里是直接读取，按实际情况来处理
 byte[] bytes = null;
 try {
 bytes = IOUtils.toByteArray(cosObjectInput);

 } catch (IOException e) {
 throw new BusinessException(ErrorCode.SYSTEM_ERROR, "数据读取失败");
 } finally {
 // 用完流之后一定要调用 close()
 cosObjectInput.close();
 }

 // 在流没有处理完之前，不能关闭 cosClient
 // 确认本进程不再使用 cosClient 实例之后，关闭即可
 cosClient.shutdown();
 return bytes;
 }

CosController.java

 /**
 * 文件下载
 *
 * @param uploadFileRequest 文件对象
 * @param request 请求
 * @return 用户id
 */
 @Operation(summary = "文件下载")
 @PostMapping("/download")
 public BaseResponse<byte[]> download(@RequestBody UploadFileRequest uploadFileRequest, HttpServletRequest request) {

 String filepath = uploadFileRequest.getFilepath();
 userService.getLoginUser(request);
 String key = filepath.replace(HOST, "");
 String fileName = StringUtils.substringAfterLast(key, "/");
 String fileExtension = StringUtils.substringAfter(fileName, ".");

 try {

 boolean objectExists = cosClient.doesObjectExist(bucket, key);
 if (!objectExists) {
 // 如果对象不存在，返回相应的响应
 throw new BusinessException(ErrorCode.NOT_FOUND_ERROR, "对象不存在");
 }

 // 调用cosManager.download()下载文件
 byte[] data = cosManager.getObject(key);

 // 推断MIME类型
 MediaType mediaType;
 switch (fileExtension.toLowerCase()) {
 case "pdf":
 mediaType = MediaType.APPLICATION_PDF;
 break;
 case "jpg":
 mediaType = MediaType.IMAGE_JPEG;
 break;
 // 添加更多文件类型和对应的MediaType
 default:
 mediaType = MediaType.APPLICATION_OCTET_STREAM;
 break;
 }

 // 设置响应头
 HttpHeaders headers = new HttpHeaders();
 headers.setContentType(mediaType);
 headers.setContentDispositionFormData("attachment", fileName);

 return ResultUtils.success(data, fileName, mediaType.getType());

 } catch (Exception e) {
 log.error("file download error, filepath = " + filepath, e);
 throw new BusinessException(ErrorCode.SYSTEM_ERROR, "下载失败:"+ e.getMessage());
 }

 }

前端

基于vue3 + ts + elementplus

文件删除

Tue, 03 Oct 2023 22:58:38 +0000

后端

CosManager.java

  /**
 *删除对象
 *
 * @param key 唯一键
 */
 public void deleteObjects(String key) {
 // 调用 COS 接口之前必须保证本进程存在一个 COSClient 实例，如果没有则创建
 COSClient cosClient = createCOSClient();
 
 //删除文件
 DeleteObjectRequest deleteObjectRequest = new DeleteObjectRequest(bucket,key);
 cosClient.deleteObject(deleteObjectRequest);
 
 // 确认本进程不再使用 cosClient 实例之后，关闭即可
 cosClient.shutdown();
 }

CosController.java

  /**
 * 文件删除
 *
 * @param uploadFileRequest 对象在cos中的url
 * @return 用户id
 */
 @Operation(summary = "文件删除")
 @PostMapping("/delete")
 public BaseResponse deleteCos(@RequestBody UploadFileRequest uploadFileRequest, HttpServletRequest request) {
 userService.getLoginUser(request);
 String filepath = uploadFileRequest.getFilepath();
 String key = filepath.replace(HOST, "");
 try {

 boolean objectExists = cosClient.doesObjectExist(cosClientConfig.getBucket(), key);
 if (!objectExists) {
 // 如果对象不存在，返回相应的响应
 throw new BusinessException(ErrorCode.NOT_FOUND_ERROR, "对象不存在");
 }
 // 尝试删除对象
 cosManager.deleteObjects(key);

 // 如果删除成功，返回成功响应
 return ResultUtils.success(key);

 } catch (Exception e) {
 // 捕获并处理异常
 log.error("file delete error, key = {}", key);

 // 返回包含错误信息的响应
 return ResultUtils.error(ErrorCode.SYSTEM_ERROR,"删除文件时发生异常: " + e.getMessage());
 }
 }

前端

基于vue3 + ts + elementplus

NodeJs获取签名

Sun, 14 Jan 2024 17:05:49 +0000

1、安装cos的nodejs依赖

:::: el-tabs

::: el-tab-pane label=yarn

 yarn add cos-nodejs-sdk-v5 -D

::: ::: el-tab-pane label=npm

 npm i cos-nodejs-sdk-v5 --save

::: ::::

2、使用

 const COS = require('cos-nodejs-sdk-v5')

const cos = new COS({
 SecretId: config.secretId,
 SecretKey: config.secretKey,
 // 是否自定义域名
 Domain: config.customUrl ? config.customUrl : ''
 })

 const key = (config.path ? config.path : '') + img.fileName

 // 去掉问号
 const queryStr = config.path?.startsWith('?') ? config.path.substring(1) : config.path
 const query = new Map(queryStr.split('&').map(value => {
 const arr = value.split('=')
 return [arr[0], arr]
 }))

 let url = cos.getObjectUrl({
 Bucket: config.bucket,
 Region: config.area,
 Key: key,
 Sign: true,
 Query: query,
 Expires: expireSeconds
 }, (err, data) => {
 if (err) {
 ctx.log.warn(err.message)
 }
 url = data.Url
 })
 return url

pandoc使用

Thu, 14 Sep 2023 21:48:35 +0000

常规选项

指定输入格式

 -f FORMAT, -r FORMAT, --from=FORMAT, --read=FORMAT

bibtex（BibTeX参考书目）
biblatex（BibLaTeX 参考书目）
commonmark（CommonMark Markdown）
commonmark_x（带有扩展的CommonMark Markdown）
creole（克里奥尔语 1.0）
csljson（CSL JSON参考书目）
csv（CSV表格）
tsv（TSV 表）
docbook（文档书）
docx（Word文档）
dokuwiki（DokuWiki 标记）
endnotexml（EndNote XML 参考书目）
epub（EPUB）
fb2（FictionBook2 电子书）
gfm( GitHub 风格的 Markdown )，或已弃用且不太准确的markdown_github；markdown_github仅当您需要gfm.
haddock（黑线鳕标记）
html（HTML）
ipynb（Jupyter 笔记本）
jats（JATS XML）
jira（Jira /Confluence wiki 标记）
json（原生 AST 的 JSON 版本）
latex（乳胶）
markdown( Pandoc 的 Markdown )
markdown_mmd（多Markdown）
markdown_phpextra( PHP Markdown 额外)
markdown_strict （原始未扩展的Markdown）
mediawiki（MediaWiki 标记）
man（罗夫·曼）
muse（缪斯）
native（哈斯克尔原生）
odt（ODT）
opml（OPML）
org（Emacs 组织模式）
ris（RIS 参考书目）
rtf（富文本格式）
rst（重构文本）
t2t（txt2标签）
textile（纺织）
tikiwiki（TikiWiki 标记）
twiki（TWiki 标记）
typst（打字员）
vimwiki（维姆维基）
自定义Lua阅读器的路径，请参阅下面的自定义阅读器和编写器

+EXTENSION可以通过将或附加-EXTENSION到格式名称来单独启用或禁用扩展。有关扩展及其名称的列表，请参阅下面的扩展。请参阅下面的--list-input-formats和--list-extensions。

meilisearch部署

Sun, 24 Sep 2023 22:03:03 +0000

部署

官方对于部署的介绍非常详细，各种方案都提供了，我这里选择使用 docker 来进行部署。

添加服务启动脚本start.sh到/tmp/scraper目录

 docker run -itd --name meilisearch -p 7700:7700 --restart=always \
 -e MEILI_ENV="production" -e MEILI_NO_ANALYTICS=true \
 -e MEILI_MASTER_KEY="自定义一个不少于16字节的秘钥" \
 -v $(pwd)/meili_data:/meili_data \
 getmeili/meilisearch

自建的时候，需要将环境变量声明为生产，并且必须指定 master-key，否则将会提示无法使用。

然后运行该脚本，服务启动，通过监听日志，查看服务状态是否正常。

也可以请求服务的健康接口进行验证：

 $ curl -s http://localhost:7700/health | jq
{
 "status": "available"
}

注意，生产模式下，只有这一个接口是不需要秘钥认证即可访问的，其他接口访问的时候都需要带上秘钥。

创建搜索的key

上边有了一个 master-key 用于爬虫抓取使用，还需要创建一个只有搜索权限的 key，可通过如下命令进行创建search.sh到/tmp/scraper目录

 curl \
 -X POST 'http://localhost:7700/keys' \
 -H 'Content-Type: application/json' \
 -H 'Authorization: Bearer 你自定义的秘钥' \
 --data-binary '{
 "description": "xiaoying.org.cn key",
 "actions": ["search"],
 "indexes": ["blog"], // 第四步建立索引抓取配置中的index_uid的值需与该值保持一致
 "expiresAt": "2099-01-01T00:00:00Z"
 }'

创建完成之后，能看到返回内容中有一个 key 的字段，就是这个只有搜索权限的 key 了。

Partials使用指南

Thu, 18 Dec 2025 20:49:40 +0000

什么是 Partials

Partials 是 Hugo 中的可重用模板片段，允许将模板的公共部分提取为独立文件，然后在其他模板中引用。这种模块化方式可以提高代码复用性，使模板结构更清晰，便于维护。

基本语法

基本引用方式

 <!-- 引用 partial -->
{{ partial "partial-name.html" . }}

<!-- 引用带路径的 partial -->
{{ partial "path/to/partial.html" . }}

<!-- 引用带缓存的 partial -->
{{ partialCached "partial-name.html" . }}

动态路径引用

 <!-- 使用 printf 构建动态路径 -->
{{ partial (printf "%s/%s" ($.Scratch.Get "pathName") "head/favicon.html") . }}

<!-- 使用变量构建路径 -->
{{ $pathName := "docs" }}
{{ partial (printf "%s/%s" $pathName "sidebar.html") . }}

项目中的 Partials 使用示例

基础 Partial 引用

静态路径引用

 <!-- 引用 Google Fonts partial -->
{{- partialCached "google-fonts" . }}

<!-- 引用 favicon -->
{{ partialCached (printf "%s/%s" ($.Scratch.Get "pathName") "head/favicon.html") . }}

条件引用

 <!-- 根据配置条件引用 -->
{{ if eq .Site.Params.docs.darkMode true -}}
 {{ $darkModeInit := resources.Get (printf "/%s/%s" ($.Scratch.Get "pathName") "js/darkmode-init.js") }}
{{ end -}}

<!-- 根据页面参数引用 -->
{{ if .Params.katex }}
 {{- partialCached (printf "%s/%s" ($.Scratch.Get "pathName") "footer/katex.html") . -}}
{{ end }}

使用 Scratch 存储和获取路径

项目中大量使用 Scratch 来存储和获取路径名：

cloudreve部署

Wed, 03 Jan 2024 01:00:19 +0000

创建目录结构

请确保运行之前：

1、手动创建 conf.ini 空文件或者符合 Cloudreve 配置文件规范的 conf.ini, 并将 /usr/local/cloudreve/conf.ini 替换为该路径

2 、手动创建 cloudreve.db 空文件, 并将 /usr/local/cloudreve/cloudreve.db 替换为该路径

3 、手动创建 uploads 文件夹, 并将 /usr/local/cloudreve/uploads 替换为该路径

4、手动创建 avatar 文件夹，并将 /usr/local/cloudreve/avatar 替换为该路径

或者，直接使用以下命令创建：

 cd /usr/local
&& mkdir -vp cloudreve/{uploads,avatar} \
&& touch cloudreve/conf.ini \
&& touch cloudreve/cloudreve.db

运行

然后，运行 docker container：

 docker run -d \
-p 5212:5212 \
--mount type=bind,source=/usr/local/cloudreve/conf.ini,target=/cloudreve/conf.ini \
--mount type=bind,source=/usr/local/cloudreve/cloudreve.db,target=/cloudreve/cloudreve.db \
-v /usr/local/cloudreve/uploads:/cloudreve/uploads \
-v /usr/local/cloudreve/avatar:/cloudreve/avatar \
cloudreve/cloudreve:latest

添加域名

这个根据自己的实际情况，我这里给 Nginx 添加配置文件，配置域名：

Hugo常用参数和变量指南

Thu, 18 Dec 2025 21:26:40 +0000

核心对象概述

Hugo模板系统提供了几个核心对象，用于访问网站的各种信息和配置：

.Site - 网站全局信息和配置
.Page - 当前页面的信息和属性
.Params - 页面或网站的参数
.File - 当前文件的信息
.Scratch - 临时数据存储

`.Site` 对象

基本属性

 <!-- 网站基本信息 -->
{{ .Site.Title }} <!-- 网站标题 -->
{{ .Site.BaseURL }} <!-- 网站基础URL -->
{{ .Site.LanguageCode }} <!-- 网站语言代码 -->
{{ .Site.Language.Lang }} <!-- 当前语言 -->
{{ .Site.LanguagePrefix }} <!-- 语言前缀 -->
{{ .Site.Copyright }} <!-- 版权信息 -->
{{ .Site.LastChange }} <!-- 最后修改时间 -->
{{ .Site.BuildDrafts }} <!-- 是否构建草稿 -->
{{ .Site.IsMultiLingual }} <!-- 是否多语言网站 -->

<!-- 网站配置信息 -->
{{ .Site.Params }} <!-- 网站级参数 -->
{{ .Site.Menus }} <!-- 网站菜单 -->
{{ .Site.Taxonomies }} <!-- 分类法 -->
{{ .Site.Data }} <!-- 数据文件内容 -->

常用方法

 <!-- 获取页面 -->
{{ .Site.GetPage "section" "posts" }} <!-- 获取特定分区 -->
{{ .Site.GetPage "home" }} <!-- 获取首页 -->
{{ .Site.GetPage "/about/" }} <!-- 获取特定路径页面 -->

<!-- 获取资源 -->
{{ $resource := .Site.Resources.GetMatch "*.css" }} <!-- 匹配资源 -->
{{ $images := .Site.Resources.ByType "image" }} <!-- 按类型获取资源 -->

<!-- 获取菜单 -->
{{ $menu := .Site.Menus.main }} <!-- 获取主菜单 -->
{{ $menuItem := .Site.Menus.main 0 }} <!-- 获取菜单项 -->

项目中的应用示例

 <!-- 获取网站配置的作者信息 -->
{{ $author := .Site.Params.author }}
{{ $authorName := $author.name }}
{{ $authorEmail := $author.email }}

<!-- 获取网站社交媒体链接 -->
{{ range $key, $value := .Site.Params.social }}
 <a href="{{ $value }}" class="social-link">{{ $key }}</a>
{{ end }}

<!-- 获取网站多语言信息 -->
{{ range .Site.Languages }}
 <a href="{{ .Lang | relLangURL }}">{{ .LanguageName }}</a>
{{ end }}

`.Page` 对象

基本属性

 <!-- 页面基本信息 -->
{{ .Page.Title }} <!-- 页面标题 -->
{{ .Page.Content }} <!-- 页面内容 -->
{{ .Page.Summary }} <!-- 页面摘要 -->
{{ .Page.Description }} <!-- 页面描述 -->
{{ .Page.Date }} <!-- 页面日期 -->
{{ .Page.Lastmod }} <!-- 最后修改时间 -->
{{ .Page.ExpiryDate }} <!-- 过期时间 -->
{{ .Page.PublishDate }} <!-- 发布日期 -->
{{ .Page.Weight }} <!-- 权重 -->
{{ .Page.Type }} <!-- 类型 -->
{{ .Page.Kind }} <!-- 种类 -->
{{ .Page.Section }} <!-- 分区 -->
{{ .Page.Slug }} <!-- URL别名 -->
{{ .Page.URL }} <!-- 页面URL -->
{{ .Page.RelPermalink }} <!-- 相对永久链接 -->
{{ .Page.RelRef }} <!-- 相对引用 -->

<!-- 页面状态 -->
{{ .Page.Draft }} <!-- 是否为草稿 -->
{{ .Page.IsHome }} <!-- 是否为首页 -->
{{ .Page.IsPage }} <!-- 是否为普通页面 -->
{{ .Page.IsSection }} <!-- 是否为分区页面 -->
{{ .Page.IsNode }} <!-- 是否为节点 -->
{{ .Page.IsMenu }} <!-- 是否在菜单中 -->

内容相关属性

 <!-- 字数统计 -->
{{ .Page.WordCount }} <!-- 字数 -->
{{ .Page.ReadingTime }} <!-- 预计阅读时间（分钟） -->
{{ .Page.FuzzyWordCount }} <!-- 模糊字数 -->
{{ .Page.Len }} <!-- 内容长度 -->

<!-- 目录和导航 -->
{{ .Page.TableOfContents }} <!-- 目录 -->
{{ .Page.Next }} <!-- 下一页 -->
{{ .Page.Prev }} <!-- 上一页 -->
{{ .Page.First }} <!-- 第一页 -->
{{ .Page.Last }} <!-- 最后一页 -->
{{ .Page.NextInSection }} <!-- 分区内下一页 -->
{{ .Page.PrevInSection }} <!-- 分区内上一页 -->

页面参数

 <!-- 获取页面参数 -->
{{ .Page.Params.author }} <!-- 页面作者 -->
{{ .Page.Params.tags }} <!-- 页面标签 -->
{{ .Page.Params.categories }} <!-- 页面分类 -->
{{ .Page.Params.featuredImage }} <!-- 特色图片 -->
{{ .Page.Params.showToc }} <!-- 是否显示目录 -->

<!-- 检查参数是否存在 -->
{{ if .Page.Params.showAuthor }}
 <div class="author">{{ .Page.Params.author }}</div>
{{ end }}

<!-- 使用默认值 -->
{{ $author := .Page.Params.author | default .Site.Params.author }}

`.Params` 对象

参数层级

Hugo中的参数有层级结构，优先级从高到低：

Hugo Bootstrap使用指南

Wed, 17 Dec 2025 16:00:00 +0000

Bootstrap集成方式

模块导入配置

在themes/lotusdocs/config.toml中配置Bootstrap模块导入：

 [module]
[[module.imports]]
path = "github.com/twbs/bootstrap"

资源管道处理

通过Hugo资源管道处理Bootstrap资源：

 <!-- 在layouts/partials/basic.html中 -->
{{ $bootstrapJS := resources.Get "js/bootstrap.js" }}
{{ $bootstrapJS = $bootstrapJS | js.Build (dict "targetPath" "js/bootstrap.bundle.min.js" "minify" true) }}
<script src="{{ $bootstrapJS.RelPermalink }}" defer></script>

SCSS变量自定义

在assets/scss/_variables.scss中自定义Bootstrap变量：

 // Bootstrap变量覆盖
$primary: #2563eb;
$secondary: #64748b;
$success: #16a34a;
$info: #0ea5e9;
$warning: #f59e0b;
$danger: #dc2626;

// 导航栏自定义
$navbar-padding-y: 0.5rem;
$navbar-dark-color: rgba($white, .85);
$navbar-dark-hover-color: $white;

Bootstrap组件初始化

核心组件导入

在assets/docs/js/bootstrap.js中导入和初始化Bootstrap组件：

DOM操作与全局JS注册指南

Thu, 18 Dec 2025 20:56:26 +0000

DOM操作

基本DOM选择器

项目中常用的DOM选择器方法：

 // 通过ID选择元素
const navbar = document.getElementById("topnav");
const mybutton = document.getElementById("back-to-top");

// 通过类名选择元素
const navbarToggler = document.querySelector('.navbar-toggler');
const navbarCollapse = document.querySelector('.navbar-collapse');
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')

// 通过标签名选择元素
var elements = document.getElementById("navigation").getElementsByTagName("a");

// 使用更复杂的选择器
const targetElement = document.querySelector(targetId);
const dropdowns = document.querySelectorAll('.dropdown');

事件监听器

DOMContentLoaded事件

DOMContentLoaded是项目中最常用的事件，确保DOM完全加载后再执行脚本：

 // 基本用法
document.addEventListener('DOMContentLoaded', function() {
 // 在这里执行DOM操作
 renderMathInElement(document.getElementById("content"), {
 // 配置选项
 });
});

// 箭头函数写法
document.addEventListener('DOMContentLoaded', () => {
 window.ImageHandler.init();
});

其他常用事件监听

 // 滚动事件
window.addEventListener('scroll', function() {
 const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 // 处理滚动逻辑
});

// 点击事件
document.addEventListener('click', function(event) {
 var isClickInsideElement = suggestions.contains(event.target);
 if (!isClickInsideElement) {
 suggestions.classList.add('d-none');
 }
});

// 键盘事件
document.addEventListener('keydown', (e) => {
 if (e.key === 'Escape') {
 this.closeZoom();
 }
});

// 窗口大小变化事件
window.addEventListener('resize', function() {
 if (window.innerWidth >= 992) {
 // 处理响应式逻辑
 }
});

DOM操作实例

元素样式操作

 // 添加/移除类
navbar.classList.add("nav-sticky");
navbar.classList.remove("scrolled");
navbar.classList.toggle('open');

// 直接修改样式
mybutton.style.display = "block";
overlay.style.borderBottom = '1px solid var(--alert-border-color)'

元素属性操作

 // 获取属性
const isExpanded = navbarToggler.getAttribute('aria-expanded') === 'true';
const href = elem.target.getAttribute("href");

// 设置属性
navbarToggler.setAttribute('aria-expanded', 'false');
element.setAttribute('data-collapse-state', 'collapsed');

创建和插入元素

 // 创建新元素
const overlay = document.createElement('div');
overlay.className = 'image-overlay';

const collapseBtn = document.createElement('button');
collapseBtn.setAttribute('type', 'button');

// 克隆元素
const clonedElement = this.cloneImageElement(element);

// 插入元素
document.body.appendChild(overlay);
parent.insertBefore(wrapper, block);
wrapper.appendChild(block);

全局JS注册

直接挂载到window对象

最简单直接的方式是将函数或对象挂载到window对象上：

zabbix部署

Tue, 20 Aug 2024 15:33:35 +0000

编写docker-compose.yaml文件

 version: '3'
services:
 # DB
 mysql:
 image: mysql:8.0
 container_name: mysql
 volumes:
 - ${DEPLOY_PATH}/data:/var/lib/mysql
 - ${DEPLOY_PATH}/mysql/conf:/etc/mysql/conf.d
 - ${DEPLOY_PATH}/mysql/logs:/var/log/mysql
 - /etc/localtime:/etc/localtime:ro
 restart: always
 privileged: true
 environment:
 - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
 - MYSQL_DATABASE=zabbix
 - MYSQL_USER=zabbix
 - MYSQL_PASSWORD=${MYSQL_PASSWORD}
 - TZ=Asia/Shanghai
 - LANG=en_US.UTF-8
 ports:
 - "3306:3306"

 # Gateway
 zabbix-gateway:
 image: zabbix/zabbix-java-gateway:6.0-centos-latest
 container_name: zabbix-gateway
 volumes:
 - /etc/localtime:/etc/localtime:ro
 restart: always
 privileged: true
 ports:
 - "10052:10052"

 # Server
 zabbix-server:
 image: zabbix/zabbix-server-mysql:6.0-centos-latest
 container_name: zabbix-server
 volumes:
 - /etc/localtime:/etc/localtime:ro
 - ${DEPLOY_PATH}/snmptraps:/var/lib/zabbix/snmptraps
 - ${DEPLOY_PATH}/mibs:/var/lib/zabbix/mibs
 - ${DEPLOY_PATH}/alertscripts:/usr/lib/zabbix/alertscripts
 - ${DEPLOY_PATH}/externalscripts:/usr/lib/zabbix/externalscripts
 restart: always
 privileged: true
 environment:
 - ZBX_LISTENPORT=10051
 - DB_SERVER_HOST=mysql
 - DB_SERVER_PORT=3306
 - MYSQL_DATABASE=zabbix
 - MYSQL_USER=root
 - MYSQL_PASSWORD=${MYSQL_PASSWORD}
 - MYSQL_ROOT_PASSWORD=zabbix
 - ZBX_CACHESIZE=256M
 - ZBX_HISTORYCACHESIZE=256M
 - ZBX_HISTORYINDEXCACHESIZE=16M
 - ZBX_TRENDCACHESIZE=128M
 - ZBX_VALUECACHESIZE=128M
 - ZBX_STARTPINGERS=64
 - ZBX_IPMIPOLLERS=1
 - ZBX_ENABLE_SNMP_TRAPS=true
 - ZBX_STARTTRAPPERS=1
 - ZBX_JAVAGATEWAY_ENABLE=true
 - ZBX_JAVAGATEWAY=zabbix-gateway
 - ZBX_STARTJAVAPOLLERS=1
 ports:
 - "10051:10051"
 links:
 - mysql
 - zabbix-gateway

 # WEB
 zabbix-web:
 image: zabbix/zabbix-web-nginx-mysql:6.0-centos-latest
 container_name: zabbix-web
 volumes:
 - ${DEPLOY_PATH}/font/simfang.ttf:/usr/share/zabbix/assets/fonts/DejaVuSans.ttf
 - /etc/localtime:/etc/localtime
 restart: always
 privileged: true
 environment:
 - ZBX_SERVER_NAME=Zabbix 6.0
 - ZBX_SERVER_HOST=zabbix-server
 - ZBX_SERVER_PORT=10051
 - DB_SERVER_HOST=mysql
 - DB_SERVER_PORT=3306
 - MYSQL_DATABASE=zabbix
 - MYSQL_USER=root
 - MYSQL_PASSWORD=${MYSQL_PASSWORD}
 - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
 - PHP_TZ=Asia/Shanghai
 ports:
 - "8081:8080"
 links:
 - mysql
 - zabbix-server
 

 zabbix-agent:
 image: zabbix/zabbix-agent
 container_name: zabbix-agent
 volumes:
 - /etc/localtime:/etc/localtime:ro
 - ${DEPLOY_PATH}/zabbix_agentd.d:/etc/zabbix/zabbix_agentd.d:ro
 - ${DEPLOY_PATH}/var/lib/zabbix/modules:/var/lib/zabbix/modules:ro
 - ${DEPLOY_PATH}/var/lib/zabbix/enc:/var/lib/zabbix/enc:ro
 - ${DEPLOY_PATH}/var/lib/zabbix/ssh_keys:/var/lib/zabbix/ssh_keys:ro
 tmpfs: /tmp
 restart: always
 privileged: true
 ports:
 - "10050:10050"
 pid: "host"
 stop_grace_period: 5s
 environment:
 - ZBX_SERVER_HOST=${Server}
 - ZBX_SERVER_PORT=10051
 - ZBX_HOSTNAME=${Server}

编写.env文件

 DEPLOY_PATH='' //部署路径
MYSQL_ROOT_PASSWORD='' //数据库密码
MYSQL_PASSWORD='' //数据库管理员密码
Server='' //服务器IP

修改配置文件`Sever`, `SeverActive`, `Hostname`为服务器IP

 vi /etc/zabbix_agentd.conf

::: note 提示

CSS高度自适应

Sat, 07 Mar 2026 15:12:58 +0000

核心属性搭配

 /* 最优组合：按需渲染+预占位+布局下限+自适应高度 */
.container {
 content-visibility: auto; /* 浏览器按需渲染，未进视口不计算布局，优化性能 */
 contain-intrinsic-size: 400px; /* 仅配合auto生效，未进视口时的预渲染占位高度 */
 min-height: 400px; /* 全局布局下限，容器高度永远不低于该值，全程生效 */
 height: fit-content; /* 容器最终自适应内容高度，保留核心自适应逻辑 */
}

contain-intrinsic-size vs min-height 核心区别

特性	contain-intrinsic-size	min-height
生效依赖	仅对`content-visibility: auto`元素生效	无依赖，所有元素均可使用
作用阶段	仅元素未进入视口时生效	元素布局全程生效
生效逻辑	非约束性，仅为浏览器提供高度预估值	约束性，强制规定容器高度最小值
内容覆盖后表现	元素进视口后，被真实内容高度覆盖	内容高度超值时自适应，低值时保持定值
无 auto 时的表现	完全失效，对布局无任何影响	正常生效，独立布局属性

关键使用原则

content-visibility: auto：长列表 / 动态内容 / 多卡片容器首选，核心优化首屏渲染性能，减少高度计算导致的闪烁
contain-intrinsic-size：auto 的专属配套属性，解决未渲染元素的高度塌陷，值贴近容器实际平均高度即可
min-height：布局稳定的基础保障，与 auto 无依赖，单独使用也能防闪烁，和前两者搭配解决进视口后的布局抖动
height: fit-content：保留容器自适应核心逻辑，让高度最终由内容决定，不被固定值限制

适用 & 禁用场景

适用（content-visibility: auto）

长列表：商品 / 文章 / 评论列表
动态内容容器：异步加载的图文、接口渲染内容
非首屏大模块：侧边栏二级内容、页脚、分页模块

禁用（content-visibility: auto）

首屏核心内容：banner、头部导航、首屏卡片
小尺寸容器：按钮、标签、小图标（无性能优化意义）
需实时计算高度的嵌套容器：flex/grid 子元素自适应布局

配置algolia

Sun, 24 Aug 2025 20:40:01 +0000

_1、注册账号

首先需要去 algolia 官网注册自己的账号，可以直接使用 Github 或者其他邮箱注册登录。

新账号会自动创建一个Application ，也可以自己创建一个新的

安装 acme.sh

Thu, 29 Aug 2024 12:24:47 +0000

ACME（自动证书管理环境）是一个互联网工程任务组维护的协议，它允许自动化 Web 服务器证书的部署，acme.sh 是支持 ACME 协议流行的客户端之一，可以通过其实现 SSL 证书的自动申请、续期等。本文将为您介绍如何使用 acme.sh 自动申请证书。

安装 acme.sh

全新安装

适用于未安装 acme.sh 的用户，使用以下命令安装 acme.sh 客户端：

一键部署脚本

Thu, 02 Oct 2025 15:22:25 +0000

一键远程部署脚本，只需一行命令，即可开启您的Linux管理之旅

_1、ssl

 bash <(curl -fsSL https://cnb.xiaoying.org.cn/file/acme.sh)

_2、docker

 bash <(curl -sL kejilion.sh) docker install

_3、frp

教程

中央仓库上传指南

Sun, 23 Mar 2025 00:45:53 +0000

简介

Maven 中央仓库是 Java 生态系统中最重要的依赖库之一，将你的项目发布到 Maven 中央仓库可以让全球的开发者更容易地使用你的库。本文将详细介绍如何将你的 Java 项目发布到 Maven 中央仓库的完整流程。

前置条件

JDK 8 或更高版本
Maven 3.0+
GPG（用于签名）
Sonatype OSSRH 账号

步骤概览

注册 Sonatype 账号
配置 GPG 签名
配置 Maven 的 settings.xml
配置项目的 pom.xml
发布到中央仓库

详细步骤

注册 Sonatype 账号

从 2024 年 3 月 12 日起，所有注册都将通过 Sonatype 中央门户网站进行。

git设置代理

Mon, 15 Jul 2024 00:06:11 +0000

git设置代理

1、打开clash开启代理

2、系统设置代理

网络和Internet设置 -> 代理 -> 手动设置代理

3、git设置代理

 git config --global http.proxy 127.0.0.1:7890

 git config --global https.proxy 127.0.0.1:7890

 git config --global https.proxy socks5 127.0.0.1:7890

 git config --global https.proxy socks5 127.0.0.1:7890

4、查看git代理是否设置成功

 git config --global -l

 git config --global --get http.proxy

 git config --global --get https.proxy

5、git取消代理

Java文件转换为Velocity模板

Sun, 06 Apr 2025 16:42:45 +0000

将Java文件转换为Velocity模板需要进行以下几个方面的修改

文件扩展名

首先需要将文件扩展名从.java改为.java.vm，表示这是一个Velocity模板文件。

替换静态内容为动态变量

需要将Java文件中的静态内容替换为Velocity变量和指令。根据当前仓库中的模板，常用的Velocity变量有：

${packageName} - 包名的基础部分
${moduleName} - 模块名称
${subpackageName} - 子包名
${entityName} - 实体类名称
${lowerFirstEntityName} - 首字母小写的实体类名称
${businessName} - 业务名称
${author} - 作者名称
${date} - 日期
${tableName} - 数据库表名
${fieldConfigs} - 字段配置列表

添加条件判断和循环

使用Velocity的条件判断和循环指令来处理动态内容：

 #if(条件)
 // 条件成立时的内容
#else
 // 条件不成立时的内容
#end

#foreach($item in $collection)
 // 循环内容，可以使用$item访问当前项
#end

具体示例

以下是一个具体的转换示例

原始Java文件：

 package com.example.project.controller;

import com.example.project.entity.User;
import com.example.project.service.UserService;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.RequestMapping;

@RestController
@RequestMapping("/user")
public class UserController {
 
 private UserService userService;
 
 // 其他代码
}

转换后的Velocity模板：

 package ${packageName}.${moduleName}.controller;

import ${packageName}.${moduleName}.model.entity.${entityName};
import ${packageName}.${moduleName}.service.${entityName}
Service;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.RequestMapping;

@RestController
@RequestMapping("/${lowerFirstEntityName}")
public class ${entityName}Controller {
 
 private ${entityName}Service ${lowerFirstEntityName}Service;
 
 // 其他代码
}

处理字段和属性

对于实体类中的字段和属性，需要使用#foreach循环遍历${fieldConfigs}，如当前仓库中的entity.java.vm模板所示：

暂停windows更新

Wed, 30 Jul 2025 09:46:59 +0000

打开注册表

按照路径打开如下注册表位置

 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings

修改配置文件

新建DWORD(32位)值(D)，名称填写FlightSettingsMaxPauseDays，双击进行修改，右侧选10进制，值填写36254，点击确定，重启电脑，然后打开设置，打开windows更新侧边栏，点击暂停更新右侧小三角，等待片刻，即可发现可以延长更新最多5000多周

关联到已存在的 GitHub 仓库

Mon, 28 Jul 2025 11:05:40 +0000

1️⃣ 初始化本地项目为 Git 仓库

如果你的项目还没用 Git 管理，先在项目目录下初始化：

 git init

2️⃣ 上传GitHub 远程仓库

关联远程仓库

通过以下命令添加远程仓库

 git remote add origin <Github url>

如果执行后 git remote -v 发现有多个远程仓库，例如：

 origin https://github.com/liyao52033/demo.git (fetch)
origin https://github.com/liyao52033/demo.git (push)
demo https://github.com/liyao52033/demo.git (fetch)
demo https://github.com/liyao52033/demo.git (push)

删除多余的远程仓库：

 git remote remove demo

再次检查：

 git remote -v

输出应为：

Git双平台推送

Sat, 07 Mar 2026 19:01:12 +0000

本文介绍如何在一个本地 Git 仓库中同时使用两个远程仓库：

GitHub
CNB

目标结构：

GitHub：main、bg 等开发分支
CNB：只保留 main 分支
本地开发：使用 bg 分支
同步规则：

 本地 bg → GitHub bg
本地 bg → CNB main

一、远程仓库结构

先看当前远程仓库

 git remote -v

一般会看到类似：

 origin https://github.com/xxx/your-project.git (fetch)
origin https://github.com/xxx/your-project.git (push)

添加 CNB 远程仓库

假设你的 CNB 仓库地址是：

 git remote add cnb https://cnb.cool/xxx/your-project.git

然后确认：

编程随笔

vuepress搭建网站

使用本项目 link

克隆到本地 link

脚本说明 link

启动项目 link

在docs构建目录如下 link

引入第三方组件库

优化改进

打包报超出500kB link

站点信息模块

前言 link

本站主题包

github地址 link

快速开始

依赖引用 link

BackTop

说明 link

使用 link

组件安装

安装 link

使用方法 link

全局引入 link

按需引入 link

kiftd使用docker部署

在/usr/local/kiftd下新建文件夹，后续文件都在此目录 link

上传kiftd文件到/usr/local/kiftd下 link

新建Dockerfile如下 link

WORKDIR /app跟VOLUME /tmp区别 link

增加登录页面

安装插件 link

创建登录表单文件 link

VuePress 配置 link

添加登录并启用全局前置守卫

新增登录页面 link

新增登录页面路由/login link

添加登录验证逻辑helper.js link

添加路由守卫 link

Cos对象存储

引用 link

文件上传 link

文件下载到本地 link

文件下载到流 link

文件删除 link

完整代码 link

GlobalTip

说明 link

使用 link

基于本库开发新组件

注册新组件 link

添加类型声明 link

更新版本号并发布: link

Captcha验证码使用

引用 link

生成验证码 link

校验验证码 link

完整代码 link

GithubCorner

说明 link

使用 link

参数 link

vue3组件封装

Vue 3 组件封装与 npm 发布指南 link

一、概述 link

二、封装组件 link

创建项目结构 link

编写动态插槽组件 link

编写普通组件 link

自动生成frontmatter

vitepress-plugin-setfrontmatter使用 link

github地址 link

特性 link

安装 link

License使用

引用 link

获取服务器硬件信息 link

生成证书 link

上传授权文件 link

校验证书 link

wangEditor

使用本项目

克隆到本地

脚本说明

启动项目

在docs构建目录如下

打包报超出500kB

前言

github地址

依赖引用

说明

使用

安装

使用方法

全局引入

按需引入

在/usr/local/kiftd下新建文件夹，后续文件都在此目录

上传kiftd文件到/usr/local/kiftd下

新建Dockerfile如下

WORKDIR /app跟VOLUME /tmp区别

安装插件

创建登录表单文件

VuePress 配置

新增登录页面

新增登录页面路由/login

添加登录验证逻辑helper.js

添加路由守卫

引用

文件上传

文件下载到本地

文件下载到流

文件删除

完整代码

说明

使用

注册新组件

添加类型声明

更新版本号并发布:

引用

生成验证码

校验验证码

完整代码

说明

使用

参数

Vue 3 组件封装与 npm 发布指南

一、概述

二、封装组件

创建项目结构

编写动态插槽组件

编写普通组件

vitepress-plugin-setfrontmatter使用

github地址

特性

安装

引用

获取服务器硬件信息

生成证书

上传授权文件

校验证书

说明

使用

可选参数

vitepress-plugin-link

github地址

特性

安装

Vue 3 Hooks 封装与 npm 使用指南

一、概述

二、封装 Hooks

创建项目结构

编写 Hooks

配置构建工具

安装

使用

正则校验

可用校验

自定义文件扩展名校验

默认可用类型

扩展 FileType

引用