空白233-CSDN博客

原创 Vue-cli3项目查看项目打包大小

Vue项目优化在平时的vue开发项目中，性能优化是必不可少的，一般来讲除了在Chrome调试工具performance可以在网页加载时准确定位到加载缓慢的代码段或者资源，我们也可以对打包好的代码进行可视化分析（查看哪个包比较占用空间），从而做到精确定位到需要优化的模块。方法一：在线调试（webpack-bundle-analyzer）首先安装webpack插件npm i webpack-boundle-analyzer -D 或者 npm i webpack-boundle-analyzer

2021-05-05 18:17:02 2967

原创 vue的父子、兄弟组件传值（附演示代码）

vue的组件传值父组件向子组件传值（数据绑定+props）父组件的操作：在父组件里引入子组件，在子组件的标签上通过v-model进行数据绑定。父组件的示例代码如下<template> <div class="home"> <p>Home</p> <son :name='val'></son> </div></template><script>import

2020-07-08 14:34:05 270

原创入门了解GET和POST

GET和POST的区别GET和POST其实都是http的请求方法。其他方法有 PUT、HEAD、DELETE、OPTIONS、TRACE、CONNECT这六种请求方法。所以http的请求方法有8种：GET请求方法的特点GET请求的数据会附在URL之后（放在请求行中），以？分隔URL传输数据，多个参数是以&进行连接。GET请求用于信息获取，具有安全性和幂等性安全性：指的是非修改信息，即操作用于获取信息而非修改信息。换句话说GET请求一般不产生副作用，仅仅只获取资源信息。幂等性：无论调

2020-07-06 17:07:04 302

原创 filter、map、reduce数组方法的用法

filter: 检查数组中所有满足条件的元素，并且返回一个新数组，不会改变旧数组，同时也不会处理空数组。let arr = [1 ,12, 56, 24, 15, 26];let newArr = arr.filter(per => { return per > 18;});console.log('arr: ', arr);console.log('newArr', newArr);/*输出结果为：arr: [ 1, 12, 56, 24, 15, 26 ]newAr

2020-07-03 15:48:39 711

原创 axios上传图片或文件时显示上传进度

在平时开发中会遇到上传文件或者图片的场景，特别是在上传大文件时，稍长的等待会对用户体验造成不好的影响，所以需要做出一个有着上传进度条，这样可以大大减缓用户在等待时产生的焦虑感。实际应用vue-progress进度条组件这次是通过vue-element进行开发，在element上有着进度条相关的组件，只需要传入相关的数值就能显示对应的进度：现在有了对应的组件，接下来就可以着手处理文件上传过程中的进度了。axios的onUploadProgress事件在axios中有着下面的事件：onUplo

2020-06-28 15:49:26 1221

原创 axios的取消请求

axios取消请求在平时开发中会遇到上传文件或者图片的问题，当我们选择好图片，点击上传按钮的时候就已经发出了上传文件的请求，但是如果我们在点击按钮后突然发现了上传文件不是我们想要的时候呢？如何取消已经正在上传的文件流？axios的CancelTokenaxios是一个基于Promise的HTTP库，可以在浏览器和nodejs中使用，在axios中提供了这样的一种方法：当我们上传一个图片时，请求已经发出，这个时候就该调用axios的CancelToken： const CancelToken

2020-06-28 10:11:11 372

原创 clientWidth, offsetWidth,scrollWidth的实际宽度

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding:

2020-06-22 19:14:01 219

原创 javascript查找并输出英语文章出现最多次数单词，和英语字符中出现最多字母

查找出一篇英语文章中出现最多的单词和次数let article = " like a my like he me me a a me ";let newArticle = article.trim();let match = newArticle.match(/[a-zA-Z]+/ig);let wordLength, word, max = 0, maxWord = [];for (let i = 0; i < match.length; i++) { word = new .

2020-06-22 18:25:09 1196

原创 vscode设置语言为中文

最近电脑的一直出问题，vscode频繁闪退，并且语言也会初始化到英文。修改默认语言每次都要查资料，索性记录一下如何将vscode的语言换成中文的办法。ctrl+shift+p可以快捷呼出搜索框，在搜索框中输入Configure Display Language点击选择zh-cn的选项，如果没有需要去插件中心下载中文的插件并重启即可。...

2020-06-21 17:21:20 242

原创利用vue-cropper实现本地图片裁剪处理后再上传

最近遇到了图片处理的问题：再上传图片前进行一些处理（裁剪、旋转、放大）然后再上传服务器。我使用的是vue的一个开源组件：vue-cropper 进行处理，可以提供多种处理图片的功能。处理过程刚开始由于没有经验，死脑筋的认为图片必须上传到服务器后才能够进行预览，处理，但是这样会让我们在裁剪图片时都会上传两次图片，这样势必会浪费掉服务器的资源，会使其占用大量的数据库资源和服务器压力。所以在网上找到了别人的解决方案。// 选择本地图片 uploadImg (e) { // 上传图

2020-06-09 11:36:11 1748 2

原创 javascript对指定元素添加父元素

在处理自己的文章博客时，有一个需求：当富文本编辑器中插入的表格过长的话，就给它设置一个横向滚动条。本来是一个很简单的需求，也就是给指定的元素添加一个父div，让div拥有overflow: auto;属性就解决了。我当时的实现代码是这样的：addDiv () {// 获取所有的table表格 let tables = document.querySelectorAll('table'); // 如果table存在于当前界面就执行接下的操作 if (tables) {

2020-06-01 16:18:47 2951

原创 js实现手机验证码的防刷新倒计时

在实现登录注册功能时，一般需要用到验证码倒数的功能，防止恶意刷新多次请求验证码的行为，为此需要引入cookie来进行验证码的倒数功能。一下是在vue.js中实现的验证码倒数功能。created() { let data = new Date(); if(this.getCookie('verifyCode')) { this.isLoginShow = false; this.setCookie('60', 'now', data.getTime()); let

2020-05-25 16:08:07 287

原创 vue中路由类型和路由传参的几种方法

路由类型vue中hash和history的区别。1. hash原理：监听onhashchange事件：当url发生变化时，浏览器会记录下来。因此前进后退按钮都可以应用。在hash模式下修改的是#后面的内容，hash的值虽然出现在url中，但是并不会被包括在http请求中，对后端没有影响，所以当url改变时，页面并不会重新加载，window.onhashchange = function(event) {let hash = locatiuon.hash;}优点：兼容性更好。可以兼容

2020-05-25 09:38:53 596

原创理解真实开发环境下的vue开发：

理解真实开发环境下的vue开发：目录结构：一、Api文件结构：Api文档分为三个部分：qr对二维码相关的操作封装了一系列请求. 分别对不同种类的比赛和模块进行了和服务端数据操作的封装，包括了二维码的上传、删除、二维码域名地址的获取等。 qrCode是对二维码群的相应操作。目录结构大致和qr文件夹的功能相似。用户模块的相关网络请求操作ApiVO.ts是用户注册、登录、验证码相关的interface（接口），对对应的数据格式和类型限制。H...

2020-05-18 14:27:50 119

原创 storage存储和cookie的特点及其区别

web Storage的特点当在前端网页需要进行一些数据存储时，我们最常用到的就是Storage存储：优点：localStorage解决了cookie存储空间太小的问题。相比于cookie的4KB大小存储空间，localStorage的存储空间大小来到了5MB，相当于一个前端的数据库。格式Storage存储的格式是键值对（key-value）的格式。并且浏览器会将所有Storage的值类型限定为string类型，所以需要进行一些转换。缺点低版本的ie浏览器会不支持Storage。

2020-05-11 12:38:48 664

原创深拷贝和浅拷贝的实现

一、深拷贝和浅拷贝首先我们要明白一点，js中数据类型分为：基本数据类型（Number, String, Boolean, Null, Undefined, Symbol）对象数据类型（ Object )引用数据类型的值是保存在栈内存和堆内存中的对象。栈区内存保存变量标识符和指向堆内存中该对象的指针。当寻找引用值时，解释器会先寻找栈中的地址。然后根据地址找到堆内存的实体。所以深拷...

2020-04-19 13:42:18 961

原创 Git学习笔记第一天

Git开篇git最初的开发动力来自于BitKeeper和Monotone。git最初只是作为一个可以被其他前端（比如Cogito或Stgit）包装的后端而开发的，但后来git内核已经成熟到可以独立地用作版本控制。很多著名的软件都使用git进行版本控制，其中包括Linux内核、X.Org服务器和OLPC内核等项目的开发流程。（维基百科）虽然没有接触过公司开发项目的流程，但是Git的大名早就有...

2020-04-08 20:55:02 108

原创前端开发中遇到的跨域问题

跨域为了保证一定的安全性，浏览器的同源策略会阻止跨域请操作。只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作但是这个随即成为了前端开发者（尤其是我这种新手）心中永远的痛。一旦请求接口就会浏览器直接卡死发出的请求。现如今的跨域解决方案有如下的两种方案：1. JSONP跨域。说白了就是利用script标签没有跨域限制的条件来达到与第三方通讯的目的，JSONP...

2020-04-06 21:19:18 500

原创防抖和节流的基本概念和小案例

这里写自定义目录标题写在前面概念应用场景合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入写在前面关于前端各类面试的题目，防抖和...

2020-04-06 17:24:25 421

weixin_44041414的博客