- 博客(58)
- 收藏
- 关注
原创 浏览器自动填充但是数据为空的问题
实现逻辑:失焦时可以判断一下表单数据是否为空,如果为空,就去获取input框的值,获取到的如果不是空值,就可以认为数据首次未绑定成功,此时把获取到的value值手动赋给表单,这样,失焦时,由于表单有数据,输入框不会出现清空现象,而且视图和表单的数据均有值,就可以解决该问题。基于这个想法,给表单加了监听,发现虽然看着已经填充数据了,但是表单上的数据一直为空,后面失焦,输入框清空,表单数据也并未变化过。该问题也不是什么很难解的问题,主要是记录一下排查问题的过程,也和大家分享一下排查思路。子组件中方法/参数等;
2023-05-30 15:50:25
1248
1
原创 解决前端跨域的几种方法
拿Vue项目说,在本地运行npm run dev等命令时实际上是用node运行了一个服务器,因此proxyTable实际上是将请求发给自己的服务器,再由服务器转发给后台服务器,做了一层代理,因此不会出现跨域问题。JSONP是一种比较古老的解决方案,这种方案没有兼容性问题,基本都可以使用,但是它所解决的问题比较有限,且对服务端接口有一定的要求,只支持get请求,不支持post,请求回来的东西当做js来执行。若不符合前述条件,则会通过预检请求,确认是否可以通过服务器的限制,然后才会发送正式的请求。
2023-02-28 14:58:21
3642
1
原创 基于vue项目的代码优化
的优先级在 vue2 中比 v-if 高,所以在 vue2 项目中当两个指令出现在一个 DOM 上时,通过 v-for 渲染列表,每一次都需要进行一次 v-if 的判断。② 如果 v-if 是为了筛选需要遍历的数据,那么我们可以在计算属性中做筛选数据的逻辑,返回一个符合条件的列表数据,并在 DOM 中直接使用这个数据即可。这种方案能够解决目前查询较慢的问题,但是还有优化的空间,随着不断滚动,数据会越来越多,大量DOM存在难免给客户端造成一定的压力,这时可以考虑虚拟列表的实现方案。、优先使用 v-if。
2022-11-30 09:24:26
1200
原创 WebSocket快速入门及基本使用
假设我们创建了一个 ws 对象:参数说明:url:指定连接的 URL;protocol:可选,指定可接受的子协议。ws 对象上的事件:事件说明open连接建立时触发message客户端接收到服务端消息时触发error通信出现错误时触发close连接关闭时触发另外,我们可以通过ws.send()方法,给服务端发送数据;也可以通过ws.close()方法主动断开连接。WebSocket建立的是长连接,且允许服务端主动向客户端推送数据,使得客户端和服务器之间的数据交换变得更加简单。...
2022-08-31 10:23:52
2720
原创 图片懒加载的几种实现方式
原理在页面中有很多图片的时候,图片加载就需要很多时间,很耗费服务器性能,不仅影响渲染速度还会浪费带宽,为了解决这个问题,提高用户体验,所以就出现了懒加载这种方式来减轻服务器的压力,即优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能。思路图片是根据src进行加载的,在图片没有进入可视区域时,先不给src赋值(或者可以先给一个很小的loading图),等到图片进入可视区域再给src赋真正的值。图片的真实地址可以先存储在data-src中。实现<di...
2022-03-22 16:09:09
4051
原创 普通列表(数组)转换成树结构数组
普通列表转换成tree结构情况一:整个数组转var list = [ { idSelf: 1, label: '苹果', idParent: 100 }, { idSelf: 2, label: '茄子', idParent: 200 }, { idSelf: 3, label: '香蕉', idParent: 100 }, { idSelf: 4, label: '运动类型',
2022-03-18 16:38:08
2630
原创 vue页面状态持久化
需求:左树右表。组织树选中某一节点后,进入详情页面,再返回时需要保持选中。其他查询条件也需要保持状态。思路:用vuex结合localStorage缓存数据。点击树节点或查询按钮时,将数据保存在vuex中,同时存在localStorage中;页面回退时,将存在localStorage中的数据放到vuex中,在页面代码中判断vuex中是否有我们存的数据,有则直接用,没有则默认初始数据。当页面导航路由跳转时再清除缓存的页面数据。代码:点击某树节点时,存下id至vuex中。通过dispatch触发act
2021-11-30 16:35:09
1712
原创 proxy代理配置及解析
1.vue-cli 2 是在路径为config/index.js的文件下proxyTable里配置的,该文件是整个项目的主要配置入口// node自带路径工具.var path = require('path')// 分为两种环境,dev和productionmodule.exports = { dev: { // 配置好后一定要关闭原来的server,重新npm run dev启动项目。不然无效。 proxyTable: { // 需要代理的接口,可以跨域
2021-10-14 16:28:53
6120
原创 怎么用一个元素实现十字架
先上最终效果图:利用:before和:after伪类实现css代码:总结:就是给一个宽50px,高150px的div前后加了两个宽高都为50px的正方形。
2021-10-12 20:29:07
918
原创 判断系统类型安卓还是ios
created(){ //判断系统 let u = navigator.userAgent; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //Android终端 let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isAndroid) { this.system.
2021-10-09 17:37:25
298
原创 vue用iframe实现download功能
下载前一定是要先拿到文件下载地址的url,如果在执行下载方法之前已经拿到url,可以通过传参的方式写到downLoad方法中,如果没拿到过,可以在downLoad方法里,调接口获取url。1.单个下载downLoad (url) { const iframe = document.createElement("iframe"); iframe.src = url; iframe.style.display = "none"; // 防止影响页面 iframe.sty
2021-09-24 11:07:13
2408
原创 一个选项框的选项根据另一个选项框的值的变化而变化
如上图:选择不同的报警类型,报警项中的选项也会跟着发生变化。报警类型的代码:报警项的代码:这里的subTypeArr 就是第二个选项框的选项,会随着第一个选项框“报警类型”的选中值的变化而变化。实现:因为报警项会根据报警类型的变化而变化,所以第一步需要做的就是,监听报警类型的变化。写在watch中的代码:监听的'searchForm.type'就是报警类型绑定的值;handler函数是监听里面固定的写法,里面的参数val就是报警类型选项框里此时被选...
2021-09-23 00:31:23
708
3
原创 mock的简单使用
1.安装mocknpm install mockjs2.src文件夹下创建mock.js文件,并在mock.js文件中引入mockjs//引入mockconst Mock = require('mockjs');3.在main.js文件中加载mock.js//引入mock数据,不需要时注释该行即可require('./mock');4.在mock.js文件中编写模拟数据并使用常用格式:Mock.mock( rurl, rtype, template | funct...
2021-09-17 11:21:49
1549
1
原创 vue项目实现验证具体步骤
1.form表单通过rules绑定验证规则loginRules2.data的return中添加验证规则变量loginRules
2021-09-16 10:43:40
450
原创 Angular之select标签中的的xx.value as xx.name for xx in yy
今天输入npm install -g vue-cli时,报了以下一堆错误重点在红色字的部分未查看原因,我们按提示输入命令:npm help config得到解决方法
2021-08-20 14:40:00
362
原创 密码框后的小眼睛怎么写?
<div class="item" ng-init="pswShow = false"> <span> <input type="text" class="text inline-block" ng-model="oParams.szPassword" ng-if="pswShow"/> <input type="password" class="text inline-block" ng-model="oPara...
2021-08-04 10:53:05
8990
原创 【项目问题】实现步骤条每个步骤都对应不同的颜色
先放最终效果图:工作时有这么一个需求:点击按钮查询某个设备各个版本的升级情况,即根据后端返回来的version(版本号)和value(当前进度情况:值为1-4。1代表未开始,2代表进行中,3代表升级成功,4代表升级失败)来动态生成步骤条展示升级情况。为实现该需求用了elementui的步骤条,在颜色处理的过程中遇到了困难,网上大部分步骤条每个步骤都是一个颜色,改变一个颜色,所有都改变了(也可能是我搜索姿势不对,没找到想要的结果)解决方案:用了步骤条里的status属性,这个属性对应.
2021-07-19 15:23:46
1512
1
原创 【项目问题】传参时格式发生错误
前端向后端调接口传参时,传的是json格式的数据,但是接口一直没调用成功,和后端排查问题后发现,后端收到的数据不是json格式的,而是像这样的:{"version":["V1.4.2 build220119"],"remark":[""],"fileName":["新建 Microsoft Word 文档.dav"],"filePath":["blob:http://localhost:19528/87cb9023-ea32-437c-8cc0-ad76f817e77f"],"fileSize":["
2021-07-19 11:07:09
587
原创 简单易懂的HTTPS请求流程
HTTPS请求流程1.客户端发送请求到达服务器,服务器收到后返回ca证书(证书里包含公钥);2.客户端收到ca证书后,生成随机密钥,并利用公钥进行加密处理后发送给服务端;3.服务端收到客户端传过来的数据后,利用私钥进行解密,获取到随机密钥;4.服务端使用随机密钥加密数据,发送给客户端,客户端收到后进行解密,获取数据;5.客户端使用随机密钥加密发送数据,与服务端交互。对称加密:加密和解密使用同一密钥。非对称加密:有公钥和私钥,一般使用公钥进行加密,使用私钥进行解密。结合以.
2021-03-16 11:54:49
1167
原创 箭头函数返回值undefined?
随手一记var func1 = x => x;var func2 = x =>{x};var func3 = x => ({x});console.log(func1(1)); //1console.log(func2(1)); //undefinedconsole.log(func3(1)); //{x:1}面试原题,一直不清楚为什么第二个是undefined结论:当函数体只有一句表达式时,那么可以省略花括号与return;但是!如果使用了花括号,就必须
2021-03-09 15:09:37
816
原创 github添加SSH步骤
1、检查你电脑是否已经有 SSH key楼主之前用的gitee,添加过SSH,在github添加时,提示我已经存在了,原来可以共用,之前不太懂这个。所以,先检查有没有,运行 git Bash 客户端,检查代码如下:$ cd ~/.ssh$ ls这两个命令就是检查是否已经存在 id_rsa.pub 或 id_dsa.pub 文件,如果文件已经存在,那么你可以跳过步骤2,直接进入步骤3。2、创建一个 SSH key$ ssh-keygen -t rsa -C "you..
2021-02-03 11:33:57
691
原创 入门SVN基础使用教程
楼主之前用的git,来公司实习后发现所在部门主要用SVN,啥也不会啥也不懂下面简要记录一下基础操作1.自行下好 TortoiseSVN桌面单击右键,出现TortoiseSVN 即为安装成功2.获取项目文件至本地使用SVN的基础是,从SVN服务器上将项目内容获取到本地系统文件夹中。这一步就是通过SVN的右键菜单【Checkout】操作3.更新项目文件当文件获取到本地之后,就可以进行文件操作了。建议,在每次进行文件操作之前,先获取服务器上的新文件。使用方式就是在本地文件...
2021-01-25 11:13:55
7646
原创 (二)深入axios【进阶知识】
将以在Vue中的使用为例,讲解axios方面的内容。1.创建axios实例instance为一个axios实例。创建axios实例有时会方便很多,比如几个接口需要设置的超时时长不一致,这个时候用实例就方便很多,可以分别设置各自的超时时长。如果只有一个接口,那直接使用axios.get...就可以。2.axios实例的配置参数...
2020-11-26 18:10:44
280
原创 (一)axios的基础使用
1.axios是什么及其特性?Axios是一个基于promise的HTTP库,可以使用于浏览器(客户端)和nodeJS(服务端)。特性:1.支持promise API;2.拦截请求和响应(如:可以在请求发送之前在请求头添加授权信息等);3.转换请求数据和响应数据(如:加密解密);4.取消请求;5.自动转换JSON数据;6.客户端支持防御XSRF。...
2020-11-25 18:33:58
237
原创 博主-2021届秋季校招前端面试公司(持续更新中)
招引网络科技 6月29号1 自我介绍2 你是在什么时候开始接触到前端的?3 在实习中 主要是前端的开发上,还是页面的设计上?4 除了这个页面设计,还做过哪些项目?5 行内元素和块级元素的区别是啥?6 html 5的新特性7 webStroge 和cookie 的区别?详细说一些8 sessionStroge 和localStroge的区别?9 他们具体是存储在哪里?10 他们能不能被爬虫所爬取到?11 标准盒模型和IE盒模型的区别是啥?12 多个页面共...
2020-07-29 22:21:17
449
原创 vue组件通信
1.props和$emit 父组件向子组件传递数据是通过props传递的(props写在子组件中),prop 只可以从上一级组件传递到下一级组件(父子组件),即所谓的单向数据流。而且 prop 只读,不可被修改,所有修改都会失效并警告。 子组件传递数据给父组件是通过$emit触发事件,父组件通过v-on来监听并接收事件。2.$attrs和$listeners 第一种方式处理父子组件之间的数据传输有一个问题:如果父组件A下面有子组件B,组件B下面有组件C,这时如果组件A想传递数据给组件...
2020-07-29 16:38:04
126
原创 CSS初始化含义及目的
含义:CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一,即将CSS初始化。目的:这是为了考虑到浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确,使得我们开发网页内容时更加方便简洁,同时减少CSS代码量,节约网页下载时间。如果不初始化,整个页面做完会很糟糕,重复的css样式很多。当然,
2020-07-28 20:48:46
843
原创 JS中this的四种绑定方式
1.this的默认绑定凡是函数作为独立函数调用,无论它的位置在哪里,它的行为表现,都和直接在全局环境中调用一样。(即默认绑定window)2.this的隐式绑定当函数被一个对象“包含”的时候,我们称函数的this被隐式绑定到这个对象里面了,这时候,通过this可以直接访问所绑定的对象里面的其他属性。1.在隐式绑定中,如果函数调用位置是在一串对象属性链中,this绑定的是最内层的对象。2.当函数引用有上下文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象。this的隐式
2020-07-06 23:11:06
1371
转载 Flex布局及其应用场景
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法,下一篇文章给出常见布局的 Fle...
2020-07-05 22:11:20
2598
2
原创 Vue面试题
1.v-if和v-show的区别以及使用场景?vue中的 v-if 和 v-show 二者都可以动态的控制元素的隐藏和显示,但是他们控制的原理是不同的。v-if:v-if是通过控制dom节点的存在与否来控制元素的显隐。控制元素显示或隐藏是把dom元素整个的渲染或者删除,如果删除,也就是页面中不存在这个dom元素,以此达到隐藏的效果;所以v-if在每次切换的时候都会重新创建或者销毁元素,有较高的切换性能消耗;而且v-if是惰性的,如果在初始渲染时条件为假,那就什么也不做,直到条件第一次变为真时,需要渲
2020-06-26 23:11:38
1225
原创 退出页面时绑定脚本的JS实现和Jquery实现
JQuery实现//绑定onbeforeunload事件$(window).bind('onbeforeunload',function(){return '您输入的内容尚未保存,确定离开此页面吗?';});//解除绑定$(window).unbind('onbeforeunload');window.onbeforeunload=null;JS实现定义:在即将离开当前页面(刷新或关闭)时执行 JavaScript用法:onbeforeunload 事件在即将离开当前页面(
2020-06-26 00:02:38
339
原创 怎么实现屏幕分辨率自适应(响应式布局)
1.iframe标签html代码:<div> <iframe id="tensor" border="0" frameborder="0"></iframe></div>该界面就是要显示一个iframe的界面,自适应的代码如下:js代码:<script> window.onload = function () { //加载页面的时候就执行 var tensor_obj = docume...
2020-06-25 23:26:41
7649
原创 用CSS写一个三角形
记住:一个border对应一个三角形(由于CSS盒子模型)效果:如果设置width和height,则图是这样的(黄色区域为content)
2020-06-24 18:18:41
193
原创 Ajax面试必备知识点
1、什么是ajax,为什么要使用Ajax(请谈一下你对Ajax的认识)什么是ajax:AJAX是“Asynchronous JavaScript and XML”的缩写。是指一种创建交互式网页应用的网页开发技术。AJAX不是一个新的编程语言,但是它是一个使用已有标准的新的编程技术。使用AJAX可以创建更好,更快,用户界面更友好的Web应用。AJAX技术基于Javascript和HTTP Request。Ajax包含下列技术:基于web标准(standards-based presenta
2020-06-23 23:29:40
307
原创 HTTP1.0和HTTP1.1以及HTTP1.1和HTTP2.0的区别
一、HTTP1.0和HTTP 1.1主要区别 1.1 长链接 HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接,而HTTP1.1默认支持长连接。 HTTP是基于TCP/IP协议的,创建一个TCP连接是需要经过三次握手的,有一定的开销,如果每次通讯都要重新建立连接的话,对性能有影响。因此最好能维持一个长连接,可以用个长连接来发多个请求。 1.2节约带宽 HTTP 1.1支持只...
2020-06-22 17:04:30
440
转载 重排和重绘
内容转载于思否:https://segmentfault.com/a/1190000016990089一、重排 & 重绘浏览器下载完页面所有的资源后,就要开始构建DOM树,与此同时还会构建渲染树(Render Tree)。(其实在构建渲染树之前,和DOM树同期会构建Style Tree。DOM树与Style Tree合并为渲染树)DOM树:表示页面的结构渲染树:表示页面的节点如何显示一旦渲染树构建完成,就要开始绘制(paint)页面元素了。当DOM的变化引发了元素几何..
2020-05-26 23:09:06
203
原创 CSS实现两边定宽,中间自适应(即三栏自适应布局)最全答案
主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现。1 自身浮动法原理:对左右分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素正常在正常文档流中,使用margin指定左右外边距对其进行一个定位。.left{ float: left; width: 200px; height: 420px;}.right{ float: right; padding:.
2020-05-26 00:35:54
968
转载 如何理解Vue的diff算法
前言本文目标是写一个非常详细的关于diff的干货,所以本文有点长。也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角。先来了解几个点...1. 当数据发生变化时,vue是怎么更新节点的?要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢?diff算法能够帮助我们。我们先根据真实DOM生成一颗virtual DOM,当v
2020-05-14 20:44:32
250
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人