react_后台管理_项目
目录
1.运行项目
2. 项目结构
①项目顶部导航栏
②项目左侧导航栏
③主页面-路由切换区
本项目使用的是 react+ts+scss 技术栈。
1.运行项目
在当前页面顶部下载本项目,解压后使用编辑器打开,然后再终端输入命令:
npm i
下载依赖后,运行项目:
npm run start
此时项目运行起来了,可以再浏览器看到运行效果:
2. 项目结构
在做自己的项目时,对于这个项目目录我们只需要更改以下几个文件:
src目录下的文件和App.tsx,可以根据自己项目需要进行更改。
①项目顶部导航栏
header.tsx:
import logo from '../../assets/images/logo.svg';
import './header.scss';function Header() {return (<div className="headerAll"><header className="headerBox"><img src={logo} alt="logo" className='headerImg' /><div className="headerText">后台管理系统</div><div className="circle">zh</div></header><header className="headerBoxPlaceholder"></header></div>);
}export default Header;
header.scss:
.headerBox {width: 100vw;height: 56px;background-color: #FFF;position: fixed;top: 0;left: 0;z-index: 9;min-width: 1140px;overflow: auto;.headerImg {width: 30px;height: 30px;position: absolute;top: 13px;left: 17px;}.headerText {font-size: 20px;position: absolute;top: 14px;left: 57px;font-weight: bold;}.navText {font-size: 16px;position: absolute;top: 16px;left: 218px;}.circle {width: 28px;height: 28px;line-height: 28px;border-radius: 50%;background-color: #19edcd;position: absolute;top: 14px;right: 14px;font-size: 12px;color: #FFF;text-align: center;}
}.headerBoxPlaceholder {width: 100vw;height: 56px;box-shadow: 0px 4px 10px 0px rgba(78, 89, 105, 0.06);
}
②项目左侧导航栏
leftNavigation.tsx:
使用左侧导航图标使用svg,方便切换状态时换色,以及后期更改主题色。
import { ReactComponent as IconEducationGroup } from '../../assets/images/icon-education-group.svg';
import { ReactComponent as IconEduGroup } from '../../assets/images/icon-edu-group.svg';
import { ReactComponent as IconSet } from '../../assets/images/icon-set.svg';
import Arrow from "../../assets/images/icon-arrow.png";
import './leftNavigation.scss';
import { useState } from 'react';function LeftNavigation() {// 左侧导航,一级按钮let navText = ['企业信息', '组织管理', '系统设置'];// 二级导航按钮,比如企业信息没有子级则二级导航为空数组let navTextChild = [[], ['组织架构', '部门设置'], ["日志设置", '通知设置']];// 当前选中的是哪个按钮,0是一级按钮,-1代表它没有子级选中的就是它本身const [currentBtn, setCurrentBtn] = useState([0, -1]);// 如果存在子层级,子层级展开还是合并,0合并,1展开const [childShow, setChildShow] = useState([1, 1, 1, 1]);/*** 判断按钮背景颜色* @param index 索引* @param flag 标志* @param indexChild 二级索引* @returns 返回className*/function changeBGColor(index: number, flag: string, indexChild?: number): string {if (flag === 'one') {if (navTextChild[index].length === 0) {if (currentBtn[0] === index && navTextChild[index].length === 0) return 'first-order-tag bg-color'}} else {if (navTextChild[index].length !== 0 && currentBtn[0] === index && currentBtn[1] === indexChild) return 'first-order-tag bg-color'}return 'first-order-tag';}/*** 点击导航按钮进行页面切换* @param indexOne 一级索引* @param indexTwo 二级索引*/function changeNavClick(indexOne: number, indexTwo?: number): void {if (navTextChild[indexOne].length === 0) { setCurrentBtn([indexOne, -1]) }if (indexTwo !== undefined && navTextChild[indexOne].length !== 0) {setCurrentBtn([indexOne, indexTwo])}if (indexTwo === undefined && navTextChild[indexOne].length !== 0) {updateItem(indexOne, childShow[indexOne] === 1 ? 0 : 1)}}/*** 只更新数组中的一个数值,数组[1]的值* @param indexFlag 一级索引* @param newValue 新的数值*/function updateItem(indexFlag: number, newValue: number) {setChildShow(prevItems =>prevItems.map((item, index) => {if (index === indexFlag) {return newValue;}return item;}));}return (<div className="leftNavigationAll"><div className="leftNavigationBox">{navText.map((item, index) => (<div key={index}>{/* 第一层级 */}<div key={index} className={changeBGColor(index, 'one')} onClick={() => changeNavClick(index)}><div className={currentBtn[0] === index ? 'navTextStyle-selected' : 'navTextStyle'}> {item}</div>{index === 0 && <IconEducationGroup className="icon-svg" stroke={currentBtn[0] === index ? '#00B498' : '#505553'} />}{index === 1 && <IconEduGroup className="icon-svg" stroke={currentBtn[0] === index ? '#00B498' : '#505553'} />}{index === 2 && <IconSet className="icon-svg" stroke={currentBtn[0] === index ? '#00B498' : '#505553'} fill={currentBtn[0] === index ? '#00B498' : '#505553'} />}{navTextChild[index].length !== 0 && <img alt="箭头" src={Arrow} className={childShow[index] === 1 ? 'arrow' : 'arrowHidden'}></img>}</div>{/* 第二层级 */}<div className={childShow[index] === 1 ? 'showDiv' : 'hiddenDiv'}>{navTextChild[index].length !== 0 && navTextChild[index].map((itemChild, indexChild) => (<div key={indexChild} className={changeBGColor(index, 'two', indexChild)} onClick={() => changeNavClick(index, indexChild)}><div className={(currentBtn[1] === indexChild && currentBtn[0] === index) ? 'navTextStyle-selected' : 'navTextStyle'}> {itemChild}</div></div>))}</div></div>))}</div></div>);
}export default LeftNavigation;
leftNavigation.scss:
.bg-color {background-color: #E8FAF8;
}.showDiv {display: block;
}.hiddenDiv {display: none;
}.leftNavigationBox {z-index: 8;width: 200px;height: 100vh;min-height: 400px;background-color: #FFF;position: fixed;top: 0;left: 0;padding-top: 72px;padding-left: 8px;padding-right: 8px;box-sizing: border-box;.first-order-tag {width: 184px;height: 40px;// background-color: #E8FAF8;margin-bottom: 4px;border-radius: 6px;position: relative;cursor: pointer;&:hover {background-color: #F2F5F4;}.arrow {width: 12px;height: 12px;position: absolute;right: 16px;top: 14px;transform: rotateZ(180deg);}.arrowHidden {width: 12px;height: 12px;position: absolute;right: 16px;top: 14px;// transform: rotateZ(180deg);}.icon-svg {width: 18px;height: 18px;position: absolute;left: 12px;top: 11px;}.navTextStyle {font-size: 14px;color: #505553;position: absolute;left: 42px;top: 9px;}.navTextStyle-selected {font-size: 14px;color: #00B498;position: absolute;left: 42px;top: 9px;}}
}
③主页面-路由切换区
App.tsx:
所有路由写在这里,然后再左侧导航栏进行切换。
import './App.scss';
import Header from './pages/navigation/header';
import LeftNavigation from './pages/navigation/leftNavigation';
import Home from './pages/home';
import { Route, Routes } from 'react-router-dom'function App() {return (<div className="App"><Header /><LeftNavigation />{/* 2. 使用路由组件,渲染路由,并且传入路由配置 */}<Routes>{/* comopnent替换为 element */}<Route path='/' element={<Home />}></Route></Routes></div>);
}export default App;
home / index.tsx:
import './index.scss';
function Home() {return (<div className='homeBox'><div className='homeBoxText'>应用主页</div></div>);
}export default Home;
以上就是项目的主要内容,可以将此项目当作基础框架进行二次开发。
相关文章:
![](https://img-blog.csdnimg.cn/direct/a81e914f8e9f438fa8bbf2037b324adb.gif)
react_后台管理_项目
目录 1.运行项目 2. 项目结构 ①项目顶部导航栏 ②项目左侧导航栏 ③主页面-路由切换区 本项目使用的是 reacttsscss 技术栈。 1.运行项目 在当前页面顶部下载本项目,解压后使用编辑器打开,然后再终端输入命令: npm i 下载依赖后&am…...
![](https://www.ngui.cc/images/no-images.jpg)
【C语言】使用C语言编写并使用gcc编译动态链接库
【C语言】使用C 语言编写并使用 gcc 编译动态链接库 1.背景2.使用C编写代码3.使用gcc编译代码1.背景 在windows下开发很多程序接口被封装到动态链接库供其它开发者使用。 本博客使用C语言编写并使用gcc 编译 一个动态链接库文件FpdSys.dll; 然后使用C/C++/C#/Python去调用动态…...
![](https://img-blog.csdnimg.cn/direct/e38ca75c7a694b049366ef05da984ef6.jpeg)
使用supportFragmentManager管理多个fragment切换
android studio创建的项目就没有一个简单点的框架,生成的代码都是繁琐而复杂,并且不实用。 国内的页面一般都是TAB页面的比较多,老外更喜欢侧边菜单。 如果我们使用一个activity来创建程序,来用占位符管理多个fragment切换&…...
![](https://img-blog.csdnimg.cn/direct/eb33aa23b1c0470e88e4d502cf410b93.png)
开源模型应用落地-FastAPI-助力模型交互-WebSocket篇(六)
一、前言 使用 FastAPI 可以帮助我们更简单高效地部署 AI 交互业务。FastAPI 提供了快速构建 API 的能力,开发者可以轻松地定义模型需要的输入和输出格式,并编写好相应的业务逻辑。 FastAPI 的异步高性能架构,可以有效支持大量并发的预测请求,为用户提供流畅的交互体验。此外,F…...
![](https://img-blog.csdnimg.cn/direct/87d85fcda99f4b3b8b6c09ef30fa1950.png)
独立开发者系列(17)——MYSQL的常见异常整理
虽然安装MYSQL到本地很简单,但是数据库报错还是经常出现,这个时候,需要我们进行逐步检查与修复。作为我们最常用的开发软件,无论切换php/go/python/node/java,数据库的身影都少不了,对于我们储存数据而言&a…...
![](https://img-blog.csdnimg.cn/direct/f9126d9779724d1aadf5db0bf0de726e.png#pic_center)
【ajax实战02】数据管理网站—验证码登录
一:数据提交(提交手机验证码) 核心思路整理 利用form-serialize插件,收集对象形式的表单数据后,一并提交给服务器。后得到返回值,进一步操作 基地址: axios.defaults.baseURL http://geek.…...
![](https://www.ngui.cc/images/no-images.jpg)
人工智能在反无人机中的应用介绍
人工智能技术在无人机的发展中扮演着至关重要的角色,这一作用在反无人机技术领域同样显著。随着无人机技术的发展,飞行器具备了微小尺寸、高速机动性,以及可能采用的隐蔽或低空飞行轨迹等特性。这些特性使得传统的人工监视和控制手段面临着重…...
![](https://img-blog.csdnimg.cn/direct/ae886e277d38482b9999d7fae926b948.png)
【力扣 - 每日一题】3115. 质数的最大距离(一次遍历、头尾遍历、空间换时间、埃式筛、欧拉筛、打表)Golang实现
原题链接 题目描述 给你一个整数数组 nums。 返回两个(不一定不同的)质数在 nums 中 下标 的 最大距离。 示例 1: 输入: nums [4,2,9,5,3] 输出: 3 解释: nums[1]、nums[3] 和 nums[4] 是质数。因此答…...
![](https://img-blog.csdnimg.cn/direct/0471cf95c22f46f5aefb7a77eb9cd627.png)
【Gin】项目搭建 一
环境准备 首先确保自己电脑安装了Golang 开始项目 1、初始化项目 mkdir gin-hello; # 创建文件夹 cd gin-hello; # 需要到刚创建的文件夹里操作 go mod init goserver; # 初始化项目,项目名称:goserver go get -u github.com/gin-gonic/gin; # 下载…...
![](https://img-blog.csdnimg.cn/direct/ed8e5b33509d4281b20f2602bc93e0be.png)
C++ 和C#的差别
首先把眼睛瞪大,然后憋住一口气,读下去: 1、CPP 就是C plus plus的缩写,中国大陆的程序员圈子中通常被读做"C加加",而西方的程序员通常读做"C plus plus",它是一种使用非常广泛的计算…...
![](https://img-blog.csdnimg.cn/direct/c9b92225857b4b4facd067c115a6c410.png)
Vue2组件传值(通信)的方式
目录 1.父传后代 ( 后代拿到了父的数据 )1. 父组件引入子组件,绑定数据2. 子组件直接使用父组件的数据3. 依赖注入(使用 provide/inject API)1.在祖先组件中使用 provide2.在后代组件中使用 inject 2.后代传父 (父拿到了后代的数据)1. 子组件…...
![](https://www.ngui.cc/images/no-images.jpg)
【数据结构 - 时间复杂度和空间复杂度】
文章目录 <center>时间复杂度和空间复杂度算法的复杂度时间复杂度大O的渐进表示法常见时间复杂度计算举例 空间复杂度实例 时间复杂度和空间复杂度 算法的复杂度 算法在编写成可执行程序后,运行时需要耗费时间资源和空间(内存)资源 。因此衡量一个算法的好坏&…...
![](https://www.ngui.cc/images/no-images.jpg)
telegram支付
今天开始接入telegram支付,参考教程这个是telegram的官方说明,详细介绍了机器人支付API。 文章公开地址 新建机器人 因为支付是一个单独的系统,所以在做支付的时候单独创建了一个bot,没有用之前的bot了,特意这样将其分开。创建bot的方法和之前不变,这里不过多介绍。 获…...
![](https://www.ngui.cc/images/no-images.jpg)
elasticsearch-6.8.23的集群搭建过程
三个节点的 ElasticSearch 集群搭建步骤 准备三台机器:28.104.87.98、28.104.87.100、28.104.87.101 和 ElasticSearch 的安装包 elasticsearch-6.8.23.tar.gz ----------------------------- 28.104.87.98,使用 root 用户操作 ----------------------…...
![](https://www.ngui.cc/images/no-images.jpg)
javascript输出语法
javascript输出有三种方式 一种是弹窗输出,就是网页弹出一个对话框,弹出输出内容 语法是aler(内容) 示例代码如下 <body> <script> alert(你好); </script> </body> 这段代码运行后网页会出现一个对话框,弹出你…...
![](https://img-blog.csdnimg.cn/direct/2dbf420fa76f48a5820d4f1b8dfebdac.png)
仓库管理系统26--权限设置
原创不易,打字不易,截图不易,多多点赞,送人玫瑰,留有余香,财务自由明日实现 1、权限概述 在应用软件中,通常将软件的功能分为若干个子程序,通过主程序调用。那么,通过…...
![](https://img-blog.csdnimg.cn/img_convert/98244730ae6f23caa6b81f83e4e91003.webp?x-oss-process=image/format,png)
d3dx9_43.dll丢失怎么解决?d3dx9_43.dll怎么安装详细教程
在使用计算机中,如果遇到d3dx9_43.dll丢失或许找不到d3dx9_43.dll无法运行打开软件怎么办?这个是非常常见问题,下面我详细介绍一下d3dx9_43.dll是什么文件与d3dx9_43.dll的各种问题以及d3dx9_43.dll丢失的多个解决方法! 一、d3dx9…...
![](https://www.ngui.cc/images/no-images.jpg)
[C++] 退出清理函数解读(exit、_exit、abort、atexit)
说明:在C中,exit、_exit(或_Exit)、abort和atexit是用于控制程序退出和清理的标准库函数。下面是对这些函数的详细解读: exit 函数原型:void exit(int status);作用:exit函数用于正常退出程序…...
![](https://www.ngui.cc/images/no-images.jpg)
代码随想录(回溯)
组合(Leetcode77) 思路 用递归每次遍历从1-n得数,然后list来记录是不是组合到k个了,然后这个每次for循环的开始不能和上一个值的开始重复,所以设置个遍历开始索引startindex class Solution {static List<List<…...
![](https://img-blog.csdnimg.cn/direct/e90eacdd30854cb0beb46f0183330d4c.jpeg)
编译原理1
NFA&DFA 在正规式的等价证明可以借助正规集,也可以通过有限自动机DFA来证明等价,以下例题是针对DFA证明正规式的等价,主要步骤是①NFA;②状态转换表; ③状态转换矩阵; ④化简DFA; 文法和语…...
![](https://www.ngui.cc/images/no-images.jpg)
【信息系统项目管理师知识点速记】组织通用管理:流程管理
23.2 流程管理 通过流程视角能够真正看清楚组织系统的本质与内在联系,理顺流程能够理顺整个组织系统。流程是组织运行体系的框架基础,流程框架的质量影响和决定了整个组织运行体系的质量。把流程作为组织运行体系的主线,配备满足流程运作需要的资源,并构建与流程框架相匹配…...
![](https://www.ngui.cc/images/no-images.jpg)
前端 JS 经典:箭头函数的意义
箭头函数是为了消除函数的二义性。 1. 二义性 函数的二义性指函数有不同的两种用法,就造成了二义性,函数的两种用法:1. 指令序列。2. 构造器 1.1 指令序列 就是调用函数,相当于将函数内部的代码再从头执行一次。 1.2 构造器 …...
![](https://www.ngui.cc/images/no-images.jpg)
Java List操作详解及常用方法
Java List操作详解及常用方法 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 什么是Java List? Java中的List是一种动态数组,它允许存…...
![](https://img-blog.csdnimg.cn/direct/8f267f7ca0ec4bfe89f1c11a78c4360e.png)
《mysql篇》--查询(进阶)
目录 将查询结果作为插入数据 聚合查询 聚合函数 count sum group by子句 having 联合查询 笛卡尔积 多表查询 join..on实现多表查询 内连接 外连接 自连接 子查询 合并查询 将查询结果作为插入数据 Insert into 表2 select * from 表1//将表1的查询数据插入…...
![](https://img-blog.csdnimg.cn/direct/f5f4ad3756e249e4843b2f5fb9349980.png)
数据库-MySQL 实战项目——书店图书进销存管理系统数据库设计与实现(附源码)
一、前言 该项目非常适合MySQL入门学习的小伙伴,博主提供了源码、数据和一些查询语句,供大家学习和参考,代码和表设计有什么不恰当还请各位大佬多多指点。 所需环境 MySQL可视化工具:navicat; 数据库:MySq…...
![](https://img-blog.csdnimg.cn/direct/bb1684768326438c9054daca092e1761.png)
eNSP中WLAN的配置和使用
一、基础配置 1.拓扑图 2.VLAN和IP配置 a.R1 <Huawei>system-view [Huawei]sysname R1 GigabitEthernet 0/0/0 [R1-GigabitEthernet0/0/0]ip address 200.200.200.200 24 b.S1 <Huawei>system-view [Huawei]sysname S1 [S1]vlan 100 [S1-vlan100]vlan 1…...
![](https://img-blog.csdnimg.cn/direct/79ff15de1ff74dc1ad1e10bdda3bcc4a.png)
<sa8650>QCX ID16_UsecaseRawLiteAuto 使用详解
<sa8650>QCX ID16_UsecaseRawLiteAuto 使用详解 一、前言二、ID16_UsecaseRawLiteAuto拓扑图三、UsecaseRawLiteAuto拓扑图 解析3.1 camxUsecaseRawLiteAuto.xml3.2 camxRawLiteAuto.xml四、测试一、前言 我们在使用QCX时,如果由于使用的摄像头自带了ISP,那么可能不需要使…...
![](https://img-blog.csdnimg.cn/img_convert/53161c8355c0dde95ad1a6518f25f819.png)
为什么3d重制变换模型会变形?---模大狮模型网
在当今数字技术飞速发展的时代,3D建模和动画制作已经成为影视、游戏和虚拟现实中不可或缺的一部分。然而,即使在高级的3D软件中,重制(rigging)和变换(transformation)过程中仍然会面临一个普遍的问题——模型变形。这种变形可能导致动画效果不…...
![](https://img-blog.csdnimg.cn/img_convert/40fd37d237b66925bc6e34e44497579d.png)
ElasticSearch中的BM25算法实现原理及应用分析
文章目录 一、引言二、BM25算法实现原理BM25算法的实现原理1. 词频(TF):2. 逆文档频率(IDF):3. 长度归一化:4. BM25评分公式: BM25算法示例 三、BM25算法在ElasticSearch中的应用分析…...
![](https://img-blog.csdnimg.cn/direct/e9c804443e954d1199ba7debb3cf868e.png)
web权限到系统权限 内网学习第一天 权限提升 使用手工还是cs???msf可以不??
现在开始学习内网的相关的知识了,我们在拿下web权限过后,我们要看自己拿下的是什么权限,可能是普通的用户权限,这个连添加用户都不可以,这个时候我们就要进行权限提升操作了。 权限提升这点与我们后门进行内网渗透是乘…...
![](https://img-blog.csdnimg.cn/direct/86489b43e4c54220bca37663ac7c2a47.png)
ros1仿真导航机器人 hector_mapping gmapping
仅为学习记录和一些自己的思考,不具有参考意义。 1 hector_mapping 建图过程 (1)gazebo仿真 roslaunch why_simulation why_slam.launch <launch><!-- We resume the logic in empty_world.launch, changing only the name of t…...
![](https://img-blog.csdnimg.cn/direct/fd725ae041f443209b857f0f6d3c0ab6.png)
嵌入式实验---实验五 串口数据接收实验
一、实验目的 1、掌握STM32F103串口数据接收程序设计流程; 2、熟悉STM32固件库的基本使用。 二、实验原理 1、STM32F103R6能通过查询中断方式接收数据,每接收到一个字节,立即向对方发送一个相同内容的字节,并把该字节的十六进…...
![](https://www.ngui.cc/images/no-images.jpg)
ubuntu 22.04下编译安装glog共享库
笔者是完美主义者,在编译opencv4.9时,有个有关glog的warn,就下载编译google的glog库并把它编译成shared libaray。重新编译opencv4.9时,该warn解除。现把编译安装glog过程记录,以备后查。 以下操作全程以root身份或sudo执行。 cd…...
![](https://img-blog.csdnimg.cn/direct/095b2061e9944b6e87c128540db89fd0.png)
Linux环境安装配置nginx服务流程
Linux环境的Centos、麒麟、统信操作系统安装配置nginx服务流程操作: 1、官网下载 下载地址 或者通过命令下载 wget http://nginx.org/download/nginx-1.20.2.tar.gz 2、上传到指定的服务器并解压 tar -zxvf nginx-1.20.1.tar.gzcd nginx-1.20.1 3、编译并安装到…...
![](https://www.ngui.cc/images/no-images.jpg)
设计模式-模板模式
简介 模板方法模式是一种行为设计模式,它在父类中定义了一个操作的算法框架,允许子类在不改变算法结构的情况下重定义算法的某些步骤。这种模式是基于继承的,通过抽象类将通用的代码抽取到超类中,同时通过具体类实现或者改写算法…...
![](https://www.ngui.cc/images/no-images.jpg)
物理删除和逻辑删除区别
物理删除和逻辑删除是数据库管理中针对记录删除操作的两种不同方式,它们的主要区别在于数据的实际处理和后续影响: 物理删除: 操作实质:物理删除会将数据记录从数据库表中彻底移除,包括记录所占的磁盘空间都会被释放。…...
![](https://img-blog.csdnimg.cn/direct/c4049723a7404206b4258c0ccb688693.png)
C# 警告 warning MSB3884: 无法找到规则集文件“MinimumRecommendedRules.ruleset”
警告 warning MSB3884: 无法找到规则集文件“MinimumRecommendedRules.ruleset” C:\Program Files\Microsoft Visual Studio\2022\Professional\MSBuild\Current\Bin\amd64\Microsoft.CSharp.CurrentVersion.targets(129,9): warning MSB3884: 无法找到规则集文件“MinimumRe…...
![](https://img-blog.csdnimg.cn/direct/b6e8c5df6aa342059caba84690b6262c.png)
Lua网站开发之文件表单上传
这个代码示例演示如何上传文件或图片,获取上传信息及保存文件到本地。 local fw require("fastweb") local request require("fastweb.request") local response require("fastweb.response") local cjson require("cjson&q…...
![](https://img-blog.csdnimg.cn/direct/645dca2d76ff40df9a040f0130f95e63.png)
千益畅行,旅游卡,如何赚钱?
赚钱这件事情,只有自己努力执行才会有结果。生活中没有幸运二字,每个光鲜亮丽的背后,都是不为人知的付出! #旅游卡服务#...
![](https://www.ngui.cc/images/no-images.jpg)
Element-plus点击当前行之后获取数据显示跟随行数据
要实现点击当前行后,在当前行的下方显示数据,可以通过以下步骤来实现: 在表格的行点击事件中获取当前点击行的位置信息。根据位置信息动态计算并设置需要显示数据区域的位置。 下面是一个更新后的示例代码,演示如何在 Element-P…...
![](https://www.ngui.cc/images/no-images.jpg)
Docker与微服务实战2022 尚
Docker与微服务实战2022 尚硅谷讲师:周阳 1. 基础篇(零基小白) 1 1.1. Docker简介 2 1.2. Docker安装 15 1.3. Docker常用命令 29 1.4. Docker镜像 43 1.5. 本地镜像发布到阿里云 50 1.6. 本地镜像发布到私有库 57 1.7. Docker容器数据卷 64 1.8. Docker常规安装简介 …...
![](https://www.ngui.cc/images/no-images.jpg)
Spring @Cacheable缓存注解用法说明
注解Cacheable 是 Spring 框架中用于缓存数据的方法或类的注解。通过使用这个注解,你可以避免重复计算和重复获取数据,从而提高应用程序的性能。 基本用法 引入依赖 确保在你的项目中引入了 Spring Cache 相关的依赖。如果你使用的是 Spring Boot&…...
![](https://www.ngui.cc/images/no-images.jpg)
Redis如何实现主从复制
Redis主从复制包括全量复制和增量复制。主是主服务器,从是从服务器,主服务器(master )的数据如果更新了也会同步到从服务器(slave),一个主服务器可以搭配很多个从服务器,主服务器负责写入,从服务器只能读取…...
![](https://img-blog.csdnimg.cn/direct/ce04815dc73148c6baf72267eea1a444.png)
正则表达式以及文本三剑客grep、sed、awk
正则表达式匹配的是文本内容,文本三剑客都是针对文本内容。 grep:过滤文本内容 sed:针对文本内容进行增删改查 awk:按行取列 一、grep grep的作用使用正则表达式来匹配文本内容 1、grep选项 -m:匹配几次之后停止…...
![](https://img-blog.csdnimg.cn/direct/1985b33848f04153b8680f4af2fa5bd4.png)
HSRP热备份路由协议(VRRP虚拟路由冗余协议)配置以及实现负载均衡
1、相关原理 在网络中,如果一台作为默认网关的三层交换机或者路由器损坏,所有使用该网关为下一跳的主机通信必然中断,即使配置多个默认网关,在不重启终端的情况下,也不能彻底换到新网关。Cisco提出了HSRP热备份路由协…...
![](https://www.ngui.cc/images/no-images.jpg)
不同集成学习算法的比较:随机森林、AdaBoost、XGBoost、LightGBM
好的,我来为您比较一些常见的集成学习算法,并生成表格形式以便于对比: 算法主要思想和特点应用场景并行处理支持稳定性和鲁棒性主要优化策略和技术AdaBoost使用加权投票组合多个弱分类器,逐步提升分类器性能二分类和多分类问题&a…...
![](https://img-blog.csdnimg.cn/img_convert/ef63cea8ab60f976c5b3359d4f3b8a32.webp?x-oss-process=image/format,png)
【聊聊原子性,中断,以及nodejs中的具体示例】
什么是原子性 从一个例子说起, x ,读和写 , 如图假设多线程,线程1和线程2同时操作变量x,进行x的操作,那么由于写的过程中,都会先读一份x数据到cpu的寄存器中,所以这个时候cpu1 和 c…...
![](https://www.ngui.cc/images/no-images.jpg)
常见网络端口号
在网络工程领域,了解和掌握默认端口号是至关重要的。端口号是计算机网络中最基本的概念之 一,用于标识特定的网络服务或应用程序。 1、什么是端口号? 端口号是计算机网络中的一种标识,用于区分不同的网络服务和应用程序。每个端…...
![](https://img-blog.csdnimg.cn/direct/e5fcebeeee55437885eeaabb77065e7e.png)
【数值计算库-超长笔记】Python-Mpmath库:高精度数值计算
原文链接:https://www.cnblogs.com/aksoam/p/18279394 更多精彩,关注博客园主页,不断学习!不断进步! 我的主页 csdn很少看私信,有事请b站私信 博客园主页-发文字笔记-常用 有限元鹰的主页 内容…...
![](https://img-blog.csdnimg.cn/direct/d1170a70713b4efb84e7b2dea43851cd.png)
昇思25天学习打卡营第6天|函数式自动微分
函数式自动微分 相关前置知识复习 深度学习的重点之一是神经网络。而神经网络很重要的一环是反向传播算法,这个算法用于调整神经网络的权重。 反向传播算法 这里举例说明反向传播在做什么。 假设你是一个学生,一次考试过后,你收到了一份老…...
![](https://img-blog.csdnimg.cn/direct/25442fee143c455abdc567a87376947b.png#pic_center)
为什么要在成像应用中使用图像采集卡?
达到最大产量是工业和工厂自动化的关键标准之一。提高传感器分辨率和帧速率有助于实现这一目标,但也使带宽达到极限,并提出了新的传输问题。当前高带宽接口(如10GigE、相机直接与PC连接和嵌入式系统)的实现促使成像应用的许多用户询问如何以最佳配置最优…...
![](https://i-blog.csdnimg.cn/direct/e95481ebc8994c3cb84b35b4a1fc3935.png)
【vue动态组件】VUE使用component :is 实现在多个组件间来回切换
VUE使用component :is 实现在多个组件间来回切换 component :is 动态父子组件传值 相关代码实现: <component:is"vuecomponent"></component>import componentA from xxx; import componentB from xxx; import componentC from xxx;switch(…...
![](https://i-blog.csdnimg.cn/direct/12b7bb3bbc7f478f8f268298f515e574.png)
免杀笔记 ----> DLL注入
这段时间我们暂时没什么事情干的话我们就继续更新我们的免杀笔记力!!! :今天我们讲DLL注入 目录 1.DLL注入 2.直接加载DLL? 3.远程线程注入 获取Handle 远程申请内存空间 将我们的CS的DLL加载入内存 创建远程线…...
![](https://www.ngui.cc/images/no-images.jpg)
【SQL】聚簇索引与⾮聚簇索引的区别
聚簇索引(Clustered Index)和非聚簇索引(Non-Clustered Index)是数据库索引的两种主要类型,它们在数据存储和访问方式上有显著区别。 聚簇索引 数据存储顺序:聚簇索引将数据行按照索引键的顺序进行存储。…...
![](https://i-blog.csdnimg.cn/direct/4f3c8a82bf7b4680ae2c5a37d6da52a3.png#pic_center)
PMP–知识卡片--PDCA循环
记忆 PDCA:计划执行检查调整,计划观察动作;plan do check action 定义 PDCA循环的含义是将质量管理分为四个过程,即计划(Plan)、执行(Do)、检查(Check)、处…...
![](https://img-blog.csdnimg.cn/direct/de75af0a136f46ee90af3bc3e1ad7c1c.png)
ppt接单渠道大公开‼️
PPT 接单主要分两种:PPT 模板投稿和PPT 定制接单,我们先从简单的 PPT 模板投稿说起。 PPT 模板投稿 利用业余时间,做一些 PPT 模板上传到平台,只要有人下载你的模板,你就有收入。如果模板质量高,简直就是一…...
![](https://www.ngui.cc/images/no-images.jpg)
十几万预算还买威兰达?配置更高、动力更强的美系SUV不香
当大家手握十几万预算去选购合资SUV时,哪个品牌的车型更值得选购呢?要知道在十几万价位区间,合资SUV市场的竞争可以说是极其激烈,其中也涌现了许多热门产品,比如威兰达、CR-V和途岳等。不过问题来了,虽说大家花十几万块钱去选购威兰达并没有问题,但是却有比它性价比更高…...
![](https://img-blog.csdnimg.cn/direct/b75507ffff1b4efdafb4a3e4024713b6.png)
CSS浮动详细教学(CSS从入门到精通学习第四天)
css第04天 一、其他样式 1、圆角边框 在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。 语法: border-radius:length; 参数值可以为数值或百分比的形式如果是正方形&…...
![](https://img-blog.csdnimg.cn/direct/ea3e1a82a05e4ad683c7695c5812f27c.jpeg#pic_center)
Linux驱动开发笔记(二) 基于字符设备驱动的I/O操作
文章目录 前言一、设备驱动的作用与本质1. 驱动的作用2. 有无操作系统的区别 二、内存管理单元MMU三、相关函数1. ioremap( )2. iounmap( )3. class_create( )4. class_destroy( ) 四、GPIO的基本知识1. GPIO的寄存器进行读写操作流程2. 引脚复用2. 定义GPIO寄存器物理地址 五、…...
![](https://img-blog.csdnimg.cn/direct/352ef75318ad4cf88438a7e6e8ba3d68.png)
基于GO 写的一款 GUI 工具,M3u8视频下载播放器-飞鸟视频助手
M3u8视频下载播放器-飞鸟视频助手 M3u8视频飞鸟视频助手使用m3u8下载m3u8 本地播放 软件下载地址m3u8嗅探 M3u8视频 M3u8视频格式是为网络视频播放设计,视频网站多数采用 m3u8格式。如腾讯,爱奇艺等网站。 m3u8和 mp4的区别: 一个 mp4是一个…...
![](https://img-blog.csdnimg.cn/direct/624dde98be564fa295caebb6664c7c49.png)
原神抽卡点名程序教程(直接下载用)
今天我要给大家分享一个在抖音上特别火的视频——原神抽卡点名程序教程。 (要源码的私信扣31) 废话不多说,直接上效果图 : 步骤1: 步骤2:(写名单,前面加数字代表星级,用…...
![](https://img-blog.csdnimg.cn/direct/ee2ab7f50b7b4f49a14f655d02b8f9b1.png)
ROS基础学习-话题通信机制研究
研究ROS通信机制 研究ROS通信机制 0.前言1.话题通信1.1 理论模型1.2 话题通讯的基本操作1.2.1 C++1.2.2 Python中使用自己的虚拟环境包1.2.2.1 参考11.2.2.2 参考21.2.2.3 /usr/bin/env:“python”:没有那个文件或目录1.2.3 Python1.2.2.1 发布方1.2.2.2 订阅方1.2.2.3 添加可执…...