DeepSeek 助力 Vue 开发:打造丝滑的面包屑导航(Breadcrumbs)
前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕
目录
- 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应用。
进入应用。
📚页面效果
📚指令输入
已经创建好了一个基于Vue3的组合式API的项目(Composition API),并能正常运行起来,请帮我用 Vue3的组合式API(Composition API) 生成一个 面包屑导航(Breadcrumbs) 的功能组件,所有代码都保存在components/Breadcrumbs 下的文件夹中。功能组件的script标签中只有setup属性,使用普通 JavaScript 实现,不使用TypeScript。
功能要有,如下属性:
为了创建一个灵活且可重用的 Vue3 面包屑导航组件,以下是建议的属性和事件定义,以及其他关键实现要点:
1. 属性 (Props)
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
items | BreadcrumbItem[] | 必填 | 面包屑项数组,每个元素包含 text , to , icon 等字段 |
separator | string | Component | '/' | 分隔符(支持文本或图标组件) |
disableRouter | boolean | false | 是否禁用自动路由跳转(触发事件代替) |
activeClass | string | 'active' | 当前激活项的 CSS 类名(通常最后一个项自动激活) |
containerClass | string | '' | 容器元素的自定义类名 |
itemClass | string | '' | 每个面包屑项的自定义类名 |
separatorClass | string | '' | 分隔符的自定义类名 |
2. 事件 (Events)
事件名 | 参数 | 说明 |
---|---|---|
item-click | (item: BreadcrumbItem, event: MouseEvent) | 点击面包屑项时触发(disableRouter 为 true 时需手动处理跳转) |
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>
📘优化建议:
- 响应式折叠:可以添加一个
maxItems
属性,当面包屑项超过指定数量时自动折叠中间项 - 过渡动画:为面包屑变化添加淡入淡出过渡效果
- 路由匹配:自动根据当前路由生成面包屑路径(需配合路由配置)
- 主题系统:通过CSS变量提供更多可定制选项(如间距、字体大小等)
- 键盘导航:添加键盘焦点样式和支持键盘操作
📘组件特点:
- 完全支持Vue Router集成
- 完善的ARIA可访问性支持
- 通过CSS变量实现主题定制
- 灵活的内容插槽系统
- 类型验证和防御性编程
- 移动端友好的响应式设计
📘使用时请确保:
- 已安装并配置vue-router
- 图标组件需要提前注册或导入
- 根据实际需求调整CSS变量值
📚代码测试
正常
📚上面是主要代码,为了代码正常跑通,附其他辅助代码。
📘编写 src\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
🗂️文件位置
📝代码
<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
📚相关文章
-
0基础3步部署自己的DeepSeek安装步骤
-
DeepSeek 助力 Vue 开发:打造丝滑的步骤条(Step bar)
-
DeepSeek 助力 Vue 开发:打造丝滑的进度条(Progress Bar)
-
自己部署 DeepSeek 助力 Vue 开发:打造丝滑的标签页(Tabs)
-
自己部署 DeepSeek 助力 Vue 开发:打造丝滑的折叠面板(Accordion)
-
自己部署 DeepSeek 助力 Vue 开发:打造丝滑的时间线(Timeline )
-
DeepSeek 助力 Vue 开发:打造丝滑的返回顶部按钮(Back to Top)
-
DeepSeek 助力 Vue 开发:打造丝滑的通知栏(Notification Bar)
-
DeepSeek 助力 Vue 开发:打造丝滑的卡片(Card)
-
DeepSeek 助力 Vue 开发:打造丝滑的无限滚动(Infinite Scroll)
-
DeepSeek 助力 Vue 开发:打造丝滑的开关切换(Switch)
-
DeepSeek 助力 Vue 开发:打造丝滑的侧边栏(Sidebar)
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家多多支持宝码香车~💕,若转载本文,一定注明本文链接。
更多专栏订阅推荐:
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象(Date())操作
相关文章:

DeepSeek 助力 Vue 开发:打造丝滑的面包屑导航(Breadcrumbs)
前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 💕 目录 Deep…...

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

chrome://version/
浏览器输入: chrome://version/ Google浏览器版本号以及安装路径 Google Chrome131.0.6778.205 (正式版本) (64 位) (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多臂老虎机
问题定义 强化学习关注的是在于环境交互中学习,是一种试错学习的范式。在正式进入强化学习之前,我们先来了解多臂老虎机问题。该问题也被看作简化版的强化学习,帮助我们更快地过度到强化学习阶段。 有一个拥有 K K K 根拉杆的老虎机&#…...

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

Java 基于 SpringBoot+Vue 的家政服务管理平台设计与实现
博主介绍:✌程序员徐师兄、8年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战*✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…...

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

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

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

137,【4】 buuctf web [SCTF2019]Flag Shop
进入靶场 都点击看看 发现点击work会增加¥ 但肯定不能一直点下去 抓包看看 这看起来是一个 JWT(JSON Web Token)字符串。JWT 通常由三部分组成,通过点(.)分隔,分别是头部(Header&…...

P9853 [入门赛 #17] 方程求解
P9853 [入门赛 #17] 方程求解 - 洛谷 题目描述 小A有n个关于x的方程,第i个方程形如aixibici。方程的解x均为正整数,例如下面几个方程都是符合要求的方程: 2x 4 10 -3x 13 10 4x - 8 16 其中,第一组方程的解为x1…...
【网络安全 | 漏洞挖掘】跨子域账户合并导致的账户劫持与删除
未经许可,不得转载。 文章目录 概述正文漏洞成因概述 在对目标系统进行安全测试时,发现其运行着两个独立的域名——一个用于司机用户,一个用于开发者/企业用户。表面上看,这两个域名各自独立管理账户,但测试表明它们在处理电子邮件变更时存在严重的逻辑漏洞。该漏洞允许攻…...

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

ROS基本功能
1.Topic话题与Message消息(主要通讯方式) 基本规则 发布消息的步骤 常用工具 话题的订阅 使用launch启动多个节点...
C++基础系列【13】类的成员初始化
博主介绍:程序喵大人 35- 资深C/C/Rust/Android/iOS客户端开发10年大厂工作经验嵌入式/人工智能/自动驾驶/音视频/游戏开发入门级选手《C20高级编程》《C23高级编程》等多本书籍著译者更多原创精品文章,首发gzh,见文末👇…...

Redis 03章——10大数据类型概述
一、which10 (1)一图 (2)提前声明 这里说的数据类型是value的数据类型,key的类型都是字符串 官网:Understand Redis data types | Docs (3)分别是 1.3.1redis字符串࿰…...
Ubuntu 上安装 Elasticsearch 7.6.0
要在 Ubuntu 24.04 上安装 Elasticsearch 7.6.0,可以按照以下步骤进行: 步骤 1: 更新系统依赖 确保系统是最新的,并安装必要的依赖包: 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)
💖亲爱的朋友们,热烈欢迎来到 青云交的博客!能与诸位在此相逢,我倍感荣幸。在这飞速更迭的时代,我们都渴望一方心灵净土,而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识,也…...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...

大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入,一个是通过INMP441麦克风模块采集音频,一个是通过PCM5102A模块播放音频,那如果我们将两者结合起来,将麦克风采集到的音频通过PCM5102A播放,是不是就可以做一个扩音器了呢…...

初学 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:通过低成本全身远程操作学习双手移动操作 传统模仿学习(Imitation Learning)缺点:聚焦与桌面操作,缺乏通用任务所需的移动性和灵活性 本论文优点:(1)在ALOHA…...

GruntJS-前端自动化任务运行器从入门到实战
Grunt 完全指南:从入门到实战 一、Grunt 是什么? Grunt是一个基于 Node.js 的前端自动化任务运行器,主要用于自动化执行项目开发中重复性高的任务,例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...
Webpack性能优化:构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果:Webpack 4比Webpack 3构建时间降低60%-98%。原因: V8引擎优化(for of替代forEach、Map/Set替代Object)。默认使用更快的md4哈希算法。AST直接从Loa…...

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