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

在Vue3项目中使用svg-sprite-loader

news 来源：原创 2025/5/10 16:00:23

1.普通的svg图片使用方式

1.1 路径引入

正常我们会把项目中的静态资源放在指定的一个目录，例如assets,使用起来就像

<img src="../assets/svgicons/about.svg" />

1.2封装组件使用

显然上面的这种方法在项目开发中不太适用，每次都需要通过路径引用
此次封装的目的就是简化写法，以更加简洁的方式引用图标并且具备更好的复用性
封装后使用如下：

 
<svg-Icon name="user"></SvgIcon>
//1. SvgIcon为全局组件，name表示要使用的svg图标名称//2. user.svg图标存放于icons/svg目录下(路径不固定存放，跟随自己需求)

2.依赖安装与loader配置

2.1下载依赖

根据自己项目的版本需求，下载所兼容的svg-sprite-loader的版本

npm i svg-sprite-loader -D
// 或是
yarn add svg-sprite-loader -D

2.2 loader配置

打开vue.config.js文件，在chainWebpack函数中新增配置
这里有两种写法

2.2.1 方式一

如果你整个项目中的svg文件都希望使用雪碧图的方式进行处理,那么这么写

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({chainWebpack: (config) => {const svgRule = config.module.rule('svg')svgRule.uses.clear()// 添加要替换的 loadersvgRule.use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'})}
})

2.2.2 方式二

或者说你只希望指定目录下的svg文件被svg-sprite-loader处理,其他的还是使用webpack5默认的svg处理方式，那么这么写

//这行代码引入了 Node.js 的 path 模块，该模块提供了用于处理文件路径的实用工具方法，后续会用于拼接路径等操作。
const path = require('path')
//定义了一个resolve的函数，它接收一个参数dir
//函数的功能是使用，path.join方法将当前模块所在目录和传入的dir参数所代表的路径进行拼接，最终返回拼接后的完整路径，这个函数常用于处理相对路径，使其更准确指向项目内的特定目录
//——dirname是是一个特殊变量。表示当前执行脚本所在的目录的绝对路径，它是一个全局变量，可以在任何地方使用，用于获取当前模块的文件所在的目录路径，
//为什么使用——而不使用.：“使用.来获取当前文件的路径可能导致路径不准确，因为.代表当前目录，可能会随着当前文件的深度变化而变化，而使用——dirname则可以确保获取到当前文件的真实路径，不会随着文件深度变化”function resolve(dir) {return path.join(__dirname, dir)}/*** chainWebpack对象中的内容介绍* 这里的config是webpack的链条式操作配置对象，下面通过调用它的一系列方法来修改webpack的模块处理规则等配置内容*/chainWebpack(config) {// 设置 svg-sprite-loader// config 为 webpack 配置对象// config.module 表示创建一个具名规则，以后用来修改规则/*** 这部分代码开始配置 Webpack 对 svg 文件的处理规则。* 首先通过 config.module.rule('svg') 创建了一个名为 svg 的规则，后续的操作都是针对这个规则来进行的。* .exclude.add(resolve('src/icons')) 表示对于 Webpack 处理模块时，* 当遇到 src/icons 目录下的 svg 文件时，要排除它们，不应用当前这个 svg 规则去处理（通常是因为后面会针对这个目录下的 svg 文件有特殊的处理规则设置），最后 .end() 用于结束当前这一步规则的链式操作，回到上一级配置链。*/config.module// 规则// 在 module 配置的规则集合里，通过调用 rule 方法并传入 'svg' 字符串来开始定义针对 .svg 文件类型的模块处理规则。后续会在这条规则上继续添加更多的配置，比如排除某些目录下的 .svg 文件不使用这条规则处理等。.rule('svg')// 忽略// 在刚才定义的 .svg 文件模块处理规则里，调用 exclude 方法，它用于指定哪些目录下的对应文件类型（这里就是 .svg 文件）不需要应用这条规则去处理。这里调用了之前定义的 resolve 函数，传入 'src/icons' 参数，也就是将 src/icons 目录对应的绝对路径添加到排除列表中，意味着 src/icons 目录下的 .svg 文件不会按照这条常规的 .svg 模块处理规则去加载。.exclude.add(resolve('src/icons'))// 结束.end()// config.module 表示创建一个具名规则，以后用来修改规则config.module// 规则// 创建一个新的名为 'icons' 的模块处理规则，虽然也是针对 .svg 文件，但和前面常规的 .svg 规则区分开，这里将用于配置 src/icons 目录下 .svg 文件的特定加载方式等。.rule('icons')// 正则，解析 .svg 格式文件// 在这个新的 'icons' 规则里，通过 test 方法指定这条规则应用的文件类型匹配模式，这里传入的正则表达式 /\.svg$/ 表示匹配以 .svg 为后缀的文件，也就是明确这条规则是针对 .svg 文件的，和前面规则名称里的意图相呼应，专门来处理 src/icons 目录下符合此类型的文件.test(/\.svg$/)// 解析的文件// 调用 include 方法并传入通过 resolve 函数获取的 src/icons 目录的绝对路径，include 方法的作用是指定哪些目录下的文件要应用这条规则进行处理，这里就明确了只有 src/icons 目录下的文件（结合前面的 .test 匹配 .svg 文件类型，实际就是 src/icons 目录下的 .svg 文件）才应用这条特殊的 'icons' 规则来处理。.include.add(resolve('src/icons'))// 结束.end()// 新增了一个解析的loader// 在这个 'icons' 规则里，调用 use 方法并传入 'svg-sprite-loader'，这是指定使用 svg-sprite-loader 这个 Webpack loader 来处理符合这条规则的文件（即 src/icons 目录下的 .svg 文件）。loader 是 Webpack 中用于对不同类型文件进行转换等操作的工具，svg-sprite-loader 可以将多个 .svg 文件合并为一个雪碧图（Sprite），便于在网页中更高效地使用图标等 SVG 资源。.use('svg-sprite-loader')// 具体的loader// 再次明确指定要使用的 loader 名称为 svg-sprite-loader，这里其实和前面的 .use('svg-sprite-loader') 是相关联且作用基本一致的，是在链式配置中进一步确定使用的加载器信息，有些情况下这种重复指定可能是遵循特定配置语法要求或者为了更清晰明确加载器的使用情况。.loader('svg-sprite-loader')// loader 的配置.options({// 这是 options 对象里的一个配置项，对于 svg-sprite-loader 来说，symbolId 配置用于指定生成的雪碧图中每个 <symbol> 元素（SVG 里用于定义可复用图形元素的标签）的 id 属性的命名规则。这里设置为 'icon-[name]'，意味着每个 <symbol> 元素的 id 会基于 SVG 文件的原名（[name] 会被替换为实际文件名）来生成，格式如 icon-文件名，方便在 HTML 等地方通过这个 id 来引用对应的 SVG 图标元素。symbolId: 'icon-[name]'})// 结束.end()}
}/***两个规则的区别1. 适用范围不同常规 .svg 规则（rule('svg') 定义的规则）：适用于除了 src/icons 目录之外的所有 .svg 文件。通过 .exclude.add(resolve('src/icons')) 操作，明确把 src/icons 目录下的 .svg 文件排除在这条规则的应用范围之外，意味着项目中其他位置的 .svg 文件会按照后续常规配置的加载方式（可能是转译为其他格式、进行常规的模块处理等，具体取决于整体项目中其他相关 Webpack 配置，这里未完整展示）来处理。src/icons 目录下 .svg 专属规则（rule('icons') 定义的规则）：专门针对 src/icons 目录下的 .svg 文件生效。通过 .include.add(resolve('src/icons')) 精准指定只有该目录下的 .svg 文件才应用这条规则，并且后续配置了使用 svg-sprite-loader 来进行特定处理，与常规 .svg 文件处理区分开来。2. 处理方式不同常规 .svg 规则：代码中未详细展示其具体的处理动作，但可以推测是按照一般的模块处理逻辑，比如可能是将 .svg 文件当作普通的静态资源模块，在构建时根据项目配置进行诸如复制到输出目录、进行必要的路径调整等常规操作，使其能在项目中正确被引用（例如在 HTML 里通过正确的相对路径引用 .svg 文件等）。src/icons 目录下 .svg 专属规则：使用了 svg-sprite-loader 这个特定的 loader 来处理。这个 loader 的作用是将多个 .svg 文件合并成一个雪碧图（Sprite），把每个 .svg 文件里的图形内容转化为 <symbol> 元素，并根据配置的 symbolId 规则（这里是 'icon-[name]'）为每个 <symbol> 元素生成唯一的 id。这样在 HTML 等页面中就可以通过引用这个雪碧图以及对应的 id 方便地复用各个 SVG 图标，避免了多次单独加载 .svg 文件，提高了页面加载性能以及图标管理和使用的便利性。*/

3.组件SvgIcon封装

在项目src/compoent目录下新增SvgIcon文件夹，里面定义一个index.vue
index.vue组件作为子组件，将来被其他组件引用，
以下代码中有内部和外部两种图标方式

3.1 index.vue

<template><!-- 外部 --><divv-if="isExternal":style="styleExternalIcon"class="svg-external-icon svg-icon":class="className"></div><!-- 内部 --><svg v-else class="svg-icon" :class="className" aria-hidden="true"><use :xlink:href="iconName"></use></svg>
</template>
<script setup>
import { defineProps, computed } from "vue";
import { isExternal as external } from "@/utils/validata.js";
// 创建为组件首先考虑到接收的参数
const props = defineProps({icon: {type: String,required: true,},className: {type: String,default: "",},
});
// 第二点考虑到是不是外部，还是内部，可以使用计算属性，computed.下面方法是判断外部的
const isExternal = computed(() => external(props.icon));// 外部图标的话就添加一个样式
const styleExternalIcon = computed(() => ({mask: `url(${props.icon}) no-repeat 50% 50%`,"-webkit-mask": `url(${props.icon}) no-repeat 50% 50%`,
}));console.log(isExternal.value, "isExternal");
// 内部图标const iconName = computed(() => `#icon-${props.icon}`);
</script>
<style>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}.svg-external-icon {background-color: currentColor;mask-size: cover !important;display: inline-block;
}
</style>

4.关于require.context方法

核心就是使用了webpack内置的require.context方法
详细参数解释点击这里官网传送门
这里我的svg文件都放在了src/icons/svg目录下了（根据自己需求存放即可，不固定）在icons下再次创建index.js文件

/*** 1:导入所有的svg图标* 2:完成SvgIcon的全局注册* https://webpack.docschina.org/guides/dependency-management/#requirecontext* 通过 require.context() 函数来创建自己的 context*/
import SvgIcon from '@/components/SvgIcon'
/*** 搜索./svg下面的文件 ，是否有子目录，所以false，匹配的文件*/
const svgRequire = require.context('./svg', false, /\.svg$/)//方法来svg注册，接收三个参数1：搜索./svg下面的文件 ，2是否有子目录，所以false，3匹配的文件.svg结尾的文件
//此时返回了一个require函，可以接收一个request的参数，用于requer的导入
//该函数提供三个属性，可以通过svgRequire.keys()获得所有的svg图标
//便利图标，吧图标作为request参数传入到，svgRequire，导入函数种，完成本地svg图标的导入
console.log(svgRequire.keys(), 'svgRequire.keys()')
svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon))
export default app => {//导出一个函数，这个函数接收app的一个参数，通过挨app函数的component方法完成注册，两个参数，一个名字，一个实例iconapp.component('svg-icon', SvgIcon)
}

5.全局注册

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'import SvgIcon from '@/components/SvgIcon/index.vue'//注册的组件
import installIcons from '@/icons'//所有的icon
const app = createApp(App)
app.component('svg-icon', SvgIcon)
app.use(createPinia())
app.use(router)
app.use(installIcons)
app.mount('#app')

6.组件使用

 <svg-icon icon="user"></svg-icon>

7.使用效果

8.目录结构

在Vue3项目中使用svg-sprite-loader

1.普通的svg图片使用方式 1.1 路径引入正常我们会把项目中的静态资源放在指定的一个目录，例如assets,使用起来就像 <img src"../assets/svgicons/about.svg" /> 1.2封装组件使用显然上面的这种方法在项目开发中不太适用，每次都需…...

编程日记 2025/5/10 16:00:23

Linux(Centos 7.6)命令详解：pwd

1.命令作用显示当前工作目录的完整路径(Print Working Directory) 2.命令语法 Usage: pwd [-LP] 3.参数详解 -L，显示逻辑路径，遵循符号链接；这是默认选项。-P，显示物理路径，不遵循符号链接。 4.常用用例 1.-L参…...

编程日记 2025/4/15 22:42:42

【iOS Swift Moya 最新请求网络框架封装通用】

【iOS Swift Moya 最新请求网络框架封装通用】前言框架结构1.API定义（TargetType）2. 配置MoyaProvider3. 网络管理器4. 使用示例注意事项进一步优化前言设计一个基于Moya的网络请求框架，可以提供灵活的网络请求管理，例如设置请…...

编程日记 2025/5/10 15:27:12

【算法学习】——设施选址问题（动态规划）

题目描述在一条高速公路附近有 V 个村庄，选择 P 个村庄在其附近建立邮局，要求每个村庄到最近的邮局的距离和最小(1<V<300，1<P<30)。问题分析这个问题是一个经典的设施选址问题（Facility Location Problem&#…...

编程日记 2025/5/6 14:12:57

Linux——修改文件夹的所属用户组和用户

一、命令举例： 授权 MOT17 文件夹给 hust_xxx 用户： sudo chown -R hust_xxx:hust_xxx MOT17参考 Linux授权文件夹给用户...

编程日记 2025/5/7 11:01:28

我用Ai学Android Jetpack Compose之Text

这篇开始学习各种UI元素，答案来自通义千问，通义千问没法生成图片，图片是我补充的。下述代码只要复制到第一个工程，做一些import操作，一般import androidx.compose包里的东西，即可看到预览效果。完整工程代…...

编程日记 2025/5/10 14:47:05

1.高德地图安卓URL Scheme：baidumap:// 官方文档：https://lbs.amap.com/api/amap-mobile/guide/android/navigation IOS URL Scheme：iosamap:// 官方文档：https://lbs.amap.com/api/amap-mobile/guide/ios/navi HarmonyOS NEXT U…...

编程日记 2025/5/10 15:02:08

【Java数据结构】二叉树

1.树型结构 1.1树的概念树是一种非线性的数据结构，由n个结点组成的具有层次关系的集合。下面是它的特点： 根结点是没有前驱的结点（没有父结点的结点）子结点之间互不相交除了根结点外，其它结点都只有一个父结点n个结…...

编程日记 2025/5/9 10:42:18

Golang设计模式目录

go语言实现设计模式 1 文章目录： 1.1 创建型模式 1.Golang设计模式之工厂模式2.Golang设计模式之抽象工厂模式3.Golang设计模式之单例模式4.Golang设计模式之建造者模式5.Golang设计模式之原型模式 1.2 结构型模式 6.Golang设计模式之适配器模式7.Golang设计模式之桥…...

编程日记 2025/5/7 1:59:48

vue3+Echarts+ts实现甘特图

项目场景： vue3Echartsts实现甘特图;发布任务代码实现封装ganttEcharts.vue <template><div ref"progressChart" class"w100 h100"></div> </template> <script lang"ts&qu…...

编程日记 2025/5/7 23:35:48

nginx-灰度发布策略(split_clients)

一. 简述： 基于客户端的灰度发布（也称为蓝绿部署或金丝雀发布）是一种逐步将新版本的服务或应用暴露给部分用户，以确保在出现问题时可以快速回滚并最小化影响的技术。对于 Nginx，可以通过配置和使用不同的模块来实现基于…...

编程日记 2025/5/10 4:12:57

SQL中聚类后字段数据串联字符串方法研究

在 SQL 中，使用聚类（GROUP BY） 后将某个字段的数据串联为一个字符串，常见的方法包括以下几种，取决于数据库管理系统（DBMS）的具体支持功能： 1. 使用 GROUP_CONCAT （MySQL…...

编程日记 2025/5/8 2:56:57

vue3组件化开发优势劣势分析，及一个案例

Vue 3 组件化开发的优势和劣势优势可复用性： 组件可以重复使用，减少代码冗余，提高开发效率。可以在不同的项目中复用组件，提升开发速度。可维护性： 组件化开发使得代码结构清晰，易于维护。每个…...

编程日记 2025/5/7 4:41:49

Springboot SAP Docker 镜像打包问题

问题类1，sapjco.jar 未识别到：Caused by: java.lang.NoClassDefFoundError: com/sap/conn/jco/ext/DestinationDataProvider 1./deploy/lib/ 文件下放sapjco3.jar、libsapjco3.so、sapjco3.dll 2.docker文件核心内容： COPY /deploy/lib/sap…...

编程日记 2025/5/10 0:47:40

nmap探测Web服务

HTTP服务探测基本认证信息 nmap --script http-auth [目标]探测默认账户 nmap --scripthttp-default-accounts -p [端口] [目标]检查是否存在风险方法 nmap --script http-methods [目标]探测访问一个网页的时间 nmap --scripthttp-chrono -p 80 [目标]提取HTTP注释信息 nmap…...

编程日记 2025/5/6 6:04:57

【学习总结|DAY028】后端Web实战(部门管理)

在 Web 后端开发领域，构建高效、规范且功能完备的系统是核心目标。本文将围绕 Tlias 智能学习辅助系统的后端开发展开，详细阐述从开发准备工作到各部门管理功能实现，以及日志技术应用的全过程，为开发者提供全面的实践参考。一、…...

编程日记 2025/5/6 17:37:41

Servlet 和 Spring MVC：区别与联系

前言在 Java Web 开发中，Servlet 和 Spring MVC 是两个重要的技术。Servlet 是 Java Web 的基础组件，而 Spring MVC 是一个高级 Web 框架，建立在 Servlet 的基础之上，提供了强大的功能和易用性。这篇文章将从定义、原理、功能对…...

编程日记 2025/5/10 0:01:10

【君正T31开发记录】12.编译工具相关总结及介绍

移植交叉工具包的时候，发现这是很多工具的集合包；以及写makefile的时候，也需要了解下这些工具的作用及用法，这里总结记录一下常见的工具及相关用法。 g C编译器，用于编译C源代码文件，这个很常见&#xff0…...

编程日记 2025/5/5 23:39:08

Python 开发框架搭建简单博客系统：代码实践与应用

在当今数字化时代，博客作为一种流行的信息分享和交流平台，拥有广泛的受众。Python 以其强大的功能和丰富的库，为构建博客系统提供了理想的技术支持。本文将详细介绍如何利用 Python 开发框架搭建一个简单博客系统，包括功能实现、代…...

编程日记 2025/5/7 12:30:25

Java 正则表达式入门与应用(详细版)

正则表达式（Regular Expression，简称Regex）是一种文本模式匹配工具，在许多编程语言中都得到了广泛应用。Java 作为一种强大的编程语言，提供了对正则表达式的内建支持，使得在字符串处理、数据验证和文本解析…...

编程日记 2025/5/7 12:30:20

高效内存管理与调试技巧：深入解析 AddressSanitizer

在现代 C开发中，内存管理是一个至关重要但也容易出错的领域。即使使用了智能指针和其他高效工具，复杂的项目仍可能出现内存泄漏、非法访问等问题。为了解决这些问题，Google 开发了一个强大的工具——AddressSanitizer (ASan)。本文将详细介绍…...

编程日记 2025/5/7 8:03:17

力扣第137题：只出现一次的数字 II C语言解法

力扣第137题：只出现一次的数字 II C语言解法题目描述给定一个整数数组 nums，其中每个元素出现三次，除了一个元素出现一次。找出那个只出现一次的元素。说明： 你的算法应该具有线性时间复杂度。你不可以使用额外的空间&…...

编程日记 2025/5/9 19:28:28

【Qt】控件概述和QWidget核心属性1（enabled、geometry、windowTitle、windowIcon、QRC机制）

一、控件概念界面上各种元素、各种部分的统称（如按钮、输入框、下拉框、单选复选框...） Qt作为GUI开发框架，内置了各种的常用控件，并支持自定义控件。二、控件体系发展 1.没有完全的控件，需要使用绘图API手动绘制…...

编程日记 2025/5/9 17:20:57

25年1月更新。Windows 上搭建 Python 开发环境：PyCharm 安装全攻略（文中有安装包不用官网下载）

python环境没有安装的可以点击这里先安装好python环境，python环境安装教程安装 PyCharm IDE 获取 PyCharm PyCharm 提供两种主要版本——社区版（免费）和专业版（付费）。对于初学者和个人开发者而言，社区…...

编程日记 2025/5/6 14:13:24

软件工程大复习之（四）——面向对象与UML

4.1 面向对象概述面向对象（OO）是一种编程范式，它将数据和处理数据的方法封装在对象中。面向对象的主要概念包括： 对象：实例化的数据和方法的集合。类：对象的蓝图或模板。封装：隐藏对象的内部…...

编程日记 2025/5/6 1:26:56

前端基础函数算法整理应用（sort+reduce+date+双重for循环）

文章目录基础函数算法reduce 函数算法sort 函数算法时间排序1. 对日期字符串数组进行排序2. 对包含日期对象的数组进行排序3. 对包含时间戳的数组进行排序4. 对包含日期时间信息的对象数组进行排序基础函数算法一、排序算法冒泡排序（Bubble Sort） …...

编程日记 2025/4/29 23:08:15

web系统漏洞攻击靶场

摘要互联网极速发展的同时，也会带来一些安全性的风险，一些不为人知的安全问题也逐渐暴露出来。近年来，媒体不断披露了许多网络安全事故，许多网络应用程序被黑客攻击，导致内部数据外泄，人们开始认识到网络…...

编程日记 2025/5/10 3:14:48

苍穹外卖-day07（Spring Cache 购物车业务逻辑）

内容缓存菜品缓存套餐添加购物车查看购物车清空购物车功能实现：缓存商品、购物车效果图： 1. 缓存菜品 1.1 问题说明用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增…...

编程日记 2025/5/10 1:35:18

win10 VS2019上libtorch库配置过程

win10 VS2019上libtorch库配置过程 0 引言1 获取libtorch2 在VS上配置使用libtorch库3 结语 0 引言 💻💻AI一下💻💻 libtorch库是一个用于深度学习的C库，是PyTorch的官方C前端。它提供了用于构建和训练深度学习模…...

编程日记 2025/5/6 12:12:42

git 常用命令和本地合并解决冲突

目录一、常用命令二、本地可视化合并分支解决冲突一、常用命令最近，使用mac电脑，无法直接使用小乌龟进行可视化操作，现在记录一些常用命令。拉取： git clone <git url> 仅拉起某个单独分支： git clo…...

编程日记 2025/5/5 23:48:25

Elasticsearch 创建索引 Mapping映射属性索引库操作增删改查

Mapping Type映射属性 mapping是对索引库中文档的约束，有以下类型。 text：用于分析和全文搜索，通常适用于长文本字段。keyword：用于精确匹配，不会进行分析，适用于标签、ID 等精确匹配场景。integer、long…...

编程日记 2025/5/8 9:39:28

Objective-C语言的数据结构

Objective-C语言中的数据结构 Objective-C是一种面向对象的编程语言，其在苹果公司的软件开发中得到了广泛应用。它主要用于开发macOS和iOS应用程序。虽然Objective-C有许多丰富的特性，但在程序设计中，数据结构仍然是构建任何应用程序的基础。…...

编程日记 2025/5/9 6:12:18

智能水文：ChatGPT等大语言模型如何提升水资源分析和模型优化的效率

大语言模型与水文水资源领域的融合具有多种具体应用，以下是一些主要的应用实例： 1、时间序列水文数据自动化处理及机器学习模型： ●自动分析流量或降雨量的异常值 ●参数估计，例如PIII型曲线的参数 ●自动分析降雨频率及重现期 ●…...

编程日记 2025/4/29 8:47:42

ETL的工作原理

ETL的工作原理什么是ETL_云计算主题库-阿里云 ETL的工作原理可以分为三个主要的步骤：Extract（提取）、Transform（转换）、Load（加载）。工作步骤描述 Extract （提取）…...

编程日记 2025/5/10 10:41:22

黑马头条平台管理实战

黑马头条 08平台管理 1.开始准备和开发思路1.1.开发网关1.2编写admin-gateway 代码 2.开发登录微服务2.1编写登录微服务 3.频道管理4.敏感词管理5.用户认证审核6.自媒体文章人工审核99. 最后开发中碰到的问题汇总1.关于nacos 配置问题2.在开发频道管理新增频道后端无法接收到前…...

编程日记 2025/5/10 5:09:45

电池管理系统（BMS）架构详细解析：原理与器件选型指南

BMS（电池管理系统）架构详细讲解从你提供的BMS（Battery Management System）架构图来看，主要涉及到电池监控模块、通信模块、功率控制模块等部分。下面我将详细讲解该架构的各个功能模块及其工作原理。 1. 电池管理核…...

编程日记 2025/5/7 17:23:05

SpringBoot环境和Maven配置

SpringBoot环境和Maven配置 1. 环境准备2. Maven2.1 什么是Maven2.2 为什么要学 Maven2.3 创建一个 Maven项目2.4 Maven核心功能2.4.1 项目构建2.4.2 依赖管理2.4.3 Maven Help插件 2.5 Maven 仓库2.5.1本地仓库2.5.2 中央仓库2.5.3 私有服务器, 也称为私服 2.6 Maven设置国内源…...

编程日记 2025/5/5 14:29:27

lambda用法及其原理

目录 lambda形式lambda用法1.sort降序2.swap3.捕捉列表习题解题 lambda形式 [capture-list](parameters)->return type{function boby}[capture-list]：[捕捉列表]用于捕捉函数外的参数，可以为空，但不能省略；(parameters) &am…...

编程日记 2025/5/9 7:20:39

Postgresql源码（139）vim直接修改postgresql表文件的简单实例

1 前言 PG可以用pageinspect方便的读取查看表文件。本篇介绍一种用vim查看、编辑的方法，案例比较简单，主要分享原理。修改表文件和controlfile是非常危险的行为，请不要在生产尝试。 2 用例简化问题，用简单编码的数据类型。 d…...

编程日记 2025/5/7 20:40:11

Lianwei 安全周报|2025.1.2

以下是本周「Lianwei周报」，我们总结推荐了本周的政策/标准/指南最新动态、热点资讯和安全事件，保证大家不错过本周的每一个重点！ 政策/标准/指南最新动态 01 国家数据局等五部门印发《关于促进企业数据资源开发利用的意见》为充分释放企业…...

编程日记 2025/5/6 10:04:57

Vue3-跨层组件通信Provide/Inject机制详解

Vue 3 中的 Provide 和 Inject 机制是专为跨层级传递数据而设计的，适用于祖先组件和后代组件之间的通信。与props 和 emits 不同，Provide/Inject 可以跨越多个层级进行数据传递，而不需要逐层传递。 1. Provide provide 是一个在祖先组件中提…...

编程日记 2025/5/6 17:11:31

springcloud 介绍

Spring Cloud是一个基于Spring Boot的微服务架构解决方案集合，它提供了一套完整的工具集，用于快速构建分布式系统。在Spring Cloud的架构中，服务被拆分为一系列小型、自治的微服务，每个服务运行在其独立的进程中，并通过…...

编程日记 2025/5/6 6:38:57

css预处理器sass

在前端开发的世界中，CSS 是构建网页样式的基础。然而，随着项目规模的增大，纯 CSS 的编写和维护往往会变得复杂而繁琐。为了解决这些痛点，Sass（Syntactically Awesome Style Sheets）应运而生。Sass 是一种 C…...

编程日记 2025/5/7 17:37:51

匠人天工Ai浮雕网站创新发布了ZBrush插件，提效500%，为AI+数字雕刻行业带来新的活力

2025年1月6日，杭州——杭州仓颉造梦数字科技公司旗下产品匠人天工近日宣布推出一款创新的ZBrush插件，旨在为AI数字雕刻行业带来前所未有的效率提升。该插件通过一系列智能化功能，大幅简化了数字雕刻的建模流程，使建模效率提高了50…...

编程日记 2025/5/10 10:25:52

解决 Pangolin 版本不兼容导致的编译错误

在使用 Pangolin 库时，有时候会遇到由于版本不兼容而导致的编译错误。本文将通过一个具体的错误案例，展示如何识别和解决这种问题。问题描述在编译时，遇到如下编译错误： /usr/local/include/pangolin/gl/glsl.hpp: In member…...

编程日记 2025/5/7 2:02:48

day01_ Java概述丶开发环境的搭建丶常用DOS命令

编程常识什么是编程？ 所谓编程，就是人们可以使用编程语言对计算机下达命令，让计算机完成人们需要的功能。编程语言的发展历程第一代：机器语言 ，机器语言由数字组成所有指令。计算器解析运行速度，最快…...

编程日记 2025/4/30 2:26:05

进程间通信——网络通信——UDP

进程间通信（分类）：网络通信、无名管道、有名管道、信号、消息队列、共享内存、信号量集 OSI七层模型：（理论模型） 应用层 : 要传输的数据信息，如文件传输，电子邮件等表示层 : 数…...

编程日记 2025/5/7 8:04:01

（六）vForm 动态表单（数据量大，下拉选卡顿问题）

系列文章目录（一）vForm 动态表单设计器之使用（二）vForm 动态表单设计器之下拉、选择（三）vForm 动态表单解决下拉框无数据显示id问题（四）vForm 动态表单自定义组件、属性（五）vForm 动态表单文件上传、下载文章目录目录前言一、组件改造 1.添加分页所需参…...

编程日记 2025/5/8 8:38:06

asp.net core mvc的 ViewBag ， ViewData ， Module ，TempData

在 ASP.NET MVC 和 ASP.NET Core MVC 中，ViewBag 和 ViewData 是两种用于将数据从控制器传递到视图（View）的常用方法。它们都允许控制器将动态数据传递给视图，但它们的实现方式有所不同。关于 Module，它通常指的是某种…...

编程日记 2025/5/7 13:49:23

C#语言的软件开发工具

C#语言的软件开发工具 C#语言作为一种现代化的编程语言，凭借其强大的功能和丰富的生态系统，在软件开发领域得到了广泛的应用。随着C#语言的发展，越来越多的开发工具应运而生。本文将详细介绍C#语言常用的开发工具，包括集成开发环…...

编程日记 2025/5/9 15:30:03