- 博客(98)
- 收藏
- 关注
RSS订阅原创 表单校验规则
这里简单记录下vue使用表单时候，给表单添加校验规则，直接上代码<script setup> import { ref } from 'vue' // 定义表单对象 const form = ref({ account: '', password: '' }) // 定义表单验证规则 const rules = { account: [ {required: true, m
2024-11-24 21:25:51
565
原创 通用组件统一注册全局
例如这里想要将components文件夹中的组件进行全局配置可通过以下方式。配置完成后就可在文件中直接使用，而不用导入。修改main.js文件。
2024-11-24 10:11:20
148
原创 小图切换大图及放大镜实现
实现类似淘宝京东平台图片预览功能，鼠标放在右侧图片上时，左侧会实时显示右侧图片。鼠标放在左侧大图上时候实现放大镜效果，查看图片细节。
2024-11-23 23:32:33
602
原创 vue渲染模板遇到多层属性访问
[1].id} 在取[1]之前先?一下，若categories有值，然后才再去取值，即 .[1]。2. 第二种方式就是用v-if的方式，当有值的时候才去取值。这种值的，因此可以用可选链的方式，时候不要直接写，因为若。1.可选链，例如获取。
2024-11-15 00:11:20
596
原创 解决路由缓存问题
使用带有参数的路由时，相同的组件实例被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，服用则更显得高效，但是这也意味着组件的生命周期的钩子不会被调用。
2024-11-09 10:34:16
398
原创 EL面包屑导航实现
el-breadcrumb 是 Element Plus 中的面包屑导航组件，主要用于展示当前页面在整个应用程序中的位置，并提供导航功能。
2024-11-05 23:34:16
841
原创 vue3图片懒加载
界面很长，屏幕不能一下装下所有内容，如果以进入首页就把所有内容都加载完的话所需时间较长，会影响用户体验，所以可以当用户浏览到时再去加载。
2024-11-03 17:57:35
527
原创 el-carousel 轮播图
importfrom;constref;log;;height;position;left;top;z-index;imgheight;width;</
2024-10-31 23:38:01
258
原创 Element-plus安装
我们建议您使用包管理器（如 NPM、Yarn 或 pnpm）安装 Element Plus，然后您就可以使用打包工具，例如 Vite 或 webpack。
2024-10-19 22:31:28
364
原创 vue3路由
新建router文件夹，编写index.ts文件// 第一步：引入createRouter、createWebHashHistory// 第二步：引入组件// 第三步：创建路由实例routes:[},},})// 第四步：导出路由实例。
2024-09-26 23:11:19
559
原创 vue3自定义hooks
/ 数据]);// 方法try {debugger;// 返回数据和方法return {dogList,getDogList。
2024-09-23 23:04:29
825
原创 后端Controller获取成功，但是前端报错404
今天要做一个查看详情功能，debug时候能够成功进入到对应的Controller方法，Contorller方法里面也能得到对应的数据，但是前端页面一直报错404，显示对应的Controller方法路径找不到。
2024-09-12 15:18:05
591
原创 标签的ref属性
当我们想要获取一个标签对应的 DOM 元素的时候在 JavaScript 中，我们通过 document.getElementById() 来借助类选择器的写法获取，但是在 Vue 中，我们的 DOM 元素是挂载在同一个网页上的，这些名称难免会重复，所以需要别的方式去获取，给标签添加ref属性正好可以解决这个问题。
2024-09-09 23:30:57
1077
原创 watch监视与watchEffect监视
什么是watchwatch 的作用是用于监测响应式属性的变化，并在属性发生改变时执行特定的操作，它是 Vue 中的一种响应式机制，允许你在数据发生变化时做出相应的响应，执行自定义的逻辑。watch 使得在响应式属性变化时能够有更多的控制权和灵活性，让你的组件能够更好地响应数据的变化并执行相应的逻辑。watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。监听数据类型1.一个 ref() 定义的响应式数据2. 一个 reactive() 定义的响应式数据3. 一个getter 函数
2024-09-08 23:02:15
820
原创 Compute 计算属性
当我们有时候需要将模版中的某一个数据进行一系列处理后从而得到一个新的值，虽然 Vue 的模版中能够支持我们写一些表达式但是这样会使得我们的模板变得臃肿且不够灵活定制化，所以 Vue 也并不推荐我们在模板中写太多的表达式。因此 Vue 推荐我们使用计算属性（computed）来描述依赖响应式状态的复杂逻辑。当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用中的属性值。
2024-09-02 23:29:40
1148
原创 ref 和 reactive 区别
前言ref 和 reactive是Vue 3中响应式编程的核心。在Vue中，响应式编程是一种使数据与UI保持同步的方式。当数据变化时，UI会自动更新，反之亦然。这种机制大大简化了前端开发，使我们能够专注于数据和用户界面的交互，而不必手动处理DOM更新。refref是Vue 3中的一个简单响应式API，用于创建一个包装基本数据类型的响应式引用(也可以包装复杂类型，只不过底层还是由reactive的方式实现的)。它的主要优点是能够轻松包装基本数据类型，并且具有清晰的访问和更新方式ref创建基本类型的响应
2024-08-31 16:17:02
1362
1
原创 WebSocket简介
WebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。下面借用一张图来说明HTTP与WebSocket的区别WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息，而HTTP是单向的。
2024-08-25 15:06:04
806
原创 Java的jdk配置成功，但是输入java -version等，命令行没有任何反应
Java下载后，手动配置环境变量，并且配置好，但是在命令行中无论输入java的什么都没有反应。
2024-08-17 00:29:42
285
原创 Apache POI 实现 Excel 表格下载
这里以苍穹外卖中数据导出功能为例，记录下 Apache POI 导出 Excel 表格的过程。首先在 pom.xml 中导入相关依赖</</</</</</
2024-08-08 22:58:45
434
原创 该文件没有与之关联的应用来执行该操作
搜了好多帖子说是注册表有问题，这里记录我自己解决这个问题的方式，其实很简单，就是在 tomcat 配置那里，不要选择 default， 给它指定一个浏览器就好。这里记录一下在使用 IDEA 运行 Web 项目时候遇到的一个错误。
2024-08-01 23:28:29
316
原创 SpringBoot缓存注解使用
除了 RedisTemplate 外， 自Spring3.1开始，Spring自带了对缓存的支持。我们可以直接使用Spring缓存技术将某些数据放入本机的缓存中；Spring缓存技术也可以搭配其他缓存中间件(如Redis等)进行使用，将某些数据写入到缓存中间件(缓存中间件可能在其他机器上)中。
2024-07-20 14:48:34
530
原创 Linux进程管理
语法： ps [-e -f]选项： -e ，显示出全部的进程选项： -f ，以完全格式化的形式展示信息（展示全部信息）一般来说，固定用法就是： ps -ef列出全部进程的全部信息。也可配合管道符 | 使用。ps -ef | grep 关键字上述语句可过滤指定关键字进程信息。
2024-07-05 23:01:44
397
原创 Linux 端口
计算机程序之间的通讯，通过IP只能锁定计算机，但是无法锁定具体的程序。通过端口可以锁定计算机上具体的程序，确保程序之间进行沟通。IP地址相当于小区地址，在小区内可以有许多用户（程序），而门牌号（端口）就是各个住户（程序）的联系地址。如图，若计算机A和计算机B要通讯，通过IP地址即可。计算机A上的程序和计算机B上的程序要通讯，就要通过端口。
2024-07-05 22:48:08
433
原创 Linux配置固定ip地址
虚拟机的Linux操作系统，其IP地址是通过DHCP服务获取的DHCP：动态获取IP地址，即每次重启设备后都会获取一次，可能导致IP地址频繁变更。
2024-07-05 21:20:07
466
原创 日期和时区
修改时区可分为两步rm -f /etc/localtimesudo ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime。
2024-07-03 20:42:41
137
原创 systemctl命令使用
systemctl start | stop | status | enable | disabel 服务名。这里以防火墙为例介绍 systemctl 命令的使用。
2024-07-03 20:09:55
263
原创 linux快捷键
例如这里之前输入过 python 命令，当要在此输入时，若命令太长就可用!+ 命令前缀的形式，系统会自动从下往上自动按照前缀自动匹配，例如这里的!p 命令，系统就会自动匹配到 python 命令。
2024-07-03 17:39:43
144
原创 权限控制信息
作用：修改文件、文件夹的权限细节，即第一图中序号1的部分。只能是文件、文件夹有权修改。语法：chmod [-R] 权限 文件或文件夹选项： -R， 对文件夹内的全部内容应用同样规则权限的数字序号r代表4，w代表2，r代表1。这里修改test.txt文件的权限，未修改前权限是 rw-r–r–，，现在要将其权限修改为rwxrw-rwx，可以使用命令：需要注意的是该语句必须用"," 隔开，不能用空格。
2024-07-02 21:32:41
272
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人