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

【Vue-路由】学习笔记

news 来源：原创 2025/8/21 19:24:56

目录

  • <<回到导览
  • 路由
    • 1.单页应用和多页面
    • 2.路由基本使用
      • 2.1.路由的含义
      • 2.2.VueRouter插件
      • 2.3.配置路由规则和导航
      • 2.4.组件目录存放
      • 2.5.路由模块封装
    • 3.rounter
      • 3.1.router-link实现高亮
      • 3.2.自定义匹配类名
      • 3.3.声明式导航
        • 3.3.1.查询参数传参
        • 3.3.2.动态路由传参
        • 3.3.3.总结
      • 3.4.编程式导航
        • 3.4.1.path路径跳转
        • 3.4.2.name命名跳转
        • 3.4.3.查询参数传参
        • 3.4.4.动态路由传参
        • 3.4.5.总结
      • 3.5.路由重定向
        • 3.5.1.不传参数
        • 3.5.2.重定向跳转
        • 3.5.3.错误传参
        • 3.5.4.路由模式设置

<<回到导览

路由

1.单页应用和多页面

单页应用程序：指所有的功能都在一个html页面上实现
在这里插入图片描述
应用场景：

  • 单页应用类网站：系统类网站 / 内部网站 / 文档类网站 / 移动端站点
  • 多页应用类网站：公司官网 / 电商类网站

2.路由基本使用

2.1.路由的含义

  • 单页面应用程序，开发效率高，性能好，用户体验好，最大的原因是页面按需更新

  • 按需更新，首先就需要明确访问路径和 组件的对应关系，这依赖于路由

    路由含义
    生活中的路由设备和ip的映射关系
    Vue中的路由访问路径和组件的映射关系

2.2.VueRouter插件

作用：修改地址栏路径时，切换显示匹配的组件

官网：https://v3.router.vuejs.org/zh/

安装：

  1. 下载 VueRouter 模块到当前工程，版本3.6.5

    yarn add vue-router@3.6.5

  2. main.js中引入VueRouter

    import VueRouter from 'vue-router'

  3. main.js中安装注册

    Vue.use(VueRouter)const

  4. main.js中创建路由对象

    const router = new VueRouter()

  5. main.js中注入，将路由对象注入到new Vue实例中，建立关联

    new Vue({render: h => h(App),router:router
}).$mount('#app')

    • 当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理。
      在这里插入图片描述

    • 我们打印this.$router，可以看见router对象

      mounted() {console.log(this.$router);
},

在这里插入图片描述

2.3.配置路由规则和导航

  1. 在src文件夹下创建view文件夹，用于存放页面组件

  2. 在view文件夹，创建页面组件
    在这里插入图片描述

  3. 在这些路由组件中添加组件名（导出组件）

    // 以页面组件DemoMy为例
export default {name: "DemoMy",
};

  4. 在main.js配置路由

    // 3.创建路由对象
// 配置路由
const router = new VueRouter({routes: [{ path: "/home", component: DemoHome },{ path: "/my", component: DemoMy },{ path: "/friend", component: DemoFriend },],
});

  5. 在main.导入页面组件

    // 导入路由页面
import DemoHome from "./view/DemoHome";
import DemoFriend from "./view/DemoFriend";
import DemoMy from "./view/DemoMy";

  6. 配置导航（App.vue），配置路由出口(路径匹配的组件显示的位置)

    <div id="app"><div class="header"><a href="#/home">主页</a><a href="#/my">我的</a><a href="#/friend">朋友</a></div><div class="top"><router-view></router-view></div></div>

2.4.组件目录存放

文件夹组件类型作用
src/views文件夹页面组件页面展示 - 配合路由用
src/components文件夹复用组件展示数据 - 常用于复用

2.5.路由模块封装

为了利于维护，将路由模块抽离出来，存放与单独的文件夹。

  1. 在文件夹src中创建路由文件index.js
  2. 将vue的导入代码复制到index.js
  3. 将引入VueRouter、导入路由页面、注册安装VueRouter、创建路由对象剪切到index.js
  4. 在index.js文件中导出router，在main.js导入index.js
  5. 最后，两个文件的参考代码为

  • main.js

    import Vue from 'vue'
import App from './App.vue'
import router from '../src/router/index'Vue.config.productionTip = falsenew Vue({// 注入vue实例router,render: h => h(App),
}).$mount('#app')

  • index.js

    // vue的导入代码
import Vue from 'vue'
// 1.引入VueRouter
import VueRouter from 'vue-router'
// 导入路由页面
import DemoHome from "../view/DemoHome.vue";
import DemoFriend from "../view/DemoFriend.vue";
import DemoMy from "../view/DemoMy.vue";// 2.注册安装VueRouter
Vue.use(VueRouter)// 3.创建路由对象
// 配置路由
const router = new VueRouter({routes: [{ path: "/home", component: DemoHome },{ path: "/my", component: DemoMy },{ path: "/friend", component: DemoFriend },],
});// 导出
export default router

    当点击不同的a标签，路由发生相应变化则配置成功

    路径简写：脚手架环境下，@指代src目录，可以用于快速引入组件

3.rounter

3.1.router-link实现高亮

vue-router 提供了一个全局组件 router-link (取代 a 标签)

 <div><div class="footer_wrap"><router-link to="/find">发现音乐</router-link><router-link to="/my">我的音乐</router-link><router-link to="/friend">朋友</router-link></div><div class="top"><!-- 路由出口 → 匹配的组件所展示的位置 --><router-view></router-view></daiv>
</div>

  • router-link自带高亮，但是我们也可以自己设置高亮样式

  • 从浏览器检查，我们可以看出， router-link会被解析成a标签

  • 这个a标签默认加 router-link-exact-active和router-link-active两个类名

在这里插入图片描述

  • 我们可以给任意一个class属性添加高亮样式即可实现功能

    类名匹配方式作用（以/my为例）
    router-link-exact-active模糊匹配（用的多）匹配以/my开头的路径
    router-link-active精确匹配仅可以匹配 /my

  • 在css部分为这两个类名添加高亮样式即可

3.2.自定义匹配类名

如果嫌弃router-link的两个高亮类名太长，我们可以自定义匹配类名

  • 我们可以在创建路由对象时，额外配置两个配置项linkActiveClass和linkExactActiveClass即可

    //  创建路由对象
const router = new VueRouter({// 配置路由 routes: [{path:'/find',component:Find},{path:'/my',component:My},{path:'/friend',component:Friend}],// 自定义匹配类名       linkActiveClass: "active",linkExactActiveClass: "exact-active"
})

3.3.声明式导航

在跳转路由时，有时会有进行传参的需求

3.3.1.查询参数传参

  • 传参(eg:搜索页)

    <router-link to="/path?参数名=值"></router-link>

  • 接收(eg:详情页)

    在标签中渲染：：$route.query.参数名

    在js中使用： this.$route.query.参数名

3.3.2.动态路由传参

可以将参数名固定，动态传入参数值，这就是动态路由传参

  1. 配置动态路由：在路由后添加:参数名

    const router = new VueRouter({routes: [// 给find页面配置动态路由{path:'/find/:words',component:Find},{path:'/my',component:My},{path:'/friend',component:Friend}],
})

  2. 传入动态参数值

    <!--  给find页面传入动态参数值 -->
<router-link to="/find/参数值"></router-link>

  3. 接收(eg:详情页)

    在标签中渲染：：$route.params.参数名

    在js中使用： this.$route.params.参数名

  4. 注意：

    • 动态路由传参时，地址栏不会出现参数名
3.3.3.总结
传参方式使用场景配置动态路由跳转获取
查询参数传参多个参数无to=“/path?参数名=值&参数名2=值”$route.query.参数名
动态路由传参一个参数/path/:参数名to=“/path/参数值”$route.params.参数名

3.4.编程式导航

  • 声明式导航因为 router-link有to属性，配合路由配置，可以达到跳转的目的
  • 但是其他元素（例如button,div等）如果也有跳转的需求就需要使用到编程式导航
3.4.1.path路径跳转
//简单写法
this.$router.push('路由路径')//完整写法
this.$router.push({path: '路由路径'
})
3.4.2.name命名跳转

  1. 为路由配置路由名

    { name: '路由名', path: '/path/xxx', component: xxx },

  2. 通过name来进行跳转

    this.$router.push({name: '路由名'
})
3.4.3.查询参数传参
//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法
this.$router.push({path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2'}
})
3.4.4.动态路由传参
//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({path: '/路径/参数值'
})

注意：动态路由传参在路由配置时，已经将参数名配置

3.4.5.总结

  1. 两种跳转方式

    跳转方式区别配置项优点
    路径跳转写完整路径path简易方便
    命名跳转路由配置时命名name适合长路径

  2. 两种传参方式

    传参方式使用场景不同获取
    查询参数传参多个参数路由配置时，配置参数名$route.query.参数名
    动态路由传参一个参数可以不配置跳转的路由，直接跳转$route.params.参数名

注意：

  • 编程式导航不能跳转到当前所在页面

  • 在同一个路由下尽量使用同一套跳转和传参方式，否则会出现

    • 路由分裂（传同样的参数，进入两个不同的路由页面）
    • router-link不匹配（编程式导航跳转，相应的router-link不高亮）的情况

3.5.路由重定向

3.5.1.不传参数

配置了动态路由传参/search/:words ，但是不传参数，则会显示空白

这时，如果我们希望不传参数，也可以匹配，可以加个可选符?

示例：

const router = new VueRouter({routes: [...{ path: '/search/:words?', component: Search }]
})
3.5.2.重定向跳转

  • 网页打开时， url 默认是 / 路径，未匹配到组件时，会出现空白

  • 我们可以通过重定向，匹配 / 后, 强制跳转 /home 路径

  • 语法：

    { path: 匹配路径, redirect: 重定向到的路径 },

  • 示例：

    // 匹配 / 后, 强制跳转 /home 路径
{ path:'/' ,redirect:'/home' }
3.5.3.错误传参

当传参错误，路径找不到匹配时，可以给个提示页面

  • 字符 * ，前面路径不匹配，就命中最后这个（一般都配置在最后面）

  • 示例：

    const router = new VueRouter({routes: [...{ path: '*', component: NotFind } //最后一个]
})
    1. NotFind组件提示
    <template><div><h1>404 Not Found</h1></div>
</template>
    1. 导入页面
    import NoFind from "@/view/NotFound404"
3.5.4.路由模式设置

路由的路径看起来不自然, 有#，我们将其切成真正路径形式

hash路由(默认) 例如: http://localhost:8080/#/home

history路由(常用) 例如: http://localhost:8080/home

示例：

const router = new VueRouter({//默认是hashmode:'histroy', routes:[...]
})

以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题

相关文章：

【Vue-路由】学习笔记

目录 <<回到导览路由1.单页应用和多页面2.路由基本使用2.1.路由的含义2.2.VueRouter插件2.3.配置路由规则和导航2.4.组件目录存放2.5.路由模块封装 3.rounter3.1.router-link实现高亮3.2.自定义匹配类名3.3.声明式导航3.3.1.查询参数传参3.3.2.动态路由传参3.3.3.总结 3.…...

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

前端服务配置详解：从入门到实战

前端服务配置详解&#xff1a;从入门到实战 一、环境配置文件&#xff08;.env&#xff09; 1.1 基础结构 在项目根目录创建 .env 文件&#xff1a; # 开发环境 VUE_APP_API_BASE_URL http://localhost:3000/api VUE_APP_VERSION 1.0.0# 生产环境&#xff08;.env.produc…...

编程日记 2025/8/22 10:03:28

Java安全管理器 - SecurityManager

什么是Java安全管理器&#xff1f; Java安全管理器是Java提供的保护JVM和程序安全的机制&#xff0c;它能限制用户的代码对文件、内存、资源、网络的操作和访问&#xff0c;防止恶意代码入侵程序。常用来控制用户提交的代码对各种资源的访问权限&#xff0c;防止用户恶意提交代…...

编程日记 2025/8/19 13:26:44

Arrays操作工具 Lambda表达式 集合 迭代器 数据结构 泛型 set集合 list集合

Arrays操作工具 自己定义的排序规则 简单理解如果是&#xff1a;o1 - o2 升序排列 o2 - o1 降序排列 Lambda表达式 函数式编程 函数式编程&#xff08;Functional programming&#xff09;是一种思想特点。 面向对象&#xff1a;先去找对象&#xff0c;让对象做事情。。函数式…...

编程日记 2025/8/19 1:39:01

ORM、Mybatis和Hibernate、Mybatis使用教程、parameterType、resultType、级联查询案例、resultMap映射

DAY21.1 Java核心基础 ORM Object Relationship Mapping 对象关系映射 面向对象的程序到—关系型数据库的映射 比如java – MySQL的映射 ORM框架就是实现这个映射的框架 Hibernate、Mybatis、MybatisPlus、Spring Data JPA、Spring JDBC Spring Data JPA的底层就是Hiber…...

编程日记 2025/8/22 12:04:31

《Java八股文の文艺复兴》第十一篇：量子永生架构——对象池的混沌边缘（终极试炼·完全体）

Tags: - Java高并发 - 量子架构 - 混沌工程 - 赛博修真 - 三体防御 目录&#xff1a; 卷首语&#xff1a;蝴蝶振翅引发的量子海啸 第一章&#xff1a;混沌初开——对象池的量子涅槃&#xff08;深度扩展&#xff09; 第二章&#xff1a;混沌计算——对象复活的降维打击&…...

编程日记 2025/8/21 10:36:30

蓝桥杯备赛---真题训练之15届蓝桥杯找回连接之旅

题目 介绍 在网络世界中&#xff0c;突然间失去了所有的连接。作为勇敢的冒险者&#xff0c;你将踏上一段惊险刺激的旅程&#xff0c;穿越充满谜题和挑战的网络景观&#xff0c;与神秘的网络幽灵对抗&#xff0c;解开断网之谜&#xff0c;找回失去的连接&#xff0c;带领人们重…...

编程日记 2025/8/22 4:55:57

PowerApps MDA-模版-文档模版无法下载和上传Word模版

Power Apps的高级设置-模版中&#xff0c;文档模版目前只能看到新建和上传Excel模版&#xff0c;看不到Word模版 这是一个已知bug, 什么时候能修复不好说&#xff0c;解决办法也很简单&#xff0c;先上传一个Excel模版&#xff0c;随便任何一个实体就行&#xff0c;为的是视图列…...

编程日记 2025/8/22 8:15:27

全国大学生数学建模竞赛赛题深度分析报告（2010-2024）

全国大学生数学建模竞赛赛题深度分析报告&#xff08;2010-2024&#xff09; 全国大学生数学建模竞赛(CUMCM)是中国最具影响力的大学生科技竞赛之一&#xff0c;本报告将对2010-2024年间的赛题进行全面统计分析&#xff0c;包括题目类型、领域分布、模型方法等多个维度&#x…...

编程日记 2025/8/22 19:17:02

职坐标解析自动驾驶技术发展新趋势

内容概要 作为智能交通革命的核心驱动力&#xff0c;自动驾驶技术正以惊人的速度重塑出行生态。2023年&#xff0c;行业在多传感器融合与AI算法优化两大领域实现突破性进展&#xff1a;激光雷达、摄像头与毫米波雷达的协同精度提升至厘米级&#xff0c;而深度学习模型的实时决…...

编程日记 2025/8/21 12:53:38

快速入手-前后端分离Python权限系统 基于Django5+DRF+Vue3.2+Element Plus+Jwt

引用&#xff1a;打造前后端分离Python权限系统 基于Django5DRFVue3.2Element PlusJwt 视频教程 &#xff08;火爆连载更新中..&#xff09;_哔哩哔哩_bibili 说明&#xff1a;1、结合个人DRF基础和该视频去根据自己的项目进行开发。 2、引用该视频中作者的思路去升华自身的项…...

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

HTTP 协议详解

HTTP 协议 HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;是互联网上应用最广泛的协议之一&#xff0c;用于在客户端&#xff08;如浏览器&#xff09;和服务器之间传输超文本&#xff08;如网页&#xff09;。 HTTP 是万维网&#xff…...

编程日记 2025/8/19 1:42:23

巧记英语四级单词 Unit1-4【晓艳老师版】

tain—take拿着、sus 下面&#xff0c;只有sur表示上面、ob表示方向、de往下&#xff0c;分开 retain v.保持 re-重复&#xff0c;tain—take拿着&#xff0c;重复的拿着maintain v. 维持&#xff0c;维修&#xff0c;保养 main主要的&#xff0c;主要的东西都拿着的那个人维…...

编程日记 2025/8/22 6:34:33

Transformers without Normalization论文翻译

论文信息&#xff1a; 作者&#xff1a;Jiachen Zhu, Xinlei Chen, Kaiming He, Yann LeCun, Zhuang Liu 论文地址&#xff1a;arxiv.org/pdf/2503.10622 代码仓库&#xff1a;jiachenzhu/DyT: Code release for DynamicTanh (DyT) 摘要 归一化层在现代神经网络中无处不在…...

编程日记 2025/8/22 1:29:18

Ollama

目录 定义与核心功能应用场景Ollama与Llama的关系安装与使用 Ollama是一个开源的本地大语言模型&#xff08;LLM&#xff09;运行框架&#xff0c;专为在本地机器上便捷部署和运行大型语言模型而设计。以下是关于Ollama的全面介绍&#xff1a; 定义与核心功能 多种预训练语言模…...

编程日记 2025/8/22 12:09:21

社交app圈子模块0到1实现

一、逻辑分析 用户相关 用户需要能够创建圈子&#xff0c;这涉及到用户身份验证&#xff0c;确保只有注册用户可以进行创建操作。每个圈子有创建者&#xff0c;创建者对圈子有一定的管理权限&#xff0c;如设置圈子规则、邀请成员等。 圈子信息 圈子需要有名称、简介、头像等基…...

编程日记 2025/8/21 13:29:52

OpenCV--图像边缘检测

在计算机视觉和图像处理领域&#xff0c;边缘检测是极为关键的技术。边缘作为图像中像素值发生急剧变化的区域&#xff0c;承载了图像的重要结构信息&#xff0c;在物体识别、图像分割、目标跟踪等众多应用场景中发挥着核心作用。OpenCV 作为强大的计算机视觉库&#xff0c;提供…...

编程日记 2025/8/20 20:18:25

批量压缩 jpg/png 等格式照片|批量调整图片的宽高尺寸

图片格式种类非常的多&#xff0c;并且不同的图片由于像素、尺寸不一样&#xff0c;可能占用的空间也会不一样。文件太大会占用较多的磁盘空间&#xff0c;传输及上传系统都非常不方便&#xff0c;可能会收到限制&#xff0c;因此我们经常会碰到需要对图片进行压缩的需求。如何…...

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

[Linux系统编程]多线程

多线程 1. 线程1.1 线程的概念1.2 进程与线程对比1.3 轻量级进程 2. Linux线程控制2.1 POSIX 线程&#xff08;pthread&#xff09;2.2 线程ID、pthread_t、和进程地址空间的关系2.2.1 pthread_self2.2.2 pthread_create2.2.3 pthread_join2.2.4 线程终止的三种方式2.2.5 pthre…...

编程日记 2025/8/22 5:10:32

进程状态(运行 阻塞 僵尸)及其场景分析

【Linux学习笔记】Linux基本指令及其分析 &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;Linux学习笔记 前言 哈喽&#xff0c;各位小伙伴大家好!上期我们讲了进程PCB 今天我们讲的是进程状态(运行 阻塞 僵尸)及其场景分析。话不多说&#…...

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

程序化广告行业（67/89）：DMP系统标签制作与人群拓展深度解析

程序化广告行业&#xff08;67/89&#xff09;&#xff1a;DMP系统标签制作与人群拓展深度解析 大家好&#xff01;在之前的分享中&#xff0c;我们对程序化广告的多个关键环节进行了探讨。今天&#xff0c;咱们继续深入了解程序化广告中的DMP系统&#xff0c;聚焦于标签制作和…...

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

【QT】QPixmap QImage QBitmap QPicture

文章目录 **1. QPixmap****特点****典型应用场景****示例** **2. QImage****特点****典型应用场景****示例** **3. QBitmap****特点****示例** **4. 三者的主要区别****5. 如何选择&#xff1f;****使用 QPixmap 的情况****使用 QImage 的情况****使用 QBitmap 的情况** **6. 相…...

编程日记 2025/8/22 10:04:56

如何开通google Free Tier长期免费云服务器(1C/1G)

Google宣布的一项政策&#xff0c;为标准层级的网络提供每地域200G的免费流量。两项政策结合&#xff0c;于是便可以得到一台1核心、1G内存、30G磁盘、200G流量的小云服务器&#xff0c;可玩性大大提高。这篇文章就分享一下如何正确开机&#xff0c;避免产生额外的费用。 免费…...

编程日记 2025/8/22 2:23:33

Kaggle房价预测

实战 Kaggle 比赛&#xff1a;预测房价 这里李沐老师讲的比较的细致&#xff0c;我根据提供的代码汇总了一下&#xff1a; import hashlib import os import tarfile import zipfile import requests import numpy as np import pandas as pd import torch from matplotlib i…...

编程日记 2025/8/20 18:37:25

4.7学习总结 java集合进阶

集合进阶 泛型 //没有泛型的时候&#xff0c;集合如何存储数据 //结论: //如果我们没有给集合指定类型&#xff0c;默认认为所有的数据类型都是object类型 //此时可以往集合添加任意的数据类型。 //带来一个坏处:我们在获取数据的时候&#xff0c;无法使用他的特有行为。 //此…...

编程日记 2025/8/21 2:41:16

设计模式 - 代理模式Proxy

设计思想&#xff1a; 举个通俗的例子&#xff0c;你想找某局长帮你做一件事情&#xff0c;但局长官位显赫&#xff0c;你又不能轻易见着&#xff0c;你就想到了找他的秘书&#xff0c;通过她传话给局长&#xff0c;这样你就等于请他的秘书帮你办成了那件事。秘书为什么就可以…...

编程日记 2025/8/21 16:52:41

计算机网络体系结构（一）

1.计算机网络概述 1.1计算机网络的概念 计算机网络是由相互连接的计算机及其周边设备构成的系统&#xff0c;这些计算机和设备通过各种通信介质实现数据和资源的共享。计算机网络的主要目的是为了增强信息传递的效率、便利性和可靠性。以下是一些计算机网络的关键概念&#xf…...

编程日记 2025/8/21 22:01:44

数据结构与算法-数学-基础数学2（扩展欧几里得算法，组合数问题）

六&#xff1a;扩展欧几里得算法 同余&#xff1a; 若 a≡b(modm)&#xff0c;则 m 整除 a−b&#xff0c;即 abkm&#xff08;k 为整数&#xff09;。 扩展欧几里得算法 扩展欧几里得算法可用于求解 axbygcd(a,b) 的一组整数解。 #include <iostream> using namesp…...

编程日记 2025/8/21 2:41:23

【力扣hot100题】（072）柱状图中的最大矩阵

这绝对是我做过印象最深的算法题之一。&#xff08;还有是那道盛水最多的贪心题&#xff09; 当初不知道想了多少个日日夜夜&#xff0c;所幸这道题已经深深的烙印在了我的脑海里。 现在看来也没那么可怕&#xff08;&#xff09;不过初见确实非常难想到单调栈。 方法如下&a…...

编程日记 2025/8/21 2:37:20

T-SQL语言的压力测试

T-SQL语言的压力测试 随着数据驱动技术的发展&#xff0c;数据库在现代应用中的角色愈加重要。而在数据库管理系统中&#xff0c;微软的SQL Server凭借其强大的功能和易用性&#xff0c;广泛应用于各行业。在这一环境中&#xff0c;T-SQL&#xff08;Transact-SQL&#xff09;…...

编程日记 2025/8/19 11:53:19

debian 系统gnome怎么关闭触摸屏三指滑动

ubuntu如何限制三指手势操作_ubuntu 手势-CSDN博客 参考方案给上面了， kiosk模式 就是专用模式，类似于广告机、售货机那种。 方案 在 Debian 系统的 GNOME 桌面环境中，可以通过以下方法关闭触摸屏三指滑动功能： 安装 gnome-tweaks 工具：...

编程日记 2025/8/21 13:37:18

【9】搭建k8s集群系列（二进制部署）之安装work-node节点组件（kube-proxy）和网络组件calico

承接上一篇文章&#xff0c;继续安装工作节点的第二个组件&#xff1a;kube-proxy 一、创建配置文件 cat > /opt/kubernetes/cfg/kube-proxy.conf << EOF KUBE_PROXY_OPTS"--logtostderrfalse \\ --v2 \\ --log-dir/opt/kubernetes/logs \\ --config/opt/kubern…...

编程日记 2025/8/20 9:00:03

MongoDB及Yapi迁移数据

一、MongoDB安装及迁移 1、导入MongoDB GPG密钥 sudo rpm --import https://www.mongodb.org/static/pgp/server-5.0.asc 2、创建MongoDB 安装源配置文件 vi /etc/yum.repos.d/mongodb-org-5.0.repo&#xff0c;添加以下内容&#xff1a; [mongodb-org-5.0] nameMongoDB Repo…...

编程日记 2025/8/21 19:30:49

高效解读机器语言，profinet转ethernet ip网关烟草企业自动化升级案例分析

工业通信协议转换在烟草生产线的实践应用 某中型烟草生产企业为提高自动化水平&#xff0c;引进了西门子S7-1500系列PLC控制系统和防爆型科氏力质量流量计。但在系统集成阶段&#xff0c;技术人员发现PLC支持的PROFINET协议与流量计采用的EtherNet/IP协议存在互操作障碍&#x…...

编程日记 2025/8/20 13:09:15

使用Scade实现神经网络算法

在ERTS2022中&#xff0c;ANSYS 发表了使用Scade实现神经网络AI算法的相关工作。论文题目为《Programming Neural Networks Inference in a Safety-Critical Simulation-based Framework》 背景与挑战 神经网络在安全关键系统中的应用&#xff1a;随着嵌入式系统中自主性的引入…...

编程日记 2025/8/22 4:32:48

rom定制系列------小米10pro机型定制解锁固件 原生安卓15批量线刷固件 操作解析与界面预览

注意;固件用于自己机型忘记密码或者手机号注销等出现设备锁 过保修期 售后无视的机型&#xff0c;勿用于非法途径 目前有粉丝联系&#xff0c;自己的机型由于手机号注销导致手机更新系统后出现设备锁界面。另外也没有解锁bl。目前无法使用手机。经过询问是小米10pro机型。根据…...

编程日记 2025/8/22 13:13:11

2023年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2023年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析 全国大学生数学建模竞赛&#xff08;China Undergraduate Mathematical Contest in Modeling&#xff09;是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动&#xff0c;目的在于激…...

编程日记 2025/8/22 11:58:21

2014年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2014年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析 全国大学生数学建模竞赛（China Undergraduate Mathematical Contest in Modeling）是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动，目的在于激励学生学习数学的积极性，提高学…...

编程日记 2025/8/22 9:00:14

【Docker基础】--查阅笔记1

目录 Docker是什么Docker解决什么问题Docker的理念Docker基本组成镜像&#xff08;image&#xff09;容器&#xff08;container&#xff09;仓库&#xff08;registry&#xff09; Docker平台架构Docker基本实现原理 Docker常用命令总结 Docker是什么 Docker解决什么问题 统…...

编程日记 2025/8/17 22:11:13

算法（动态规划）

动态规划 基本思想 将问题分解为相互重叠的子问题 定义子问题&#xff1a;将原问题分解为若干个子问题。确定状态转移方程&#xff1a;找到子问题之间的递推关系。边界条件&#xff1a;确定初始状态的值。递推计算&#xff1a;根据状态转移方程和边界条件逐步计算子问题的解。…...

编程日记 2025/8/21 17:24:08

2025 年前端与后端开发方向的抉择与展望-优雅草卓伊凡

2025 年前端与后端开发方向的抉择与展望-优雅草卓伊凡 在 2025 年这个科技浪潮奔涌的时代&#xff0c;软件开发领域持续变革&#xff0c;前端与后端开发方向的抉择&#xff0c;成为众多从业者和爱好者亟待破解的关键命题。卓伊凡就频繁收到这样的疑问&#xff1a;“2025 年了&…...

编程日记 2025/8/22 5:27:52

指纹浏览器技术架构解析：高并发批量注册业务的工程化实践——基于分布式指纹引擎与防关联策略的深度实现

一、技术背景与行业痛点 在跨境电商、广告投放、问卷调查等场景中&#xff0c;批量注册与多账号矩阵运营已成为刚需。然而&#xff0c;主流平台&#xff08;如亚马逊、Facebook、Google&#xff09;的风控系统通过浏览器指纹追踪&#xff08;Canvas/WebGL/WebRTC等&#xff09…...

编程日记 2025/8/22 11:55:00

基于SpringBoot的“智慧医疗采购系统”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“智慧医疗采购系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统总体结构图 局部E-R图 系统首页界面 系统…...

编程日记 2025/8/22 4:09:35

codeforces B. Large Array and Segments

题目简述&#xff1a; 给定一个长度为n的数组&#xff0c;以及两个整数k和p&#xff0c;该数组可以通过复制在增加长度&#xff0c;可以复制k次&#xff0c;我们最后要找到保证后缀和至少为p的首元结点的数量 思路简述&#xff1a; 找到有多少个完整的原数组n&#xff0c;最…...

编程日记 2025/8/22 11:08:34

VS Code-i18n Ally国际化插件

前言 本文借鉴&#xff1a;i18n Ally 插件帮你轻松搞定国际化需求-按模块划分i18n Ally 是一款 VS Code 插件&#xff0c;它能通过可视 - 掘金本来是没有准备将I18n Ally插件单独写一个博客的&#xff0c;但是了解过后&#xff0c;功能强大&#xff0c;使用方便&#xff0c;解决…...

编程日记 2025/8/22 15:07:44

ResNet改进(21)：基于ECA注意力机制的ResNet18网络实现

一、引言 在计算机视觉领域，ResNet（残差网络）一直是图像分类任务中的重要基准模型。今天我们要介绍的是一个改进版的ResNet18网络，它在传统ResNet结构的基础上加入了ECA（Efficient Channel Attention）注意力机制，能够在不显著增加计算量的情况下提升模型性能。 二、网络…...

编程日记 2025/8/20 10:29:46

[ERROR] Some problems were encountered while processing the POMs

记录一次maven的错误 问题复现&#xff1a; 我在ruoyi-vue-plus项目的ruoyi-modules中新建了一个子项目ruoyi-network-telphonem,然后某一次编译的时候提示SysTenantServiceImpl找不到无参的构造函数&#xff0c;检查了很久都没发现问题&#xff0c;于是我想着删掉本地maven仓…...

编程日记 2025/8/21 3:32:41

【网络协议】WebSocket讲解

目录 webSocket简介 连接原理解析: 客户端API 服务端API&#xff08;java&#xff09; 实战案例 &#xff08;1&#xff09;引入依赖 &#xff08;2&#xff09;编写服务端逻辑 &#xff08;3&#xff09;注册配置类 &#xff08;4&#xff09;前端连接 WebSocket 示例…...

编程日记 2025/8/20 10:40:22

什么是可靠性工程师？

一、什么是可靠性工程师&#xff1f; 可靠性工程师就是负责确保产品在使用过程中不出故障、不给客户添麻烦。 你可以理解为是那种“挑毛病的人”&#xff0c;但不是事后挑&#xff0c;是提前想清楚产品在哪些情况下可能会出问题&#xff0c;然后解决掉。 比如&#xff1a; …...

编程日记 2025/8/21 14:31:34

Next.js + SQLite 项目 Docker 生产环境部署方案

以下是完整的 Next.js SQLite 项目 Docker 生产环境部署方案&#xff1a; 1. 项目结构准备 your-project/ ├── prisma/ │ ├── schema.prisma │ └── migrations/ ├── app/ ├── lib/ ├── Dockerfile ├── docker-compose.yml ├── .dockerignore └…...

编程日记 2025/8/21 18:25:30