前端开发
关注
分享
扫一扫
文章平均质量分 58
前端开发
博客zhu虎康
把最实用的经验，分享给最需要的读者，希望每一位来访的朋友都能有所收获！
展开
-
前端项目与学习整合集锦
实现效果按输入的行数进行显示菱形的上半部分代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1原创 2021-05-15 09:09:24 · 578 阅读 · 0 评论
-
CSS ——相关链接制作
扩展：a标签后面加 target=“_self” 是此窗口默认打开 (这个属性是默认的)a标签打开新窗口 只需要在a标签后面加 target=“_blank”原创 2024-11-01 14:51:23 · 217 阅读 · 0 评论 -
封装一个时间展示包括：年-月-日-时-分-秒-星期
实现如图所示的时间展示。原创 2024-11-01 14:49:49 · 219 阅读 · 0 评论 -
Vue 项目中导入文件时如何默认找寻该文件夹下的 index.vue 文件
如下图，在Vue 项目中导入 frequencyChange 文件夹时如何默认找寻该文件夹下的 index.vue 文件。每个目录中都有一个 index.vue 文件作为默认导出的组件。2. 添加自动导入 index.vue 的配置。原创 2024-08-08 16:53:27 · 602 阅读 · 0 评论 -
防抖与节流
在这个示例中，sendRequest() 函数用于发送请求。在每次调用该函数之前，会检查是否存在之前的请求（lastRequest），如果存在，则取消之前的请求。然后，发送新的请求，以确保获取最新的数据。针对这个场景，你可以在发送请求之前检查当前输入框的值是否发生了变化。如果输入框的值发生了变化，则取消之前的请求，并发送一个新的请求，以确保获取到最新的数据。简而言之，防抖是在事件停止触发后延迟执行函数，而节流是按照固定的时间间隔执行函数。原创 2024-05-06 15:05:32 · 885 阅读 · 0 评论 -
Vue从0-1学会如何自定义封装v-指令
自定义封装 v-指令是 Vue.js 中非常强大的功能之一，它可以让我们扩展 Vue.js 的模板语法，为 HTML 元素添加自定义行为。自定义指令允许你在 DOM 操作中封装可重用的行为，从而使你的代码更加模块化和可维护。在本篇博客中，我将从零开始向你介绍如何自定义封装 Vue.js 中的指令。创建一个指令文件 在项目的 src 目录下，创建一个 directives 文件夹。在该文件夹下，创建一个新的 JavaScript 文件来定义你的自定义指令。例如。index.js。原创 2024-04-26 16:32:51 · 980 阅读 · 1 评论 -
原生实现导航栏滑动效果
练练手——实现导航栏滑动效果。原创 2024-04-16 09:50:05 · 462 阅读 · 0 评论 -
问题：vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题）
注意：有使用layout封装布局的，是在layout下的主页面中的 router-view 添加标识，不是在src根目录下main.vue中修改（在这个文件修改会造成每次切换路由导航标签都会收起）在项目开发中，有一个页面出现跳转其他页面不显示的问题，但刷新后页面时正常显示的，其他页面跳转该页面是可以展示的问题。在router-view 中给路由添加key标识。原创 2024-04-01 08:32:22 · 1581 阅读 · 0 评论 -
数组实现对数组中对象中的指定项的查找并输出该条记录
写一个方法就能搞定，代码中定义了一个名为 findDeviceByName 的函数，它会遍历给定的数组，查找其中 deviceName 字段值等于目标名称的数据，并返回该条数据。然后根据返回结果打印输出或进行其他操作。已知返回的数据如下：，现需找到指定字段的那一项并输出。原创 2024-03-21 16:30:12 · 306 阅读 · 0 评论 -
v-for 循环遍历图片路径加载图片
这篇文章的话，项目部署后，会出现图片资源请求成功但未加载到页面上的问题，因此需要使用 import 导入。要循环遍历加载图片，就需要对图片进行处理，建议使用 import 进行导入，如果使用。原创 2024-03-13 11:16:51 · 1350 阅读 · 0 评论 -
在图片上进行标记
文章目录需求分析需求底图是一张图片，要在图上做标记，对标记的位置有交互行为鼠标滚顶页面，标记位置不发生变化页面发生缩放，标记位置不发生变化分析<template> <div v-loading="loading" class="point-map" element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0, 0.5)" element-原创 2024-03-13 11:09:34 · 928 阅读 · 0 评论 -
问题：前端获取long型数值精度丢失，后面几位都为0
该字段类型是long类型问题：前端接收到数据后，发现精度丢失，当返回的结果超过17位的时候，后面的全部变成0！超出精度部分全部变成了00。第二种办法：使用工具进行转化把 long 型改为String类型，这种方法可以实现全局转化（推荐）第一种办法：在后台把 long型改为String类型，但是代价有点大，只要涉及到的地方都需要改。通过接口获取到的数据和 Postman 获取到的数据不一样，仔细看 data 的第17位之后。第三种办法：前端进行处理（目前没有很好的办法，不推荐）或者 用这个UUID。原创 2024-03-08 18:18:04 · 1510 阅读 · 0 评论 -
vue3中的watch 和 watchEffect
执行结果首先打印一次state.count和count值（默认依赖）；然后每隔一秒，打印state.count和count值。从上面的代码可以看出， 并没有像watch一样需要先传入依赖，watchEffect会自动收集依赖, 只要指定一个回调函数。在组件初始化时， 会先执行一次来收集依赖， 然后当收集到的依赖中数据发生变化时， 就会再次执行回调函数。watchEffect 只需要一个函数，无深度、立即监听。原创 2024-01-12 14:47:02 · 484 阅读 · 0 评论 -
将 Token 存储在请求头中发送接口请求
用户登录后将 token 存储在下次接口访问的请求头中进行接口请求。原创 2023-08-31 17:06:12 · 1069 阅读 · 0 评论 -
报错：Cannot read properties of undefined (reading ‘$message‘)
是因为在 main.js 文件中，此时还未有 this，我们可以打印一下，是 null。原创 2023-08-31 17:02:09 · 2462 阅读 · 0 评论 -
报错：axios发送的所有请求都是404
对后台发送数据请求接口，在 Swagger 上是可以请求到的 但是通过 Ajax 发送请求就会报 404。没有使用代理，直接在 main.js 中设置了类似base_url的请求路径。Swagger 上调用如下。原创 2023-08-31 14:37:46 · 1306 阅读 · 0 评论 -
【报错】VIte 警告：vue-i18n.esm-bundler.js:39 You are running the esm-bundler build of vue-i18n....
你正在运行vue-i18n的esm-bundler版本。建议配置你的bundle显式地用布尔字量替换特性标志全局变量，以在最终的bundle中获得正确的tree-shaking。文件，并添加以下代码。原创 2023-08-17 14:00:12 · 858 阅读 · 0 评论 -
accept 上传类型限制整理
【代码】accept 上传类型限制整理。原创 2023-08-16 14:28:56 · 467 阅读 · 0 评论 -
拿来即用，自己封装的 axios
我的 store 中存放了用户的登录信息，在封装 axios 时只用到了 token，因此下方代码可做参考。在日常开发中，我们会经常用到 axios ，那么如何在自己的项目中自己封装 axios。，我的习惯把它放在 utils 目录下，源码如下。原创 2023-08-16 11:43:20 · 1716 阅读 · 0 评论 -
报错：在从 Git 上拉取代码后，使用 npm install 安装依赖失败，但使用 yarn 可以成功安装，这是为什么
有时候，package.json 文件中的依赖库版本与本地或全局的 Node.js 环境不兼容，或与已安装的其他依赖库的版本不兼容，在使用 npm install 安装时就可能会出现失败的情况。而 yarn 可以根据 yarn.lock 文件的内容快速地解析出应该安装的依赖库版本，从而避免了依赖库版本不兼容的问题。npm install 在安装依赖库时，如果之前已经安装过该依赖库，它会优先使用本地的缓存文件，而不是从网络上下载新的版本，这有时可能导致缓存文件存在问题而无法安装依赖库。依赖库下载速度较慢。原创 2023-04-11 09:57:48 · 1979 阅读 · 0 评论 -
报错：git clone 时候出现Please make sure you have the correct access rights and the repository exists.问题解决
在下载好的Git中的bin目录下（一般是 C:\Program Files\Git\bin）打开bash.exe输入命令ssh-keygen -t rsa -C “username” (注：username为你git上的用户名)，如果执行成功。然后找到系统自动在.ssh文件夹下生成两个文件，id_rsa和id_rsa.pub，用记事本打开id_rsa.pub将全部的内容复制。文件目录就是：username/.ssh/id_rsa.pub.大功告成，再次输入 git clone 就成功了。原创 2023-04-10 18:59:00 · 1452 阅读 · 0 评论 -
整理：时间格式化处理
format-time.ts 如下。原创 2023-03-28 14:03:11 · 175 阅读 · 0 评论 -
CSS 绘制世界杯足球场
写在之前的话花有重开日，人无再少年。疯狂无大小，热爱即疯狂！足球⚽️，是我大学时期的一门选修课，足球需要场地，场地绘制现在就开始！！！四年一次的世界杯再卡塔尔进行着，为了与您共享世界杯盛宴，用CSS来绘制一个足球场，让我们一起为世界杯疯狂吧！足球⚽️在四处搜索足球场规格后，大概足球场一般是如下构造：在图中我们可以看到，足球场设计主要有以下几部分构成：HTML结构中我用到了如下标签和如下属性设置：为了尺寸计算方便，采用em相对单位进行换算，数值就可以采用真实的“码”，好处是都是整数，简单绘制一原创 2022-12-07 01:28:35 · 1364 阅读 · 0 评论 -
原型制作与图解——墨刀工具
墨刀官网modao.cc。原创 2022-09-10 21:59:26 · 1636 阅读 · 0 评论 -
mysql数据库安装
MySQL是目前最为流行的开放源码的数据库，是完全网络化的跨平台的关系型数据库系统，它是由瑞典MySQLAB公司开发，目前属于Oracle公司。原创 2022-08-29 21:29:37 · 290 阅读 · 0 评论 -
处理异步请求的 async/await 和 promise
async: 作为一个关键字放在函数前面，用于表示函数是一个异步函数，因为async就是异步的异步，异步函数也就是意味着这个函数的执行不会阻塞后面代码的执行。原创 2022-08-29 15:09:34 · 380 阅读 · 0 评论 -
【报错】unhandled error during execution of watcher callback
在使用Echarts图标绘制数据时，报错：unhandled error during execution of watcher callback，提示的原因是因为当年数据还未拿到时就开始渲染Echarts图表，导致图表展现不出来报错。在数据渲染之前先做一下非空判断。...原创 2022-08-16 17:10:01 · 9289 阅读 · 0 评论 -
时间过滤器
输出为：2022-04-07 16:33:07。原创 2022-08-15 19:03:11 · 79 阅读 · 0 评论 -
HTML中的pre标签表示空格或换行
存在着语义不明的情况，比如无法判断是想显示结构的不同展示，还是想把标签作为代码的一部分显示，最好对这里只包含代码文本，对于标签进行转义如’>‘对应’>'。pre元素并不能代码放入，里面的内容是什么，可以是歌词，可以是代码，可以是其它文本。当pre元素来展示源代码的时候最好的方式是用code元素来包裹代码，这样既可以保持格式又可以代表语义，一举数得。保持文本格式的时候使用pre标签，比如当我们要展示源代码的时候，只要放一个pre标签，然后把源代码直接复制，粘贴，然后在页面上就可以保持好格式。...原创 2022-08-01 16:42:56 · 3982 阅读 · 0 评论 -
报错：cannot read poperties of undefined(reading ‘then‘)
在vue做项目时，出现了如下错误。原创 2022-07-26 08:41:52 · 1357 阅读 · 0 评论 -
【报错】：Cannot read properties of undefined (reading ‘prototype‘)
实例对象不一致，官网上的实例对象是vue/3.0（vue2.x）版本创建的对象，而我创建的项目是用vue3.x创建的，实例对象是createdApp实例对象不一致，当然也就引不进去，继而报错了。创建项目的时候选用vue2.x创建项目，其他操作照常。（element是支持vue2.x的，vue3.x暂时还不支持ElementUI。你要是想用vue3.x引入element也不是不可以的，他推出的支持vue3.0的版本叫element-plus。...原创 2022-07-26 08:41:24 · 10699 阅读 · 1 评论 -
【报错】Cannot read property ‘parseComponent‘ of undefined
报错的原因是vue升级后vue-template-compiler中的parseComponent函数被删除了。原创 2022-07-26 08:40:33 · 5169 阅读 · 0 评论 -
vscode添加自定义注释
使用ctrl + shift + p 调出如下窗口，并且输入snippets第三步：最后想分享一下红色警戒的源码 注释的格式 ，在红色警戒的源码公开之后，他的注释简直堪称经典我整理了一下这段注释，致敬经典！...原创 2022-07-21 09:26:46 · 1188 阅读 · 0 评论 -
限制input框中的输入类型及长度
今天主要聊聊对输入框加限制的问题。在做项目时，想要给输入框输入做限制要求，但经过反复尝试得不到想要的效果，因此在百解之下，终于找到了心仪的办法。原创 2022-07-19 20:53:43 · 2247 阅读 · 0 评论 -
规范自己的编程习惯
文章目录一、import导入与compoents组件使用一、import导入与compoents组件使用原创 2024-08-16 14:53:50 · 246 阅读 · 0 评论 -
Vue中v-mdoel
当输入类型为text时这通常很有用。如果输入类型是number，Vue能够自动将原始字符串转换为数字，无需为v-model添加.number修饰符。如果这个值无法被parseFloat()解析，则返回原始的值。在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步(除了上述输入法组织文字时)。即当输入框失去焦点，再去同步输入框中的数据。即自动过滤用户输入的首尾空白字符。即将输入框的内容自动转为数字类型。...原创 2022-07-18 08:30:37 · 209 阅读 · 0 评论 -
cookie的工作原理
文章目录一、cookie是什么二、cookie 的工作原理三、注意一、cookie是什么cookie 作为用户登录时的一种状态信息，Cookie是保存在客户端的纯文本文件。比如txt文件。所谓的客户端就是我们自己的本地电脑。当我们使用自己的电脑通过浏览器进行访问网页的时候，服务器就会生成一个证书并返回给我的浏览器并写入我们的本地电脑。这个证书就是cookie。一般来说cookie都是服务器端写入客户端的纯文本文件。我们首先看一个案例：在某网站的超链接a标签上加上了document.cookie获取原创 2022-02-10 00:37:42 · 1745 阅读 · 2 评论 -
HTML中的section
HTML中section标签原创 2022-01-22 23:00:09 · 7758 阅读 · 0 评论 -
HTTP状态码
文章目录Informational（信息性状态码）100 Continue101 Switching Protocols102 ProcessingSuccess（成功状态码）200 OK201 Created202 Accepted203 Non-Authoritative Information204 No Content205 Reset Content206 Partial Content207 Multi-StatusRedirection（重定向）300 Multiple Choices301原创 2022-01-20 22:47:07 · 299 阅读 · 1 评论 -
HTML_响应式
一、利用meta标签设置视口在meta标签中，将name属性设为viewport，即可设置视口，示例代码如下。<meta name="viewport" content="width=device-width">视口的常用设置例如：<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"> 二、响应式布局容器响原创 2022-01-16 20:48:49 · 1195 阅读 · 0 评论