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

React - router的使用 结合react-redux的路由守卫

news 来源：原创 2025/6/17 11:52:55
  • web端使用路由安装的是 react-router-dom 
"react-router-dom": "^5.2.0"
  • 在组件中使用路由，我们先设置2个路由，分别是首页、关于
// src/components/RouteSample.jsimport React from 'react';
// 引入路由需要的基础模块
import {BrowserRouter, Link, Route} from 'react-router-dom'export default function RouteSample () {return (<div><BrowserRouter><div>{/* 导航链接 */}<div><Link to="/">首页</Link></div><div><Link to="/about">关于</Link></div>{/* 路由配置：路由就是组件 */}<Route path="/" component={Home}></Route><Route path="/about" component={About}></Route></div></BrowserRouter></div>)
}
  • 然后补充首页、关于2个组件，这时页面就可以切换路由了，但是发现一个问题，当路由切换至 about 时，首页的内容依然展示在页面上，这是 react 一个特点叫包容式路由，默认情况是多个组件组成一个页面展示，也就是当我们访问 /about 时会包含 / 的内容
    “关于”页面.jpg 
// src/components/RouteSample.jsfunction Home() {return <div><h5>Home</h5></div>
}function About () {return (<div><h5>About</h5></div>)
}
  • 接着上面的情况想要改成独占式的路由，也就是一个路由只展示当前组件，我们用到一个属性 exact 
{/* 路由配置：路由就是组件 */}
<Route exact path="/" component={Home}></Route>
<Route path="/about" component={About}></Route>
  • react 路由也是有动态路由概念的，我们在首页展示一个课程列表，点击分别进入对应的课程详情页，继续在上面的代码基础上扩展
// src/components/RouteSample.jsfunction Home() {return <div><h5>Home</h5><ul><li><Link to="/detail/web">web</Link></li><li><Link to="/detail/ios">ios</Link></li></ul></div>
}

// src/components/RouteSample.js{/* 新增详情页路由 lesson就是动态传参的部分*/}
<Route path="/detail/:lesson" component={Detail}></Route>

// src/components/RouteSample.js// 新增详情页组件// 传递进来的是路由器对象
// 路由器对象主要包含以下3部分，可以结合下面的具体截图理解
// 1. history  导航指令  history.goBack
// 2. match 获取参数信息
// 3. location 当前url信息
function Detail (routeParams) {console.log('routeParams',routeParams)return (<div>当前课程：{routeParams.match.params.lesson}<button onClick={routeParams.history.goBack}>后退</button></div>)
}
路由器参数.jpg
  • 在开发过程中有时候会碰到所有路由都不匹配的情况，也就是路径不对、页面找不到，通常会给一个404页面，在 react 中这样处理，加上404路由之后会发现无论路由在哪个页面404页面会一直显示（如下图），这里又遇到上面同样的问题 react 路由匹配时包容性质的，这里用到一个新组件 Switch ，不用像之前给每个组件添加 exact 属性那么麻烦，路由只会在 Switch 包裹范围内选1个，修改完之后会发现只有在路由都不匹配的情况下才会显示404页面
// src/components/RouteSample.js// 新增404页面组件 展示访问的具体路径不存在
function NoMatch ({location}) {return (<div>404, {location.pathname}不存在</div>)
}// 新增404路由
{/* 404页面没有path 当有path的路由都不匹配时那必然匹配404*/}
<Route component={NoMatch}></Route>
首页展示404.jpg

ios详情页显示404.jpg 
// src/components/RouteSample.jsimport React from 'react';
// 引入Switch
import {BrowserRouter, Link, Route, Switch} from 'react-router-dom'{/* 路由配置：路由就是组件 */}
{/* 用Switch包裹路由配置，避免展示包容式路由 */}
<Switch><Route exact path="/" component={Home}></Route><Route path="/about" component={About}></Route><Route path="/detail/:lesson" component={Detail}></Route>{/* 404页面没有path 当有path的路由都不匹配时那必然匹配404*/}<Route component={NoMatch}></Route></Switch>
路由不存在显示404.jpg
  • 接着再研究下路由嵌套，修改一下 About 组件，用作展示当前用户信息，分为“个人信息”和“订单信息”，按原先的路由结构来看，现在“个人信息”、“订单信息”就是嵌套在 About 下的，从页面上可以看出这里有一个问题，就是点击“关于”展示 About 时，没有给嵌套路由默认展示项，必须要手动再次点击“个人信息”或者“订单信息”才能正常显示（默认情况如下图），这时候可以给一个路由重定向作为默认展示的路由，结合 vue 还是很容易理解的
// src/components/RouteSample.js// 当前用户信息
function About () {return (<div><h5>About</h5><div><Link to="/about/me">个人信息</Link><Link to="/about/order">订单信息</Link></div><Switch><Route path="/about/me" component={() => (<div>me</div>)}></Route><Route path="/about/order" component={() => (<div>order</div>)}></Route></Switch></div>)
}
about默认不展示嵌套路由内容.jpg 
// src/components/RouteSample.jsimport {BrowserRouter, Link, Route, Switch, Redirect} from 'react-router-dom'<Switch><Route path="/about/me" component={() => (<div>me</div>)}></Route><Route path="/about/order" component={() => (<div>order</div>)}></Route>{/* 路由默认项 */}<Redirect to="/about/me"></Redirect>
</Switch>
  • 路由中有一项非常重要的功能是路由守卫，可以用于很多场景，最常见的就是以是否登录判断显示当前访问页面还是跳转登录页，react 中的路由守卫跟 vue-router 的有很大不同，react 是用一个高阶组件扩展 <Route> 
// src/components/RouteSample.js// 保留路由组件所需的参数component、以及其他参数例如pth等，同时传一个登录状态isLogin
function PrivateRoute ({component: Comp, isLogin, ...rest}) {return (// render函数 根据条件动态渲染组件// 未登录则重定向至登录页// 登录路由也配置了一个redirect，这样在设计登录组件的时候当登录成功即重定向跳转至登录前访问的页面<Route{...rest}render = {props => isLogin ? (<Comp></Comp>) : (<Redirectto={{pathname: "/login", state: {redirect: props.location.pathname}}}></Redirect>)}></Route>)
}
  • 然后补充登录组件和路由配置，同时修改 About 组件的使用
// src/components/RouteSample.js// 从路由参数拿到重定向地址，从redux获取登录状态和登录方法
function Login ({location, isLogin, login}) {const redirect = location.state.redirect || '/'if(isLogin) {return <Redirect to={redirect}></Redirect>}return (<div><p>用户登录</p><hr/><button onClick={login}>login</button></div>)
}{/* 路由配置：路由就是组件 */}
<Switch><Route exact path="/" component={Home}></Route>{/* 使用路由守卫 */}<PrivateRoute path="/about" component={About}></PrivateRoute><Route path="/detail/:lesson" component={Detail}></Route><Route path="/login" component={Login}></Route>{/* 404页面没有path 当有path的路由都不匹配时那必然匹配404*/}<Route component={NoMatch}></Route>
</Switch>
  • 上一步已经实现了路由守卫的逻辑，下一步则补充 redux 中关于登录状态以及登录方法异步请求的相关内容，新建 redux 中的用户模块，路径是 src/store/user.redux.js，用户模块添加完成后要在 src/store/index.js 中完成注册才能使用
// src/store/user.redux.js// 初始化状态，没在登录中 并且 未登录
const initial = {isLogin: false,loading: false
}export const user = (state = initial, action) => {switch(action.type) {// 登录中case "requestLogin":return {isLogin: false,loading: true};// 已登录 case "login":return {isLogin: true,loading: false};default:return state;}
}// 请求登录异步调用时，先修改状态为登录中
export const login = () => dispatch => {dispatch({type: 'requestLogin'});setTimeout(() => {dispatch({type: 'login'})}, 1500);
}

// src/store/index.js// applyMiddleware 应用中间件方法
import {createStore, applyMiddleware, combineReducers} from 'redux';
import logger from 'redux-logger'
import thunk from 'redux-thunk'
import {user} from './user.redux'const store = createStore(combineReducers({user}),applyMiddleware(logger, thunk)
);export default store;
  • 完成以上模块添加之后再回到路由守卫的部分做对应修改，路由守卫和登录组件都需要用到登录状态值，这里我们使用 react-redux 
// src/components/RouteSample.js// 添加引用
import {connect} from 'react-redux';
import {login} from '../store/user.redux'// 路由守卫
const PrivateRoute = connect(state => ({isLogin: state.user.isLogin})
)(({component: Comp, isLogin, ...rest}) => {return (// render 根据条件动态渲染组件<Route{...rest}render={props => isLogin ? (<Comp></Comp>) : (<Redirectto={{pathname: "/login", state: {redirect: props.location.pathname}}}></Redirect>)}></Route>)}
)// 登录组件
const Login = connect(// 映射状态与dispatch方法state => ({isLogin: state.user.isLogin,loading: state.user.loading}),{login}
)(({location, isLogin, login, loading}) => {const redirect = location.state.redirect || '/'if(isLogin) {return <Redirect to={redirect}></Redirect>}return (<div><p>用户登录</p><hr/>{/* loading优化 */}<button onClick={login} disabled={loading}>{loading ? 'login...' : 'login'}</button></div>)}
)
  • 最后需要注意的是使用路由组件时使用方式、引入 store 的方式
// App.jsimport store from './store/index'
import {Provider} from 'react-redux'import RouteSample from './components/RouteSample'{/* router */}
<Provider store={store}><RouteSample></RouteSample>
</Provider>

  • 下图展示了整个登录流程发生的记录


    登录流程.jpg
© 著作权归作者所有,转载或内容合作请联系作者


喜欢的朋友记得点赞、收藏、关注哦！！！

相关文章：

React - router的使用 结合react-redux的路由守卫

web端使用路由安装的是 react-router-dom "react-router-dom": "^5.2.0"在组件中使用路由&#xff0c;我们先设置2个路由&#xff0c;分别是首页、关于 // src/components/RouteSample.jsimport React from react; // 引入路由需要的基础模块 import {Bro…...

编程日记 2025/6/2 7:10:01

day09_kafka高级

文章目录 kafka高级今日课程内容核心概念整理Kafka的数据位移offset**为什么 Kafka 的 offset 就像是“书签”&#xff1f;****实际意义** Kafka的基准/压力测试测试生产的效率测试消费的效率 Kafka的分片与副本机制kafka如何保证数据不丢失生产者端Broker端消费者端相关参数 K…...

编程日记 2025/6/2 9:55:36

【MT32F006】MT32F006之通信协议

本文最后修改时间&#xff1a;2025年01月09日 一、本节简介 本文介绍如何使用MT32F006写一个通信协议。 二、实验平台 库版本&#xff1a;V1.0.0 编译软件&#xff1a;MDK5.37 硬件平台&#xff1a;MT32F006开发板&#xff08;主芯片MT32F006&#xff09; 仿真器&#xff…...

编程日记 2025/6/3 0:47:32

CMake学习笔记（2）

1. 嵌套的CMake 如果项目很大&#xff0c;或者项目中有很多的源码目录&#xff0c;在通过CMake管理项目的时候如果只使用一个CMakeLists.txt&#xff0c;那么这个文件相对会比较复杂&#xff0c;有一种化繁为简的方式就是给每个源码目录都添加一个CMakeLists.txt文件&#xff…...

编程日记 2025/6/2 21:03:24

访客机的四个功能

访客机&#xff0c;也被称为访客自动登记安全管理系统或访客一体机&#xff0c;是现代安全管理中不可或缺的一部分。它通过整合计算机技术、射频识别技术、指纹生物识别、触摸屏手写技术、文字识别&#xff08;OCR&#xff09;技术、热敏打印技术、条码技术、数码摄像技术、自动…...

编程日记 2025/5/31 3:41:30

【Linux系统】—— vim 的使用

【Linux系统】—— vim 的使用 1 vim 的基本概念2 vim 的多模式3 命令模式下的命令集3.1 进入/退出其他模式3.2 光标移动命令集3.3 复制/剪切/粘贴/删除命令集3.4 撤销命令集3.5 查找命令集3.6 替换命令集3.7 进入与退出替换模式 4 批量化编译5 底行模式6 vim 小技巧7 vim简单配…...

编程日记 2025/6/3 6:01:28

华为C语言编程规范总结

1.头文件更改会导致所有直接或间接包含该头文件的的C文件重新编译&#xff0c;会增加大量编译工作量&#xff0c;延长编译时间&#xff0c;因此&#xff1a; 1.1 头文件里尽量少包含头文件 1.2 头文件应向稳定的方向包含 2.每一个.c文件应有一个同名.h文件&#xff0c…...

编程日记 2025/6/2 22:45:53

深入学习 Python 量化编程

深入学习 Python 量化编程 第一章&#xff1a;Python 基础与量化编程环境搭建 1.1 安装必要的库 首先&#xff0c;你需要安装一些在量化编程中常用的 Python 库。可以通过以下命令安装这些库&#xff1a; pip install numpy pandas matplotlib yfinance backtrader scikit-…...

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

初识Java3

目录 一.面向对象与面向过程编程区别 二.类 1.类的定义 2.类一般格式 3.类的实例化具体对象 4.this的使用(习惯经常用) 5.this引用 三.对象 1.初始化对象方法 2.构造方法 四.封装 1.封装&#xff1a; 2.拓展“包” &#xff08;1&#xff09;.包概念 &#xff08…...

编程日记 2025/5/30 10:34:50

uniapp 微信小程序内嵌h5实时通信

描述&#xff1a; 小程序webview内嵌的h5需要向小程序实时发送消息&#xff0c;有人说postMessage可以实现&#xff0c;所以试验一下&#xff0c;结果是实现不了实时&#xff0c;只能在特定时机后退、组件销毁、分享时小程序才能接收到信息&#xff08;小程序为了安全等考虑做了…...

编程日记 2025/5/27 21:25:21

Blazor开发复杂信息管理系统的优势

随着现代企业信息管理需求的不断提升&#xff0c;开发高效、易维护、可扩展的系统变得尤为重要。在这个过程中&#xff0c;Blazor作为一种新兴的Web开发框架&#xff0c;因其独特的优势&#xff0c;逐渐成为开发复杂信息管理系统的首选技术之一。本文将结合Blazor在开发复杂信息…...

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

【微服务】面试题 5、分布式系统理论：CAP 与 BASE 详解

分布式系统理论&#xff1a;CAP 与 BASE 详解 一、CAP 定理 背景与定义&#xff1a;1998 年由加州大学科学家埃里克布鲁尔提出&#xff0c;分布式系统存在一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;、分区容错性&#xff08;Part…...

编程日记 2025/6/3 13:09:23

＜论文＞时序大模型如何应用于金融领域？

一、摘要 本文介绍2024年的论文《Financial Fine-tuning a Large Time Series Model》&#xff0c;论文探索了主流的时间序列大模型在金融领域的微调应用实践&#xff0c;为时序大模型的领域微调提供了参考。 译文&#xff1a; 大型模型在自然语言处理、图像生成以及近期的时间…...

编程日记 2025/6/4 2:50:36

Oracle 表分区简介

目录 一. 前置知识1.1 什么是表分区1.2 表分区的优势1.3 表分区的使用条件 二. 表分区的方法2.1 范围分区&#xff08;Range Partitioning&#xff09;2.2 列表分区&#xff08;List Partitioning&#xff09;2.3 哈希分区&#xff08;Hash Partitioning&#xff09;2.4 复合分…...

编程日记 2025/6/1 7:11:00

安卓硬件加速hwui

安卓硬件加速 本文基于安卓11。 从 Android 3.0 (API 级别 11) 开始&#xff0c;Android 2D 渲染管道支持硬件加速&#xff0c;这意味着在 View 的画布上执行的所有绘图操作都使用 GPU。由于启用硬件加速所需的资源增加&#xff0c;你的应用程序将消耗更多内存。 软件绘制&am…...

编程日记 2025/6/2 0:05:29

【Bluedroid】HFP连接流程源码分析（二）

接上一篇【Bluedroid】HFP连接流程源码分析&#xff08;一&#xff09;-CSDN博客分析。本篇主要围绕RFCOMM Connect 与 RFCOMM UA Frame 的处理流程来展开分析。 RFCOMM Connect RFCOMM&#xff08;Radio Frequency Communication&#xff09;作为蓝牙协议栈的关键部分&#…...

编程日记 2025/6/2 11:49:40

基于文件系统分布式锁原理

分布式锁&#xff1a;在一个公共的存储服务上打上一个标记&#xff0c;如Redis的setnx命令&#xff0c;是先到先得方式获得锁&#xff0c;ZooKeeper有点像下面的demo,比较大小的方式判决谁获得锁。 package com.ldj.mybatisflex.demo;import java.util.*; import java.util.co…...

编程日记 2025/6/4 6:59:03

java语法知识（二）

1. class文件可以直接拖动到idea中&#xff0c;显示源码。 2.idea快捷键&#xff1a; sout : System.out.println 输出内容.sout :---》 System.out.println(输出内容); psvm: public static void main() 格式化&#xff1a;ctrl altL 复制粘贴&#xff1a;ctrld 3.注释…...

编程日记 2025/5/31 21:34:36

基于Piquasso的光量子计算机的模拟与编程

一、引言 在科技飞速发展的当下，量子计算作为前沿领域，正以前所未有的态势蓬勃崛起。它凭借独特的量子力学原理，为解决诸多经典计算难以攻克的复杂问题提供了全新路径。从优化物流配送网络，以实现资源高效调配，到药物分子结构的精准模拟，加速新药研发进程；从金融风险的…...

编程日记 2025/6/4 16:46:24

导出文件，能够导出但是文件打不开

背景&#xff1a; 在项目开发中&#xff0c;对于列表的查询&#xff0c;而后会有导出功能&#xff0c;这里导出的是一个excell表格。实现了两种&#xff0c;1.导出的文件&#xff0c;命名是前端传输过去的&#xff1b;2.导出的文件&#xff0c;命名是根据后端返回的文件名获取的…...

编程日记 2025/5/31 4:12:12

【动手学电机驱动】STM32-FOC（4）STM32之UART 串口通信

STM32-FOC&#xff08;1&#xff09;STM32 电机控制的软件开发环境 STM32-FOC&#xff08;2&#xff09;STM32 导入和创建项目 STM32-FOC&#xff08;3&#xff09;STM32 三路互补 PWM 输出 STM32-FOC&#xff08;4&#xff09;STM32之UART 串口通信 STM32-FOC&#xff08;6&am…...

编程日记 2025/6/3 10:36:52

RabbitMQ 高可用方案：原理、构建与运维全解析

文章目录 前言&#xff1a;1 集群方案的原理2 RabbitMQ高可用集群相关概念2.1 设计集群的目的2.2 集群配置方式2.3 节点类型 3 集群架构3.1 为什么使用集群3.2 集群的特点3.3 集群异常处理3.4 普通集群模式3.5 镜像集群模式 前言&#xff1a; 在实际生产中&#xff0c;RabbitM…...

编程日记 2025/6/3 2:01:28

Center Loss 和 ArcFace Loss 笔记

一、Center Loss 1. 定义 Center Loss 旨在最小化类内特征的离散程度&#xff0c;通过约束样本特征与其类别中心之间的距离&#xff0c;提高类内特征的聚合性。 2. 公式 对于样本 xi​ 和其类别yi​&#xff0c;Center Loss 的公式为&#xff1a; xi​: 当前样本的特征向量&…...

编程日记 2025/6/1 0:04:25

深度解读微软Speech服务：让语音识别走进现实

大家好&#xff0c;今天我们来探讨一个激动人心的技术话题&#xff1a;微软的语音识别服务如何为我们提供强大的语音识别解决方案&#xff0c;特别是在电话录音中识别出不同的说话人。 场景描绘 想象一下&#xff0c;你有一段电话录音&#xff0c;并需要将其中的多个说话人区分…...

编程日记 2025/6/4 3:55:49

第21篇 基于ARM A9处理器用汇编语言实现中断＜三＞

Q&#xff1a;怎样编写ARM A9处理器汇编语言代码配置按键端口产生中断&#xff1f; A&#xff1a;使用Intel Monitor Program创建中断程序时&#xff0c;Linker Section Presets下拉菜单中需选择Exceptions。主程序在.vectors代码段为ARM处理器设置异常向量表&#xff0c;在…...

编程日记 2025/6/4 14:58:14

专题 - STM32

基础 基础知识 STM所有产品线&#xff08;列举型号&#xff09;&#xff1a; STM产品的3内核架构&#xff08;列举ARM芯片架构&#xff09;&#xff1a; STM32的3开发方式&#xff1a; STM32的5开发工具和套件&#xff1a; 若要在电脑上直接硬件级调试STM32设备&#xff0c;则…...

编程日记 2025/6/4 7:14:36

极客说｜Azure AI Agent Service 结合 AutoGen/Semantic Kernel 构建多智能体解决⽅案

作者&#xff1a;卢建晖 - 微软高级云技术布道师 「极客说」 是一档专注 AI 时代开发者分享的专栏&#xff0c;我们邀请来自微软以及技术社区专家&#xff0c;带来最前沿的技术干货与实践经验。在这里&#xff0c;您将看到深度教程、最佳实践和创新解决方案。关注「极客说」&am…...

编程日记 2025/5/29 22:06:31

【C++指南】模板 深度解析

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《C指南》 期待您的关注 目录 1. 引言 2. 模板的基本概念 3. 函数模板 3.1 定义和语法 3.2 函数模板实例化 3.3 隐式实例化 …...

编程日记 2025/6/2 0:19:14

【traefik】forwadAuth中间件跨namespace请求的问题

前情提要 - fowardAuth鉴权中间件的使用&#xff1a; 【traefik】使用forwardAuth中间件做网关层的全局鉴权 1. 问题 我的 traefik-ingress-controller 所在 namespace: traefik 业务服务所在 namespace: apps 路由与 forwardAuth 中间件配置如下&#xff1a; # 路由 apiV…...

编程日记 2025/6/2 15:56:18

【25考研】西南交通大学软件工程复试攻略！

一、复试内容 复试对考生的既往学业情况、外语听说交流能力、专业素质和科研创新能力&#xff0c;以及综合素质和一贯表现等进行全面考查,主要考核内容包括思想政治素质和道德品质、外语听说能力、专业素质和能力&#xff0c;综合素质及能力。考核由上机考试和面试两部分组成&a…...

编程日记 2025/6/4 0:52:59

在 Safari 浏览器中，快速将页面恢复到 100% 缩放（也就是默认尺寸）Command (⌘) + 0 (零)

在 Safari 浏览器中&#xff0c;没有一个专门的快捷键可以将页面恢复到默认的缩放比例。 但是&#xff0c;你可以使用以下两种方法快速将页面恢复到 100% 缩放&#xff08;也就是默认尺寸&#xff09;&#xff1a; 方法一&#xff1a;使用快捷键 (最常用) Command (⌘) 0 (零…...

编程日记 2025/5/30 3:14:59

linux的大内核锁与顺序锁

大内核锁 Linux大内核锁&#xff08;Big Kernel Lock&#xff0c;BKL&#xff09;是Linux内核中的一种锁机制&#xff0c;用于保护内核资源&#xff0c;以下是关于它的详细介绍&#xff1a; 概念与作用 大内核锁是一种全局的互斥锁&#xff0c;在同一时刻只允许一个进程访问…...

编程日记 2025/6/4 6:15:00

CVE-2025-22777 (CVSS 9.8)：WordPress | GiveWP 插件的严重漏洞

漏洞描述 GiveWP 插件中发现了一个严重漏洞&#xff0c;该插件是 WordPress 最广泛使用的在线捐赠和筹款工具之一。该漏洞的编号为 CVE-2025-22777&#xff0c;CVSS 评分为 9.8&#xff0c;表明其严重性。 GiveWP 插件拥有超过 100,000 个活跃安装&#xff0c;为全球无数捐赠平…...

编程日记 2025/6/1 17:23:08

牛客周赛 Round 76题解

小红出题 思路&#xff1a;我们发现&#xff0c;每七天可以获得15元&#xff0c;那么我们可以对7取模&#xff0c;看能有多少7的倍数&#xff0c;然后剩下的就是看是否超过5&#xff0c;超过5就直接15&#xff0c;否则加上天数*3 #include<bits/stdc.h> using namespace…...

编程日记 2025/6/2 1:55:12

【ARM】MDK如何将变量存储到指定内存地址

1、 文档目标 通过MDK的工程配置&#xff0c;将指定的变量存储到指定的内存地址上。 2、 问题场景 在项目工程的开发过程中&#xff0c;对于flash要进行分区&#xff0c;需要规划出一个特定的内存区域来存储变量。 3、软硬件环境 1&#xff09;、软件版本&#xff1a;MDK 5.…...

编程日记 2025/6/3 7:55:57

解决在arm架构下的欧拉操作系统mysql8.4.2源码安装

目标&#xff1a;在欧拉的22.03 (LTS-SP4)版本操作系统&#xff0c;cpu的架构为ARM&#xff0c;源码安装mysql-8.4.2。 1.查看操作系统 # cat /etc/os-release NAME"openEuler" VERSION"22.03 (LTS-SP4)"# uname -i aarch642.mysql下载地址 mysql的下载…...

编程日记 2025/5/30 23:25:26

SpringAop

SpringAop aop定义核心概念aop基础实现执行流程 aop进阶通知类型切入点表达式的抽取通知的执行顺序切入点表达式execution方式实现annotation注解方式实现示例 笔记链接 aop定义 AOP&#xff1a;Aspect Oriented Programming&#xff08;面向切面编程、面向方面编程&#xff09…...

编程日记 2025/6/2 19:43:04

C++内存泄露排查

内存泄漏是指程序动态分配的内存未能及时释放&#xff0c;导致系统内存逐渐耗尽&#xff0c;最终可能造成程序崩溃或性能下降。在C中&#xff0c;内存泄漏通常发生在使用new或malloc等分配内存的操作时&#xff0c;但没有正确地使用delete或free来释放这块内存。 在日常开发过程…...

编程日记 2025/6/3 0:07:19

Cesium小知识：pointPrimitive collection 详解

Cesium.PointPrimitiveCollection 是 Cesium 中用于高效管理和渲染大量点（points）的一个类。它允许你创建和管理大量的 PointPrimitive 实例，这些实例可以用来表示地理空间中的点数据，如传感器位置、车辆位置、兴趣点等。与直接使用 Cesium.Entity 相比，PointPrimitiveCol…...

编程日记 2025/6/4 9:21:12

从 Conda 到 Pip-tools：Python 依赖管理全景探索20250113

从 Conda 到 Pip-tools&#xff1a;Python 依赖管理全景探索 引言 在 Python 开发中&#xff0c;依赖管理是一个"常见但复杂"的问题&#xff1a;一次简单的版本冲突可能让团队调试数小时&#xff1b;一次不受控的依赖升级可能让生产环境瘫痪。随着项目规模的增加和…...

编程日记 2025/6/3 5:05:59

浅谈云计算01 | 云计算服务的特点

在当今数字化时代&#xff0c;云计算作为一种强大的技术解决方案&#xff0c;正逐渐改变着企业和个人对信息技术的使用方式。本文将详细探讨云计算的五个主要特点&#xff0c;包括按需自助服务、广泛的网络接入、资源池化、快速弹性伸缩以及可计量服务。 一、按需自助服务 云…...

编程日记 2025/5/30 13:54:40

2025年，华为认证HCIA、HCIP、HCIE 该如何选择？

眼看都到 2025 年啦&#xff0c;华为认证还吃香不&#xff1f; 把这问题摆在每个网络工程师跟前&#xff0c;答案可没那么容易说清楚。 到底考不考它值当不值当&#xff0c;重点在于您自己的职业规划&#xff0c;还有对行业走向的领会。 2025 年华为认证仍然值得一考&#…...

编程日记 2025/6/4 9:55:22

使用Selenium进行网页自动化测试

在使用Selenium进行网页自动化测试时&#xff0c;获取网络请求数据&#xff08;即network数据&#xff09;并不直接由Selenium库提供。Selenium主要用于与网页内容进行交互&#xff08;如点击、输入文本、获取页面元素等&#xff09;&#xff0c;但它本身不拦截或记录网络请求。…...

编程日记 2025/6/3 22:59:17

Linux 下 mtrace 的详细介绍

在 Linux 系统中&#xff0c;内存管理是操作系统的一项重要任务&#xff0c;而内存泄漏&#xff08;Memory Leak&#xff09;是开发过程中常见且棘手的问题之一。为了帮助开发者追踪和调试内存泄漏问题&#xff0c;mtrace 提供了一种有效的方式来检测和分析内存的分配与释放情况…...

编程日记 2025/6/2 11:14:53

【DB-GPT】开启数据库交互新篇章的技术探索与实践

一、引言&#xff1a;AI原生数据应用开发的挑战与机遇 在数字化转型的浪潮中&#xff0c;企业对于智能化应用的需求日益增长。然而&#xff0c;传统的数据应用开发方式面临着诸多挑战&#xff0c;如技术栈复杂、开发周期长、成本高昂、难以维护等。这些问题限制了智能化应用的…...

编程日记 2025/6/4 6:52:31

深入 Flutter 和 Compose 在 UI 渲染刷新时 Diff 实现对比

众所周知&#xff0c;不管是什么框架&#xff0c;在前端 UI 渲染时&#xff0c;都会有构造出一套相关的渲染树&#xff0c;并且在 UI 更新时&#xff0c;为了尽可能提高性能&#xff0c;一般都只会进行「差异化」更新&#xff0c;而不是对整个 UI Tree 进行刷新&#xff0c;所以…...

编程日记 2025/5/28 10:37:33

Android 网络层相关介绍

关注 Android 默认支持的网络管理行为，默认支持的网络服务功能。 功能术语 术语缩写全称释义DHCPv6Dynamic Host Configuration Protocol for IPv6动态主机配置协议的第六版，用于在IPv6网络中动态分配IP地址和其他网络配置参数。DNS Domain Name System域名系统。LLALink-Loc…...

编程日记 2025/6/3 3:43:06

ThreeJs开发环境安装与首个DEMO

安装开发环境 我这边使用的JetBrain的WebStorm&#xff0c;咨询过很多其他开发从业者&#xff0c;普遍使用vscode的比较多。但是考虑到vscode涉及到不少插件安装和IDE配置&#xff0c;作为傻瓜式入门&#xff0c;我这边采用WebStorm。 下载地址&#xff1a; WebStorm: The J…...

编程日记 2025/6/4 1:28:56

【Vim Masterclass 笔记09】S06L22：Vim 核心操作训练之 —— 文本的搜索、查找与替换操作（第一部分）

文章目录 S06L22 Search, Find, and Replace - Part One1 从光标位置起&#xff0c;正向定位到当前行的首个字符 b2 从光标位置起&#xff0c;反向查找某个字符3 重复上一次字符查找操作4 定位到目标字符的前一个字符5 单字符查找与 Vim 命令的组合6 跨行查找某字符串7 Vim 的增…...

编程日记 2025/5/31 15:37:18

js：根据后端返回数据的最大值进行计算然后设置这个最大值为百分之百，其他的值除这个最大值

问&#xff1a; 现在tabData.value 接收到了后端返回的数据&#xff0c; [{text:人力,percentage&#xff1a;‘90’}&#xff0c;{text:物品,percentage&#xff1a;‘20’}&#xff0c;{text:物理,percentage&#xff1a;‘50’}&#xff0c;{text:服务,percentage&#xff…...

编程日记 2025/6/3 2:47:00