Wonder*-CSDN博客

原创浏览器自动填充但是数据为空的问题

实现逻辑：失焦时可以判断一下表单数据是否为空，如果为空，就去获取input框的值，获取到的如果不是空值，就可以认为数据首次未绑定成功，此时把获取到的value值手动赋给表单，这样，失焦时，由于表单有数据，输入框不会出现清空现象，而且视图和表单的数据均有值，就可以解决该问题。基于这个想法，给表单加了监听，发现虽然看着已经填充数据了，但是表单上的数据一直为空，后面失焦，输入框清空，表单数据也并未变化过。该问题也不是什么很难解的问题，主要是记录一下排查问题的过程，也和大家分享一下排查思路。子组件中方法/参数等；

2023-05-30 15:50:25 1090 1

原创解决前端跨域的几种方法

拿Vue项目说，在本地运行npm run dev等命令时实际上是用node运行了一个服务器，因此proxyTable实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了一层代理，因此不会出现跨域问题。JSONP是一种比较古老的解决方案，这种方案没有兼容性问题，基本都可以使用，但是它所解决的问题比较有限，且对服务端接口有一定的要求，只支持get请求，不支持post，请求回来的东西当做js来执行。若不符合前述条件，则会通过预检请求，确认是否可以通过服务器的限制，然后才会发送正式的请求。

2023-02-28 14:58:21 3484 1

原创基于vue项目的代码优化

的优先级在 vue2 中比 v-if 高，所以在 vue2 项目中当两个指令出现在一个 DOM 上时，通过 v-for 渲染列表，每一次都需要进行一次 v-if 的判断。② 如果 v-if 是为了筛选需要遍历的数据，那么我们可以在计算属性中做筛选数据的逻辑，返回一个符合条件的列表数据，并在 DOM 中直接使用这个数据即可。这种方案能够解决目前查询较慢的问题，但是还有优化的空间，随着不断滚动，数据会越来越多，大量DOM存在难免给客户端造成一定的压力，这时可以考虑虚拟列表的实现方案。、优先使用 v-if。

2022-11-30 09:24:26 1150

原创 WebSocket快速入门及基本使用

假设我们创建了一个 ws 对象：参数说明：url：指定连接的 URL；protocol：可选，指定可接受的子协议。ws 对象上的事件：事件说明open连接建立时触发message客户端接收到服务端消息时触发error通信出现错误时触发close连接关闭时触发另外，我们可以通过ws.send()方法，给服务端发送数据；也可以通过ws.close()方法主动断开连接。WebSocket建立的是长连接，且允许服务端主动向客户端推送数据，使得客户端和服务器之间的数据交换变得更加简单。...

2022-08-31 10:23:52 2672

原创 vue实现一个基础的虚拟列表

后端返回十万条数据，前端怎么处理？

2022-06-24 16:41:45 3270

原创图片懒加载的几种实现方式

原理在页面中有很多图片的时候，图片加载就需要很多时间，很耗费服务器性能，不仅影响渲染速度还会浪费带宽，为了解决这个问题，提高用户体验，所以就出现了懒加载这种方式来减轻服务器的压力，即优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。思路图片是根据src进行加载的，在图片没有进入可视区域时，先不给src赋值（或者可以先给一个很小的loading图），等到图片进入可视区域再给src赋真正的值。图片的真实地址可以先存储在data-src中。实现<di...

2022-03-22 16:09:09 4005

原创普通列表（数组）转换成树结构数组

普通列表转换成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 2299

原创 vue页面状态持久化

需求：左树右表。组织树选中某一节点后，进入详情页面，再返回时需要保持选中。其他查询条件也需要保持状态。思路：用vuex结合localStorage缓存数据。点击树节点或查询按钮时，将数据保存在vuex中，同时存在localStorage中；页面回退时，将存在localStorage中的数据放到vuex中，在页面代码中判断vuex中是否有我们存的数据，有则直接用，没有则默认初始数据。当页面导航路由跳转时再清除缓存的页面数据。代码：点击某树节点时，存下id至vuex中。通过dispatch触发act

2021-11-30 16:35:09 1692

原创 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 5761

原创怎么用一个元素实现十字架

先上最终效果图：利用:before和:after伪类实现css代码：总结：就是给一个宽50px，高150px的div前后加了两个宽高都为50px的正方形。

2021-10-12 20:29:07 843

原创判断系统类型安卓还是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 274

原创 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 2246

原创一个选项框的选项根据另一个选项框的值的变化而变化

如上图：选择不同的报警类型，报警项中的选项也会跟着发生变化。报警类型的代码：报警项的代码：这里的subTypeArr 就是第二个选项框的选项，会随着第一个选项框“报警类型”的选中值的变化而变化。实现：因为报警项会根据报警类型的变化而变化，所以第一步需要做的就是，监听报警类型的变化。写在watch中的代码：监听的'searchForm.type'就是报警类型绑定的值；handler函数是监听里面固定的写法，里面的参数val就是报警类型选项框里此时被选...

2021-09-23 00:31:23 673 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 1504 1

原创 vue项目实现验证具体步骤

1.form表单通过rules绑定验证规则loginRules2.data的return中添加验证规则变量loginRules

2021-09-16 10:43:40 432

原创 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 344

原创密码框后的小眼睛怎么写？

<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 8752

原创【项目问题】实现步骤条每个步骤都对应不同的颜色

先放最终效果图：工作时有这么一个需求：点击按钮查询某个设备各个版本的升级情况，即根据后端返回来的version（版本号）和value（当前进度情况：值为1-4。1代表未开始，2代表进行中，3代表升级成功，4代表升级失败）来动态生成步骤条展示升级情况。为实现该需求用了elementui的步骤条，在颜色处理的过程中遇到了困难，网上大部分步骤条每个步骤都是一个颜色，改变一个颜色，所有都改变了（也可能是我搜索姿势不对，没找到想要的结果）解决方案：用了步骤条里的status属性，这个属性对应.

2021-07-19 15:23:46 1373 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 554

原创简单易懂的HTTPS请求流程

HTTPS请求流程1.客户端发送请求到达服务器，服务器收到后返回ca证书（证书里包含公钥）；2.客户端收到ca证书后，生成随机密钥，并利用公钥进行加密处理后发送给服务端；3.服务端收到客户端传过来的数据后，利用私钥进行解密，获取到随机密钥；4.服务端使用随机密钥加密数据，发送给客户端，客户端收到后进行解密，获取数据；5.客户端使用随机密钥加密发送数据，与服务端交互。对称加密：加密和解密使用同一密钥。非对称加密：有公钥和私钥，一般使用公钥进行加密，使用私钥进行解密。结合以.

2021-03-16 11:54:49 1119

原创箭头函数返回值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 788

原创 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 664

原创入门SVN基础使用教程

楼主之前用的git，来公司实习后发现所在部门主要用SVN，啥也不会啥也不懂下面简要记录一下基础操作1.自行下好 TortoiseSVN桌面单击右键，出现TortoiseSVN 即为安装成功2.获取项目文件至本地使用SVN的基础是，从SVN服务器上将项目内容获取到本地系统文件夹中。这一步就是通过SVN的右键菜单【Checkout】操作3.更新项目文件当文件获取到本地之后，就可以进行文件操作了。建议，在每次进行文件操作之前，先获取服务器上的新文件。使用方式就是在本地文件...

2021-01-25 11:13:55 7428

原创（二）深入axios【进阶知识】

将以在Vue中的使用为例，讲解axios方面的内容。1.创建axios实例instance为一个axios实例。创建axios实例有时会方便很多，比如几个接口需要设置的超时时长不一致，这个时候用实例就方便很多，可以分别设置各自的超时时长。如果只有一个接口，那直接使用axios.get...就可以。2.axios实例的配置参数...

2020-11-26 18:10:44 261

原创（一）axios的基础使用

1.axios是什么及其特性？Axios是一个基于promise的HTTP库，可以使用于浏览器（客户端）和nodeJS（服务端）。特性：1.支持promise API；2.拦截请求和响应（如:可以在请求发送之前在请求头添加授权信息等）；3.转换请求数据和响应数据（如:加密解密）；4.取消请求；5.自动转换JSON数据；6.客户端支持防御XSRF。...

2020-11-25 18:33:58 225

原创博主-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 415

原创博主-2021届校招前端面试题(持续更新中)

1 HTML2 CSS3 javaScript4 vue5 项目

2020-07-29 22:15:20 1313

原创 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 116

原创 CSS初始化含义及目的

含义：CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一，即将CSS初始化。目的：这是为了考虑到浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。如果不初始化，整个页面做完会很糟糕，重复的css样式很多。当然，

2020-07-28 20:48:46 825

原创 JS中this的四种绑定方式

1.this的默认绑定凡是函数作为独立函数调用，无论它的位置在哪里，它的行为表现，都和直接在全局环境中调用一样。（即默认绑定window）2.this的隐式绑定当函数被一个对象“包含”的时候，我们称函数的this被隐式绑定到这个对象里面了，这时候，通过this可以直接访问所绑定的对象里面的其他属性。1.在隐式绑定中，如果函数调用位置是在一串对象属性链中，this绑定的是最内层的对象。2.当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。this的隐式

2020-07-06 23:11:06 1349

转载 Flex布局及其应用场景

网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出常见布局的 Fle...

2020-07-05 22:11:20 2412 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 1217

项目中实现图片懒加载的几种方式

空空如也