- 博客(62)
- 问答 (4)
- 收藏
- 关注
RSS订阅原创 分享一个利用redis缓存挡住高频的数据库读写的架构设计
以上架构实际上是将数据库作为数据仓库使用，实际的业务处理放置在redis中的，特别是大大降低了数据库写入的操作，相当于所有的数据库业务相关的写入都进行了合并延时写入。这种思路其实之前也有过，不过之前都是考虑合并http的写入请求，但反馈给用户的时间会大大增加，例如本来1秒响应的，现在需要收集3秒内的写入请求统一处理后返回，那么用户最长要等3秒。其实不只是订单相关的业务，任何涉及到频繁读写的业务，包括但不限于，购物车，硬件运营参数，接收订阅数据等。
2024-02-06 10:33:14
947
原创 svg mask和stroke冲突问题
再说一遍结论实际上svg里，mask对svg内元素起作用的并非元素本身，而是元素几何形状的外包矩形，特别是和stroke有冲突，会产生奇怪的显示效果对我们的启示，尽可能不要对包含stroke的元素进行mask操作，如果必须的话，那么用group标签包起来，确保group标签内存在至少两个几何图形。
2023-08-22 14:20:01
228
原创 小程序一码跳多端的实现架构。。。
现在要实现一个二维码，通过微信扫跳转微信小程序，通过支付包扫，跳转支付宝小程序，（其他小程序也如此）以常用的小程序，微信，支付宝为例，核心在于这个H5页面，
2023-07-18 17:14:07
250
原创 记录一个heatmap.js在strict模式下的bug
node modules/heatmap.js/build里面，heatmap.js,heatmap.min.js两个都要改。或者去掉img.data = imgData;(k.data=l;)也可以，因为上面已经对imgData数组进行修改了。由于ImageData对象的data属性是只读属性，因此在严格模式下会报错的。重点在于527行的img.data = imgData。ImageData的data属性只读，无法修改。出问题的在原始代码的490行~528行。知道问题出在哪儿了，就可以修改了，
2023-07-10 13:27:19
679
原创 vue自定义指令，实现事件的防抖和节流（暂未实现表达式解析和模板编译豁免）
防抖函数debounce和节流函数throttle，网上一抓一大把，此处不讨论，此处讨论的是为何在vue指令中实现，最大的原因，还是懒啊。。。谁也不想每次都import这两个函数进来有人之前实现过这个指令的，但是效果很差，如何在Vue3中实现自定义指令(超详细!为啥效果很差。。。。看最后他是怎么调用的就知道了有两个问题，1是如果需要handleInput传入参数的情况时，没法传入额外参数2.本来简洁的v-on:input="handleInput"成了这鸟样-=
2023-03-23 18:28:08
459
1
原创 Vue组件库出现$listeners is readonly等错误的原因及预防方法
根本原因是因为组件库的package.json中dependencies包含了vue包，然后导致最后打包出来的组件库也包含vue包然后和引用这个组件库的项目中的vue发生冲突。举个例子，project1是vue组件库，package.json中dependencies包含了"vue":“2.6.1”project1打包出了"project1":“0.0.1” 这个组件包。
2023-03-08 17:13:38
2456
原创 一文彻底搞懂vue-cli环境配置文件.env的用法
这三个文件，如果没有在文件里注明NODE_ENV属性，那就默认就是分别对应NODE_ENV=production 对应vue-cli-service build 命令。NODE_ENV属性一般可以省略不写，例如常用的.env.production，.env.test，.env.development。然后就是vue-cli的字段MODE，主要是vue-cli-service build 命令用到。看了很多文章，都没有搞清楚.env文件中哪些是vue保留字段，哪些是继承自nodejs的。
2023-02-23 11:41:09
1458
原创 vue多实例的骚操作，主要用于解决组件全局弹窗面板的问题。。。
通过vue手动挂载实例，并通过render函数传递props进行组件通信的方式，可以实现任意的弹出面板，兼容性强，不用考虑烦人的overflow问题。
2023-01-30 15:48:25
666
原创 全网最详细的vite多页面配置，帮大伙踩坑。
想想也是，调试其实也是先在内存中生成了对应的文件进行的，这里如果不指定生成的文件名，则会无法生成对应文件，字然都是404（但奇怪的是，这儿的filename名字随便起，最终url中不体现，url始终体现的是src/pages/下的demo1.html和demo2.html，但如果不写，项目启动的确是404找不到。4.最后，也是最重要的一点，createHtmlPlugin的pages中，必须设置filename,名字可以随意，但必须要，否则调试都404，在这个的基础上，现在想实现多页面配置，
2022-12-29 18:16:36
2923
2
原创 vue2+vite+vue-cli5 实现vite开发webpack打包
主要是因为即想要得到vite的高效开发模式（免编译）但是最后又想要兼容到IE9（ps，vite自带插件最多IE11而且打包出两份代码）
2022-09-30 17:36:25
3392
1
原创 vue+typescript的几个坑，尤其是typescript的版本必须4.1以上，这个是大坑
关于ts+vue建项目，build时出现的问题解决
2022-09-06 17:51:45
470
原创 全网最详细的js数组slice底层原理详解(附js实现)，深刻理解为何通过slice.call()可以将伪数组转为数组
首先js 数组底层也是一个对象控制台输入以下typeof [] //object可见数组的类型本质上也是object对象然后typeof Array //function可见数组类Array，本质上也是一个js函数类接着[1,2,3] instanceof Array //true可见数组是数组类Array的实例理解了以上内容后，看一下数组对象的特征控制台输入以下[1,2,3]得到一个数组对象，展开可以看到0: 11: 22: 3length: 3[[Proto
2022-04-29 14:24:44
1437
原创 js实现无向图Dijkstra算法
先抽象出路线source,顺便一提有向图和无向图最大的区别在于,0-4和4-0无向图表示的是同一个连通权重,有向图则不然(不仅权重不同,甚至可能只有一个方向连通)const source=[{key:[0,1],value:3},{key:[0,7],value:1},{key:[0,4],value:5},{key:[0,3],value:2},{key:[1,6],value:7},{key:[2,6],value:2},{key:[2,3],value:4},{key:[3,4],value:8}.
2022-04-28 16:45:24
646
原创 2022/4/25 记录一个chrome上backface-visibility和overflow造成的window的scroll监听事件响应不及时的问题bug
chrome 100.0.4896.127，同时期的火狐也一样，ie不支持backface-visibility先普及下backface-visibility主要是用于transform3d中x轴y轴旋转后背面是否可见的样式问题发生在一个dom，同时使用overflow:scroll和backface-visibility:hidden时可能导致鼠标滚轮滚动时，window的scroll监听事件响应不及时的问题，（表现在对dom的操作滞后，例如通过改变dom的位置实现dom的吸顶会失效）目前发现以下
2022-04-25 13:13:48
390
原创 后端三层架构，其中接口是否被滥用了？
发现无论是.net还是java，在传统的web应用中，接口完全没有意义，举以下的例子转账的接口public interface TransMoney(){ bool transMoney(String id,int money);}这里是实现类public class TransMoneyImp implements TransMoney{ @Override public bool transMoney(String id,int money){ //具体实现 }}传统的w
2022-04-15 16:52:06
1236
原创 记录一下oracle字段比较的一个坑
首先where nvl(null,field)=field等同于where field=field最后,等同于where field is not null
2022-03-25 11:05:06
470
原创 全网最详细的nth-child和:nth-of-type的区别(特别是nth-of-type)
:nth-child和:nth-of-type都是找对应元素父元素内子元素(仅包含当前父元素子元素不包含子元素的子元素),然后区别在于:nth-child是找出包含对应元素父元素内所有的子元素然后再去找到对应位置的元素后再去匹配选择器,nth-of-type是找出包含对应元素父元素内的子元素,然后根据样式选择器找到的元素的tag,把父元素内子元素所有对应tag种类分别取出排列后,分别比对对应的位置然后匹配选择器结合以下样例<!DOCTYPE html><html><he
2022-02-24 17:57:26
6003
8
原创 redis的妙用其一,实现服务端耗时操作的异步获取
业务中经常会出现这样一个场景,我们的服务端会去调用第三方api,并且把得到的数据处理后返回给前端(或者需要我们的登录才能调用)一般的做法都是用同步的方式直接在代码中请求,这种方式一定要设置请求的超时时间很短,否则高并发情况下,我们的服务端就会崩溃,因为同步阻塞的原因另一种情况,就是服务端请求的api本来就很耗时,例如一定需要至少1分钟以上的时间才能正常返回,这个时候,可以考虑在服务端使用多线程,用异步的方式获取返回的内容,在不阻塞正常的前端请求的情况下,提前给前端返回正在请求中的状态,从而避免了高
2022-02-09 18:16:59
706
原创 数据库设计其一,前置库的使用场景
首先写这篇文章有个大前提,那就是,我们的web系统的业务库必须只能由我们自己的代码或者自己的连接工具连接,不可以让任何第三方通过数据库链接直连.如果让第三方通过数据库链接直连,相当于把系统的稳定性寄托于他们不会滥用你宝贵的数据库连接然后是如何与第三方进行数据交换,分为以下几种情形1.我方需要获取第三方的数据,我方提供web接口的方式(对方有开发量一般不会接受)我方提供数据库链接的方式(前置库)第三方提供数据库连接的方式(一般很难)2.第三方需要获取我方的数据,
2022-01-25 15:02:08
6810
原创 修改html2canvas源码,解决图片跨域问题
url图片显示并不会跨域,只有要通过xhr获取其blob对象才会提示跨域这就是为何通过html2canvas(dom,{ allowTaint: true //允许污染画布}).then(canvas=>{ document.body.appendChild(canvas);})以上的canvas是可以显示出来的,但仅仅是可以显示,如果dom中存在跨域url的图片,那么生成的canvas是被污染的,无法执行canvas.toDataURL();html2canvas(dom,{
2022-01-12 16:29:58
3640
2
原创 vue data数据响应式赋值的一个坑
直接上代码//vue组件内定义了一个datadata:()=>{ return { obj:{b:2} }},methods:{ m1(){ this.obj.a=1; console.log(this.obj); }, m2(){ this.obj = Object.assign(this.obj,{a:1}); console.log(this.obj); }, m3(){ this.obj = {a:1}; }, m4(){ this.obj
2022-01-07 13:09:06
385
原创 winform下跨线程操作Control的一个坑
例如要在另一个线程里执行Test方法,改变form的标题private void Form1_Load(object sender, EventArgs e){ Thread t = new Thread(Test); t.Start();}public void Test(){ this.Text="aaa";}winform下跨线程操作Control主要有两种方式,1,偷懒的方式直接把Control的检查合法跨线程的设置为false,不检查Control.CheckForIll
2021-12-31 17:39:39
940
原创 数据库表设计其二,中央关系表设计模式
常见的web系统,一般采用关系型数据库例如mysql,oracle,sqlserver之类的数据表的设计,尤其是存在关联的若干表的设计对业务功能的实现,特别是业务功能的可拓展性尤为重要现介绍一种基于中央集成关系数据的中央关系表设计模式以一个常见的业务场景为例表A表示的是 扫地,负责的是id为2的同学,dutyId表示学生id,examineId表示监督的老师ididdutyIditemexamineId12扫地3表B表示同学表idname1
2021-12-29 17:27:03
477
原创 浏览器调用exe并从中获取内容的通用解决方案之浏览器和本地exe通信篇
除了IE支持OCX可以直接在浏览器内部,其他所有现代浏览器都不支持内嵌exe执行并交互返回内容了采用的是本地HttpListener监听端口,然后前端轮询jsonp的方式实现浏览器和本地exe通信,浏览器兼容性高,只要是支持xhr的浏览器都行,exe程序启动可以依靠自定义协议在浏览器打开或者将exe打包成window服务持久化运行即可以下是基础Http类using System;using System.Collections;using System.Collections.Generic;
2021-12-22 16:30:50
1521
原创 才发现,浏览器跨域问题最终只是取决于后端的响应请求头的配置
之前一直以为前端也会直接影响跨域是否成功,例如xhr请求需要加上xhr.withCredentials = true实际上以上代码仅仅是针对跨域请求是否要携带当前网站的cookie而已顺便一提chrome85以上,此方法无效,只能通过setRequestHeader()传递置顶的cookie参考链接浏览器跨域请求实际上浏览器只是对返回的响应头,在非同源的情况下检查是否允许当前站点调用"Access-Control-Allow-Origin"的值,如果是* 或者是当前调用站点就允许跨域调用与其
2021-12-20 10:12:04
249
原创 关于只有id和pid的递归数据无法表示所有的树关系这件事的论证
现有树关系(js对象表示)[{ id:1, pId:null, children:[{ id:3, pId:1, children:[{ id:4, pId:3 },{ id:5, pId:3 }] }]},{ id:2, pId:null, children:[{ id:3, pId:2, children:[{ id:4, pId:3 },{ id:6, pId:3 }] }]}]返回的a
2021-12-16 17:23:26
683
原创 关于实体类封装jdbc返回结果集的实现方式猜想,手动实现封装一对多数据(上篇)
表1,人物表A,id为主键idname1小王2小李表2,物品表B uid为主键uiditembelong1尺子12铅笔13橡皮24圆规25墨水2表A和表B通过表B的belong字段和表A的id字段关联经过观察,orm框架里sql的实现方式如下select t.*,b.uid,b.item from A t left join B r on t.id=r.belong得到如下表id
2021-12-07 10:42:44
232
原创 线段均匀增稠算法
已知线段[0,0],[4,4],要均匀增加一定数量的点(或者每隔一定距离增加一个点)//此处以每隔一定距离增加一个点为例function addPoints(p1,p2,scape){ let res=[p1]; //线段长度 let l = Math.sqrt(Math.pow((p1[0]-p2[0]),2)+Math.pow((p1[1]-p2[1]),2)); let sin = (p2[1]-p1[1])/l; //sin let cos = (p2[0]-p1[0])/l
2021-11-25 18:17:09
86
原创 mysql8实现oracle的connect by order by实现深度优先的树排序
with recursive tab1 as (--此处是定义了一个临时sql快,旨在将原始表里按照排序字段排好后,连接@rownum固定下来with temp_b as (select a.* from (select * from etc_test order by ordernum asc) a,(SELECT @rownum:=0) b)--以下是连接起始数据和union all连接体select t0.id,t0.parent_id, 1 lv, @rownum := @rownum +
2021-11-17 14:39:15
999
原创 互联网访问共享灰产,你所访问的每个网站都在记录你的ip和访问内容,并推送到各个平台......
无语了,随便访问了几篇科技新闻,论坛上就给我推送新闻中出现的内容了,那些新闻内容所在的网站,明显就是收集了我的ip地址和访问内容,然后推送给各个其他平台,如果平台内正好有新闻内容相关的推广,那么自然而然的我把这个称为互联网访问共享灰产,后面是一张巨网,所有网民都在访问的同时,都被记录当前的ip和访问内容,然后各大网站会共享这些信息(也可能存在利益输送关系),从而精准推送内容手机端其实也是一样的,不过手机端的ip变化远比电脑端快的多,所以只能通过app定向收集信息难以通过ip来精准收集信息...
2021-11-04 10:28:05
215
原创 数据库表设计其一,中央字典表设计模式
不多说废话中央字典表,即字典表集成管理,主要用于业务表内存储的代码在使用过程中翻译成对应中文建立中央字典表的意义在于只需要管理一张表,4个字段的增删改查即可实现全系统内代码的翻译工作核心字段如下ID 随机id作为主键可选用自增序列或者uuidCODE 代码,即业务表存储的代码NAME 中文含义,即业务表代码对应的中文含义TYPE 字典类型代码(建议使用字典类型代码,将字典类型对应代码额外存储在另一张表中)OUTKEY 关键字段,这个outkey字段主要用于关联其他信息,例如部门字典表,可能还
2021-10-19 14:38:10
374
原创 jdbc操作oracle的clob字段,重点在于java.sql是对jdbc.sql的封装
准确来说java.sql是封装了包括jdbc.sql等主流数据库驱动两种方式实现oracle的 insert clob字段前提是使用了主流的java.sql创建的connection(从prestatment中获取connection)1.使用了jdbc.sql.CLOB Connection conn = pstmt.getConnection(); //默认从prestatment中获取connection CLOB clob=null; if(conn.isWrapperFor(O
2021-10-15 18:10:43
487
原创 web端文件的上传,服务端的存储,客户端下载设计模式
1.文件上传需要支持多路同时上传,或者单路依次上传,利用web worker 和file 切片实现上传进度,断点续传,多人同传同一md5的文件实现大文件多人加速上传2.服务端存储上传的文件以md5作为名称存储,同md5名的前端实现妙传效果同时存储用户上传的文件原始名称以及生成的随机uuid作为用户文件的唯一标志存放数据库3.下载根据数据库存放的用户文件唯一标志,下载时设置Content-Disposition,设置文件名为用户上传的文件名,提供下载...
2021-09-23 15:29:35
140
原创 记录一下servlet post接收参数的坑
前端利用xmlhttprequest时,如果使用的content-type是 application/x-www-form-urlencoded;charset=UTF-8 ,并且send的内容需要用get一样的格式例如let xhr = new XmlHttpRequest();xhr.open("post","http://xxxx");xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=U
2021-09-22 09:51:32
226
原创 论同一个文件多人同时上传的可实现性
1.首先确定同一个文件是以该文件的md5值(前端通过spark-md5得到)为准2.前端将文件传给web worker,利用解析出的bufferArray的slice方法切片3.后端将要上传的文件生成md5的文件名,此方法必须同步,因为只能允许有唯一的文件名,后续的传同一个文件的人会收到当前已经有人在传那个文件的消息4.后端维护一个hash表,存储的是对应文件md5以及各文件块5.其他传同一个文件的人传的是带前缀的md5文件名,并且传递过程实时记录在hash表中6.根据当前人数和上传进度情况has
2021-09-18 16:33:39
694
原创 记一下window 和linux路径格式的区别
window路径格式作为字符串时String path = "D:\\test\\test\\";linux 路径格式作为字符串时String path = "/home/test/test/";正反斜杠,反斜杠需要转义
2021-09-18 09:48:54
250
原创 ckeditor实现本地图片base64方式上传到编辑区域
不是传服务器,而是上传到编辑区域,效果图如下,URL中,可以填写图片base64,思路就是增加一个上传文件的input,并且把得到的图片文件转为base64赋予URL重写\plugins\image\dialogs\image.js里的add image方法,CKEDITOR.dialog.add("image", function (d) { setTimeout(()=>{ let dom = document.getElementsByClassName("ck-input-u
2021-08-10 17:36:00
1123
原创 js 数组和对象的关系以及区别
以现代浏览器chrome运行一下代码var arr=[]; //定义了一个空数组console.log(typeof(arr)) //输出objectconsole.log(arr.length) //输出0var obj={}; //定义一个空对象以上arr数组在console里展开可以得到以下内容length: 0 //唯一可以读写的,表示的是刚才定义的空数组内的length对象[[Prototype]]: Array(0) //以下是Array原型内的对象 at: ƒ at()
2021-08-04 14:21:19
399
原创 web worker和setTimeout的区别
从表面上看,web woker和setTimeout都不会阻塞js主线程,两者最大的区别是web woker是真多线程,并且无法获取js主线程中的document以及其他会影响windowUI的函数例如alert()setTimeout只是将要执行的内容压栈到队列最后执行,最终执行还是会到js主线程执行的,即运行环境最后还是主线程环境(可以获取document),此外一旦运行了某个setTimeout内容,如果里面的内容不存在其他的异步过程例如setTimeout,ajax,那么在运行这个代码过程会阻塞
2021-07-23 10:32:38
654
空空如也
arcmap 发布服务没有caching切片选项怎么回事？
2022-07-21
请问mybatis里集合类型是如何封装的,即多行数据归并成一行的具体实现算法是怎么样的?
2021-12-08
winform 如何让窗体只显示在具体某个窗体前?
2021-09-29
TA创建的收藏夹 TA关注的收藏夹
TA关注的人