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

【商城实战(25)】解锁UniApp移动端适配秘籍，打造完美商城体验

news 来源：原创 2025/8/22 23:11:35

【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配，乃至运营推广策略，102 章内容层层递进。无论是想深入钻研技术细节，还是探寻商城运营之道，本专栏都能提供从 0 到 1 的系统讲解，助力你打造独具竞争力的电商平台，开启电商实战之旅。

一、UniApp 适配移动端设备原理及实现
- 1.1 适配原理
- 1.2 实现源码展示
二、利用响应式布局实现页面自适应
- 2.1 响应式布局功能介绍
- 2.2 实现源码示例
三、解决移动端常见适配问题
- 3.1 刘海屏适配
- 3.2 实现源码
- 3.3 虚拟按键适配
- 3.4 实现源码展示

一、UniApp 适配移动端设备原理及实现

1.1 适配原理

UniApp 适配不同移动端设备的核心原理是利用条件编译和相对单位，以及弹性布局等技术。

条件编译：UniApp 允许开发者使用特殊的注释语法来区分不同平台的代码。例如，通过#ifdef和#endif指令，开发者可以编写特定平台的代码块。#ifdef APP-PLUS表示只有在 App 平台下才会编译该代码块，#ifdef H5则表示只在 H5 平台编译。这样可以针对手机、平板等不同设备的特性，编写专门的逻辑，比如调用特定设备的 API。
相对单位：在处理不同屏幕尺寸时，使用相对单位如rpx（responsive pixel）至关重要。rpx会根据屏幕宽度进行自适应，规定屏幕宽度为 750rpx。在 iPhone6 上，屏幕宽度为 375px，此时 1rpx = 0.5px 。这样，使用rpx作为单位设置元素的尺寸，能够在不同屏幕尺寸的设备上保持相对一致的布局和显示效果，避免因屏幕尺寸差异导致的布局错乱。
弹性布局：采用 Flexbox 弹性布局模型，它能够自动调整元素的大小和位置，以适应不同的屏幕尺寸和方向。通过设置display: flex，可以方便地实现水平或垂直方向的布局，并且可以控制元素的伸缩比例、对齐方式等，使得页面在各种设备上都能呈现出合理的布局。

1.2 实现源码展示

假设我们有一个商品列表页面，需要从 Spring Boot 后端获取数据并展示，同时确保在不同设备上都能正确适配。

首先，在 Spring Boot 后端定义一个获取商品列表的接口：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;@RestController
public class ProductController {@GetMapping("/products")public List<Product> getProducts() {List<Product> productList = new ArrayList<>();// 这里可以从数据库查询数据，示例中简单构造数据Product product1 = new Product(1, "商品1", "描述1", 10.0);Product product2 = new Product(2, "商品2", "描述2", 20.0);productList.add(product1);productList.add(product2);return productList;}
}class Product {private int id;private String name;private String description;private double price;public Product(int id, String name, String description, double price) {this.id = id;this.name = name;this.description = description;this.price = price;}// 省略getter和setter方法
}

在 UniApp 前端页面中，使用uni.request获取数据，并通过弹性布局和rpx单位进行页面布局：

<template><view class="product-list"><view class="product-item" v-for="(product, index) in products" :key="index"><view class="product-name">{{ product.name }}</view><view class="product-description">{{ product.description }}</view><view class="product-price">价格: {{ product.price }}元</view></view></view>
</template><script>
export default {data() {return {products: []};},onLoad() {this.getProducts();},methods: {getProducts() {uni.request({url: 'http://localhost:8080/products', // 根据实际情况修改method: 'GET',success: res => {this.products = res.data;},fail: err => {console.log('获取数据失败', err);}});}}
};
</script><style scoped>
.product-list {display: flex;flex-direction: column;padding: 20rpx;
}.product-item {background-color: #f5f5f5;border-radius: 10rpx;padding: 15rpx;margin-bottom: 15rpx;display: flex;flex-direction: column;
}.product-name {font-size: 20rpx;font-weight: bold;margin-bottom: 10rpx;
}.product-description {font-size: 16rpx;color: #666;margin-bottom: 10rpx;
}.product-price {font-size: 18rpx;color: #f00;
}
</style>

在上述代码中，通过uni.request向 Spring Boot 后端发送请求获取商品数据。页面布局使用了 Flexbox 弹性布局，使商品列表以垂直方向排列，并且使用rpx作为单位设置元素的尺寸和间距，以确保在不同设备上都能有良好的显示效果。同时，通过v-for指令循环渲染商品数据到页面上。

二、利用响应式布局实现页面自适应

2.1 响应式布局功能介绍

UniApp 的响应式布局功能基于 Vue.js 的响应式原理，能够根据屏幕尺寸的变化自动调整页面元素的位置和大小。这一功能主要通过以下几种方式实现：

Flex 布局：Flexbox 布局模型是实现响应式布局的重要手段。通过设置display: flex，可以将容器内的子元素按照灵活的方式排列。例如，可以通过flex-direction属性控制子元素是水平排列（row）还是垂直排列（column）；justify-content属性用于控制子元素在主轴上的对齐方式，如center（居中对齐）、space-between（两端对齐）等；align-items属性则控制子元素在交叉轴上的对齐方式。
媒体查询：虽然 UniApp 在小程序端不支持传统的 CSS 媒体查询，但在 H5 端可以使用。媒体查询允许根据设备的屏幕宽度、高度、分辨率等特性来应用不同的样式。例如，可以使用@media screen and (max-width: 600px)来针对屏幕宽度小于 600px 的设备应用特定的样式，实现页面在小屏幕设备上的优化布局。
自适应单位：除了前面提到的rpx单位，UniApp 还支持vw（视窗宽度百分比）和vh（视窗高度百分比）等自适应单位。1vw等于视窗宽度的 1%，1vh等于视窗高度的 1%。使用这些单位可以使元素的尺寸根据视窗大小进行动态调整，从而实现响应式布局。比如，设置一个元素的宽度为50vw，那么在任何设备上，该元素都会占据视窗宽度的一半。

2.2 实现源码示例

以下是一个利用响应式布局实现商品详情页面自适应的示例，该页面从 Spring Boot 后端通过 MyBatis - Plus 获取商品数据并展示。

首先，在 Spring Boot 后端定义获取商品详情的接口，假设商品实体类为Product，数据库表名为product，使用 MyBatis - Plus 进行数据查询：

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.example.demo.entity.Product;
import com.example.demo.mapper.ProductMapper;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;@RestController
public class ProductController {private final ProductMapper productMapper;public ProductController(ProductMapper productMapper) {this.productMapper = productMapper;}@GetMapping("/products/{id}")public Product getProductById(@PathVariable Integer id) {QueryWrapper<Product> queryWrapper = new QueryWrapper<>();queryWrapper.eq("id", id);return productMapper.selectOne(queryWrapper);}
}

在 UniApp 前端页面中，使用uni.request获取数据，并通过 Flex 布局和媒体查询实现响应式布局：

<template><view class="product-detail"><image :src="product.imageUrl" mode="aspectFill" class="product-image"></image><view class="product-info"><view class="product-title">{{ product.name }}</view><view class="product-price">价格: {{ product.price }}元</view><view class="product-description">{{ product.description }}</view></view></view>
</template><script>
export default {data() {return {product: {}};},onLoad(options) {const productId = options.id;this.getProductDetails(productId);},methods: {getProductDetails(id) {uni.request({url: `http://localhost:8080/products/${id}`, // 根据实际情况修改method: 'GET',success: res => {this.product = res.data;},fail: err => {console.log('获取数据失败', err);}});}}
};
</script><style scoped>
.product-detail {display: flex;flex-direction: column;
}.product-image {width: 100%;height: 300rpx;
}.product-info {padding: 20rpx;
}.product-title {font-size: 24rpx;font-weight: bold;margin-bottom: 10rpx;
}.product-price {font-size: 20rpx;color: #f00;margin-bottom: 10rpx;
}.product-description {font-size: 16rpx;color: #666;
}/* 媒体查询，针对小屏幕设备调整布局 */
@media screen and (max-width: 480px) {.product-image {height: 200rpx;}.product-title {font-size: 20rpx;}.product-price {font-size: 18rpx;}.product-description {font-size: 14rpx;}
}
</style>

在上述代码中，通过uni.request获取商品详情数据，并在页面加载时根据商品 ID 请求数据。页面布局使用 Flex 布局，使图片和商品信息垂直排列。通过媒体查询，当屏幕宽度小于 480px 时，调整图片高度和文字大小，以适应小屏幕设备的显示，确保在不同屏幕尺寸下都能提供良好的用户体验。同时，使用rpx单位保证在不同设备上的相对尺寸一致性。

三、解决移动端常见适配问题

3.1 刘海屏适配

随着全面屏手机的普及，刘海屏手机越来越常见。刘海屏的出现给移动端应用的界面布局带来了挑战，因为屏幕顶部的刘海区域会遮挡页面内容，影响用户体验。在 UniApp 中，适配刘海屏的关键在于正确处理安全区域，确保页面内容不会被刘海遮挡。安全区域是指屏幕上不会被刘海、圆角或虚拟按键等影响的区域。通过合理设置页面元素的边距和布局，使其在安全区域内显示，可以有效解决刘海屏适配问题。

3.2 实现源码

首先，在manifest.json文件的app-plus节点下进行安全区域配置：

{"app-plus": {"safearea": {"bottom": {"offset": "auto"}}}
}

上述配置中，safearea.bottom.offset设置为auto，表示自动计算底部安全区域偏移，确保页面内容不会被底部的操作区域遮挡。

在页面样式中，使用安全区域变量来设置元素的内边距，例如：

.page {padding-top: constant(safe-area-inset-top);padding-top: env(safe-area-inset-top);padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
}

这里使用constant(safe-area-inset-top)和env(safe-area-inset-top)来设置页面顶部的内边距，constant(safe-area-inset-bottom)和env(safe-area-inset-bottom)来设置页面底部的内边距。constant用于兼容 iOS 12.0 - 12.1 版本，env用于兼容 iOS 11.0 - 11.4 版本。通过这种方式，页面内容在刘海屏手机上能够正确显示，不会被刘海或底部操作区域遮挡。

3.3 虚拟按键适配

虚拟按键的出现也会对页面布局产生影响，尤其是当虚拟按键弹出或收起时，页面元素的位置和大小可能需要动态调整，以避免被虚拟按键遮挡或覆盖，保证用户界面的完整性和可用性。在 UniApp 中，适配虚拟按键主要通过监听虚拟按键的状态变化，并根据状态动态调整页面元素的样式和布局。

3.4 实现源码展示

以下是一个监听虚拟按键状态并动态调整页面底部按钮位置的示例代码：

<template><view class="container"><view class="content"><!-- 页面主体内容 --></view><view class="bottom-button" :style="{ bottom: buttonBottom + 'px' }" @click="handleClick">按钮</view></view>
</template><script>
export default {data() {return {buttonBottom: 0};},onLoad() {this.initVirtualKeyListener();},methods: {initVirtualKeyListener() {uni.onKeyboardHeightChange(res => {if (res.height === 0) {// 虚拟按键隐藏this.buttonBottom = 0;} else {// 虚拟按键弹出this.buttonBottom = res.height;}});},handleClick() {// 按钮点击逻辑}}
};
</script><style scoped>
.container {position: relative;height: 100vh;
}.content {padding: 20rpx;
}.bottom-button {position: fixed;left: 0;width: 100%;height: 80rpx;line-height: 80rpx;text-align: center;background-color: #007aff;color: #fff;
}
</style>

在上述代码中，通过uni.onKeyboardHeightChange方法监听虚拟按键的高度变化。当虚拟按键隐藏时（res.height === 0），将按钮的bottom样式属性设置为 0；当虚拟按键弹出时，将按钮的bottom样式属性设置为虚拟按键的高度res.height，从而实现按钮位置的动态调整，确保按钮不会被虚拟按键遮挡，保证页面在虚拟按键出现时仍能正常展示和交互。

【商城实战(25)】解锁UniApp移动端适配秘籍，打造完美商城体验

【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配&#xf…...

编程日记 2025/8/22 23:11:35

Qt 数据库操作（Sqlite）

数据库简介关于数据库的基础知识这里就不做介绍了，相关博客可以查看： SQL基础知识数据库学霸笔记上面博客都写的比较详细，本文主要介绍如何使用Qt进行数据库相关操作，数据库分为关系型数据库和非关系型数据，关系…...

编程日记 2025/8/18 21:51:53

LINUX 指令大全

Linux服务器上有许多常用的命令，可以帮助你管理文件、目录、进程、网络和系统配置等。以下是一些常用的Linux命令： 文件和目录管理 ls：列出当前目录中的文件和子目录 bash lspwd：显示当前工作目录的路径 bash pwdcd：切…...

编程日记 2025/8/21 8:26:23

【Synchronized】不同的使用场景和案例

【Synchronized】不同的使用场景和案例【一】锁的作用范围与锁对象【1】实例方法（对象锁）【2】静态方法（类锁）【3】代码块（显式指定锁对象）【4】类锁（通过Class对象显式锁定） 【二】…...

编程日记 2025/8/22 19:38:19

华为欧拉操作系统安装Docker服务

华为欧拉 20.03 操作系统安装 Docker 服务一、安装前准备系统环境检查确认当前运行的操作系统为华为欧拉 24.03。可通过在终端执行以下命令查看： cat /etc/os - release欧拉系统可以使用以下命令： cat /etc/openEuler-release确保系统已连接互联…...

编程日记 2025/8/23 10:11:42

告别复杂日志解析用bin2sql轻松实现MySQL数据闪回

mysqlbinlog⼯具使用 use test; CREATE TABLE t1 (id INT(11) NOT NULL AUTO_INCREMENT,name VARCHAR(20) DEFAULT NULL,PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;INSERT INTO t1(id, name) SELECT 101, tome101; INSERT INTO t1(id, name) SELECT 102, tome1…...

编程日记 2025/8/23 10:09:46

uniapp简单table表

<template><view class"container"><scroll-view scroll-x"true" scroll-y"true" class"table-scroll"><view class"table-header"><view class"table-cell fixed-column">序号<…...

编程日记 2025/8/19 7:44:35

prompt大师高效提示词解析

Prompt大师李继刚高效提示词示例解析一、「汉语新解」提示词核心结构采用Lisp语言框架嵌套中文语义，通过(defun 新汉语老师 ()...)定义角色风格（融合奥斯卡王尔德、鲁迅的批判性语言），用(隐喻 (一针见血...))构建解释逻辑链。…...

编程日记 2025/8/23 10:11:42

uni-app如何发布项目为app_2025

参考大佬的：uni-app项目打包成apk（本地打包篇）_uniapp打包apk-CSDN博客 1、导入前配置在 HBuilder X 中打开uni-app项目中的 mainifest.json 文件，appid没有的话可以点“重新获取” 2、打包然后关注控制台，导出成功…...

编程日记 2025/8/21 9:53:44

MySQL与Canal、RabbitMQ集成指南

MySQL 部分 1. 查看是否开启 binlog MySQL 8 默认开启 binlog。可以通过以下命令查看是否开启： SHOW VARIABLES LIKE log_bin;如果返回结果为 ON，则表示 binlog 已开启。 Variable_nameValuelog_binON 2. 若未开启 binlog，则需手动配置 …...

编程日记 2025/8/23 10:11:40

新品发布|启英泰伦联合启明云端推出离在线语音大模型方案

当前，生成式大模型正以颠覆性姿态重塑人机交互的边界，并逐渐向终端场景渗透。然而，云端大模型在落地终端场景时面临两大挑战： 在真实噪声场景下容易听不清、误识别，影响交互准确性；云端处理冗余数据及大规…...

编程日记 2025/8/23 10:11:05

网编高级 day01

网编高级 day01 0. 大纲1. Modbus协议1.1. Modbus起源1.2. 分类1.3. Modbus TCP特点 2. Modbus TCP协议格式2.1. 报文头2.2. 寄存器2.3. 功能码 0. 大纲协议： modbus协议：modbus TCP、modbus RTUhtml 网页：http协议Webserver 工具&#x…...

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

2001-2023年上市公司数字化转型年报词频统计（年报词频统计和MDA词频统计两种方式）（吴非、赵宸宇、甄红线300+关键词三种方法）

2001-2023年上市公司数字化转型年报词频统计（年报词频统计和MD&A词频统计两种方式）（吴非、赵宸宇、甄红线300关键词三种方法） 1、时间：2001-2023年 2、来源：上市公司年报 3、参考文献： …...

编程日记 2025/8/19 6:49:46

数据分析与AI丨AI Fabric：数据和人工智能架构的未来

AI Fabric 架构是模块化、可扩展且面向未来的，是现代商业环境中企业实现卓越的关键。在当今商业环境中，数据分析和人工智能领域发展可谓日新月异。几乎每天都有新兴技术诞生，新的应用场景不断涌现，前沿探索持续拓展。可遗憾的是&…...

编程日记 2025/8/23 10:11:41

MQ消息发送不在MySQL事务中，该如何保证一致性？

在 MQ 消息发送与 MySQL 事务分离的场景下，可通过以下方案保障数据一致性： 一、核心原则确保业务操作成功与消息发送成功的最终一致性，避免因网络抖动、服务宕机等异常导致以下问题： 场景1：业务操作成功但消息未…...

编程日记 2025/8/21 5:37:04

[rust] rust学习

rust学习 1. 项目组织结构工程 # 创建一个工程 cargo new my-project工作空间在 Rust 中，工作空间（Workspace） 是一个包含多个 Rust 项目的共享环境，用于管理多个 crate（库或可执行文件）。它允许多个…...

编程日记 2025/8/23 10:11:41

艾尔登复刻Ep1——客户端制作、场景切换、网络控制

需要添加的插件内容 Netcode for GameObjects：是一个为 Unity 游戏开发提供高级网络功能的 SDK。它的主要作用是允许开发者在其 GameObject 和 MonoBehaviour 工作流中集成网络功能，并且可以与多种底层传输层协议兼容。具体内容请看：https:…...

编程日记 2025/8/22 5:40:56

正则表达式(复习)

文章目录一、[]: 一个字符集合二、{}: 重复次数三、特殊符号四、(): 分组五、python代码示例六、注意正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个…...

编程日记 2025/8/23 10:08:53

密码学笔记

密码学一、密码学基础概念 1. CIA三要素机密性 (Confidentiality)：信息不被未授权者访问。例子：用钥匙锁住日记本，只有你有钥匙。完整性 (Integrity)：信息在传输/存储中不被篡改。例子：快递包裹封条&#xff0c…...

编程日记 2025/8/22 12:30:35

C#结构体(Struct)详解

在 C# 中，‌结构体（struct）‌ 是一种值类型数据类型，适用于封装小型数据组。与类（class）不同，结构体在栈（Stack）上分配内存，且赋值时会发生值复制。以下是结构…...

编程日记 2025/8/20 11:00:53

Tomato靶机通关攻略

1.安装并开启靶机 2.用Kali查询靶机IP Kali 的IP 靶机的IP 3.访问靶机 4.用御剑扫描端口 5.获取敏感目录分别访问三个目录 6.查看目录发现info.php并进入查看源码，发现文件包含漏洞利用漏洞查看日志文件 http://192.168.40.139/antibot_image/antibots/info…...

编程日记 2025/8/23 10:09:46

Go Ebiten小游戏开发：俄罗斯方块

在这篇文章中，我们将一起开发一个简单的俄罗斯方块游戏，使用Go语言和Ebiten游戏库。Ebiten是一个轻量级的游戏库，适合快速开发2D游戏。我们将逐步构建游戏的基本功能，包括游戏逻辑、图形绘制和用户输入处理。项目结构我们的项…...

编程日记 2025/8/18 9:42:41

Github 2025-03-12 C开源项目日报Top5

根据Github Trendings的统计，今日(2025-03-12统计)共有5个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量C项目5C++项目1Lean的LEDE源码：为国产龙芯LOONGSON SoC loongarch64/飞腾Phytium腾锐2000系列架构添加支持创建周期：2338 天开发语言：C协议类…...

编程日记 2025/8/19 5:22:47

【机器学习-基础知识】统计和贝叶斯推断

1. 概率论基本概念回顾 1. 概率分布定义：概率分布（Probability Distribution）指的是随机变量所有可能取值及其对应概率的集合。它描述了一个随机变量可能取的所有值以及每个值被取到的概率。对于离散型随机变量，使用概率质量函数来描述。对于连续型随机变量，使用概率…...

编程日记 2025/8/23 8:18:49

Unity3D 着色器优化（Shader Optimization）

前言 Unity3D 着色器（Shader）优化是提升渲染性能的关键环节，尤其是在移动设备或复杂场景中。以下是系统的优化策略和实践建议： 对惹，这里有一个游戏开发交流小组，希望大家可以点击进来一起交流一下开发经…...

编程日记 2025/8/23 10:11:06

基于SpringBoot的“体育购物商城”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“体育购物商城”的设计与实现（源码数据库文档PPT) 开发语言：Java 数据库：MySQL 技术：SpringBoot 工具：IDEA/Ecilpse、Navicat、Maven 系统展示系统总体模块设计前台用户登录界面系统首页界面…...

编程日记 2025/8/23 10:09:45

数据库约束

数据库约束 1. NULL约束2. UNIQUE：唯一约束3. DEFAULT：默认值约束4. PRIMARY KEY：主键约束5. FOREIGN KEY：外键约束6. CHECK约束数据库约束是关系型数据库的一个重要功能，主要作用是保证数据的正确性，也就…...

编程日记 2025/8/23 10:11:41

【经典算法】Leetcode-零钱兑换问题

一、题目给你一个整数数组 coins ，表示不同面额的硬币；以及一个整数 amount ，表示总金额。计算并返回可以凑成总金额所需的最少的硬币个数。如果没有任何一种硬币组合能组成总金额，返回 -1 。你可以认为每种硬币的数量是无限的…...

编程日记 2025/8/23 10:11:42

Go 语言使用Protobuf 进行序列化详解

文章目录 Go 语言使用Protobuf 进行序列化详解1. Protobuf是什么?2. 安装Protobuf 及 Go 依赖3. 编写.proto 文件4. 实现序列化和反序列化 Go 语言使用Protobuf 进行序列化详解 1. Protobuf是什么? 以下是 Protobuf 官方中文文档的概述: Protobuf(Protocol Buffers) 是一种…...

编程日记 2025/8/19 7:45:21

Windows控制台函数：标准输入输出流交互函数GetStdHandle（）

目录什么是 GetStdHandle？ 它长什么样？ 怎么用它？ 它跟 std::cout 有什么不一样？ GetStdHandle 是一个 Windows API 函数，用于获取标准输入、标准输出或标准错误设备的句柄。它定义在 Windows 的核心头文件 <…...

编程日记 2025/8/20 11:00:52

自然语言处理初学者指南

文章目录一、说明二、自然语言处理发展史2.1 最早的自然语言处理简介2.2 历史2.3 NLP 的早期工作三、NLP的现代方法3.1 单词编码3.2 循环神经网络3.3 强化学习3.4 深度学习四、更进一步的方法一、说明对于初学者来说，自然语言处理的发展历史非常有必要了解&am…...

编程日记 2025/8/19 7:12:58

Kubernetes教程（七）了解集群、标签、Pod和Deployment

了解集群、标签、Pod和Deployment 一、K8s资源对象二、K8s集群1. Master2. Node 三、Namespace（命名空间）四、Label（标签）五、Pod1. 共享网络命名空间2. 共享数据六、工作负载1. 设置副本数2. 应用升级结语 Kubernetes的知识真的…...

编程日记 2025/8/23 10:07:37

【BUG分析】微服务无法读取Nacos中的共享配置

项目场景基于Spring Cloud微服务的商城系统。使用Nacos进行统一配置管理，在bootstrap.xml中读取配置参数。问题描述购物车微服务可以读取Nacos中的共享mybatis配置，商品管理微服务却读不到，启动报错提示无法配置数据库源： …...

编程日记 2025/8/23 10:08:52

SpringMVC （一）基础

目录 SpringMVC 一简单使用 1 新建模块选择指定参数 2 创建实现类 3 将项目启动 4 运行结果：在浏览器当中响应执行二 RequestMapping 三请求限定 SpringMVC SpringMVC是Spring的web模块，用来开发Web应用，SpringMVC应用最终作为B/…...

编程日记 2025/8/18 22:16:14

【ES6】ES6中的类

基础定义和使用 class Animal {constructor(name, species, age) {this.name namethis.species speciesthis.age age} }let dog new Animal("Spot", "Dog", 4)私有变量变量名前带#即可。 Getter 和Setter方法继承 // 父类 class Point{construc…...

编程日记 2025/8/22 22:29:37

兴达易控Profinet 转 ModbusTCP跨网段通信模块

Profinet 转 ModbusTCP/跨网段通信模块 Profinet转ModbusTCP/跨网段通信模块，作为现代工业自动化系统中不可或缺的重要组件，正日益受到广泛关注和应用。这种模块的核心功能是将Profinet网络协议转换为Modbus TCP协议，实现不同网络之间的无缝…...

编程日记 2025/8/22 7:40:42

linux 的免密切换用户PAM配置

/etc/pam.d/su是Linux系统中与用户切换（su命令）相关的PAM（Pluggable Authentication Modules，可插拔认证模块）配置文件。以下是对它的详细介绍： 简介作用 PAM是一种用于管理系统认证的机制，…...

编程日记 2025/8/19 15:08:06

使用 Python pandas操作 Excel 文件

使用 Python pandas 操作 Excel 文件 flyfish pandas 是 Python 中一个强大的数据处理和分析库，它提供了丰富的数据结构（如 Series 和 DataFrame）和数据操作方法，能够方便地处理各种数据格式，包括 Excel 文件。安装…...

编程日记 2025/8/20 14:00:09

UE5.5 Niagara 发射器粒子更新模块

Particle State （粒子状态）模块 Particle State 主要用于控制粒子的生存状态，包括死亡、消失、响应事件等。 Particle State Kill Particles When Lifetime Has Elapsed 当粒子的生命周期结束时，销毁这些粒子。 Lifetime &…...

编程日记 2025/8/20 14:03:21

状态模式的C++实现示例

核心思想状态模式（State Pattern） 是一种行为设计模式，允许对象在其内部状态改变时改变其行为。它将状态相关的逻辑分散到不同的状态类中，避免了使用大量的条件语句来处理不同状态下的行为。状态抽象化：将对象的状…...

编程日记 2025/8/22 4:36:13

ThinkPHP8.0+MySQL8.0搭建简单实用电子证书查询系统

客户花了100元买了一个系统，开始不能导入，到处找人帮忙解决。给解决能导入了，不能修改，满足不了用户的需求。用户一狠心，花200块钱，叫我给他定制了一个电子证书查询系统。还免费给部署到服务器。惭愧惭愧……...

编程日记 2025/8/20 14:04:28

STM32全系大阅兵（2）

接前一篇文章：STM32全系大阅兵（1）本文内容参考： STM32家族系列的区别_stm32各个系列区别-CSDN博客 STM32--STM32 微控制器详解-CSDN博客...

编程日记 2025/8/20 14:03:54

upload-labs通关攻略【Pass-01~Pass-19】

注意：GitHub中upload-labs有多个版本:19关、21关、23关。版本不同，关卡的顺序也很可能不同。此次例子是21关。项目地址：https://github.com/c0ny1/upload-labs 一、Pass-01 【js前端检测的绕过】 1. 打开Pass-01 访问：ip/uploa…...

编程日记 2025/8/22 1:31:42

HCIP复习拓扑练习(修改版)

拓扑： 实际： 需求： 需求分析 1.这意味着学校内部网络能够正常解析域名并进行互联网访问。 2. PC1和PC2处于同一个内网192.168.1.0/24，其中PC1有权限访问外部网段3.3.3.0/24，而PC2没有。这涉及ACL（访问控制…...

编程日记 2025/8/20 14:00:08

Zabbix 7.2 + Grafana 中文全自动安装ISO镜像

简介基于Zabbix 官方的Alma Linux 8 作为基础镜像。镜像源都改为国内大学镜像站，自动联网安装ZabbixGrafana。安装中文字体、Zabbix和Grafana也配置默认中文。 Zabbix 也指定中文字体，绘图无乱码。配置时区为东八区，Zabbix配置We…...

编程日记 2025/8/20 14:07:45

使用 Python 将 PDF 转换为文本：打造一个简单高效的提取工具

在数字化时代，PDF 文件是我们日常生活中常见的文档格式。无论是学术论文、工作报告还是电子书，PDF 的广泛使用让提取其中文字内容成为一个常见需求。手动复制粘贴显然效率低下，而借助 Python，我们可以轻松实现自动化提取。本文将介…...

编程日记 2025/8/20 14:04:27

scoop退回软件版本的方法

title: scoop退回软件版本的方法 date: 2025-3-11 23:53:00 tags: 其他前言在软件更新后，如果出现了很影响使用体验的问题，那么可以把软件先退回以前的版本进行使用， 但是scoop本身并没有提供直接让软件回退版本的功能，因此…...

编程日记 2025/8/21 19:05:56

网络爬虫-2:正则化

1.正则化一.正则化 1.转义字符转义字符含义\s空白字符（空格、制表符等）\d数字字符（0-9）\w字母、数字或下划线.除换行符外的任意字符\n换行符\t制表符 import re result re.findall(r\s, Hello World\nPython) print(result)…...

编程日记 2025/8/22 12:07:19

emacs使用mongosh的方便工具发布

github项目地址: GitHub - csfreebird/emacs_mongosh: 在emacs中使用mongosh快速登录mongodb数据库 * 用途在emacs中使用mongosh快速登录mongodb数据库， 操作方法: M-x mongosh, 输入数据库名称，然后就可以自动登录，前提是你已经配置好了…...

编程日记 2025/8/20 7:41:04

【Spring】详细剖析Spring程序

文章目录一、Spring概述1. Spring简介1.1 OCP开闭原则1.2 依赖倒置原则DIP1.3 控制反转IoC 2. Spring8大模块二、Spring的入门程序1. Spring官网2. 第一个Spring程序2.1 创建工程2.2 配置 pom.xml：2.3 定义bean：User . java2.4 配置文件 spring.xml2.5…...

编程日记 2025/8/20 14:00:58

目录

一、UniApp 适配移动端设备原理及实现

1.1 适配原理

1.2 实现源码展示

二、利用响应式布局实现页面自适应

2.1 响应式布局功能介绍

2.2 实现源码示例

三、解决移动端常见适配问题

3.1 刘海屏适配

3.2 实现源码

3.3 虚拟按键适配

3.4 实现源码展示

相关文章：