海天酱油zz

碎碎念看了下上次文章发布时间，2个月前。好久没更新了。技术深度方面也没有特别多的一个加深。这次来一个老生常谈的事情吧。api服务封装。这是我干前端这些年一步步慢慢优化过来的代码。特性：1、支持多个不同微服务（核心）2、集中配置中心3、简化开发流程和优化开发体验4、解耦，可移植一、列举下大家都是怎么封装的接口服务我来吐槽下大家这些都会产生什么问题，我全部试过1、增加接口拦截服务，什么重复接口防止提交好多文章都在axios上面做文章，基于axios本身的api进行再封装。

不废话了，这次直接开干。也是我逐步的搭建过程。当手记了总结看最后。本次项目地址：https://github.com/ht-sauce/react-template1、创建项目这个没什么可以说的，就是一个命令：npm create 你的项目名称附带官网地址：https://www.html.cn/create-react-app/docs/setting-up-your-edi...

引言：写这篇文章的目的主要在于刚才看了一位掘友的文章，但是我看了他的代码有点粗糙，甚至是我觉得无法作为一篇好的给予新手的引导文章。这里我先抱歉一声，因为我这样做有损你的声誉。先放上该掘友的文章，还是很不错的，只是希望多点注解会更好：https://juejin.im/post/5d9ff02df265da5baf4104d9#comment一、知识点和目的1、打包优化的目的...

废话部分，不想看的跳过就行了，发发牢骚本来是不想发出来的，但是呢，最后出于装逼，讨论和分享的想法下还是拿出来。而且我对于树形组件的自定义节点这块，还是没有理解透彻。也希望有大神帮忙解惑。然后其实我的眼界还是有限，一直都停留在ui组件上面，但是作为一个普通的前端，大家不都干这样的事情吗?既然你觉得我眼界小，那么请说说你在干什么。（一次偏激的回复）感慨：如果没有网络的世界我想我会抑...

前言：首先，我这个文章不会写非常详细的代码，但是我会把我目前博客开发的富文本编辑遇到的问题罗列出来。然后一点点的说明如何解决。说实在目前遇到的问题，已经想让我放弃自己开发富文本了，真的是非诚勿扰。这个坑没那么简单。（捂脸哭）开发环境：vueCli3.X一、HTML5的富文本contentEditable="true"这个属性我不介绍了，不懂得自己百度二、编写页面遇到的坑（...

指令模式（蒙版） fullscreen Boolean 　 v-dht-loading.fullscreen 在非全屏模式下，dom没有渲染完成下会导致元素顶部对齐 　 background String 0, 0, 0, 0.5 　 text String 加载中... 　 iconSrc ...

页面顶部进度条模式，服务模式（参考elementUI服务模式） mask Boolean FALSE let cesg = {}; //展现与传值 cesg = this.$dhtLoading({ mask: true, background: "red" }); //关闭 cesg.close();...

纯属个人记录，代码很糙，因为博客之前发布过一次，这次是修订之后的。已经比较全面的解决了我目前所遇到的痛点。项目痛点：1、每次接口调用完成都需要处理错误提示和操作成功提示。2、页面蒙版并不能解决用户点击提交的时候重复提交请求解决：1、ajax继承页面蒙版控制2、错误和成功信息既可以全局处理也可以自定义3、ajax代码集成防抖函数4、默认数据过滤处理，当字符串中出现Na...

直接上代码。其中防抖反而是最简单的，我已经把代码吃透，并且附上注释。防抖部分只有代码。但是也没有问题。都来自大神的博客，并且自己小改。大神博客地址：防抖：https://blog.csdn.net/Beijiyang999/article/details/79832604节流：https://blog.csdn.net/Beijiyang999/article/details/79...

说明：这篇博客其实和之前发的一篇博文是差不多的，只不过一个是在vue环境使用，一个是在微信小程序下使用。同样：封装基于promise解决问题：1、ajax加载蒙版2、全局错误提示3、全局成功提示4、防抖功能配合（解决蒙版延迟导致客户能够点击多次）5、默认数据过滤处理，当字符串中出现NaN，undefined，null则过滤，数据为空过滤，注意长度为零的数组不过滤...

首先，我最近写了四个组件了，代码都在我之前的博客当中。我是参考了elementUI的源码来写的。不然，自己写还不知道什么时候能写出来。非常感谢elementUI的开源贡献。这里附上elementUI开源地址：https://github.com/ElemeFE/element下面是介绍我自己的代码部分。一、首先是项目结构，声明，我是在个人项目上直接开发，未打算发布到npm上面。...

组件功能表dht-text 替代p标签，需要提前指定元素的宽高 text String nowrap Boolean TRUE 默认不换行 num Boolean TRUE 默认不控制字数显示，如果控制字数显示则，最后部分用省略号代替 copy ...

dht-img 替代原有的img标签功能，组件本身的宽高都由最外层容器所决定，支持图片加载失败处理 src String src本地图片需要require fit String cover alt String 加载失败 当最终还是加载失败的时候 error-src ...

上一篇总结：上一篇其实代码开发方面，基本原理都看的差不多了，但是发生了无限嵌套的问题。总结下富文本遇到的问题：1、元素跨标签处理2、如何正确选择到你要的元素3、跨行设置元素未选中部分换行（默认回车事件导致）4、多个功能直接交叉使用问题（要有取舍）5、css新旧混合问题6、代码块插入问题7、其实还有更多问题，但是没有开发过的那真的不知其中各种滋味…………目前还...

记得上篇博客我满怀欣喜的去搞富文本，结果撞的头破血流。简直是惨不忍睹。后来我也说了，我的那个有比较严重的问题，后期会考虑重构。（第一版已经放弃了）之后我说我会去看关于后端nodejs koa框架方面的东西。这次呢我选择的框架是eggjs，跳过了koa框架。（我以前用过express，写过很小的网站。）一开始直接翻官方文档说实在看的头昏脑涨。之后逛cnode社区，发现有教程。教程很基...

项目背景这个是我个人博客下一步开发的流程，上一篇博客讲过，我会研究eggjs后端框架，给我的博客建立后端系统。这里有人会说前端不需要学后端。怎么说呢，nodejs也是js，并且像阿里等大公司，别人虽然也用nginx之类，但是前端项目已经不是放在nginx上面跑了，所以，前端开发需要熟悉在nodejs环境下运行和开发。项目已经上传git地址：https://github.com/...

声明转载至：简书：原文地址：https://www.jianshu.com/p/2ba137a02f09代码部分：//模拟数据定时变化startWebSocket() { setInterval(()=> { this.setChangedData(121212); }, 5000);},//二级页面的监听函数addListener: function(ca...

缘由：之前看哔哩哔哩官网登录的时候有一个拼图验证码，很好奇怎么去实现。然后就想着自己弄一个。先给大家看我的最终效果。后面再一点点拆解代码。为什么想着写这个功能呢，主要在于拼图验证码在前端这里会比较复杂并且深入。相比文字拼写，12306的图片验证码都没有拼图验证码对前端的要求来的复杂，和难。我总结下知识点：1、弹窗功能2、弹窗基于元素定位3、元素拖动4、canvas绘图...

写这个组件起因记得就这两天有掘友发一个沸点说找女票千万别找同行，好了，曾经我是erp软件实施，现在转前端。女票也是前端。然后她发我一个链接（打不开看gif图）：http://ipark.jsboon.com/static/dashboard/yjw/yjw.html这个链接的最右侧有一个轮播的效果。说起来这整个页面是不咋的，不过里面涉及的东西都比较复杂。附带gif录制工具：http:/...

原因：今天写项目的时候页面有一个标题和状态一直没有发生变化。我一开始以为是异步的问题，也确实，异步方面确实存在问题。但是当解决异步问题之后，发现我所需要的数据和状态依旧没有发生改变。如图，1部分，我为了验证异步问题做了延迟处理。但是延迟3秒之后数据改变但是页面参数依旧没有改变。所以我在页面上面干脆就做了一个按钮，这样无论如何都是不存在异步问题的。但是依旧不行。我甚至一度怀疑自己...

一、原理：虽然大家都喜欢直接拿代码，但是原理还是不得不说的。走的越远，越发现理论的重要性。关键知识：1：rem是定义在html元素上面的，并且必须设置font-size（别和我扣，我也知道body上面也可以）2、浏览器内用rem就必须在初始的html元素上面定义fontSize大小，并且需要设置随着页面变化fontSize也会随之变化这里很多新手都不知道，直接拿来用虽然看着没问...

表示小程序的第一个项目就踩坑这么多，难受…………一、小程序navigateTo网络延迟产生连续跳转问题，采用节流函数//调用封装的节流函数方式防止bug，一秒内只能跳转一次that.binging();//采用节流函数方式，解决微信延迟多次跳转bug,binging:util.throttle(function () { wx.navigateTo({ ...

1、nginx部分nginx.conf配置文件#user nobody;worker_processes auto;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;event...

项目描述：本人是这个项目中需要使用websocket返回的数据，但是websocet如果放在页面中切换就会频繁的断开重连。这是不切实际的。所以将websocket写在了app.js下面，但是问题也随之而来。虽然app.js下面数据实时变化，但是我websocket的数据不会对应实时更新到别的页面。最后感谢简书的一位大佬，具体链接在最后代码部分：//app.jsApp({ ...

1、我的开发方式全部为es6的语法，并且用es6的class方式封装心跳2、代码仅供参考，虽然实际项目中个人是有使用的3、所有代码我都用注释，就不仔细解释了。但是能用。一、pc心跳class WebSockets { constructor(opt) { //websocket实例 this.ws = null; //url this.url ...

需要使用到的技术：import JSZip from "jszip";import FileSaver from "file-saver";使用函数，上代码传入数据格式如下：[{name:"你的图片名称，不能重复",baseImg:"后端传输给你的base64图片"}]//批量下载门店二维码转化StoreDowQrcode(arr, blogTitle = "二维码"...

本次使用，核心在于promise和async/await的使用。上代码：//获取所有门店的数据,一万家门店情况this.storelists(1, 10000, "", true)//注意async .then(async e => { let that = this;//for循环进行所有数据处理 for (var i = 0; i < e.le...

方案：在index.html中如下图所示用script标签导入&lt;script src="&lt;%= BASE_URL %&gt;api/api.js"&gt;&lt;/script&gt;关键点：必须要参考favicon.ico的引用方式。给你当前的引用路径增加变参，vue因为版本不同变参不同，我是vue cli3下变参是：&lt;%= BASE_URL %...

先贴nginx配置#nginx作为服务器需要的配置 location /miniprogram { root D:/nginx/html/miniprogram; index index.html; try_files $uri $uri/ /index.html; }这段配置就是简单的指向index首页和静态文件所在...

前言：昨天技术总监告诉我个框架（Iceworks），又名飞冰，是阿里旗下的一个开发工具。也没说具体这个东西能解决什么问题。所以我最终的目的是为了知道这个框架有什么用，是干什么的。引用飞冰官网的一句话： 每个后台相互独立，同类功能也需要重复开发，前期开发成本较高 技术方案差异大，人员变动后维护成本非常高 视觉质量参差不齐，使用效率大打折扣 …… 我经过...