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

DeepSeek 助力 Vue 开发:打造丝滑的面包屑导航(Breadcrumbs)

前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕

共同探索软件研发!敬请关注【宝码香车】
关注描述

csdngif标识

目录

  • DeepSeek 助力 Vue 开发:打造丝滑的面包屑导航(Breadcrumbs)
    • 📚前言
    • 📚进入安装好的DeepSeek
    • 📚页面效果
    • 📚指令输入
      • **1. 属性 (Props)**
      • **2. 事件 (Events)**
      • **3. 插槽 (Slots)**
        • **路由集成**
        • **激活项处理**
        • **可访问性**
        • **样式**
        • **响应式设计**
    • 📚think
      • 📘组件代码
      • 📘以下是两个使用示例:
      • 📘优化建议:
      • 📘组件特点:
      • 📘使用时请确保:
    • 📚代码测试
    • 📚上面是主要代码,为了代码正常跑通,附其他辅助代码。
      • 📘编写 src\router\index.js
        • 🗂️文件位置
        • 📝代码
      • 📘编写 src\App.vue
        • 🗂️文件位置
        • 📝代码
    • 📚页面效果
    • 📚自己部署 DeepSeek 安装地址
    • 📚相关文章


📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣

DeepSeek 助力 Vue 开发:打造丝滑的面包屑导航(Breadcrumbs)

📚前言

DeepSeek 在中文语境优化方面也做得非常出色。由于其训练语料中中文占比超 40%,因此更符合中文语言习惯和文化背景,在中文语法、成语、网络用语及行业术语方面进行了专项训练,中文语义理解准确率高。而 ChatGPT 的中文语料占比约 10%,在中文处理上相对较弱。

DeepSeek 采用了完全开源策略,将模型权重、训练框架及数据管道全部开源,采用 MIT 许可证,允许用户自由使用、修改和商业化。这一策略对 AI 社区和行业发展产生了深远的影响。

📚进入安装好的DeepSeek

0基础3步部署自己的DeepSeek安装步骤

打开搭建好的DeepSeek应用。

DeepSeek应用

进入应用。

进入DeepSeek应用

📚页面效果

页面效果

📚指令输入

已经创建好了一个基于Vue3的组合式API的项目(Composition API),并能正常运行起来,请帮我用 Vue3的组合式API(Composition API) 生成一个 面包屑导航(Breadcrumbs) 的功能组件,所有代码都保存在components/Breadcrumbs 下的文件夹中。功能组件的script标签中只有setup属性,使用普通 JavaScript 实现,不使用TypeScript。
功能要有,如下属性:

为了创建一个灵活且可重用的 Vue3 面包屑导航组件,以下是建议的属性和事件定义,以及其他关键实现要点:


1. 属性 (Props)

属性名类型默认值说明
itemsBreadcrumbItem[]必填面包屑项数组,每个元素包含 text, to, icon 等字段
separatorstring | Component'/'分隔符(支持文本或图标组件)
disableRouterbooleanfalse是否禁用自动路由跳转(触发事件代替)
activeClassstring'active'当前激活项的 CSS 类名(通常最后一个项自动激活)
containerClassstring''容器元素的自定义类名
itemClassstring''每个面包屑项的自定义类名
separatorClassstring''分隔符的自定义类名

2. 事件 (Events)

事件名参数说明
item-click(item: BreadcrumbItem, event: MouseEvent)点击面包屑项时触发(disableRoutertrue 时需手动处理跳转)

3. 插槽 (Slots)

插槽名作用域参数说明
item{ item, isActive }自定义单个面包屑项的渲染内容
separator-自定义分隔符的渲染内容

路由集成
  • 默认使用 router-link 实现导航(需引入 Vue Router)。
  • 通过 disableRouter 属性切换为普通 <a> 标签或自定义元素。
激活项处理
  • 自动将最后一个 item 标记为激活状态(不可点击),通过 activeClass 应用样式。
可访问性
  • 在容器上添加 role="navigation"aria-label="Breadcrumb"
  • 使用 aria-current="page" 标记当前激活项。
样式
  • 提供基础 CSS 结构,但允许通过类名完全覆盖样式。
  • 使用 CSS 变量增强主题定制能力:
响应式设计
  • 考虑移动端折叠场景(如隐藏中间项),可通过 CSS 媒体查询或逻辑处理实现。

通过以上设计,组件将具备高可定制性,同时保持核心功能的简洁性。开发者可通过插槽、属性以及事件灵活扩展功能。

你有更好的建议也可以添加,要注明。组件定义好后给出2个及以上完整的调用示例。

下面是现有目录

vueAndDeepseek/
├── src/ # 源代码目录
│ ├── assets/ # 静态资源
│ │ ├── base.css
│ │ ├── main.css
│ │ └── logo.svg
│ ├── components/ # 组件目录
│ │ ├── HelloWorld.vue
│ │ ├── TheWelcome.vue
│ │ ├── WelcomeItem.vue
│ │ ├── Progress/
│ │ │ └── Progress.vue
│ │ ├── Accordion/
│ │ ├── BackToTop/
│ │ ├── Card/
│ │ ├── InfiniteScroll/
│ │ ├── Notification/
│ │ ├── Timeline/
│ │ ├── Switch/
│ │ ├── Tabs/
│ │ ├── Sidebar/
│ │ ├── Breadcrumbs/
│ │ └── icons/
│ ├── router/ # 路由配置
│ │ └── index.js
│ ├── stores/ # Pinia 状态管理
│ │ └── counter.js
│ ├── views/ # 页面组件
│ │ ├── ProgressView.vue
│ │ ├── TabsView.vue
│ │ ├── SwitchView.vue
│ │ ├── TimelineView.vue
│ │ ├── NotificationView.vue
│ │ ├── CardView.vue
│ │ ├── InfiniteScrollView.vue
│ │ ├── BackToTopView.vue
│ │ ├── AccordionView.vue
│ │ ├── SidebarView.vue
│ │ ├── BreadcrumbsView.vue
│ │ └── AboutView.vue
│ ├── App.vue # 根组件
│ └── main.js # 应用入口
├── public/ # 公共资源目录
├── index.html # HTML 模板
├── package.json # 项目配置
├── vite.config.js # Vite 配置
└── node_modules/ # 依赖包目录

📚think

嗯,用户已经创建了一个基于Vue3组合式API的项目,并且想生成一个面包屑导航组件。我需要帮他写这个组件,并确保所有代码放在components/Breadcrumbs文件夹下。

首先,分析需求。用户提供了详细的属性、事件和插槽说明,还有路由集成、激活项处理等要点。所以,我得把这些都考虑进去。

先看属性部分。items是必填的,每个item包含text、to、icon。那在组件中,我需要接收这些props,并确保它们正确传递。separator默认是’/',可以是字符串或组件。disableRouter控制是否禁用路由跳转,activeClass用于激活状态的类名。容器和分隔符的类名也需要处理。

接下来是事件。item-click事件在点击时触发,参数包括item和event。当disableRouter为true时,需要手动处理跳转。所以,在setup函数中,我得定义一个emit,并在点击事件里调用它。

插槽方面,有item和separator两个插槽。item插槽传递item和isActive状态,separator插槽没有作用域参数。这意味着在模板中,我需要用slot来渲染这些内容。

路由集成部分,如果disableRouter为false,默认使用router-link,否则用a标签或者自定义元素。所以,在template里,需要根据disableRouter的值来决定使用哪个组件。

激活项处理方面,最后一个item默认是active状态,不能点击。所以,在循环items时,判断是否是最后一个,并设置对应的class和disabled属性。

可访问性也是重点,容器添加role="navigation"和aria-label,当前激活项加aria-current=“page”。

样式部分,用户希望提供基础结构,允许通过类名覆盖。所以,我需要在组件中正确应用containerClass、itemClass和separatorClass,并且可能使用CSS变量来增强主题定制能力。

响应式设计方面,可能需要处理移动端的折叠情况,比如隐藏中间项,这可能需要后续用CSS媒体查询或逻辑处理实现,但目前先不考虑,留到以后扩展。

现在,开始写组件代码。首先,在Breadcrumbs.vue中,使用script标签,setup语法糖,只用普通JavaScript。

在setup函数中,接收props:items、separator、disableRouter、activeClass、containerClass、itemClass、separatorClass。然后,定义emit事件,item-click。

接下来,计算items的长度,最后一个索引是items.length - 1。如果items为空,则抛出警告或处理错误。

渲染部分,使用template,循环每个item,判断是否为最后一个来设置active状态。对于每个item,使用router-link或者a标签,根据disableRouter决定。

分隔符的处理:在每个item后面插入separator,除了最后一个。如果用户提供了separator插槽,就用它;否则,显示props中的separator内容,并应用separatorClass。

插槽方面,item插槽传递item和isActive状态,让开发者自定义渲染内容。separator插槽则没有作用域参数。

测试一下示例是否正确。第一个示例使用默认配置,第二个禁用了路由并添加了点击事件处理,第三个展示了自定义分隔符和样式。这些应该都能正常工作。

最后,确保组件结构清晰,代码规范,并且在main.js中注册了全局组件或在需要的页面引入。

📘组件代码

根据你的需求,我帮你创建了一个灵活的面包屑导航组件。以下是完整实现:

<!-- components/Breadcrumbs/Breadcrumbs.vue -->
<template><navrole="navigation"aria-label="Breadcrumb":class="['breadcrumbs', containerClass]"><ol class="breadcrumbs__list"><liv-for="(item, index) in items":key="index"class="breadcrumbs__item":class="[itemClass,{ [activeClass]: isLast(index) }]"><!-- 项内容 --><slotname="item":item="item":isActive="isLast(index)"><component:is="linkComponent(item)"v-if="!isLast(index)":to="item.to"class="breadcrumbs__link"@click="handleClick(item, $event)"><component:is="item.icon"v-if="item.icon"class="breadcrumbs__icon"/><span class="breadcrumbs__text">{{ item.text }}</span></component><spanv-elseclass="breadcrumbs__current"aria-current="page"><component:is="item.icon"v-if="item.icon"class="breadcrumbs__icon"/>{{ item.text }}</span></slot><!-- 分隔符 --><spanv-if="!isLast(index)"class="breadcrumbs__separator":class="separatorClass"><slot name="separator">{{ separator }}</slot></span></li></ol></nav>
</template><script setup>
import { computed } from 'vue';
import { RouterLink } from 'vue-router';const props = defineProps({items: {type: Array,required: true,validator: (value) => {return value.every(item => 'text' in item);}},separator: {type: [String, Object],default: '/'},disableRouter: {type: Boolean,default: false},activeClass: {type: String,default: 'active'},containerClass: {type: String,default: ''},itemClass: {type: String,default: ''},separatorClass: {type: String,default: ''}
});const emit = defineEmits(['item-click']);const isLast = (index) => index === props.items.length - 1;const linkComponent = (item) => {if (props.disableRouter) {return item.to ? 'a' : 'span';}return item.to ? RouterLink : 'span';
};const handleClick = (item, event) => {emit('item-click', item, event);if (props.disableRouter && item.to) {event.preventDefault();}
};
</script><style>
.breadcrumbs {--text-color: #666;--link-color: #2c3e50;--active-color: #999;--separator-margin: 0 8px;--item-spacing: 0.5rem;
}.breadcrumbs__list {display: flex;list-style: none;padding: 0;margin: 0;
}.breadcrumbs__item {display: inline-flex;align-items: center;color: var(--text-color);
}.breadcrumbs__link {color: var(--link-color);text-decoration: none;transition: color 0.2s;
}.breadcrumbs__link:hover {color: var(--active-color);
}.breadcrumbs__current {color: var(--active-color);
}.breadcrumbs__separator {margin: var(--separator-margin);color: var(--text-color);
}.breadcrumbs__icon {margin-right: 4px;
}
</style>

📘以下是两个使用示例:

<!-- views/BreadcrumbsView.vue -->
<template><div class="breadcrumbs-demo"><h2>基本用法</h2><Breadcrumbs:items="[{ text: '首页', to: '/' },{ text: '用户中心', to: '/user' },{ text: '个人资料' }]"class="my-breadcrumbs"@item-click="handleItemClick"/><h2>自定义样式和插槽</h2><Breadcrumbs:items="[{ text: '首页', to: '/', icon: HomeIcon },{ text: '商品分类', to: '/category' },{ text: '电子产品' }]"separator=">"active-class="custom-active"container-class="custom-container"item-class="custom-item"separator-class="custom-separator"><template #item="{ item, isActive }"><span :class="{ 'custom-link': !isActive }"><component :is="item.icon" v-if="item.icon" />{{ item.text }}</span></template><template #separator><span class="custom-sep"></span></template></Breadcrumbs></div>
</template><script setup>
import Breadcrumbs from '@/components/Breadcrumbs/Breadcrumbs.vue';
import HomeIcon from '@/components/icons/Home.vue';const handleItemClick = (item, event) => {console.log('Clicked item:', item);// 自定义处理逻辑
};
</script><style>
.my-breadcrumbs {--link-color: #409eff;--active-color: #909399;
}.custom-container {padding: 12px;background: #f5f7fa;
}.custom-item {font-size: 0.9em;
}.custom-separator {color: #c0c4cc;
}.custom-active {font-weight: bold;
}.custom-link {color: #606266;
}.custom-sep {margin: 0 12px;
}
</style>

📘优化建议:

  1. 响应式折叠:可以添加一个 maxItems 属性,当面包屑项超过指定数量时自动折叠中间项
  2. 过渡动画:为面包屑变化添加淡入淡出过渡效果
  3. 路由匹配:自动根据当前路由生成面包屑路径(需配合路由配置)
  4. 主题系统:通过CSS变量提供更多可定制选项(如间距、字体大小等)
  5. 键盘导航:添加键盘焦点样式和支持键盘操作

📘组件特点:

  • 完全支持Vue Router集成
  • 完善的ARIA可访问性支持
  • 通过CSS变量实现主题定制
  • 灵活的内容插槽系统
  • 类型验证和防御性编程
  • 移动端友好的响应式设计

📘使用时请确保:

  1. 已安装并配置vue-router
  2. 图标组件需要提前注册或导入
  3. 根据实际需求调整CSS变量值

📚代码测试

正常

📚上面是主要代码,为了代码正常跑通,附其他辅助代码。

📘编写 src\router\index.js

🗂️文件位置

\router\index.js

📝代码
import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'progress',component:  () => import('../views/ProgressView.vue'),},{path: '/tabs',name: 'tabs',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.// 标签页(Tabs)component: () => import('../views/TabsView.vue'),},{path: '/accordion',name: 'accordion',// 折叠面板(Accordion)component: () => import('../views/AccordionView.vue'),},{path: '/timeline',name: 'timeline',// 时间线(Timeline)component: () => import('../views/TimelineView.vue'),},{path: '/backToTop',name: 'backToTop',component: () => import('../views/BackToTopView.vue')},{path: '/notification',name: 'notification',component: () => import('../views/NotificationView.vue')},{path: '/card',name: 'card',component: () => import('../views/CardView.vue')},{path: '/infiniteScroll',name: 'infiniteScroll',component: () => import('../views/InfiniteScrollView.vue')},{path: '/switch',name: 'switch',component: () => import('../views/SwitchView.vue')},{path: '/sidebar',name: 'sidebar',component: () => import('../views/SidebarView.vue')},{path: '/breadcrumbs',name: 'breadcrumbs',component: () => import('../views/BreadcrumbsView.vue')}],
})export default router

📘编写 src\App.vue

🗂️文件位置

 src\App.vue

📝代码
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script><template><header><img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /><div class="wrapper"><HelloWorld msg="You did it!" /><nav><RouterLink to="/">Progress</RouterLink><RouterLink to="/tabs">Tabs</RouterLink><RouterLink to="/accordion">Accordion</RouterLink><RouterLink to="/timeline">Timeline</RouterLink><RouterLink to="/backToTop">BackToTop</RouterLink><RouterLink to="/notification">Notification</RouterLink><RouterLink to="/card">Card</RouterLink><RouterLink to="/infiniteScroll">InfiniteScroll</RouterLink><RouterLink to="/switch">Switch</RouterLink><RouterLink to="/sidebar">Sidebar</RouterLink><RouterLink to="/breadcrumbs">Breadcrumbs</RouterLink></nav></div></header><RouterView />
</template><style scoped>
header {line-height: 1.5;max-height: 100vh;
}.logo {display: block;margin: 0 auto 2rem;
}nav {width: 100%;font-size: 12px;text-align: center;margin-top: 2rem;
}nav a.router-link-exact-active {color: var(--color-text);
}nav a.router-link-exact-active:hover {background-color: transparent;
}nav a {display: inline-block;padding: 0 1rem;border-left: 1px solid var(--color-border);
}nav a:first-of-type {border: 0;
}@media (min-width: 1024px) {header {display: flex;place-items: center;padding-right: calc(var(--section-gap) / 2);}.logo {margin: 0 2rem 0 0;}header .wrapper {display: flex;place-items: flex-start;flex-wrap: wrap;}nav {text-align: left;margin-left: -1rem;font-size: 1rem;padding: 1rem 0;margin-top: 1rem;}
}
</style>

📚页面效果

页面效果

📚自己部署 DeepSeek 安装地址

蓝耘元生代智算云平台地址:https://cloud.lanyun.net/#/registerPage?promoterCode=07100c37a0

📚相关文章

 

———— 相 关 文 章 ————

 

  1. 0基础3步部署自己的DeepSeek安装步骤

  2. DeepSeek 助力 Vue 开发:打造丝滑的步骤条(Step bar)

  3. DeepSeek 助力 Vue 开发:打造丝滑的进度条(Progress Bar)

  4. 自己部署 DeepSeek 助力 Vue 开发:打造丝滑的标签页(Tabs)

  5. 自己部署 DeepSeek 助力 Vue 开发:打造丝滑的折叠面板(Accordion)

  6. 自己部署 DeepSeek 助力 Vue 开发:打造丝滑的时间线(Timeline )

  7. DeepSeek 助力 Vue 开发:打造丝滑的返回顶部按钮(Back to Top)

  8. DeepSeek 助力 Vue 开发:打造丝滑的通知栏(Notification Bar)

  9. DeepSeek 助力 Vue 开发:打造丝滑的卡片(Card)

  10. DeepSeek 助力 Vue 开发:打造丝滑的无限滚动(Infinite Scroll)

  11. DeepSeek 助力 Vue 开发:打造丝滑的开关切换(Switch)

  12. DeepSeek 助力 Vue 开发:打造丝滑的侧边栏(Sidebar)

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家多多支持宝码香车~💕,若转载本文,一定注明本文链接。


整理不易,点赞关注宝码香车

更多专栏订阅推荐:
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象(Date())操作

相关文章:

DeepSeek 助力 Vue 开发:打造丝滑的面包屑导航(Breadcrumbs)

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 Deep…...

IntelliJ IDEA 2024.1.4版无Tomcat配置

IntelliJ IDEA 2024.1.4 (Ultimate Edition) 安装完成后&#xff0c;调试项目发现找不到Tomcat服务&#xff1a; 按照常规操作添加&#xff0c;发现服务插件中没有Tomcat。。。 解决方法 1、找到IDE设置窗口 2、点击Plugins按钮&#xff0c;进入插件窗口&#xff0c;搜索T…...

chrome://version/

浏览器输入&#xff1a; chrome://version/ Google浏览器版本号以及安装路径 Google Chrome131.0.6778.205 (正式版本) &#xff08;64 位&#xff09; (cohort: Stable) 修订版本81b36b9535e3e3b610a52df3da48cd81362ec860-refs/branch-heads/6778_155{#8}操作系统Windows…...

知识图谱数据库 Neo4j in Docker笔记

下载 docker pull neo4j:community官方说明 https://neo4j.com/docs/operations-manual/2025.01/docker/introduction/ 启动 docker run \--restart always \--publish7474:7474 --publish7687:7687 \--env NEO4J_AUTHneo4j/your_password \--volumeD:\files\knowledgegrap…...

【动手学强化学习】02多臂老虎机

问题定义 强化学习关注的是在于环境交互中学习&#xff0c;是一种试错学习的范式。在正式进入强化学习之前&#xff0c;我们先来了解多臂老虎机问题。该问题也被看作简化版的强化学习&#xff0c;帮助我们更快地过度到强化学习阶段。 有一个拥有 K K K 根拉杆的老虎机&#…...

【网络编程】之Udp网络通信步骤

【网络编程】之Udp网络通信步骤 TCP网络通信TCP网络通信的步骤对于服务器端对于客户端 TCP实现echo功能代码实现服务器端getsockname函数介绍 客户端效果展示 对比两组函数 TCP网络通信 TCP网络通信的步骤 对于服务器端 创建监听套接字。&#xff08;调用socket函数&#xff…...

Java 基于 SpringBoot+Vue 的家政服务管理平台设计与实现

博主介绍&#xff1a;✌程序员徐师兄、8年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战*✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447…...

架构——Nginx功能、职责、原理、配置示例、应用场景

以下是关于 Nginx 的功能、职责、原理、配置示例、应用场景及其高性能原因的详细说明&#xff1a; 一、Nginx 的核心功能 1. 静态资源服务 功能&#xff1a;直接返回静态文件&#xff08;如 HTML、CSS、JS、图片、视频等&#xff09;。配置示例&#xff1a;server {listen 80…...

Spring Boot中使用Flyway进行数据库迁移

文章目录 概要Spring Boot 集成 FlywayFlyway 其他用法bug错误Flyway版本不兼容数据库存在表了Flyway 的校验和&#xff08;Checksum&#xff09;不匹配 概要 在 Spring Boot 项目开发中&#xff0c;数据库的变更不可避免。手动执行 SQL 脚本不仅容易出错&#xff0c;也难以维…...

CAS单点登录(第7版)9.属性

如有疑问&#xff0c;请看视频&#xff1a;CAS单点登录&#xff08;第7版&#xff09; 属性 属性定义 概述 属性定义 从身份验证或属性存储库源获取和解析 CAS 中属性的定义时&#xff0c;往往使用其名称进行定义和引用&#xff0c;而无需任何其他元数据或修饰。例如&#…...

137,【4】 buuctf web [SCTF2019]Flag Shop

进入靶场 都点击看看 发现点击work会增加&#xffe5; 但肯定不能一直点下去 抓包看看 这看起来是一个 JWT&#xff08;JSON Web Token&#xff09;字符串。JWT 通常由三部分组成&#xff0c;通过点&#xff08;.&#xff09;分隔&#xff0c;分别是头部&#xff08;Header&…...

P9853 [入门赛 #17] 方程求解

P9853 [入门赛 #17] 方程求解 - 洛谷 题目描述 小A有n个关于x的方程&#xff0c;第i个方程形如ai​xi​bi​ci​。方程的解x均为正整数&#xff0c;例如下面几个方程都是符合要求的方程&#xff1a; 2x 4 10 -3x 13 10 4x - 8 16 其中&#xff0c;第一组方程的解为x1​…...

【网络安全 | 漏洞挖掘】跨子域账户合并导致的账户劫持与删除

未经许可,不得转载。 文章目录 概述正文漏洞成因概述 在对目标系统进行安全测试时,发现其运行着两个独立的域名——一个用于司机用户,一个用于开发者/企业用户。表面上看,这两个域名各自独立管理账户,但测试表明它们在处理电子邮件变更时存在严重的逻辑漏洞。该漏洞允许攻…...

spring集成activiti流程引擎(源码)

前言 activiti工作流引擎项目&#xff0c;企业erp、oa、hr、crm等企事业办公系统轻松落地&#xff0c;请假审批demo从流程绘制到审批结束实例。 源码获取&#xff1a;本文末个人名片直接获取。 一、项目形式 springbootvueactiviti集成了activiti在线编辑器&#xff0c;流行…...

ROS基本功能

1.Topic话题与Message消息&#xff08;主要通讯方式&#xff09; 基本规则 发布消息的步骤 常用工具 话题的订阅 使用launch启动多个节点...

C++基础系列【13】类的成员初始化

博主介绍&#xff1a;程序喵大人 35- 资深C/C/Rust/Android/iOS客户端开发10年大厂工作经验嵌入式/人工智能/自动驾驶/音视频/游戏开发入门级选手《C20高级编程》《C23高级编程》等多本书籍著译者更多原创精品文章&#xff0c;首发gzh&#xff0c;见文末&#x1f447;&#x1f…...

Redis 03章——10大数据类型概述

一、which10 &#xff08;1&#xff09;一图 &#xff08;2&#xff09;提前声明 这里说的数据类型是value的数据类型&#xff0c;key的类型都是字符串 官网&#xff1a;Understand Redis data types | Docs &#xff08;3&#xff09;分别是 1.3.1redis字符串&#xff0…...

Ubuntu 上安装 Elasticsearch 7.6.0

要在 Ubuntu 24.04 上安装 Elasticsearch 7.6.0&#xff0c;可以按照以下步骤进行&#xff1a; 步骤 1: 更新系统依赖 确保系统是最新的&#xff0c;并安装必要的依赖包&#xff1a; sudo apt update sudo apt upgrade -y sudo apt install -y apt-transport-https openjdk-1…...

Android ListPreference使用

Android ListPreference使用 参考 添加链接描述 导入 androidx.preference.ListPreferenceListPreference是Android中的一个Preference子类,用于显示一个可选择的列表,并且可以保存用户所选择的值。它继承自DialogPreference,可以在用户点击时弹出一个对话框,显示可选择的…...

Java 大视界 -- 绿色大数据:Java 技术在节能减排中的应用与实践(90)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...