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

在vue3里使用scss实现简单的换肤功能

news 来源：原创 2025/7/18 12:26:01

实现的换肤功能：主题色切换、亮色模式和暗黑模式切换、背景图切换

主题色就是网站主色，可以配置到组件库上面；亮色模式又分为两种风格：纯白风格和背景图风格，不需要背景图的话可以删掉这部分逻辑和相关定义；暗黑模式就是黑底白字。

写法仅在vue3里有效，vue2或其他框架自行修改写法

换肤示例

换肤示例

scss文件定义

先在variables.module.scss文件定义并导出初始样式
注意此文件必须以.module.scss结尾

$main-color: #1677ff;// while
$while-bg-color: #fafafa;
$while-first-text: #000000e0;
$while-second-text: #000000a6;
$while-third-text: #00000040;
$while-box-bg-color: rgba(255, 255, 255, 0.6);
//dark
$dark-bg-color: #141414;
$dark-first-text: #ffffffd9;
$dark-second-text: #ffffffa6;
$dark-third-text: #ffffff40;
$dark-box-bg-color: rgba(255, 255, 255, 0.05);:export {MainColor: $main-color;//whileWhileBgColor: $while-bg-color;WhileFirstText: $while-first-text;WhileSecondText: $while-second-text;WhileThirdText: $while-third-text;WhileBoxBgColor: $while-box-bg-color;//darkDarkBgColor: $dark-bg-color;DarkFirstText: $dark-first-text;DarkSecondText: $dark-second-text;DarkThirdText: $dark-third-text;DarkBoxBgColor: $dark-box-bg-color;
}

然后在base.scss里定义不同模式下的css属性
此文件可以随意命名

@import "./variables.module";:root {--main-width: 1280px;// 切换背景图需要的变量--base-background:url('../bgImgs/bgImg_53.jpeg');
}
// 亮色模式下文字颜色变量
html[data-theme='light']:root{--first-lv-text: #{$while-first-text};--second-lv-text: #{$while-second-text};--third-lv-text: #{$while-third-text};--box-bg-color: #{$while-box-bg-color};
}
// 暗色模式下的文字颜色变量
html[data-theme='dark']:root{--first-lv-text: #{$dark-first-text};--second-lv-text: #{$dark-second-text};--third-lv-text:#{$dark-third-text};--box-bg-color: #{$dark-box-bg-color};
}html[data-theme='dark']{div,p,span,a,h1,h2,h3,h4,h5,h6,h7,ul,li,button,i{color: #{$dark-first-text};}
}

然后在mian.scss里引入这两个文件并使用css变量

@import './base.scss';
@import "./variables.module";
body {min-width: var(--main-width);overflow-x: hidden;background: var(--base-background) left top no-repeat;background-size: cover;transition: all 0.3s ease;
}

修改主题方法定义

然后在store里定义需要的方法

先定义下ts类型themeTypes.ts（没有ts的可以忽略）

export interface themeType {mode: themeModebgImg: stringisWhile: booleanisDark: booleanmainColor: string
}
export enum themeMode {light = 'light',dark = 'dark'
}

再定义个修改css变量的工具类

/** 修改css样式* @param {string} property css属性名* @param {string} value 要修改的值*/
export function setCssProperty(property: string, value: string) {document.documentElement.style.setProperty(property, value);
}

然后在theme.ts里定义

因为亮色模式下分为纯白和背景图，所以需要mode + isWhile和isDark来区分是亮色模式还是暗黑模式，不需要背景图的话可以修改这部分逻辑

亮色模式和暗黑模式修改关键代码：window.document.documentElement.setAttribute(‘data-theme’, themeMode.light)

import { computed, reactive, ref } from 'vue'
import { defineStore } from 'pinia'
import { themeMode, type themeType } from './types/themeTypes'
import { setCssProperty } from '@/utils/index'
import variable from '@/assets/styles/variables.module.scss'export const useThemeStore = defineStore('theme', () => {/*** 主题分为两种模式：亮色和暗黑* 亮色下又分为两种风格：纯白色风格 和 背景图风格* 暗黑模式就是纯黑背景模式* 三种风格不可兼容* */const theme = reactive<themeType>({mode: themeMode.light,// 修改为你真实的背景图地址bgImg: new URL('@/assets/bgImgs/bgImg_53.jpeg', import.meta.url).href, // 仅在mode === light时生效isWhile: false, // 仅在mode === light时生效isDark: false,mainColor: variable.MainColor})const setTheme = (mode: themeMode, imgUrl?: string) => {theme.mode = mode// theme.isWhile为true表示使用纯白模式；确保isDark为false，并且移除背景图，背景色修改为纯白if (theme.isWhile && mode === themeMode.light) {theme.isDark = falsewindow.document.documentElement.setAttribute('data-theme', themeMode.light)setCssProperty('--base-background', variable.WhileBgColor)} else if (theme.isDark && mode === themeMode.dark) {// 暗黑模式，确保isWhile为false，并且移除背景图，背景色为纯黑theme.isWhile = falsewindow.document.documentElement.setAttribute('data-theme', themeMode.dark)setCssProperty('--base-background', variable.DarkBgColor)} else {// theme.isWhile和theme.isWhile都为false表示使用背景图，此时mode必须为lighttheme.mode = themeMode.lighttheme.isWhile = falsetheme.isDark = falsetheme.bgImg = imgUrl || theme.bgImgwindow.document.documentElement.setAttribute('data-theme', themeMode.light)setCssProperty('--base-background', `url(${theme.bgImg})`)}// 这里把配置存在了本地，有条件的可以存在后台跟用户绑定用接口加载localStorage.setItem('theme', JSON.stringify(theme))}
//页面加载时使用此方法加载配置的主体const loadTheme = () => {const localTheme = localStorage.getItem('theme')if (theme) {Object.assign(theme, JSON.parse(localTheme as string))setTheme(theme.mode, theme.bgImg)}}return {theme,setTheme,loadTheme}
})

使用

然后在换肤vue文件里使用这些方法，注：template非完整代码，仅示例如何调用

<template>
<!--修改主题色我使用的vue3-colorpicker组件 --><ColorPickeris-widgetpicker-type="chrome"shape="square"v-model:pure-color="theme.mainColor"format="hex"@pureColorChange="setMainColor"/><!--修改为纯白 暗黑模式--><div class="use-style"><span>纯白</span><a-switch v-model:checked="theme.isWhile" @change="themeStore.setTheme(themeMode.light)" /></div><div class="use-style"><span>暗黑</span><a-switch v-model:checked="theme.isDark" @change="themeStore.setTheme(themeMode.dark)" /></div><!--选择皮肤(纯白/暗黑模式下,不能选择)--><div class="img-list"><divv-for="(img, index) in bgImgList":key="index"class="img-item"><img:src="img":alt="'皮肤' + index":style="{ cursor: theme.isWhile || theme.isDark ? 'not-allowed' : 'pointer' }"loading="lazy"@click="useImg(img)"/><CheckCircleFilled v-if="theme.bgImg === img" class="selected-icon" /></div></div>
</template>
<script setup lang="ts">import { reactive, ref, watch } from 'vue';// 把sotre和类型导入进来import { useThemeStore } from '@/stores/theme';import { themeMode } from '@/stores/types/appTypes';import { ColorPicker } from 'vue3-colorpicker';import 'vue3-colorpicker/style.css';import { storeToRefs } from 'pinia';const themeStore = useThemeStore();const { theme } = storeToRefs(themeStore);themeStore.loadTheme();const bgImgList = reactive<string[]>([]);const imgCurrent = ref(1);
// 获取图片列表，我这样写是因为放在了本地，根据你的实际情况修改function getBgImgList() {for (let i = 0; i < 100; i++) {bgImgList.push(new URL(`../../assets/bgImgs/bgImg_${i}.jpeg`, import.meta.url).href);}}onMounted(()=>{getBgImgList();})
// 设置主题色，function setMainColor() {localStorage.setItem('theme', JSON.stringify(theme.value));}function useImg(imgUrl: string) {if (theme.value.isWhile || theme.value.isDark) return;themeStore.setTheme(themeMode.light, imgUrl);}
</script>

如果使用了组件库,别忘了把主题色配置到组件上

 <template><a-config-provider:locale="zhCN":theme="{algorithm: appStore.theme.isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,token: {colorPrimary: appStore.theme.mainColor,},}"><a-app><RouterView /></a-app></a-config-provider>
</template><script setup lang="ts">import zhCN from 'ant-design-vue/es/locale/zh_CN';import {  theme } from 'ant-design-vue';import { useThemeStore } from '@/stores/theme';const themeStore = useThemeStore();
</script>

要在不同模式下修改组件库的样式,可以创建如antDesign.scss文件来修改

// 主题兼容
html[data-theme='light']{.ant-layout-sider{background: rgba(255,255,255,0.4);}.ant-layout-header{background: rgba(255,255,255,0.2);}
}
html[data-theme='dark']{.ant-layout-sider{background: rgba(255,255,255,0.08);}.ant-layout-header{background: rgba(255,255,255,0.05);}
}

需要其他配置可以自行往关键文件里添加

在vue3里使用scss实现简单的换肤功能

实现的换肤功能：主题色切换、亮色模式和暗黑模式切换、背景图切换主题色就是网站主色，可以配置到组件库上面；亮色模式又分为两种风格：纯白风格和背景图风格，不需要背景图的话可以删掉这部分逻辑和相关定义&#xff1b…...

编程日记 2025/7/18 12:26:01

flyway执行sql遇到变量执行报错解决

前两天在公司使用flyway工具执行sql时，开发写的sql里面有变量，于是这个flyway工具不识别这个变量直接报错，不接着往下执行了。报错信息如下： flyway工具执行sql报错 information: No value provided for placeholder: ${ep1} 于是…...

编程日记 2025/7/16 15:15:14

解谜类游戏《迷失岛2》等如何抽象出一套通用高效开发框架？

解谜类游戏以精妙的谜题设计和引人入胜的故事叙述为特点，考验着玩家的智慧与观察力。《迷失岛2》与《南瓜先生2九龙城寨》正是这一领域的佳作。游戏以独特的艺术风格和玩法设计吸引了大量玩家，而它们背后隐藏着一套强大的框架。上海胖布丁游戏的技术总…...

编程日记 2025/7/15 5:46:21

Ant Design Vue v4版本如何解决1px没有被postcss-px2rem转成rem的问题

背景说明如果你的 Ant Design Vue 项目有要做适配的需求，那首先要选择一种适配方案。笔者选择的是用 postcss-px2rem 进行适配。笔者在配置了 postcss-px2rem的相关配置后，发现 postcss-px2rem 没有对 Ant Design Vue 进行适配。在网上看了一些文章之后…...

编程日记 2025/7/18 12:15:10

【系统架构设计师论文】云上自动化运维及其应用

随着云计算技术的迅猛发展，企业对云资源的需求日益增长。为了应对这一挑战，云上自动化运维（CloudOps）应运而生，它结合了DevOps理念和技术，通过自动化工具和流程来提高云环境的管理效率和服务质量。本文将探讨云上自动化运维的主要衡量指标，并详细介绍一个实际项目中如何…...

编程日记 2025/7/10 13:31:38

河南地质灾害资质办理的政策

一、资质分类资质等级： 甲级资质：由自然资源部审批管理，适用于承担大型地质灾害防治项目。乙级资质：由省、自治区、直辖市自然资源主管部门审批管理，适用于承担中型地质灾害防治项目。丙级资质：由省…...

编程日记 2025/7/18 12:11:35

单例模式--懒汉饿汉模式

一.啥是单例模式? 先介绍一下设计模式： 设计模式好⽐象棋中的 "棋谱". 红⽅当头炮, ⿊⽅⻢来跳. 针对红⽅的⼀些⾛法, ⿊⽅应招的时候有⼀些固定的套路. 按照套路来⾛局势就不会吃亏. 软件开发中也有很多常⻅的 "问题场景". 针对这些问题…...

编程日记 2025/7/18 12:15:11

HDD 2025年技术趋势深度分析报告

随着数据量的指数级增长以及人工智能（AI）、物联网（IoT）、云计算和视频监控等领域的需求激增，硬盘驱动器（HDD）行业正面临着前所未有的挑战与机遇。本报告旨在深入剖析2025年HDD技术的发展方向&am…...

编程日记 2025/7/18 12:11:34

关于uni-app的uni.showModal和indexOf的使用

这里使用showModal时，这个里面的content需要使用到字符串的形式，不能用到number类型 uni.showModal({title: 提示,content: "hello",success: function (res) {if (res.confirm) {console.log(用户点击确定);} else if (res.cancel) {console…...

编程日记 2025/7/18 12:08:26

Spring Data Elasticsearch

简介说明 spring-data-elasticsearch是比较好用的一个elasticsearch客户端，本文介绍如何使用它来操作ES。本文使用spring-boot-starter-data-elasticsearch，它内部会引入spring-data-elasticsearch。 Spring Data ElasticSearch有下边这几种方法操作El…...

编程日记 2025/7/18 11:53:55

汇编语言简要记录-1

汇编语言与汇编指令汇编语言的主题是汇编指令汇编指令与机器指令的差别在于指令的表示方法上 1、汇编指令是机器机器指令便于记忆的书写格式 2、汇编指令是机器指令的助记符 ag：机器指令 1000100111011000操作：将寄存器BX的值送到AX中汇编指令 MOV …...

编程日记 2025/7/18 12:05:34

Java程序猿搬砖笔记(十七)

文章目录 MySQL触发器ElasticSearch按日期分组查询每天的文档数量MySQL中order by排序将null排在最前或者最后面swagger3.0默认访问路径swagger3.0模块化配置MySQL中要少用UNION，多用UNION ALLElasticSearch Bucket & Metric聚合分析及嵌套聚合Mysql case when做…...

编程日记 2025/7/18 11:48:14

代码设计：设计模式：观察者模式

文章目录定义类结构应用总结定义实现响应式编程的代码设计，即触发事件或数据变化时，将数据从被观察者类通过观察器传递给观察者处理，即被观察者类间接调用观察者类的方法处理事件或数据类结构被观察者类、观察器类、观察者类被观察…...

编程日记 2025/7/18 12:16:41

第32天：安全开发-JavaEE应用Servlet路由技术JDBCMybatis数据库生命周期

时间轴： 32天主要学习内容： 1、JavaEE-HTTP-Servlet技术 2、JavaEE-数据库-JDBC&Mybatis java技术使用历史（2023 ）： JavaEE-HTTP-Servlet&路由&周期: java学习范围： 3、Java: 功能:数据…...

编程日记 2025/7/18 1:15:32

如何使用Apache HttpClient来执行GET、POST、PUT和DELETE请求

Apache HttpClient 是一个功能强大且灵活的库，用于在Java中处理HTTP请求。它支持多种HTTP方法，包括GET、POST、PUT和DELETE等。本教程将演示如何使用Apache HttpClient来执行GET、POST、PUT和DELETE请求。 Maven依赖要使用Apache HttpClient&…...

编程日记 2025/7/17 22:29:36

Next.js 系统性教学：加载界面、重定向与路由分组

更多有关Next.js教程，请查阅： 【目录】Next.js 独立开发系列教程-CSDN博客目录 1. 加载界面与流式渲染 1.1 加载界面 (loading.js) 1.2 流式渲染 2. 路由重定向 2.1 基于服务器的重定向 2.2 动态重定向 2.3 中间件中的重定向 3. 路由分组 3.1…...

编程日记 2025/7/14 22:47:36

哪款云手机适合多开？常用云手机功能对比

在全球化和数字化时代，云手机以其独特的灵活性和高效性，成为多账号运营和数字营销的热门工具。云手机能够解决传统设备管理的诸多痛点，例如账号关联、硬件成本高等问题。本文将为您推荐多款优质云手机品牌，帮助您选择最适合的工具…...

编程日记 2025/7/14 10:10:06

基于openzeppelin插件的智能合约升级

一、作用以及优点部署可升级合约，插件自动部署proxy和proxyAdmin合约，帮助管理合约升级和交互；升级已部署合约，通过插件快速升级合约，脚本开发方便快捷；管理代理管理员的权限，只有proxyAdmin的…...

编程日记 2025/7/15 13:56:48

WGAN生成对抗网络数据生成

数据生成 | WGAN生成对抗网络数据生成目录数据生成 | WGAN生成对抗网络数据生成生成效果基本描述程序设计参考资料生成效果基本描述 1.WGAN生成对抗网络，数据生成，样本生成程序，MATLAB程序； 2.适用于MATLAB 2020版及以上版本&…...

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

SQL面试题——拼多多SQL面试题求连续段的起始位置和结束位置

拼多多SQL面试题求连续段的起始位置和结束位置今天的题目来自拼多多，我们先看一下题目描述有一张表ids记录了id，id不重复，但是会存在间断，求出连续段的开始位置和结束位置 +---+ | id| +---+ | 1| | 2| | 3| | 5| | 6| | 8| | 10| | 12| | 13| | 14| | 15| +--…...

编程日记 2025/7/16 15:15:20

Contextual Affinity Distillation for Image Anomaly Detection

Contextual Affinity Distillation for Image Anomaly Detection 日本东北大学摘要先前对无监督工业异常检测的研究主要通过匹配或学习局部特征表示来关注“结构”类型的异常，例如裂纹和颜色污染。虽然在这种异常上实现了显着的高检测性能，但他们面…...

编程日记 2025/7/14 1:38:52

如何在HTML中修改光标的位置（全面版）

如何在HTML中修改光标的位置（全面版） 在Web开发中，控制光标位置是一个重要的技巧，尤其是在表单处理、富文本编辑器开发或格式化输入的场景中。HTML中的光标位置操作不仅适用于表单元素（如<input>和<textarea…...

编程日记 2025/7/17 4:46:21

Spring Cloud Alibaba（六）

目录： 分布式链路追踪-SkyWalking为什么需要链路追踪什么是SkyWalkingSkyWalking核心概念什么是探针Java AgentJava探针日志监控实现之环境搭建Java探针日志监控实现之探针实现编写探针类TestAgent搭建 ElasticsearchSkyWalking服务环境搭建搭建微服务微服务接入Sky…...

编程日记 2025/7/8 10:46:15

Http请求系列---【http的几个请求时间分别代表什么？以及如何设置？】

在HTTP客户端编程中，通常涉及以下几种关键的超时设置： 连接超时 (connectTimeout)： 定义：在与服务器建立连接时等待的最大时间。这包括DNS解析时间、连接建立时间等。作用：如果在指定的时间内无法建立连接，…...

编程日记 2025/7/18 4:46:42

如何将CSDN博客下载为PDF文件

1.打开CSDN文章内容 2.按键盘上的f12键（或者右键—审查元素）进入浏览器调试模式，点击控制台（Console）进入控制台 3.在控制台输入以下代码，回车 4.在弹出的打印页面中将布局设置成横向，纵向会…...

编程日记 2025/7/16 21:44:40

关于IDEA 2024.2.1 Java EE 无框架配置Tomcat环境以及servlet使用教程

前言这里的IDEA使用的是专业版，大学生认证后即可使用，社区版没有接触过暂不提，如果你是社区版，那么很可惜，本博客并不适用。本博客适用于java web刚入门的朋友学习使用，并不适用于高级部署。注意&#xf…...

编程日记 2025/7/16 7:34:01

【23种设计模式】七种设计原则：理论与 Java 实践

文章目录 23 种设计模式之七种设计原则：理论与 Java 实践一、单一职责原则（SRP - Single Responsibility Principle）（一）理论介绍（二）Java 实现示例（三）关键步骤&#xf…...

编程日记 2025/7/17 9:33:34

数据库与数据库管理系统概述

title: 数据库与数据库管理系统概述 date: 2024/12/7 updated: 2024/12/7 author: cmdragon excerpt: 在信息化迅速发展的时代，数据已成为企业和组织的重要资产。数据库与数据库管理系统（DBMS）是高效存储、管理和利用数据的核心工具。本文首先定义了数据库的基本概念和特…...

编程日记 2025/7/16 17:51:55

42_GAN网络详解(2)---常见的GAN

DCGAN CGAN 条件生成对抗网络（Conditional Generative Adversarial Networks, CGAN）是生成对抗网络（Generative Adversarial Networks, GAN）的一种变体，由Mehdi Mirza和Simon Osindero在2014年提出。CGAN的主要改进在…...

编程日记 2025/7/13 16:54:39

目前国内【齿轮检测仪】行业整体较为分散，行业竞争日趋激烈

摘要根据 HengCe (恒策咨询）的统计及预测，2023年全球齿轮检测仪市场销售额达到了6.2亿美元，预计2030年将达到9.4亿美元，年复合增长率（CAGR）为6.0%（2024-2030）。地区层面来看&#…...

编程日记 2025/7/12 11:47:48

【学习路线】Java

Java基础基础基础语法面向对象集合框架 JCF 进阶并发编程 JVM 企业级开发框架 Spring Boot Spring Cloud 分布式高性能高可用安全基建 Docker 实战数据库 MySQL Redis 计算机基础计算机组成原理操作系统计算机网络数据结构与算法设计模式参考：…...

编程日记 2025/7/16 5:16:50

一文说清flink从编码到部署上线

引言：目前flink的文章比较多、杂，很少有一个文章，从一个简单的例子入手，说清楚从编码、构建、部署全流程是怎么样的。所以编写本文，自己做个记录备查同时跟大家分享一下。本文以简单的mysql cdc为例展开说明。环境说明…...

编程日记 2025/7/16 5:55:07

#Using docker-compose to Start Server #下载：https://dlcdn.apache.org/dolphinscheduler/3.1.9/apache-dolphinscheduler-3.1.9-src.tar.gz $ DOLPHINSCHEDULER_VERSION3.1.9 $ tar -zxf apache-dolphinscheduler-"${DOLPHINSCHEDULER_VERSION}"-src.t…...

编程日记 2025/7/14 10:48:51

【opencv入门教程】14. 矩阵乘除运算

文章选自： 一、函数multiply、divide //乘法 CV_EXPORTS_W void multiply(InputArray src1, InputArray src2,OutputArray dst, double scale 1, int dtype -1); brief 计算两个数组的每个元素的按比例缩放乘积 note 当输出数组的深度为 CV_32S 时，…...

编程日记 2025/7/14 1:23:44

SpEL

SPEL（Spring Expression Language）是一个强大的支持查询和操作对象的表达式语言 Spring：https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html#expressions 表达式语言支持以下功能文本…...

编程日记 2025/7/15 11:12:01

【SpringMVC】参数传递重定向与转发 REST风格

文章目录参数传递重定向与转发REST风格参数传递 ModelAndView：包含视图信息和模型数据信息 public ModelAndView index1(){// 返回页面ModelAndView modelAndView new ModelAndView("视图名");// 或// ModelAndView modelAndView new ModelAndView(…...

编程日记 2025/7/18 4:46:43

OD B卷【考勤信息】

题目公司用一个字符串来表示员工的出勤信息： absent: 缺勤；late: 迟到；leaveearly: 早退；present: 正常上班现在根据员工出勤信息，判断本次能否获得出勤奖，能获得出勤奖的条件如下：缺勤不超…...

编程日记 2025/7/16 4:55:21

CTF学习24.11.19[音频隐写]

MISC07[音频隐写] 隐写术隐写术是一门关于信息隐藏的技巧与科学，所谓信息隐藏指的是不让除预期的接收者之外的任何人知晓信息的传递事件或者信息的内容。隐写术的英文叫做Steganography，来源于特里特米乌斯的一本讲述密码学与隐写术的著作Steganograp…...

编程日记 2025/7/13 8:57:15

万字长文解读深度学习——VQ-VAE和VQ-VAE-2

🌺历史文章列表🌺 深度学习——优化算法、激活函数、归一化、正则化深度学习——权重初始化、评估指标、梯度消失和梯度爆炸深度学习——前向传播与反向传播、神经网络（前馈神经网络与反馈神经网络）、常见算法概要汇总万字长…...

编程日记 2025/7/12 16:38:31

电脑投屏到电脑：Windows，macOS及Linux系统可以相互投屏！

本篇其实是电脑远程投屏到另一台电脑的操作介绍。本篇文章的方法可用于Windows，macOS及Linux系统的相互投屏。为了避免介绍过程中出现“这台电脑”投屏到“那台电脑”的混乱表述，假定当前屏幕投出端是Windows系统电脑，屏幕接收端是Linux系统…...

编程日记 2025/7/18 1:04:21

【JuMP.jl】埃尔米特矩阵半定规划

考虑一个埃尔米特矩阵的半定规划问题： 给定矩阵 P [ 1 i i − 1 ] P\left[\begin{matrix} 1 & i\\ i & -1 \end{matrix}\right] P[1ii−1] 计算 min ⁡ X ⪰ 0 R e ( t r ( P H X ) ) \begin{aligned} \min_{X\succeq 0} Re(tr(P^HX)) \end{aligned}…...

编程日记 2025/7/16 22:04:20

MyCat（mysql的中间件）

文章目录 1 1...

编程日记 2025/7/9 18:14:14

Spring AI入门到精通：气象天气预测技术详解

引言在全球气候变化的背景下，气象天气的准确预测对于农业、交通、能源等多个领域具有极其重要的意义。随着人工智能（AI）技术的飞速发展，特别是生成式AI和深度学习技术的突破，气象天气预测迎来了新的机遇。Spring AI&…...

编程日记 2025/7/14 4:57:14

ollama的本地部署内含推荐模型！

下载ollama 1.从官网（https://ollama.com/）下载ollama软件并且安装注意软件是默认安装在C盘打开cmd后输入：查看命令ollama --version 查看模型仓库：ollama list 显示模型信息: ollama show 在cmd中去拉模型: ollama pull 模…...

编程日记 2025/7/15 10:23:09

要使用 OpenResty 创建一个接口，返回客户端的 IP 地址，并以 JSON 格式输出

要使用 OpenResty 创建一个接口，返回客户端的 IP 地址，并以 JSON 格式输出要使用 OpenResty 创建一个接口，返回客户端的 IP 地址，并以 JSON 格式输出方案一解决方案（openresty使用cjson）说明：使…...

编程日记 2025/7/15 16:39:56

排序的事

排序的事 C语言实现C实现Java实现Python实现 💐The Begin💐点点关注，收藏不迷路💐 输入n个不相同的正整数，每个数都不超过n。现在需要你把这些整数进行升序排序，每次可以交换两个数的位置，最少需…...

编程日记 2025/7/16 13:53:11

基于Matlab扩展卡尔曼滤波的GPS与DME组合无人机导航系统设计与实现

随着无人机（UAV）在农业监测、环境保护、物流运输、灾害救援等各个领域的广泛应用，精准且可靠的导航系统已成为提升无人机性能和任务执行能力的关键因素。传统的导航方法依赖于单一传感器，往往难以在复杂和动态的环境中提供足够的定…...

编程日记 2025/7/12 12:35:11

GEOBench-VLM:专为地理空间任务设计的视觉-语言模型基准测试数据集

2024-11-29 ,由穆罕默德本扎耶德人工智能大学等机构创建了GEOBench-VLM数据集，目的评估视觉-语言模型（VLM）在地理空间任务中的表现。该数据集的推出填补了现有基准测试在地理空间应用中的空白，提供了超过10,000个经过人工验证的指…...

编程日记 2025/7/18 8:25:54

重邮+数字信号处理实验三：z变换及离散LTI系统的z域分析

实验目的： （ 1 ）学会运用 Matlab 求离散时间信号的有理函数 z 变换的部分分式展开； （ 2 ）学会运用 Matlab 分析离散时间系统的系统函数的零极点； （ 3 ）学会运用 …...

编程日记 2025/7/15 18:55:02

跟 Synchronized 相比，可重入锁 ReentrantLock 其实现原理有什么不同？

与Synchronized相比，可重入锁ReentrantLock在实现原理上存在显著差异。以下是对两者实现原理的详细比较： 一、基本机制 Synchronized： 是JVM基于监视器（Monitor）的实现，提供的内置锁。每个对象都有一个监…...

编程日记 2025/7/16 17:20:49

scss文件定义

修改主题方法定义

使用

相关文章：