当前位置：首页 > news >正文

Vue 3 项目实现国际化指南 i18n

news 来源：原创 2025/8/4 1:33:18

引言

在开发现代 Web 应用时，国际化（Internationalization，简称 i18n）已经成为一个不可或缺的功能。无论是面向全球用户的商业网站，还是需要支持多语言的企业应用，良好的国际化支持都能显著提升用户体验。本文将深入介绍如何在 Vue 3 项目中实现国际化，从基础概念到实践细节，帮助你构建一个真正的多语言应用。

基础概念

什么是国际化（i18n）？

国际化（i18n）是指设计和开发软件时，使其能够适应不同语言和地区的过程。"i18n" 这个缩写来源于 "internationalization" 这个词，其中 18 表示首字母 'i' 和末字母 'n' 之间有 18 个字母。

为什么需要 JSON 文件？

在 Vue 3 的国际化实现中，我们使用 JSON 文件来存储不同语言的翻译文本。选择 JSON 格式有以下几个原因：

结构化数据：JSON 提供了清晰的层次结构，便于组织和管理翻译文本
易于维护：可以方便地添加、修改和删除翻译内容
跨平台兼容：JSON 是一种通用的数据格式，可以被各种工具和平台处理
支持嵌套：可以创建层次化的翻译结构，更好地组织大型应用的翻译

JSON 文件的来源

翻译文件（JSON）可以通过以下几种方式获得：

手动创建：

适合小型项目或初始开发阶段

开发者直接编写翻译文本

示例

     {"nav": {"home": "首页","about": "关于"}}

2.翻译工具生成：

使用专业的翻译管理系统（TMS）

支持批量翻译和导出

常用工具：

POEditor

Lokalise

Crowdin

3.自动化脚本生成：

使用脚本从其他格式转换

从数据库导出

详细安装步骤

1. 创建 Vue 3 项目

# 使用 Vite 创建项目
npm create vite@latest my-vue-app -- --template vue-ts# 进入项目目录
cd my-vue-app# 安装依赖
npm install

2. 安装 vue-i18n

npm install vue-i18n@9

3. 项目结构设置

src/
├── locales/          # 翻译文件目录
│   ├── en.json      # 英文翻译
│   └── zh.json      # 中文翻译
├── i18n/            # i18n 配置目录
│   ├── index.ts     # 主配置文件
│   └── messages.ts  # 消息加载器
├── components/      # 组件目录
└── App.vue         # 根组件

4. 创建基础翻译文件

src/locales/zh.json:

{"nav": {"home": "首页","blog": "博客","about": "关于","contact": "联系"},"home": {"welcome": "欢迎来到我的网站","description": "这是一个使用 Vue 3 和 i18n 构建的多语言网站","features": {"title": "主要特点","list": {"1": "支持多语言切换","2": "响应式设计","3": "用户友好界面"}}},"common": {"loading": "加载中...","error": "发生错误","success": "操作成功","buttons": {"submit": "提交","cancel": "取消","save": "保存"}}
}

src/locales/en.json:

{"nav": {"home": "Home","blog": "Blog","about": "About","contact": "Contact"},"home": {"welcome": "Welcome to my website","description": "This is a multilingual website built with Vue 3 and i18n","features": {"title": "Key Features","list": {"1": "Multi-language support","2": "Responsive design","3": "User-friendly interface"}}},"common": {"loading": "Loading...","error": "An error occurred","success": "Operation successful","buttons": {"submit": "Submit","cancel": "Cancel","save": "Save"}}
}

5. 配置 i18n

src/i18n/messages.ts:

import en from '../locales/en.json'
import zh from '../locales/zh.json'export const messages = {en,zh
}// 类型定义
export type MessageSchema = typeof zh

src/i18n/index.ts:

import { createI18n } from 'vue-i18n'
import { messages } from './messages'
import type { MessageSchema } from './messages'// 获取浏览器语言设置
const getBrowserLanguage = (): string => {const lang = navigator.languagereturn lang.toLowerCase().startsWith('zh') ? 'zh' : 'en'
}// 获取存储的语言设置
const getSavedLanguage = (): string => {return localStorage.getItem('language') || getBrowserLanguage()
}export const i18n = createI18n<[MessageSchema], 'en' | 'zh'>({legacy: false, // 启用 Composition API 模式locale: getSavedLanguage(),fallbackLocale: 'en',messages,// 数字格式化选项numberFormats: {en: {currency: {style: 'currency',currency: 'USD'}},zh: {currency: {style: 'currency',currency: 'CNY'}}},// 日期格式化选项datetimeFormats: {en: {short: {year: 'numeric',month: 'short',day: 'numeric'}},zh: {short: {year: 'numeric',month: 'long',day: 'numeric'}}}
})

实际使用示例

1. 基础组件使用

src/components/LanguageSwitcher.vue:

<template><div class="language-switcher"><select v-model="currentLocale" @change="handleLanguageChange"><option value="zh">中文</option><option value="en">English</option></select></div>
</template><script setup lang="ts">
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'const { locale } = useI18n()
const currentLocale = ref(locale.value)const handleLanguageChange = () => {// 更新语言设置locale.value = currentLocale.value// 保存到本地存储localStorage.setItem('language', currentLocale.value)// 可选：刷新页面以应用新语言// window.location.reload()
}// 监听语言变化
watch(locale, (newLocale) => {document.documentElement.setAttribute('lang', newLocale)
})
</script><style scoped>
.language-switcher {padding: 8px;
}select {padding: 4px 8px;border-radius: 4px;border: 1px solid #ddd;
}
</style>

2. 在页面中使用翻译

src/components/HomePage.vue:

<template><div class="home"><h1>{{ t('home.welcome') }}</h1><p>{{ t('home.description') }}</p><div class="features"><h2>{{ t('home.features.title') }}</h2><ul><li v-for="(feature, index) in features" :key="index">{{ t(`home.features.list.${index + 1}`) }}</li></ul></div><!-- 数字格式化示例 --><div class="price">{{ n(1234.56, 'currency') }}</div><!-- 日期格式化示例 --><div class="date">{{ d(new Date(), 'short') }}</div></div>
</template><script setup lang="ts">
import { useI18n } from 'vue-i18n'const { t, n, d } = useI18n()const features = [1, 2, 3] // 对应 features.list 中的键
</script>

3. 动态加载翻译

src/utils/i18n-loader.ts:

import { nextTick } from 'vue'
import { i18n } from '../i18n'export async function loadLanguageAsync(locale: string) {// 动态导入语言文件const messages = await import(`../locales/${locale}.json`)// 设置语言包i18n.global.setLocaleMessage(locale, messages.default)// 切换语言i18n.global.locale.value = locale// 设置 html lang 属性document.documentElement.setAttribute('lang', locale)return nextTick()
}

最佳实践与进阶技巧

1. 翻译文件管理

模块化组织

对于大型项目，建议按模块组织翻译文件：

locales/
├── zh/
│   ├── common.json
│   ├── auth.json
│   └── dashboard.json
└── en/├── common.json├── auth.json└── dashboard.json

自动合并翻译文件

创建一个脚本来合并翻译文件：

// scripts/merge-translations.ts
import * as fs from 'fs'
import * as path from 'path'const LOCALES_DIR = path.join(__dirname, '../src/locales')function mergeTranslations(locale: string) {const localeDir = path.join(LOCALES_DIR, locale)const files = fs.readdirSync(localeDir)const merged = files.reduce((acc, file) => {if (file.endsWith('.json')) {const content = JSON.parse(fs.readFileSync(path.join(localeDir, file), 'utf-8'))return { ...acc, ...content }}return acc}, {})fs.writeFileSync(path.join(LOCALES_DIR, `${locale}.json`),JSON.stringify(merged, null, 2))
}['en', 'zh'].forEach(mergeTranslations)

2. 类型安全

使用 TypeScript 类型来确保翻译键的类型安全

// types/i18n.d.ts
import { MessageSchema } from '@/i18n/messages'declare module 'vue-i18n' {export interface DefineLocaleMessage extends MessageSchema {}
}

3. 翻译缺失检查

创建一个工具函数来检查翻译是否完整：

// utils/check-translations.ts
import en from '../locales/en.json'
import zh from '../locales/zh.json'function findMissingKeys(obj1: any, obj2: any, path: string[] = []): string[] {const missing: string[] = []Object.keys(obj1).forEach(key => {const currentPath = [...path, key]if (!(key in obj2)) {missing.push(currentPath.join('.'))} else if (typeof obj1[key] === 'object' && typeof obj2[key] === 'object') {missing.push(...findMissingKeys(obj1[key], obj2[key], currentPath))}})return missing
}// 检查中文翻译是否完整
const missingInZh = findMissingKeys(en, zh)
console.log('Missing in zh:', missingInZh)// 检查英文翻译是否完整
const missingInEn = findMissingKeys(zh, en)
console.log('Missing in en:', missingInEn)

4. 性能优化

按需加载语言包

const loadedLanguages = ['zh'] // 默认加载的语言async function loadLanguage(lang: string) {// 如果语言已经加载，直接返回if (loadedLanguages.includes(lang)) {return Promise.resolve()}// 动态导入语言包const messages = await import(`./locales/${lang}.json`)i18n.global.setLocaleMessage(lang, messages.default)loadedLanguages.push(lang)return messages
}

5.缓存翻译结果

const loadedLanguages = ['zh'] // 默认加载的语言async function loadLanguage(lang: string) {// 如果语言已经加载，直接返回if (loadedLanguages.includes(lang)) {return Promise.resolve()}// 动态导入语言包const messages = await import(`./locales/${lang}.json`)i18n.global.setLocaleMessage(lang, messages.default)loadedLanguages.push(lang)return messages
}

常见问题与解决方案

1. 翻译未更新

问题：切换语言后，某些组件的翻译没有更新

解决方案

<script setup>
import { watch } from 'vue'
import { useI18n } from 'vue-i18n'const { locale } = useI18n()// 监听语言变化，强制更新组件
watch(locale, () => {nextTick(() => {// 触发组件重新渲染})
})
</script>

2. 数字格式化

问题：不同地区的数字格式不一致

解决方案：使用 numberFormats 配置：

const i18n = createI18n({numberFormats: {zh: {currency: {style: 'currency',currency: 'CNY',notation: 'standard'},decimal: {style: 'decimal',minimumFractionDigits: 2,maximumFractionDigits: 2}},en: {currency: {style: 'currency',currency: 'USD',notation: 'standard'},decimal: {style: 'decimal',minimumFractionDigits: 2,maximumFractionDigits: 2}}}
})

3. 日期本地化

问题：日期格式因地区而异

解决方案：使用 datetimeFormats 配置

const i18n = createI18n({datetimeFormats: {zh: {short: {year: 'numeric',month: 'short',day: 'numeric'},long: {year: 'numeric',month: 'long',day: 'numeric',weekday: 'long',hour: 'numeric',minute: 'numeric'}},en: {short: {year: 'numeric',month: 'short',day: 'numeric'},long: {year: 'numeric',month: 'long',day: 'numeric',weekday: 'long',hour: 'numeric',minute: 'numeric',hour12: true}}}
})

总结

实现 Vue 3 的国际化需要注意以下几个关键点：

配置管理
1. 合理组织翻译文件结构
2. 使用类型系统确保翻译键的安全
3. 实现动态语言包加载
用户体验
1. 保存用户语言偏好
2. 提供平滑的语言切换体验
3. 确保所有内容都正确翻译
维护性
1. 使用工具检查翻译完整性
2. 实现自动化的翻译文件管理
3. 保持良好的代码组织
性能优化
1. 实现按需加载
2. 使用缓存优化翻译性能
3. 避免不必要的组件重渲染

通过遵循这些最佳实践，我们可以构建一个高质量的多语言 Vue 3 应用。

好的国际化实现不仅仅是简单的文本替换，还包括对数字、日期、货币等的本地化处理，以及对用户体验的全面考虑。

Vue 3 项目实现国际化指南 i18n

引言在开发现代 Web 应用时，国际化（Internationalization，简称 i18n）已经成为一个不可或缺的功能。无论是面向全球用户的商业网站，还是需要支持多语言的企业应用，良好的国际化支持都能显著提升用户体验。本…...

编程日记 2025/8/4 1:33:18

使用Trae 生成的React版的贪吃蛇

使用Trae 生成的React版的贪吃蛇首先你想用这个贪吃蛇，你需要先安装Trae Trae 官方地址他有两种模式 chat builder 我使用的是builder模式,虽然是Alpha.还是可以用。接下来就是按着需求傻瓜式的操作生成代码他生成的代码不完全正确，比如没有引入…...

编程日记 2025/8/3 8:50:34

HAL库定时器配置

定时器的开启需要手动开启，例如在driver_capature.c开启，该文件主要写了具体的函数实现，与driver_can.c一样，同时还有回调函数等一些高级的自定义函数。这段代码是 STM32 HAL 库中用于初始化定时器 2 (TIM2) 的函数 MX_TIM2_In…...

编程日记 2025/8/4 1:24:33

快速部署Linux + Ollama + AnythingLLM + Deepseek

简介部署的系统：Ubuntu20.04 这里选择AnythingLLM的原因，是因为它自身支持了知识库的功能，其他的还有chatbox、dify等可以选择。部署流程（请务必使用魔法） 一、Ollama安装 1、访问ollama官网：https:/…...

编程日记 2025/8/4 1:22:41

人脸表情识别系统分享（基于深度学习+OpenCV+PyQt5）

最近终于把毕业大论文忙完了，众所周知硕士大论文需要有三个工作点，表情识别领域的第三个工作点一般是做一个表情识别系统出来，如下图所示。这里分享一下这个表情识别系统： 采用深度学习OpenCVPyQt5 构建，主要功能包…...

编程日记 2025/8/4 1:22:41

Qt 导入TagLib库

文章目录 0. 前言和环境介绍1. 下载TagLib2. 下载zlib3. 修改.pro文件4. 测试代码 0. 前言和环境介绍最近在使用Qt写一个播放器，需要解析mp3文件，于是研究了一下如何导入TagLib库 Qt构建套件:Desktop Qt6.8.2 MinGW64-bit Qt Creator安装目录: D:\bit…...

编程日记 2025/7/31 12:54:36

LiteratureReading:[2023] GPT-4: Technical Report

文章目录一、文献简明（zero）二、快速预览（first）1、标题分析2、作者介绍3、引用数4、摘要分析（1）翻译（2）分析 5、总结分析（1）翻译（2）…...

编程日记 2025/7/29 4:35:56

Elasticsearch8.17 生产集群使用优化

一、通用优化建议避免返回大量文档结果集 Elasticsearch 作为搜索引擎，擅长返回与查询匹配的顶级文档。对于需要检索所有匹配文档的数据库类型操作，建议使用滚动 API（Scroll API）或 **搜索后游标（Search After Cursor）**，以避免内存和性能问题。避免大型文档默…...

编程日记 2025/7/31 13:55:32

Linux系统管理与编程09：任务驱动综合应用

兰生幽谷，不为莫服而不芳； 君子行义，不为莫知而止休。 [环境] windows11、centos9.9.2207、zabbix6、MobaXterm、Internet环境 [要求] zabbix6.0安装环境：Lamp（linux httpd mysql8.0 php） [步骤] 5 …...

编程日记 2025/7/29 20:17:03

C++：背包问题习题

1. 货币系统 1371. 货币系统 - AcWing题库给定 V 种货币（单位：元），每种货币使用的次数不限。不同种类的货币，面值可能是相同的。现在，要你用这 V 种货币凑出 N 元钱，请问共有多少种不同的…...

编程日记 2025/8/2 16:53:16

1.检测flutter运行环境 flutter doctor 2.升级flutter flutter upgrade 3.查看flutter 版本 flutter --version 4.查看连接的设备 flutter devices 5.运行flutter项目 flutter run 或者在vscode中按FnF5 6.打包 flutter build apk //默认打release包 7.开…...

编程日记 2025/7/30 17:48:27

数学爱好者写的编程系列文章

作为一个数学爱好者，我大学读的专业却不是数学专业，而是跟计算机有关的专业。原本我对编程一窍不通，平时上课也是在看数学文献，作业基本靠同学，考试及格就行。不过后来因为毕业的压力，我还是拥抱编程了&…...

编程日记 2025/8/1 8:39:08

QT笔记---JSON

QT笔记---JSON JSON1、JSON基本概念1.1、判断.json文件工具 2、生成.json数据3、解析.json数据 JSON 在现代软件开发中，数据的交换和存储格式至关重要。JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，以其简洁易…...

编程日记 2025/7/29 22:04:08

C站算法技能题-题解(javascript)

切面条 const 切面条 (n10)>{return 2 ** n 1; } 切面条(0) 2 切面条(1) 3 切面条(2) 5 切面条(10) 1025大衍数列 const 大衍数列 (n100) > {let ans []for(let i1;i<n;i){if(i%2 0){ans.push((i ** 2 ) / 2)}else{ans.push((i ** 2 - 1) / 2)}}return ans…...

编程日记 2025/7/31 7:24:07

专利信息管理知识产权基于Spring Boot SSM

目录一、需求分析 1.1系统用户角色与权限 1.2 专利信息管理功能二、数据分析与报表生成三、系统性能与安全性四用户体验与界面设计五扩展性与可维护性六、法律法规与合规性七. 技术选型与实现 ‌7.1技术选型‌： ‌7.2实现方式‌： 随…...

编程日记 2025/8/3 1:54:04

掌握新编程语言的秘诀：利用 AI 快速上手 Python、Go、Java 和 Rust

网罗开发 （小红书、快手、视频号同名） 大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等…...

编程日记 2025/8/2 19:38:00

KiLog2MaximumIncrement的由来和KiMaximumIncrementReciprocal的由来

第一部分：KiLog2MaximumIncrement的由来 i 1; j KeMaximumIncrement; while ((1UI64<<i) < KeMaximumIncrement) { i; } KiLog2MaximumIncrement i; 2^17131072 2^18262144 i18KiLog2MaximumIncrement 中…...

编程日记 2025/8/4 1:30:46

工具层handle_excel

该工具类利用openpyxl的load_workbook加载Excel，通过iter_rows按行迭代数据，将表头和用例数据用zipdict组合成字典，通过list.append将字典(单条测试用例)追加到列表中，从而封装Excel数据解析工具。模块/类方法/属性使用场景描述o…...

编程日记 2025/7/30 18:11:49

解释 RESTful API，以及如何使用它构建 web 应用程序

RESTful API 是一种符合 REST 架构风格的 API 设计，它基于 HTTP 协议来进行通信，通过对资源进行标识、定义各种操作，并使用 HTTP 请求方法来进行操作（比如 GET、POST、PUT、DELETE 等），实现客户端与服务器之…...

编程日记 2025/7/29 15:13:29

区块链赋能项目包装融资：开启融资新范式

在当今充满挑战与机遇的商业环境中，项目融资对于企业的发展壮大起着关键作用。而项目包装作为吸引投资者、展示项目价值的重要手段，其方式正随着科技的发展不断革新。区块链技术的兴起，为项目包装融资带来了全新的思路与变革，深刻…...

编程日记 2025/7/29 14:39:24

【Linux】应用层自定义协议 + 序列化和反序列化

应用层自定义协议序列化和反序列化一.应用层1.再谈 "协议"2.序列化和反序列化二. Jsoncpp1.序列化2.反序列化三. Tcp全双工面向字节流四.自定义协议保证报文的完整性1.Makefile2.Mutex.hpp3.Cond.hpp4.Log.hpp5.Thread.hpp6.ThreadPool.hpp7.Common.hpp8.…...

编程日记 2025/7/31 16:55:50

框架的CVE漏洞利用 php类 java类手工操作和自动化操作蓝队分析漏洞利用的流量特征

前言 php重要框架和基本的识别特征 php的主要是 tp框架和 laravel 当然还有 yii等 tp的主要特征 1\报错信息： 2、图标 3、请求头 Laravel特征 1、报错信息 2、请求头 php框架CVE利用 lavarvel 工具 https://github.com/zhzyker/CVE-2021-3129 https://git…...

编程日记 2025/7/29 1:18:14

使用 .github/realse.yml 自动生成 release change log

🚀 发现 gone-io/gone：一个优雅的 Go 依赖注入框架！💻 它让您的代码更简洁、更易测试。🔍 框架轻量却功能强大，完美平衡了灵活性与易用性。⭐ 如果您喜欢这个项目，请给我们点个星！🌟 您的支持是我们前进的动力！🤝 欢迎贡献代码或提出建议，一起让 gone 变得更好…...

编程日记 2025/7/31 8:26:14

python学习笔记--实现简单的爬虫(一)

任务：爬取豆瓣最受欢迎的250个电影的资料链接：豆瓣电影 Top 250 用浏览器打开后，使用F12或鼠标右键--检查，查看网页的源代码，分析网页结构，如下图所示： 分析后得知： 1.电影名位于…...

编程日记 2025/8/1 20:44:38

[学习笔记] 部署Docker搭建靶场

前言我们需要部署Docker来搭建靶场题目，他可以提供一个隔离的环境，方便在不同的机器上部署，接下来，我会记录我的操作过程，简单的部署一道题目 Docker安装不推荐在物理机上部署，可能会遇到一些问题&…...

编程日记 2025/7/30 21:15:59

二分查找-在排序数组中查找元素的第一个和最后一个位置

34.在排序数组中查找元素的第一个和最后一个位置给你一个按照非递减顺序排列的整数数组 nums，和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。如果数组中不存在目标值 target，返回 [-1, -1]。你必须设计并实现时间复杂度为 O(…...

编程日记 2025/7/25 6:07:28

蓝桥杯真题 2109.统计子矩阵

原题地址:1.统计子矩阵 - 蓝桥云课问题描述给定一个 NMNM 的矩阵 AA, 请你统计有多少个子矩阵 (最小 1111, 最大 NM)NM) 满足子矩阵中所有数的和不超过给定的整数 KK ? 输入格式第一行包含三个整数 N,MN,M 和 KK. 之后 NN 行每行包含 MM 个整数, 代表矩阵 AA. 输出格…...

编程日记 2025/7/28 11:36:04

学术型ppt制作经验分享 - 如何美化科研ppt?

WordinPPT / 持续为双一流高校、科研院所、企业等提供PPT制作系统服务。 - 院士增选、国家科技奖、杰青、长江学者特聘教授、校企联聘教授、重点研发、优青、青长、青拔... / 学术型ppt制作经验分享部分页面内容 / PPT全文共101页 - 科学技术奖ppt：自然科学奖…...

编程日记 2025/7/26 1:20:56

Python数据可视化实战：从基础图表到高级分析

Python数据可视化实战：从基础图表到高级分析数据可视化是数据分析的重要环节，通过直观的图表可以快速洞察数据规律。本文将通过5个实际案例，手把手教你使用Python的Matplotlib库完成各类数据可视化任务，涵盖条形图、堆积面积图、…...

编程日记 2025/7/29 12:57:47

稳定运行的以Oracle NoSQL数据库为数据源和目标的ETL性能变差时提高性能方法和步骤

提高基于Oracle NoSQL数据库的ETL（提取、转换、加载）性能时，主要从多个角度进行优化。提高基于Oracle NoSQL数据库的ETL性能需要综合考虑多个方面，关键是减少不必要的I/O操作、优化数据转换和加载过程、合理配置Oracle NoSQL数据…...

编程日记 2025/8/2 22:18:40

ORACLE 19.8版本数据库环境EXPDP导数据的报错处理

近期用户在做EXPDP导出时，报错异常termination终止;EXPDP本身是简单的功能并且这个环境也是经常做导出的，到底是什么原因导致了这个问题呢？ 导出脚本报错： 分析导出日志，当时系统资源充足但是进程启动失败，…...

编程日记 2025/8/3 20:20:20

GPT-5 将免费向所有用户开放？

GPT-5 将免费向所有用户开放？ 硅谷知名分析师 Ben Thompson 最近与 OpenAI CEO Sam Altman 进行了一场深度对谈，其中Sam Altman透漏GPT-5将免费向大家发放。 OpenAI 这波操作可不是一时冲动，而是被逼出来的。DeepSeek 这个新秀横空出世&am…...

编程日记 2025/7/30 6:44:18

【AI模型】深度解析：DeepSeek的联网搜索的实现原理与认知误区

一、大模型的“联网魔法”：原来你是这样上网的！ 在人工智能这个舞台上，大模型们可是妥妥的明星。像DeepSeek、QWen这些大模型，个个都是知识渊博的“学霸”，推理、生成文本那叫一个厉害。不过，要是论起上网…...

编程日记 2025/7/23 9:40:52

学习笔记--基于Sa-Token 实现Java项目单点登录+同端互斥检测

目录同端互斥登录单点登录SSO 架构选型模式二: URL重定向传播前后端分离整体流程准备工作搭建客户端搭建认证中心SSO Server 环境配置开放认证接口启动类跨域处理同端互斥登录同端互斥登陆模块同端互斥登录指：同一类型设备上只允许单地…...

编程日记 2025/8/2 19:14:28

Can通信流程

下面给出一个更详细的 CAN 发送报文的程序流程说明，结合 HAL 库的使用及代码示例，帮助你了解每一步的具体操作和内部原理。一、系统与外设初始化 1.1 HAL 库初始化在 main() 函数开头，首先调用 HAL 库初始化函数： HAL_Init()…...

编程日记 2025/7/22 17:41:03

基于BClinux8部署Ceph 19.2(squid)集群

#作者：闫乾苓文章目录 1.版本选择Ceph版本发布历史目前官方在维护的版本 2.部署方法3.服务器规划4.前置配置4.1系统更新4.2配置hosts cat >> /etc/hosts << EOFssh-keygenssh-copy-id ceph01ssh-copy-id ceph02ssh-copy-id ceph034.5 Python34.6 Syst…...

编程日记 2025/8/1 23:38:16

Workerman5.0如何实现一对一聊天

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons：JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram，自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 ？ 5 IDEA必装的插件&…...

编程日记 2025/7/31 8:09:06

c#难点整理2

1.对象池的使用就是先定义一系列的对象，用一个，调一个。 public class ObjectPool<T> where T : new(){private Queue<T> pool; // 用于存储对象的队列private int maxSize; // 对象池的最大容量// 构造函数public ObjectPool(int maxSi…...

编程日记 2025/7/31 20:19:32

STM32基础教程——定时器

前言 TIM定时器（Timer）:STM32的TIM定时器是一种功能强大的外设模块，通过时基单元（包含预分频器、计数器和自动重载寄存器）实现精准定时和计数功能。其核心原理是：内部时钟（CK_INT）或…...

编程日记 2025/7/27 16:22:08

How to share files with Windows via samba in Linux mint 22

概述 Windows是大家日常使用最多的操作系统，在Windows主机之间，可以共享文件，那么如何在Windows主机与Linux主机之间共享文件呢？ 要在Windows主机与Linux主机之间共享文件，我们可以借助Samba协议完成。借助Samba协议…...

编程日记 2025/8/1 20:35:24

[AI速读]如何构建高效的AMBA协议检查器（Checker IP）

在芯片验证过程中，检查器（Checker）是确保设计符合协议规范的关键工具。本文基于一篇技术论文，分享如何为AMBA协议（如AXI、AHB）构建可重用的检查器IP（Checker IP，简称CIP），并简化其核心思路，帮助工程师快速上手。一、什么是Checker IP？ Checker IP是一组用SystemVe…...

编程日记 2025/7/9 19:37:43

VBA-Excel

VBA 一、数据类型与变量常用数据类型： Byte：字节型，0~255。Integer：整数型，用于存储整数值，范围 -32768 到 32767。Long：长整型，可存储更大范围的整数，范围 -214748364…...

编程日记 2025/8/2 22:17:43

网络华为HCIA+HCIP IPv6

目录 IPv4现状 IPv6基本报头 IPv6扩展报头 IPv6地址 IPv6地址缩写规范编辑 IPv6地址分配 IPv6单播地址分配 IPv6单播地址接口标识 IPv6常见单播地址 - GUA （2 / 3 开头） IPv6常见单播地址 - ULA IPv6常见单播地址 - LLA IPv6组播地…...

编程日记 2025/7/28 22:58:25

LeetCode 每日一题 2025/3/17-2025/3/23

记录了初步解题思路以及本地实现代码；并不一定为最优也希望大家能一起探讨一起进步目录 3/17 1963. 使字符串平衡的最小交换次数3/18 2614. 对角线上的质数3/19 2610. 转换二维数组3/20 2612. 最少翻转操作数3/21 2680. 最大或值3/22 2643. 一最多的行3/23 2116…...

编程日记 2025/8/3 19:26:58

git tag以及git

git tag 以及git 一、先说收获吧 1. git bash 在windows上类似于linux的bash提供的shell命令行窗口，可以执行很多linux命令，cd pwd ls vim cat touch mkdir，还可以用正则匹配查看标签。相当于在windows上装了一个小的linux。git init myproj…...

编程日记 2025/8/2 16:44:02

Android 自定义变形 MD5 算法

版权归作者所有，如有转发，请注明文章出处：https://cyrus-studio.github.io/blog/ MD5是一种哈希函数，用于将任意长度的数据映射为一个固定长度的哈希值。它由 Ron Rivest 在 1991 年设计，是继 MD4 之后的改进版本。 M…...

编程日记 2025/7/28 6:56:25

【SpringBoot】MorningBox小程序的完整后端接口文档

以下是「晨光宅配」小程序的完整接口文档，涵盖了所有12个表的接口。每个接口包括请求方法、URL、请求参数、响应格式和示例接口文档 1. 用户模块 1.1 获取用户信息 URL: /user/{userId}方法: GET请求参数: userId (路径参数): 用户ID响应格式:{"userId": 1,&qu…...

编程日记 2025/8/3 14:45:44

2025年01月03日微创网络（杭州银行外包）前端面试

目录 html 块级元素和行内元素有哪些阴影的几个属性垂直水平居中的实现方式定位的几种方式盒子模型的方式js的数组方法有哪些vue2 vue3 区别vuex哈希路由和浏览器路由的区别浏览器缓存的几个方式react hooks的优势react 组件传值vue 组件传值如何进行性能优化前端监控get post…...

编程日记 2025/8/3 10:48:04

工单分类总结

微调BERT-base模型，构建层次化分类器，Top-3准确率达97.2%，并自动识别出问题的关键类别 1. 具体微调的BERT-base模型是什么模型？ BERT-base模型是一个预训练的Transformer模型，包含12个Transformer块、12个自注意头和隐藏大小为768。该模型在大规模文本数据上进行了预训练…...

编程日记 2025/7/29 18:36:55

2025年了，5G还有三个新变化

最近舆论开始讨论5G为什么不火了？5G是不是停滞发展了。实际上，5G不仅在发展，还迎来了它的升级版5G-A。在今年西班牙举行的世界移动通信大会上，5G-A就是焦点之一。被誉为全球通信领域风向标的MWC，汇聚了华为、中兴通…...

编程日记 2025/8/2 6:38:37

引言