- 博客(47)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 认识WebSocket 以及怎么使用WebSocket
通信速度：WebSocket建立的连接速度较快，但是在通信过程中可能会受到网络条件的影响，需要对连接状态进行良好的监控和管理。跨域访问：由于浏览器的同源策略，WebSocket需要进行跨域访问时需要进行特殊处理，如使用代理服务器或者设置跨域访问的策略。服务器负载：WebSocket需要建立持久连接，因此服务器的负载会增加，需要根据实际需求进行服务器的规划和优化。安全性：由于WebSocket是基于TCP协议的，因此必须采取安全措施，如SSL加密，以保护数据的安全性。比如，如果想要向服务器发送数据，可以在。
2023-11-09 15:25:22
579
原创 关于海康视频对讲没有效果而且不会报错 的解决方法
用组件不行的时候,都会想到自带的demo,于是我就尝试新开页面,新页面里只放视频,此时会发现可以使用了, 经过排除法排查,"得出结论海康威视h5对讲功能不能以组件的形式在vue项目中使用, 因为我学疏才浅不知道什么原因,我就用最笨的方法,将上述组件拆分出来自己手写弹框去实现该需求。这里的组件如果只展示视频的话可以直接使用, 但是使用对讲功能会不起作用.而且不会报错,走通了。在我的项目中需求是 在地图中展示点位,点击点位开启视频 并有对讲功能,这里我用的是海康h5player。这里如果需要需要对讲功能。
2023-11-06 09:22:27
496
原创 实现echats地图
当一个项目需要用echarts做地图时 会觉得相当棘手。在创建自己的组件 当然此demo可以层级跳转。首先 需要在根目录HTML下引入CDN。第一次做 希望大佬可以留下宝贵的建议。
2023-03-29 08:58:40
187
1
原创 v-if 不加 key的后果
在百度上好一顿查找 才晓得当渲染多个同样数据时 如果要使用v-if进行销毁时 需要加key值 以我的理解就是让浏览器知道销毁的是哪一个组件 若不加key 浏览器会默认渲染下一个组件 认为不用销毁。开始的想法是 没有加key值 直接使用 v-if 测试时发现 当点击切换布局时 布局改变了 尺寸未改变 视频也没有重新刷新。众所周知 v-if和v-show的区别就是 v-show是显示隐藏 v-show是销毁和展示。最近遇到一个场景 要求一个页面渲染多个同样的萤石云视频组件。
2022-09-03 15:17:37
509
原创 Vue双向绑定的原理
Vue 数据双向绑定原理是通过 + 的方式来实现的，首先是通过 提供的 方法来劫持（监听）各属性的 getter、setter，并在当监听的属性发生变动时通知订阅者，是否需要更新，若更新就会执行对应的更新函数。什么是数据劫持数据劫持比较好理解，通常我们利用劫持对象的访问器，在属性值发生变化时我们可以获取变化，从而进行进一步操作。发布者模式 / 订阅者模式在软件架构中，发布订阅是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特定的接收者（称为订阅者）。而是将发布的消息分为不同的类别，无需
2022-06-23 21:42:46
265
原创 模拟如何渲染100000条数据
此类容与掘金同步Fatcat身为前端程序员的我.一直在做着基础的增删改查. 今天看了个帖子. 说是如果有十万条数据.该如何渲染到页面而不会使其页面死机.在这里我们可以用类似分页的效果来实现十万条数据这里模拟了一个有十万条数据的服务器和一个简单地页面服务器数据再利用分页的原理使其渲染到页面在这里可以使用定时器加载10000条数据.可以分多少次加载完.代码如下:index.js代码如下...
2022-06-22 21:32:22
632
原创 这几个简单的面试题你会吗?
在导出的对象中可以写组件的配置项 如: data methods computed watch …作用: 将组件内相同的业务逻辑提取到一个公共的模块,当组件需要时再混入到组件内特性:slot是什么 艺名插槽，花名“占坑”，我们可以理解为在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中位置），作为承载分发内容的出口应用场景通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理通过插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用比如布
2022-06-20 22:42:03
151
原创 总结几个vue常见面试题
采用方案: RBAC的权限模型，RBAC(Role-Based Access control) ，也就是基于角色的权限分配解决方案其权限模式如下:三个关键点: 员工, 角色, 权限打个比方，比如多个用户拥有相同的权限，在分配的时候就要分别为这几个用户指定相同的权限，修改时也要为这几个用户的权限进行一一修改。有了角色后，只需要为该角色制定好权限后，将相同权限的用户都指定为同一个角色即可，便于权限管理。对于批量的用户权限调整，只需调整用户关联的角色权限，无需对每一个用户都进行权限调整，既大幅提升权限调整的效率，
2022-06-19 22:10:37
99
原创 typeof与instanceof的区别
操作符返回一个字符串，表示未经计算的操作数的类型使用方法如下：表示对象或原始值的表达式，其类型将被返回举个例子从上面例子，前6个都是基础数据类型。虽然为，但这只是 存在的一个悠久 ，不代表就是引用数据类型，并且本身也不是对象所以，在 之后返回的是有问题的结果，不能作为判断的方法。如果你需要在 语句中判断是否为 ，直接通过来判断就好同时，可以发现引用类型数据，用来判断的话，除了会被识别出来之外，其余的都输出如果我们想要判断一个变量是否存在，可以使用：(不能使用， 若未声明，则报错)二、instance
2022-06-08 23:04:20
1370
原创 探讨vue2中的过滤器
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情过滤器（）是输送介质管道上不可缺少的一种装置大白话，就是把一些不必要的东西过滤掉过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数 允许你自定义过滤器，可被用于一些常见的文本格式化ps: 中已废弃中的过滤器可以用在两个地方：双花括号插值和 表达式，过滤器应该被添加在 表达式的尾部，由“管道”符号指示：定义filter在组件的选项中定义本地的过滤器定义
2022-06-05 21:58:07
96
原创 vue中的虚拟DOM
虚拟 DOM （ ）这个概念相信大家都不陌生，从 到 ，虚拟 为这两个框架都带来了跨平台的能力（ 和 ）实际上它只是一层对真实的抽象，以 对象 ( 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上在对象中，虚拟 表现为一个 对象。并且最少包含标签名 ()、属性 () 和子元素对象 () 三个属性，不同框架对这三个属性的名命可能会有差别创建虚拟就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟对象的节点与真实的属性一一照应在中同样使用到了虚拟技术定义真实实例
2022-06-04 23:15:49
412
原创 谈谈自定义指令怎么用
渐渐地发现自定义指令的重要性,由于这段知识掌握的不够扎实,来复习一下自定义指令吧一、什么是指令指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令指令使用的几种方式：//
2022-05-29 20:21:44
236
原创 剖析axios的底层原理
一、axios的使用关于axios的基本使用，上篇文章已经有所涉及，这里再稍微回顾下：发送请求import axios from 'axios';axios(config) // 直接传入配置axios(url[, config]) // 传入url和配置axios[method](url[, option]) // 直接调用请求方式方法，传入url和配置axios[method](url[, data[, option]]) // 直接调用请求方式方法，传入data、url和配置axio
2022-05-28 17:21:40
1210
原创 手把手教你怎么处理vue项目中的错误
一、错误类型任何一个框架，对于错误的处理都是一种必备的能力在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。主要的错误来源包括：后端接口错误代码中本身逻辑错误二、如何处理后端接口错误通过axios的interceptor实现网络请求的response先进行一层拦截apiClient.interceptors.response.use( response => { return response;
2022-05-27 22:10:04
3906
原创 剖析Nginx反向代理
为什么会出现跨域？只要域名端口协议有一个不同, 就是跨域了~当下, 最流行的就是**前后分离开发项目,也就是前端项目和后端接口**并不在一个域名之下，那么前端项目开发时, 去访问后端接口就会存在**跨域**的行为.问： Ajax可以实现跨域吗？不能如何解决跨域请求数据呢？解决方案：1.jsonp 缺点:只能实现get请求 比如上传FormData原理: 动态的创建scrip添加src属性(但是这个请求是异步的)在页面上声明了一个函数,服务器端返回的是函数调用2.cors
2022-05-26 20:35:02
519
2
原创 路由懒加载以 及 axios进阶用法
1. 什么是路由懒加载当我们打开页面时,所有的路由会同时发送ajax,不管你点不点击所要访问的页面,这些ajax都会放在内存当中,这是就会造成内存浪费,导致页面加载缓慢.这时我们就会用到路由懒加载, 路由懒加载的原理通俗的讲就是将路径放入函数当中,使用的时候才会调用,这样的好处就是.可以解决内存的浪费,使代码更加的有条理性.传统路由配置：import Vue from 'vue'import VueRouter from 'vue-router'import Login from '@/vi
2022-05-24 20:48:03
345
原创 URL.createObjectURL()的使用方法,以及object.keys()方法的使用
URL.createObjectURL()主要区别通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL执行时机：createObjectURL是同步执行FileReader.readAsDataURL是异步执行工作中 经常需要进行对图片的转码操作 可以利用new Fromdate 转码 利用URL.createObjectU
2022-05-24 20:46:45
706
原创 URL.createObjectURL()的使用方法,以及object.keys()方法的使用
URL.createObjectURL()主要区别通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL执行时机：createObjectURL是同步执行FileReader.readAsDataURL是异步执行工作中 经常需要进行对图片的转码操作 可以利用new Fromdate 转码 利用URL.createObjectU
2022-05-23 20:02:50
3497
原创 利用vue实现富士编辑器
工作中做后台管理系统,因为富士编译器好用且功能多样化,所以很多都会用到.基于 vue-quill-editor 实现富文本编辑器：https://www.npmjs.com/package/vue-quill-editor1. 运行如下的命令，在项目中安装富文本编辑器：npm i vue-quill-editor@3.0.6 -S2. 在项目入口文件 main.js 中导入并全局注册富文本编辑器：// 导入富文本编辑器import VueQuillEditor from 'vue-quill-e
2022-05-21 22:05:24
232
原创 后端让转bese64怎么办? new FileReader()方法
今天对接口时 , 看到上传图片要求上传base64形式的 , 当时就觉得 , 我是不是得罪后端了 , 这不纯属为难人吗 ? 只有不停的问同事 , 和上网查询总结资料 , 其实转base64很简单,就三步死方法,先放这用到了再来拿const reader = new FileReader() // 2.读取文件对象 reader.readAsDataURL(e.target.files[0]) // 3.监听onload文件读取完毕事件 re
2022-05-20 20:35:01
304
原创 data属性是一个函数而不是一个对象？
今天偷听到老大面试新来的,发现这个面试题我不会,于是就翻阅很多资料才有了下面的总结!!一、实例和组件定义data的区别vue实例的时候定义data属性既可以是一个对象，也可以是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" }
2022-05-19 21:01:59
99
原创 为什么vue中的v-if和v-for不建议一起使用
一、作用v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff
2022-05-18 22:24:40
1094
原创 插件和组件的区别
theme: jzman一、组件是什么回顾以前对组件的定义：组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件组件的优势降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦.
2022-05-17 22:22:05
1516
原创 vue2的缺陷
下班回家的途中,一个问题困扰我很久,在vue2中为什么不能给对象直接赋值?若是使用其他的的api又觉得麻烦,于是就有了这篇博客!!!一、直接添加属性的问题我们从一个例子开始定义一个p标签，通过v-for指令进行遍历然后给botton标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也 新增一行<p v-for="(value,key) in item" :key="key"> {{ value }}</p><button @click="add
2022-05-15 21:45:58
1516
1
原创 element-ui的表单正则校验
🤯🤯💦💦💦竹怜新雨后，山爱夕阳时， 绵绵细雨， 也许会让嘈杂的窗外焕然一新吧！基本步骤-共三步定义验证规则。data()中按格式定义规则在模板上做属性配置来应用规则（三个配置）给表单设置 rules 属性传入验证规则给表单设置model属性传入表单数据给表单项（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名手动兜底验证详细说明:步骤1-定义表单验证规则,固定格式data() { return { rules: {
2022-05-14 20:30:34
2830
原创 vue的计算属性computed
计算属性的应用场景从已有的数据A中计算等到的新的数据B，使用计算属性如果一个结果需要依赖data中的数据，但是需要经过一些逻辑处理，才能得到你想要的数据。此时就可以使用计算属性。定义格式计算属性与data和methods同级,格式如下:{ data(){}, methods: {} // 声明计算属性 computed: { //属性名字（计算属性名称） //属性的值（计算属性处理函数） 计算属性名1 () {
2022-05-13 19:28:13
5256
1
原创 vue全家桶之vuex的武功秘籍了解一下
1. vuex是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信通俗的讲 vuex就是vue官方提供的独立于组件体系之外的，管理公共数据的工具在vue2中通常使用父传子，子传父的方法传递数据，这样的话我们可以做一些小的项目，当项目做大的时候，这样写就会非常的麻烦，这时，就可以利用vuex的插件将数据放进一个不管是父组件还是子组件都可以用到的一个容器中vue的降龙五掌state： 统一定义公共数据（类似于data
2022-05-12 22:14:54
198
原创 前端路和由配置修改?这些知识你又理解多少呢
路由的基本概念路由分为前端路由和后端路由.后端路由就是前端所说的接口,是响应和请求的前端路由就是: 就是一一对应关系的集合。简单讲就是一个url地址，对应哪个组件简单理解前端路由工作原理我们可以通过window.οnhashchange=()=>{}来监听URL中的hash值的变化思路如下URL 地址栏中的 Hash 值发生了变化前端js监听了到 Hash 地址的变化 window.οnhashchange=()=>{}前端js把当前 Hash 地址对应的组件渲染都浏览器中
2022-05-11 21:40:35
337
原创 谈谈对自定义属性的理解
什么是指令指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令指令使用的几种方式：//会实例化一个指令，但这个指令没有参数 `v-xxx`// -- 将值传到指令
2022-05-10 20:24:52
178
3
原创 一看就会的 NextTick 和 Keep-alive
NextTick是什么官方的定义是这样的：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM看起来不要好理解, 那么它是什么意思呢?我们可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新对比图片理解一下 可能效果会更好🍙🍙🍙🍙举个栗子html样式<div id="app"> {{ message }} </div>
2022-05-09 22:23:28
166
原创 vue生命周期的执行过程以及生命周期的基本介绍
生命周期是vue中比较抽象的一个知识,浅浅研究了一下,下面是我总结的知识点🍖🍖🍖全是干货1.什么是组建的生命周期?通俗点讲就是 一个组件从 创建 到 销毁 的整个过程就是生命周期2. 生命周期的钩子函数vue 框架内置函数，随着组件的生命周期，自动 按次序 执行作用：特定的时间点，执行某些特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据他有四个阶段,八个函数四个阶段分别是初始化 ==> befor
2022-05-08 22:10:13
1014
原创 结合问题了解vue组件传值, 父传子,子传父
🍧🍧🍧🍧🍧Learning makes me happy.在工作中我们都在使用组件化开发，但很多人都使控制到名字，却不知道什么是组件化开发， 现在我们来结合问题了解下什么是组件化开发吧什么是组件化开发？组件化开发就是利用超级多的组件，组合到一起，组成的一个项目，那么这个想么就可以称为组件化开发项目。那什么是组件？以.vue为后缀名的都可以称之为组件怎么来实现组件化开发呢？我们可以用一个组件，引用另一个组件，让其每一个组件实现某一个功能，以此类推，引入多个组件来构成一个项目。引入组件步骤如
2022-05-06 21:29:32
103
1
原创 vue中知道后自愧不如的bug
1.开关思想 很开心 效果1 点击所有全选选中完成可是当点击全选时就会报错解决方法: computed: { checkAll: { set(nav){ // console.log('nav',nav) this.arr.forEach(item=>item.checked=nav) }, get(){ return this.arr.every(item=>item.checked)..
2022-05-05 16:48:51
453
原创 vue的核心特性
面试官常问：有使用过vue吗？说说你对vue的理解#一、从历史说起Web是World Wide Web的简称，中文译为万维网我们可以将它规划成如下的几个时代来进行理解石器时代 文明时代 工业革命时代 百花齐放时代#石器时代石器时代指的就是我们的静态网页，可以欣赏一下1997的Apple官网最早的网页是没有数据库的，可以理解成就是一张可以在网络上浏览的报纸，直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互，如当时的Google（1998年
2022-05-04 19:53:22
974
1
原创 所有loader都会的vue脚手 架原来如此简单
前言在工作中,使用脚手架创建项目的都是loader,所以!!!学会脚手架创建项目是晋升loader的必经之路,上天会眷顾有准备的人.我们开始吧!!!vue-cli 脚手架介绍vuecli是什么vue-cli是vue官方提供的一个全局模块包(通过命令工具行来使用), 用来快速创建一个脚手架项目。● 基于webpack● 开箱即用,零配置脚手架是为了保证各施工过程顺利进行而搭设的工作平台● 脚手架工程就是一套固定的文件夹+文件+配置的工程, 我们在此基础上开发业务● 在开发过程中，脚手架
2022-05-03 21:42:14
399
1
原创 webpack的高薪面试题
1、什么是webpackwebpack是一个javascript的静态模块打包工具 webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，增强功能 最后输出由多个模块组合成的文件，webpack专注构建模块化项目2、webpack的优点是什么？专注于处理模块化的项目，能做到开箱即用，一步到位 通过plugin扩展，完整好用又不失灵活 通过loaders扩展, 可以让webpack把所有类型的文件都解析打包 社区庞大活跃，经常引入紧跟时代发展的新特
2022-05-02 21:46:14
62
1
原创 一看就会的保姆级webpack配置介绍
webpack基本介绍webpack官网webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)现代 javascript 应用程序的 静态模块打包器 (module bundler)静态: 文件资源 模块: node环境, 引入文件, 遵守模块化语法除了合并代码, 还可以翻译和压缩代码less/sass -> css ES6/7/8 -> ES5 html/css/js -> 压缩...
2022-05-02 21:11:54
1828
原创 总结promise与事件循环的几个面试题
🌲五🌲一🌳劳🌳动🌳节🌴快🌴乐🌴废话不多说，直接开怼1.先拿个简单的练练手请说出他们的打印结果function do1() { console.log("任务1"); console.log(abc); //故意犯错}function do2() { console.log("任务2");}function do3() { console.log("任务3");}function do4() { console.log("任务4");}var
2022-05-01 20:51:00
557
4
原创 深究回调地狱问题
这里有两段代码,如何让前端代码变得具有观赏性,更加简洁后台代码在这里插入代码片// 静态资源托管，直接访问public/api.htmlconst express = require('express')const app = express()var cors = require('cors')// 处理跨域请求app.use(cors())app.use( express.static('public') )// 接口1：获取所有的频道app.get('/get', (req
2022-04-30 19:52:44
129
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人