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

vue3学习日记8 - 一级分类

news 来源：原创 2025/6/18 3:16:14

最近发现职场前端用的框架大多为vue，所以最近也跟着黑马程序员vue3的课程进行学习，以下是我的学习记录

视频网址：

Day2-17.Layout-Pinia优化重复请求_哔哩哔哩_bilibili

学习日记：

vue3学习日记1 - 环境搭建-CSDN博客

vue3学习日记2 - 组合式API基础学习-CSDN博客

vue3学习日记3 - 组合式API练习小案例-CSDN博客

vue3学习日记4 - Pinia-CSDN博客

vue3学习日记5 - 项目起步-CSDN博客

vue3学习日记6 - Layout-CSDN博客

vue3学习日记7 - Home页面-CSDN博客

一、整体认识和路由配置

1、想要实现效果，点击后跳转页面，后面根据id不同展示的页面数据不同

2、修改router文件夹下，index.js文件

3、修改LayoutHeader和LayoutFixed文件

4、运行截图

二、面包屑导航(路由传参)

1、想要实现的效果

点击居家，后面会显示居家，点击美食，后面会显示美食

2、修改以下文件夹下的文件

<script setup>
import {getCategoryAPI} from '@/apis/Category'
import { onMounted, ref } from 'vue'
// 引入useRoute
import { useRoute } from 'vue-router'
const categoryData = ref({})
const route = useRoute()
const getCategory = async () => {// 使用route.params.id获取路由传递的参数，并传给接口const res = await getCategoryAPI(route.params.id)categoryData.value = res.result
}
onMounted(()=>getCategory())
</script>
<template><div class="top-category"><div class="container m-top-20"><!-- 面包屑 --><div class="bread-container"><el-breadcrumb separator=">"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item></el-breadcrumb></div></div></div>
</template>
<style scoped lang="scss">
.top-category {h3 {font-size: 28px;color: #666;font-weight: normal;text-align: center;line-height: 100px;}.sub-list {margin-top: 20px;background-color: #fff;ul {display: flex;padding: 0 32px;flex-wrap: wrap;li {width: 168px;height: 160px;a {text-align: center;display: block;font-size: 16px;img {width: 100px;height: 100px;}p {line-height: 40px;}&:hover {color: $xtxColor;}}}}}.ref-goods {background-color: #fff;margin-top: 20px;position: relative;.head {.xtx-more {position: absolute;top: 20px;right: 20px;}.tag {text-align: center;color: #999;font-size: 20px;position: relative;top: -20px;}}.body {display: flex;justify-content: space-around;padding: 0 40px 30px;}}.bread-container {padding: 25px 0;}
}
</style>

3、在以下文件夹下建立新文件

// 导入
import request from '@/utils/http'
// 获取Category页面数据，传参为id
export const getCategoryAPI = (id) => {return request({url:'/category',params:{id}})
}

4、运行结果

三、实现Banner轮播图（默认参数，传入参数）

1、修改Home中访问轮播图接口(主页为1，商品页为2)

// params = {} : 默认传入的是空对象
export function getBannerAPI(params = {}){// 如果params中没有distributionSite的值默认是1，反之distributionSite的值为传入的值const { distributionSite = '1'} = paramsreturn httpInstance({url:'/home/banner',params:{distributionSite}})
}

2、修改Categorize的页面代码

<script setup>
import {getBannerAPI} from '@/apis/Home.js'
import {getCategoryAPI} from '@/apis/Category'
import { onMounted, ref } from 'vue'
/*** 面包屑*/
// 引入useRoute
import { useRoute } from 'vue-router'
const categoryData = ref({})
const route = useRoute()
const getCategory = async () => {// 使用route.params.id获取路由传递的参数，并传给接口const res = await getCategoryAPI(route.params.id)categoryData.value = res.result
}
onMounted(()=>getCategory())/*** banner轮播图*/
// 设置响应式数据bannerList
const bannerList = ref([])
// 访问接口，将获取到的数据赋值给bannerList
const getBanner = async () => {const res = await getBannerAPI({distributionSite:'2'})bannerList.value = res.result
}
// 挂载时调用方法
onMounted(()=>getBanner())
</script><template><div class="top-category"><div class="container m-top-20"><!-- 面包屑 --><div class="bread-container"><el-breadcrumb separator=">"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item></el-breadcrumb></div><!-- 轮播图 --><div class="home-banner"><el-carousel height="500px"><!-- 将接口返回的数据，渲染在页面上 --><el-carousel-item v-for="item in bannerList" :key="item.id"><img :src="item.imgUrl" alt=""></el-carousel-item></el-carousel></div></div></div>
</template><style scoped lang="scss">
.top-category {h3 {font-size: 28px;color: #666;font-weight: normal;text-align: center;line-height: 100px;}.sub-list {margin-top: 20px;background-color: #fff;ul {display: flex;padding: 0 32px;flex-wrap: wrap;li {width: 168px;height: 160px;a {text-align: center;display: block;font-size: 16px;img {width: 100px;height: 100px;}p {line-height: 40px;}&:hover {color: $xtxColor;}}}}}.ref-goods {background-color: #fff;margin-top: 20px;position: relative;.head {.xtx-more {position: absolute;top: 20px;right: 20px;}.tag {text-align: center;color: #999;font-size: 20px;position: relative;top: -20px;}}.body {display: flex;justify-content: space-around;padding: 0 40px 30px;}}.bread-container {padding: 25px 0;}
}
.home-banner {width: 1240px;height: 500px;margin: 0 auto;img {width: 100%;height: 500px;}
}
</style>

3、运行截图

四、激活状态控制

1、发现问题

2、修改部分代码

使用RouteLink中的active-class属性即可实现

设置样式

3、运行截图

五、分类列表的实现

1、模板

<div class="sub-list"><h3>全部分类</h3><ul><li v-for="i in categoryData.children" :key="i.id"><RouterLink to="/"><img :src="i.picture" /><p>{{ i.name }}</p></RouterLink></li></ul>
</div>
<div class="ref-goods" v-for="item in categoryData.children" :key="item.id"><div class="head"><h3>- {{ item.name }}-</h3></div><div class="body"><GoodsItem v-for="good in item.goods" :good="good" :key="good.id" /></div>
</div>

2、引入GoodItem

import GoodsItem from '@/views/Home/componments/GoodsItem.vue'

3、运行截图

六、路由缓存问题

1、发现问题

运行项目时可以发现，当点击“服饰”和“母婴”，页面并没有变化

这是因为当使用带有参数的路由时，相同的组件实例将被复用，使其更高效，但与此同时，组件的生命周期不会被调用，页面数据不会更新

2、解决思路

1、让组件实例不复用，强制销毁重建

可以用:key，：key常常与v-for联合使用，但是它也可以用于强制替换一个元素或者钩子

运行结果

缺点

存在性能问题，比如说，上面的Banner在每个板块都是一样的，但是一切换，就需要访问banner的接口，影响性能

2、监听路由变化，变化后执行数据更新操作

使用onBeforeRouteUpdate导航钩子

onBeforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可

修改Categorize文件夹下index.vue文件

运行结果

3、问题小结

1、路由缓存问题产生的原因是什么？

路由只有参数变换时，会复用组件实例，但是生命周期不调用

2、两种方案都可以解决路由缓存问题，如何选择呢？

可以根据自己的实际开发环境进行抉择 1、key方法：简单粗暴，不考虑性能问题 2、onBeforeRouteUpdate方法：可以精细化控制，在意性能问题时可使用

七、使用逻辑函数拆分业务

1、概念

基于逻辑函数拆分业务是指把同一个组件中独立的业务代码通过函数做封装处理，提升代码的可维护性

2、步骤

1、按照业务声明以“use”打头的逻辑函数 
2、把独立的业务逻辑封装到各个函数内部 
3、函数内部把组件中需要用到的数据或者方法return方法 
4、在组件中调用函数把数据或者方法组合回来使用

3、新建文件夹和文件

1、useBanner.js

/*** banner轮播图*/
import {getBannerAPI} from '@/apis/Home.js'
import {ref,onMounted} from 'vue'
export function useBanner(){// 设置响应式数据bannerListconst bannerList = ref([])// 访问接口，将获取到的数据赋值给bannerListconst getBanner = async () => {const res = await getBannerAPI({distributionSite:'2'})bannerList.value = res.result}// 挂载时调用方法onMounted(()=>getBanner())return {bannerList}
}

2、useCategory.js

import {getCategoryAPI} from '@/apis/Category'
import { ref,onMounted } from 'vue'
import { onBeforeRouteUpdate } from 'vue-router'
// 引入useRoute
import { useRoute } from 'vue-router'
/*** 面包屑*/
export function useCategory(){   const categoryData = ref({})const route = useRoute()// 默认id为route.params.idconst getCategory = async (id = route.params.id) => {// 使用route.params.id获取路由传递的参数，并传给接口const res = await getCategoryAPI(id)categoryData.value = res.result}onMounted(()=>getCategory())// 路由发生变化时，可以将分类数据重新获取onBeforeRouteUpdate((to)=>{// 由于由于route.params.id获取到的参数具有一定的滞后性，所以通过“to”获取实时路由参数getCategory(to.params.id)})return {categoryData}
}

3、index.vue

<script setup>
// 引入js
import GoodsItem from '@/views/Home/componments/GoodsItem.vue'
import { useCategory } from '@/views/Categorize/composables/useCategory'
import {useBanner} from '@/views/Categorize/composables/useBanner'
const { bannerList } = useBanner()
const { categoryData } = useCategory()
</script>

vue3学习日记8 - 一级分类

最近发现职场前端用的框架大多为vue，所以最近也跟着黑马程序员vue3的课程进行学习，以下是我的学习记录视频网址： Day2-17.Layout-Pinia优化重复请求_哔哩哔哩_bilibili 学习日记： vue3学习日记1 - 环境搭建-CSDN博客 vue3学…...

编程日记 2025/5/28 8:32:27

Notepad++移除所有空格

1.打开Notepad。 2.打开你想要编辑的文件。 3.按下 Ctrl H 打开查找和替换对话框，并选择 “正则表达式”。 4.在 “查找目标” 框中输入 \s。 5.在 “替换为” 框中留空，不填写任何内容。 6.点击 “全部替换” 按钮。...

编程日记 2025/5/29 19:02:41

JavaSE第八天

一、继承之super关键字 super关键字： 一个引用变量，用于引用父类对象父类和子类都具有相同的命名方法，要调用父类方法时使用父类和子类都具有相同的命名属性，要调用父类中的属性时使用 super也是父类的构造函数，…...

编程日记 2025/6/1 10:34:10

ideal jdk报错如何解决

例如: 可能一:环境变量中未配置请在Path中加入并将要使用的最好置顶,如可能二:项目结构中语言级别错误: 可能三:Maven工程中,对于模块要单独设置jdk: 如: 未设置则为默认,在博主本次展示中为:...

编程日记 2025/6/1 14:07:47

嵌入式Linux ntpclient的使用

ntpclient是一个用于与NTP（Network Time Protocol，网络时间协议）服务器通信并测量系统时间的工具。我这里用的是"ntpclient_2024_132"。下载源码编译后会得到一个ntpclient程序。下面是对ntpclient每个选项的解释： -…...

编程日记 2025/6/4 6:28:16

25/1/15 嵌入式笔记初学STM32F108

GPIO初始化函数 GPIO_Ini：初始化GPIO引脚的模式，速度和引脚号 GPIO_Init(GPIOA, &GPIO_InitStruct); // 初始化GPIOA的引脚0 GPIO输出控制函数 GPIO_SetBits：将指定的GPIO引脚设置为高电平 GPIO_SetBits(GPIOA, GPIO_Pin_0); // 将GPIO…...

编程日记 2025/6/2 2:58:25

【练习】力扣热题100 字符串解码

题目给定一个经过编码的字符串，返回它解码后的字符串。编码规则为: k[encoded_string]，表示其中方括号内部的 encoded_string 正好重复 k 次。注意 k保证为正整数。你可以认为输入字符串总是有效的；输入字符串中没有额外的空格&#xff0c…...

编程日记 2025/6/3 10:10:57

1.快慢指针-力扣-283-移动零

题目描述给定一个数组 nums，编写一个函数将所有 0 移动到数组的末尾，同时保持非零元素的相对顺序。请注意 ，必须在不复制数组的情况下原地对数组进行操作。用例示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0] 示例 2: 输入: nu…...

编程日记 2025/6/4 11:51:07

5. 使用springboot做一个音乐播放器软件项目【业务逻辑开发】

#万物oop 上一章文章我们做了音乐播放器数据表的创建。参加地址： https://blog.csdn.net/Drug_/article/details/145093705 今天分享的这篇文章就是根据数据表来写业务逻辑。今天我们主要是实现管理后台的功能。对于这篇文章的理解需要小伙伴有 springbo…...

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

配置正确spring-boot工程启动的时候报错dynamic-datasource Please check the setting of primary

一个两年没有碰的spring-boot工程，启动时报错。因为用了baomidou的多源数据库配置，因此启动时报错primary没有正确配置。经过检查，确定配置文件配置正确。报错原因是没有读到正确的配置文件。pom文件里的resources标签重定义，把…...

编程日记 2025/6/3 17:17:35

Freeswitch使用media_bug能力实现回铃音检测

利用freeswitch的media bug能力来在智能外呼时通过websocket对接智能中心的声音检测接口，来实现回铃音检测，来判断用户当前是否已响应，拒接，关机等。 1.回铃音处理流程 2.模块源码目录结构首先新建一个freeswitch的源码的src/a…...

编程日记 2025/6/4 0:28:21

Kubernetes（k8s）和Docker Compose本质区别

Kubernetes（简称 k8s）和 Docker Compose 是容器编排领域的两大重要工具，虽然它们都用于管理和编排容器化应用，但在设计目标、功能特性、使用场景和复杂度上存在显著差异。以下将从多个方面详细探讨 Kubernetes 和 Docker Compose …...

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

OSI七层协议——分层网络协议

OSI七层协议，顾名思义，分为七层，实际上七层是不存在的，是人为的进行划分,让人更好的理解七层协议包括，物理层(我),数据链路层(据),网络层(网),传输层(传输),会话层(会),表示层(表),应用层(用)(记忆口诀->我会用表…...

编程日记 2025/5/29 6:05:41

RabbitMQ 客户端连接、发送、接收处理消息

RabbitMQ 客户端连接、发送、接收处理消息一. RabbitMQ 的机制跟 Tcp、Udp、Http 这种还不太一样 RabbitMQ 服务，不是像其他服务器一样，负责逻辑处理，然后转发给客户端而是所有客户端想要向 RabbitMQ服务发送消息， 第一步&a…...

编程日记 2025/6/1 9:56:47

SQL ON与WHERE区别

在 MySQL 中，ON 和 WHERE 都用于过滤数据，但它们的使用场景和作用有所不同，尤其是在涉及 JOIN 操作时。下面通过具体的例子来说明它们的区别。 1. ON 的作用 ON 用于指定表之间的连接条件，决定哪些行应该被连接在一起。它在 JOI…...

编程日记 2025/5/29 21:43:11

[创业之路-254]：《华为数字化转型之道》-1-华为是一个由客户需求牵引、高度数字化、高度智能化、由无数个闭环流程组成的价值创造、评估、分配系统。

前言： 华为是一个由客户需求牵引、高度数字化、高度智能化、由无数个闭环流程组成的价值创造、评估、分配系统。华为的流程大到战略，小到日常工作，是由无数个自我调节自我优化的数字化闭环控制流程组成，大闭环套小闭环&#xff0…...

编程日记 2025/6/3 4:33:50

免费为企业IT规划WSUS：Windows Server 更新服务 (WSUS) 之快速入门教程（一）

哈喽大家好，欢迎来到虚拟化时代君（XNHCYL），收不到通知请将我点击星标！“ 大家好，我是虚拟化时代君，一位潜心于互联网的技术宅男。这里每天为你分享各种你感兴趣的技术、教程、软件、资源、福利…...

编程日记 2025/6/3 1:30:19

异步任务与定时任务

一、异步任务基于TaskExecutionAutoConfiguration配置类中，注册的ThreadPoolTaskExecutor线程池对象进行异步任务执行。 (一)手动执行异步任务在yml中配置线程池参数 spring: task:execution:pool:core-size: 5 # 核心线程数max-size: 20 # 最大线…...

编程日记 2025/6/4 1:49:57

大模型WebUI：Gradio全解11——Chatbot：融合大模型的多模态聊天机器人（5）

大模型WebUI：Gradio全解11——Chatbot：融合大模型的多模态聊天机器人（5） 前言本篇摘要11. Chatbot：融合大模型的多模态聊天机器人11.5 Chatbot的特殊Events11.5.1 各事件总演示11.5.2 详解.undo、.retry、.like和.edit…...

编程日记 2025/6/1 10:50:16

32单片机综合应用案例——基于GPS的车辆追踪器（三）（内附详细代码讲解！！！）

困难不会永远存在，只要你勇于面对，坚持努力，就一定能够战胜一切困难。每一次挑战都是一次成长的机会，不要害怕失败，失败是成功之母。只有经历过失败，你才能更加明白自己的不足，并不断改进自己&a…...

编程日记 2025/6/4 17:20:27

扣除价格因素与剔除季节性因素：统计数据中的“真实”增长（中英双语）

扣除价格因素与剔除季节性因素：统计数据中的“真实”增长在经济统计分析中，我们经常会听到“扣除价格因素”和“剔除季节性因素”这两个概念。这两者都是为了排除外部干扰因素，真实反映经济活动的增长情况。它们分别针对价格波动和季节性波…...

编程日记 2025/6/4 11:03:46

网卡接收报文的过程

网卡接收报文的过程通常包括以下几个关键步骤： 1. 硬件接收： • 网卡硬件首先接收到从网络传输过来的数据包。网络接口卡（NIC）负责将接收到的电信号转换为数字信号，并存储到一个硬件缓冲区中。 2. DMA传输&#xff…...

编程日记 2025/6/1 13:39:44

Windows图形界面(GUI)-QT-C/C++ - QT 对话窗口

公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页目录模态对话框非模态对话框文件对话框基本概念静态函数常见属性颜色对话框基本概念静态函数常见属性字体对话框基本概念静态函数常见属性输入对话框基本概念 …...

编程日记 2025/5/31 18:44:54

bypass--2025春秋杯冬季赛

漏洞点题目不难，这个循环赋值的结束条件是s[i]0，并且s和key再栈上的位置是挨着的那么很容易想到，第二次循环赋值的时候，有一个溢出，溢出部分的值是第一次写入的key的值。那么基本思路就是，利用这段溢出…...

编程日记 2025/6/1 5:54:19

学习微信小程序的下拉列表控件-picker

1、创建一个空白工程 2、index.wxml中写上picker布局：  <view class"container"><picker mode"selector" range"{{array}}" bindchange"bindPickerChange"><view class"pick…...

编程日记 2025/5/29 13:55:16

【17】Word：林楚楠-供应链❗

目录题目 NO1.2 NO3 NO4 NO5 NO6 NO7 NO89 题目 NO1.2 另存为：文件→另存为→文档→文件名/考生文件夹F12/FnF12→文件名/考生文件夹插入→分节符→文本框→输入文件→排版_居中对齐→间距/回车去掉文本框的边框→选中文本框→格式：形状轮廓…...

编程日记 2025/6/2 8:26:28

父子盒子滑动事件穿透问题

问题描述当父子盒子都有滚动条时，在子盒子内滚动时，父盒子滚动子盒子无法滚动，直到父盒子滚动到底部，子盒子才滚动解决如果是vue的项目，直接在子盒子上添加 wheel.stop""...

编程日记 2025/5/27 5:45:26

vue-amap、leaflet、融汇离线地图瓦片使用情况分析

vue-amap： vue3写的，使用文档 -> 文档地址 <-的离线jsApi里的demo，发现 tile-url不能读取本地项目文件夹里的瓦片，文档里写的其实还是要互联网读取的高德瓦片......... 作者在git库回复tile-url要么放项目里使用绝对路…...

编程日记 2025/6/4 5:30:48

leetcode - 1055. Shortest Way to Form String

Description A subsequence of a string is a new string that is formed from the original string by deleting some (can be none) of the characters without disturbing the relative positions of the remaining characters. (i.e., “ace” is a subsequence of “abcd…...

编程日记 2025/6/2 10:29:59

一、整体认识和路由配置

1、想要实现效果，点击后跳转页面，后面根据id不同展示的页面数据不同

2、修改router文件夹下，index.js文件

3、修改LayoutHeader和LayoutFixed文件

4、运行截图

二、面包屑导航(路由传参)

1、想要实现的效果

2、修改以下文件夹下的文件

3、在以下文件夹下建立新文件

4、运行结果

三、实现Banner轮播图（默认参数，传入参数）

1、修改Home中访问轮播图接口(主页为1，商品页为2)

2、修改Categorize的页面代码

3、运行截图

四、激活状态控制

1、发现问题

2、修改部分代码

3、运行截图

五、分类列表的实现

1、模板

2、引入GoodItem

3、运行截图

六、路由缓存问题

1、发现问题

2、解决思路

1、让组件实例不复用，强制销毁重建

运行结果

缺点

2、监听路由变化，变化后执行数据更新操作

修改Categorize文件夹下index.vue文件

运行结果

3、问题小结

1、路由缓存问题产生的原因是什么？

2、两种方案都可以解决路由缓存问题，如何选择呢？

七、使用逻辑函数拆分业务

1、概念

2、步骤

3、新建文件夹和文件

1、useBanner.js

2、useCategory.js

3、index.vue

相关文章：