- 博客(79)
- 收藏
- 关注
RSS订阅
原创 联动规则组件-KOV场景梳理&技术方案
难点：1、不同类型组件对应的操作符有哪些？？？2、value组件展示形式，如何确定？？？3、如何定制operator的内容以及value组件？？等。。。。。。。组件收益：1、统一协议&场景2、快速接入。
2023-07-15 23:56:12
1945
1
原创 跨域以及跨域的小周边
在我们日常开发中，经常能够听到‘跨域’这个字眼，那么跨域是什么呢？ 跨域其实是由浏览器的同源策略造成的 那么同源策略又是什么呢？ 同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 什么又是同源呢？ 如果两个 URL 的 协议、域名、端口号都相同的话，则这两个 URL 是同源。 具体看下...
2021-09-08 15:33:06
173
原创 nodeJS+Express+mysql
前后端分离技术是现如今开发的主流开发方式, 所以现在很多前端可能不是很了解后台, 知道的可能就是如何和接口去做交互,那么在这篇博客里,我们就来看看,使用我们的nodeJS怎样来写后台服务通过小案例进行说明哈,首先项目的层级结构如下:db中写的是对数据库进行的操作 customer是customer这个模块的对数据库的操作代码 pool是连接池,创建连接对象router中写的是路由,可以根据路径做不同的操作,此处使用的是express中的路由.写完直接导出,后面使用的话直接...
2020-06-28 17:22:55
917
原创 vue-cropper 组件滑动卡顿问题
上篇说了公众号裁剪&上传图片，裁剪使用的插件是vue-cropper，在实际验证过程中发现裁剪框移动的时候存在卡顿问题。必须要先左右移动下，上下移动才能比较平滑。搜了一下，发现也有很多人遇到了类似的问题，然后有一篇帖子给的解决方式是阻止默认“事件”，还需要修改源码。先不说麻不麻烦，我试了，但是貌似没有解决我当下遇到的问题。首先，如果我没猜错，有这个问题的，一定是把该组件放在了vant的popup中使用了。具体原因应该是样式影响的，我没扒源码，感兴趣的可以看下，然后给分享下哦，记得踢踢我。
2024-04-08 13:51:24
182
原创 微信公众号-图片裁剪并实现上传
看到这个诉求，我就去扒微信的api，发现有个属性叫wx.cropImage是做图片裁剪的，且可以传入对应的裁剪比例。在介入开发后才发现，这个是小程序的api，而非微信公众号的。阅读文档发现，小程序和微信公众号中都有一个叫chooseImage的api，但是返回的数据却不一样，小程序大家开发的都比较多了。选择成功后，返回localIds，是选定照片的本地ID列表，注意这个和小程序是不同的。组件具体的使用，我这里就不赘述了，上述github上有详细的使用文档。2、js代码，实现图片选择&裁剪&上传。
2024-04-02 10:30:03
498
原创 跨项目实时通信——Broadcast Channel
在日常开发中，肯定会遇到一些需要跨项目实时通信的场景。比如在浏览器中新开两个tab页面，A页面发送消息后，B页面实时监听并触发某些动作。类似的需求有很多，比如实时共享状态等等。那么跨项目/页面/浏览器tab的情况下如何实现通信呢？大家肯定第一时间会想到很多方案，可是如何实现实时通信呢？？？除了postMessage，sharedworker外，今天说下Broadcast Channel如何实现实时通信
2023-07-18 10:52:35
725
原创 自定义命令，通过node脚本，生成组件模版
组内有组件库，在开发组件的过程中，发现大家在创建新组件的时候，都是cv之前的组件，然后再手动修改文件，觉得非常麻烦，所以就自己写了个node脚本，完成模版组件的生成。没有什么相关经验，所以基本是采用原生node来处理的，一边看文档，一边尝试，开发耗时3h。创建create.js文件后，在package.json中加入自定义命令，node执行该文件。涉及文件夹的创建，目录的获取，文件的复制及内容重写等，有意见欢迎指正呦～～～首先创建模版文件夹结构如下图（自己根据具体需求创建模版就行）
2023-02-13 18:33:08
533
2
原创 yarn多级包依赖不同版本的组件，最终到底会怎么安装？
在开发项目的时候，偶然间发现一个现象：项目依赖packageA和packageB，而packageB也依赖packageA。正常来说，我们理解到的是只需要在项目依赖中安装packageA就可以了，packageB会直接使用项目中已安装的packageA。那么事实真的是这样么？？？如下图：显然不是我们想象的那样，我们发现在 packageB下也安装了packageA，这是为什么呢，当时是觉得不太理解。
2022-11-07 11:05:03
1096
原创 所有代码终将走向-重构
无论是多么优秀的代码，都是有一个从简单到复杂的迭代过程，在这个过程里，在不影响业务项目的使用情况下，需要不断的对代码进行优化，保持或者增加代码的可读性，可维护性。
2022-07-15 18:16:55
311
2
原创 数组的一些小方法
本文来给大家介绍一些日常开发中的一些小方法1. 判断两个数组是否含有重复数据在开发中我们肯定会遇到判断两个数组中是否有重复项的问题，如： [1,2,3,4]和 [2,3,4,5] ，这两个数组中重复项有2，3，那么我们最终得到的值其实应该是true的let arr1 = [1,2,3,4]let arr2= [2,3,4,5] function isRepeat(arr,newArr){ let res = newArr.every((x)=>{ retur
2022-04-27 11:25:32
176
原创 @vue/babel-preset-jsx 和 @vue/babel-plugin-jsx
这两个插件，乍一看很像，功能也是一致的——让vue支持jsx语法那么他们两到底有什么区别呢？ 这里就给大家详细说一说一、背景：在使用脚手架构建项目的时候，拉取下来的项目模版，不能够支持jsx的语法，通过排查发现项目使用的是@vue/babel-plugin-jsx，随即修改为@vue/babel-preset-jsx后即可以正常解析二、@vue/babel-plugin-jsx 该组件只适用于vue3.x使用：npm install @vue/babel-plugi..
2022-02-09 17:05:37
6879
3
原创 数据分析服务 Microsoft Clarity
我们在部署完一个页面后，或者说写完一个通用组件后，我们肯定想要知道，当前到底有哪些人在用我们做的成果，这里就用到了数据统计。一、Microsoft Clarity是什么Microsoft Clarity 是微软提供的网站数据分析的工具，可以通过点击跟踪，滚动跟踪和热图来分析用户如何与您的网站互动，并且将数据可视化如下图所示：二、注册Microsoft Clarity您需要一个Microsoft，Facebook或Google帐户才能注册Microsoft Clarity。
2022-01-21 16:57:17
1743
原创 如何让 js 中的 if 判断更加的丝滑
在开发中，肯定会遇到一些if判断，正常来说不会有什么问题，但是一旦判断条件过多，就会给人一种非常冗余的感觉，阅读起来也是非常之头疼 这里就简单的举个????： 比如我现在有个需求，当前有十个数字输入框，需要十个输入框中的值有一个以上（包括一个）大于10的才能够执行某个操作 实现： 一、普通的if判断 if(num1 >10 || num2 > 10 || num3 >10 || ...){ ...}这样看肯定是不好的...
2022-01-17 10:59:07
219
原创 前端性能优化
前段时间偶然间发现组内有个项目打包后的体积非常的大，如下图所示， 这直接导致项目在部署的时候非常非常的慢，不夸张的说，喝完一杯茶了项目都没部署好，哈哈哈。真的非常影响开发体验，尤其对于博主这种总是冒火的脾气来说，每次部署都得‘骂骂咧咧’，啧啧啧。。。 所以决定，对它下手，优化一些比较刺头的包 首先第一步，找出对体积影响比较大的包，那么如何找出这些包呢？？？这里就需要引入个东西——report，不知道大家有没有见过下面这种五颜六色的图片呢？ 如果不知道那么，在这里告诉你...
2021-10-27 17:27:00
513
1
原创 webpack中external的使用
在我们日常开发中，经常能够听到‘跨域’这个字眼，那么跨域是什么呢？ 跨域其实是由浏览器的同源策略造成的 那么同源策略又是什么呢？ 同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 什么又是同源呢？ 如果两个 URL 的 协议、域名、端口号都相同的话，则这两个 URL 是同源。 具体看下面的表格...
2021-10-09 10:53:38
1714
1
原创 Decimal.js
一、背景我们都知道js是有精度问题的,如下图所示：在一些金额的计算时，对于精度要求的需要比较精准，所以这个时候，我们是需要特殊进行处理的，所以这个时候就引入了decimal.二、decimal介绍decimal.js是使用的二进制来计算的，所以可以更好地实现格化式数学运算，对数字进行高精度处理；使用decimal类型处理数据可以保证数据计算更为精确，还可以节省储存空间。三、使用1、npm命令引入decimal.js文件$ npm install --save d..
2021-09-06 15:55:15
13183
原创 简单请求和复杂请求
一、简单请求请求方法是以下三种方法之一：HEAD GET POSTHTTP的头信息不超出以下几种字段:Accept Accept-Language Content-Language Content-Type DPR Downlink Save-Data Viewport-Width WidthContent-Type的值只有以下三种(Content-Type一般是指在post请求中，get请求中设置没有实际意义)text/plain multipart/form-d
2021-08-25 14:55:19
4040
原创 qs库的介绍
一、qs的引入yarn add qsimport qs from 'qs'二、使用介绍1.Parse Object 基本使用let obj = qs.parse('a=b'); // {a:'b'}是否有原型let nullObject = qs.parse("a[hasOwnProperty]=b", { plainObjects: true }); //无原型链var protoObject = qs.parse("a[hasOwnProperty]=b", .
2021-08-24 14:01:40
1692
原创 CSS命名规范 BEM
在我们开发的时候，写了一个模块，在现有页面中测试都没问题。一段时间后，新需求新页面，该页面一打开，突然发现页面中样式都变样了，一查问题，原来是其他组件的样式和该页面的样式相互覆盖了。我相信大家在工作的过程中，或早或晚肯定都遇到过这样的问题吧 以往开发组件，我们都用“重名概率小”或者干脆起个“当时认为是独一无二的名字”来保证样式不冲突。显然这是不现实的，所以这个时候你就有必要来了解一下BEM的意义了 首先，BEM是什么，BEM是一个高可用的，强大的，而且简单的命名规范，它可以使得你的...
2021-08-09 15:25:02
315
1
原创 oss图片上传
1.背景最近处理了一个需求，将图片的上传方式由原来的公有上传，改为oss私有上传方式。刚开始听到的时候有点懵，什么是私有上传，oss又是什么。所以这篇文章就当作是给大家科普啦～2.什么是对象存储oss比较官方的解释是：对象存储OSS是在云上提供无层次结构的分布式存储产品，为用户提供单价较低且快速可靠的数据存储方案。用户可通过云服务器实例或互联网使用 Web API 接口存储和检索数据。在 OSS 上的数据，用户使用指定域名的 URL 地址，通过 HTTP/HTTPS 协议存储和检索每个独立的数.
2021-08-02 20:28:42
7342
1
原创 vssue 评论插件的使用
一、Vssue介绍Vssue 是一个 Vue 组件 / 插件，可以为你的静态页面开启评论功能。由于你的页面是静态的，没有数据库和后端 的支持。但是你希望让你的页面拥有评论功能，让用户可以登录和发表评论。代码托管平台（如 Github、Gitlab）为你提供了 OAuth API ，Vssue 可以让用户通过这些平台的帐号登录，将评论存储在这些平台的 Issue 系统中，并在当前页面展示。这也是Vssue名字的由来：由Vue驱动并基于Issue实现二、Vssue特点Vssu...
2021-07-26 14:22:43
1453
1
原创 chrome 插件开发入门
1.什么是Chrome插件 在我们的日常开发过程中，我们会在浏览器上安装很多有利于我们开发或者说更方便于使用chrome浏览器的插件，那么到底什么是chrome插件呢？ 其实Chrome插件就是一个用Web技术开发、用来增强浏览器功能的扩展程序，所以也许‘chrome扩展’比‘chrome插件’更贴切于它的意义。2. 开发初体验 1.本地创建一个文件及：test 2.在test文件夹中，创建manifest.json。任何插件都必须要有这个文件，用来描述插件的配置信息...
2021-07-13 15:49:21
2951
原创 vue中provide和inject 用法
我们平时在开发的时候，最常用的父子组件通信方式就是父组件绑定要传递给子组件的数据，然后子组件通过props属性接收。但是一旦组件层级变多时，采用这种方式一级一级传递值非常麻烦，而且代码可读性不高，不便后期维护。而且如果父组件内子组件较多，还需要对每一个子组件一一去绑定数据。 所以vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。在provide中指定要传递给子孙组件的数据，子孙组件通过inject就可以注入祖父组件传递过来的数据，不论组件层次有多深，始终生效。...
2021-07-06 14:36:00
795
1
原创 如何进行科学的技术选型
技术选型对于广大程序员，特别是互联网公司的技术负责人或者架构师来说，一定不陌生。小到日常开发中的一个工具库的选择，大到整个系统语言、架构层面的选择，都是技术选型的范围。...
2021-06-04 09:34:26
1008
1
原创 chrom 性能分析工具 Performance
在chrom的工具栏,有一个面板performance,点开之后操作后,你会看到一堆五颜六色的图表,但是具体是干什么的,未可知performance面板是Chrome 的性能分析工具，那应该和页面有关系，所以我们就从页面性能方向开始看一下一.页面性能受哪些影响我感觉和页面性能挂钩的方向大概有：网络情况、服务器、前端渲染效率、用户端的硬件等,接着详细来看下这几个方向网络网络往往是页面性能比较关键的地方，域名解析、交换机、路由器、网络服务提供商等,任何一个出问题或响应过慢都会有不好的体验.
2021-04-27 16:31:38
1256
原创 npm,cnpm和yarn的区别
yarn和npm一样,都是包管理工具,那么他们两者的区别到底是什么呢,我们应该使用哪一个呢下面我们就来详细看下,它们分别是什么一.NPMnpm是Node.js能够如此成功的主要原因之一npm是围绕着语义版本控制的思想而设计的，下面是从他们的网站摘过来的： 给定一个版本号：主版本号.次版本号.补丁版本号 主版本号： 当API发生改变，并与之前的版本不兼容的时候 ...
2021-04-15 13:55:52
1108
1
原创 为什么需要使用CDN加速
提到cdn,大多数人想到的就是加速器.日常中,为什么有的网站要使用CDN加速?CDN加速有什么作用呢？有人就会说,是由于网站访问速度过慢,要增加访问的速度. 那么网站变慢的原因,到底是什么呢??一、网站访问过慢的原因1. 主机服务器负担重，响应速度慢；2. 网站的图片和内容太大，下载时间久；3. 网站使用了太多不同的脚本和图片，这些脚本和图片没有针对快速加载网站进行优化，加载时间长；4. 网站的"服务器位置"与网站的访问者位于不同的地理位置;二、为什么要使用CDN加速1、CD
2021-04-15 10:58:35
413
原创 vue开发中 import vue from vue 这个vue到底是什么,以及package.json的解读
我们在做vue开发的时候,对import vue from 'vue'肯定是不陌生的但是有没有人具体思考过这个vue到底是什么,从哪里来以及我们使用vue报错的时候为什么指向的文件是vue.runtime.esm.js文件在这里的话,我就做一个简单的分享(菜鸟一只,如果不对,欢迎指正)首先,import vue from 'vue' 这个过程我们来看一下发生了什么首先import Vue from 'vue' 解析为 const Vue = require('vue')。 requir
2021-04-06 18:23:30
2299
1
原创 iframe PostMessage 实现父子组件的传值
我们都知道可以使用iframe可以把一个页面嵌套到另外一个页面内部进行显示,那么这两个页面如何进行传值交互呢, 下面我们就简单的来看一下 首先,新建两个文件,parant.html和child.html(在这里我使用的是vue语法哈~) 首先是将child.html的内容嵌入parent.html中,代码如下所示: <div id="app"> <iframeid="child" src="http://127.0.0.1:5500/...
2021-03-31 10:12:23
16689
1
原创 nvm介绍及使用
什么是nvm？ nvm就是nodejs 版本管理，nodejs有很多版本，我们可能同时在进行两个项目,而这两个项目所使用的node版本又不一样,此时维护node版本就比较麻烦了,而nvm就是为了解决这个问题的,它可以让我们在一台设备上切换不同的node版本.安装 首先下载nvmhttps://github.com/coreybutler/nvm-windows/releases/download/1.1.6/nvm-setup.zip解压并且安装（用默认地址即可) ...
2021-03-29 16:30:22
5935
原创 Element UI 中国省市区级联数据
写项目的时候遇到省市级联动, 使用的组件库是elementui,在这个组件库中没有直接给我们提供省市级联动的选择, 所以在这里给大家说一下, 如何去做1.安装npm install element-china-area-data --save-dev2.使用import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from ...
2021-03-04 09:34:33
598
4
原创 vue项目中 使用 websocket
Websocket是一个持久化的协议，HTTP是不支持持久连接的Websocket其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已比如说我们现在有个需求,实时获取一个网站当前的访问人数, 如果使用http协议去做的话,那我们要使用轮询,用定时器隔一秒查一次,这样的话非常的消耗我们的效率.这个时候就需要websocket了,也就是当数据发生改变的时候让后台主动把东西给我们,而不是从我们前台去要.下面用图来表示一下两种协议:简单的了解了websocket之.
2021-03-02 16:18:49
2294
原创 nuxt入门
想要学习nuxt.js，首先要弄清楚客户端渲染和服务端渲染这两个概念。客户端渲染 和 服务端渲染1. 客户端渲染 服务端只响应数据，不生成html页面。 浏览器负责发送请求 获取数据，得到响应后渲染成页面。 然后客户端从上到下依次解析，如果解析的过程中发现了新的ajax请求,那就再发送新的请求，等拿到ajax 响应结果以后再渲染模板引擎 如下图所示: 优点：服务端与客户端脱离开了，服务端只用写接口，不用进行html操作，html交...
2021-02-25 16:28:22
2441
16
原创 node 搭建本地文件上传服务器
一直想尝试使用node搭建个文件服务器,今天简单写了一下,后面会慢慢完善,一起学习哈首先,我们在做文件上传的时候,很多时候会使用到文件服务器. 从前端来说的话, 我们把数据上传到文件服务器上,然后文件服务器返回给我们一个你所上传文件的一个访问地址也就是说文件服务器首先要读取到我们前端所上传的数据,接着,需要把文件存放到服务器的指定目录下,最后把存储地址存入数据库并返回给前台了解了原理之后,做起来思路就比较明确了准备工作 需要保证拥有node环境 具体的node的安装(...
2021-02-23 14:32:29
1737
原创 vue中 根据权限 动态的设置路由
本篇文章主要讲的是使用vue的框架 vue-element-admin, 来解决根据不同的角色权限, 显示不同的路由.⽅式⼀，后台返回⾓⾊树形路由表，前端添加动态路由⽅式⼆，后台返回⽤户⾓⾊，前端在路由表⾥添加⾓⾊路由权限下面详细的来讲一下,这两种方法:动态路由⽅式⼀ 后台返回⾓⾊树形路由表，前端添加动态路由。登录获 取到⽤户的信息之后，通过⽤户⾓⾊访问后台接⼝获取动态路由，依赖后台接⼝返回路由表 后台数据样例如下: const servic...
2021-01-14 17:12:34
1577
原创 nginx解决跨域问题
在我们前端开发的过程中, 相信大家都遇到过一个让人头疼的问题,那就是跨域问题. 跨域解决的方式有很多,这里主要讲的是如何来使用 nginx来解决我们所遇到的跨域问题 首先,在我们开始之前,首先要知道跨域是如何产生的: 协议 ip 端口号这三者有任何一个不同,就会产生跨域问题 了解了跨域的产生,接着我们就来看看,如何解决它一.下载nginx 下载地址: http://ngin...
2020-12-29 10:57:26
14623
9
原创 nodeJS 处理跨域
我们所请求的url地址分为三部分,分别为: 协议 IP地址 端口号 以上三者,有任何一个不同,则会出现跨域问题 我们可以在nodejs中利用CORS来处理跨域问题 比如我们向后台去发送一个请求,如果此时发生了跨域问题,那么我们可以在后台使用node去写一个服务器代理,来处理跨域,具体如下: 1. 首先 更改你前端页面的访问地址为你node写的代理服务器的地址,如下所示: axio...
2020-12-14 15:06:57
758
2
原创 防抖和节流
防抖(debounce)：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间举例：就好像在百度搜索时，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。节流(thorttle)：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率举例：预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，可是总有一段时间
2020-10-20 15:33:36
116
1
原创 vue中同时监听多个参数
data中定义一个对象：data(){ return{ obj:{ name:'tom', age:24, gender:'男' } }}例如现在我想要监听obj中的name和age属性,那么此时,首先在计算属性中,筛出一个新的对象computed:{ 'newObj':function(){ const {name,age} = this.obj
2020-10-20 15:07:30
453
原创 304,301,302状态码的分析
1.304服务器可以设置缓存机制，这个功能是为了提高网站的访问速度，当你发出一个GET请求的时候服务器会从缓存中调用你要访问的内容，这个时候服务器就可以判断这个页面是不是更新过了，如果未更新过那么他会给你返回一个304状态码。2.301,302301，302都是HTTP状态的编码，都代表着某个URL发生了转移，不同之处在于：301redirect:301代表永久性转移(PermanentlyMoved)。302redirect:302代表暂时性转移(Temporar...
2020-10-20 14:58:21
1017
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人