- 博客(26)
- 收藏
- 关注
RSS订阅
原创 antdPro动态路由
因为项目需要依据后端返回条件动态显示路由，通宵研究了一整个晚上搞出来的比较简单的实现方式原理antdPro用的是umi的路由，大体的实现方式是这样的： router.config.js =>.umi/router.js => models/menu.js<=>layouts/BasicLayout.js => compone...
2019-05-22 02:34:29
6673
6
原创 一次有价值的面试题【前端】
// 1: 根据后面的每次调用写出 o 的输出结果：function fun(n, o) { console.log(o); return { n: 10, fun: function (m) { return fun(m, n); } }; } var a = fun(0); a.fun(1); // a.fun(2); // a.fun(3); // console.log(a.
2021-10-25 10:08:57
159
原创 B端web项目处理不同交付之间的接口差异「工程化」
B端web项目处理不同交付之间的接口差异「工程化」逻辑构思文件结构Serve核心封装按需加载文件图形化理解（如果有兴趣可以搞一份思维导图）相关链接逻辑构思最近在JD开发自研IDE的时候遇到个有趣的问题，因为项目面向iot的独特性，有一部分接口是针对不同甲方订制的，那么自然不同的甲方所需要的功能，提供的接口（比如加密sign和token签名）自然也是不同的，以往的 「请求根封装 + 接口列表 」 的方式难以满足其灵活多变的需求，在处理单项目多交付并行的情况时也捉襟见肘，故此重新设计了针对这类问题对于网络请
2021-06-30 15:08:19
252
原创 vue3 动态刷新echarts数据
最近在搞vue3项目，用composition API的写法的话的的确确之前很多插件都不好用了，echarts数据刷新这里也是苦恼了一阵首先setup全局数据用provide和inject就能搞定，主要是数据刷新这里的写法。因为vue3的setup里屏蔽了this，并且在setup调起的时期页面还没构建生成，获取不到元素，所以不能像vue2那样直接this.setOption了，要稍微改动一下...setup() { let echarts = inject("ec"); // 我的项目把echa
2021-05-26 13:33:49
8865
原创 box-shadow单边
首先我们可以先分析道box-shadow的各项属性box-shadow: 左右位移 | 上下位移 | 模糊距离 | 模糊半径缩放 | 模糊颜色 | 其他属性类似于（inset）我们从这里可以有个思路，比如我们想制作底部单边阴影，那么可以把阴影向下位移一些，在做一些缩放，这样看上去就像单边了，demo：box-shadow: 0 10px 10px -10px #ff4c10...
2020-11-15 20:13:34
307
原创 细谈JS的存储方式（堆内存，栈内存）与深拷贝，浅拷贝
堆内存，栈内存大家从一开始学习c/c++的时候对于声明变量就不陌生了，同样也是行文的重要部分，JavaScript也同样，出于JS引擎的独特设计，在分配内存空间时会自动处理不同类型的变量的存储位置，给程序员减轻一些负担，但是同时也加大了一些学习成本，今天我们就来细说一下。先贴定义： 栈内存：引擎执行代码时工作的内存空间，除了引擎，也用来保存基本值和引用类型值的地址 堆内存：用来保存一组无序且唯一的引用类型值，可以使用栈中的键名来取得 显而易见的，堆内存和栈内存在存储的任务上并不相.
2020-11-10 00:40:42
586
1
原创 前端为什么要用服务端渲染？和客户端渲染的区别是什么
SSR（Server Side Render）服务端渲染说到SSR，老程序员肯定不会陌生，web开发最初的上古时期，wordpress，jsp，javaweb都是服务端渲染，这些技术下开发的程序都是传统的SSR架构，这片博客讲的主要是当前前后端分离模式下前端的服务端渲染为什么要做：web开发者对于vue，react，angular这样的前端框架肯定并不陌生，近些年大火的vue和react不约而同的使用了Virtual DOM，其核心做法是将网页内容通过js动态挂载到页面中，这就是客户端..
2020-11-02 11:23:56
1442
2
原创 搭建一个服务端渲染个人博客（更新中
选型用了vue + nuxt前端部分是在服务器上用pm2跑了两个node服务，一个是移动端，一个是web端，分别单独适配，这样减少渲染压力，也减少加载不必要的适配代码，nginx做的UA判断反向代理到两个不同的端口（我用了terminus作为ssh工具，xshell之类的都可，没有影响）更新中......
2020-10-28 10:29:44
338
原创 URL到显示网页最详细的所有步骤，含浏览器请求资源的所有可能情况
·先在地址栏输入url浏览器判断是否为地址（关键词则搜索）·浏览器吊起beforeUnload钩子，等待当前页面处理完毕·域名解析 [1]判断是否有缓存记录该地址对应的ip地址（近期访问过） [2]如果没有则查找本地host是否有记载（就是那个host文件） [3]如果都没有去访问DNS服务器询问ip地址·与主机连接【这里有好几种情况】 第一种情况：就是我要访问的浏览地址 [1]「http协议相关」是否握手连接（...
2020-08-20 17:32:13
584
原创 解决全屏Blur白边问题
还是在写vtuber-music时候遇到的这个问题，背景的全屏图片需要模糊，但是反复论证filter: blur()只能作用于窗口范围，不能通过margin或者top，left的方式顶出去，而backdrop的方式性能差而且兼容性又不好，所以试来试去找到个办法效果图Vue特别方法（css伪类）vue遇到的问题是需要动态刷新背景，而在vue里的css刷新图片url部分是不会携带background-size这个属性的，所以图片变更的代码里带了background-size如下xxx.
2020-07-12 17:11:03
2176
1
原创 vue如何抽象一个客户端级的audio播放模块（多页面同时控制）
因为很喜欢看vtuber哈哈，最近进了vtuber-music的项目组参与开发，项目是vue项目，但因为UI的设计很偏向客户端，我设计了这个客户端级的audio控件，可多个页面同时控制播放，暂停，切歌，改变音量，播放位置等操作项目开发环境快照 http://47.103.218.183项目开源地址https://github.com/vtbmusic/VtuberMusic （dev分支是最新开发进度，其他是灾备备份）逻辑原理先介绍下逻辑原理，由于这个audio需要多个页...
2020-06-15 00:16:43
1654
1
原创 vue常用的页面监听事件（更新中）
监听页面滚动：mounted() { window.addEventListener('scroll', this.handleScroll)},methods: { /** 处理页面滚动*/ handleScroll() { let scrollTop = window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop; console.log(scrollTop)
2020-05-13 04:14:45
816
2
原创 MacOS配置Git的SSH密钥
打开bash先进入.ssh文件夹下cd ~/.ssh然后输入生成SSHssh-keygen -t rsa -C "xxxxxx@xxxxx"xxxx意思是你的github注册邮箱然后会提示你输入两次密码，一次是github的密码，一次是push密码，推荐设置成一样的，免得忘掉www如果有提示下图图说明正确了如果有问题或者想要打开文件夹可以输入open ~/.ssh这条命令会在桌面上打开这个文件夹一切顺利的话接下来拷贝刚刚生成的SSHcat ~/.
2020-05-11 11:11:31
826
原创 js获取当前触发元素的位置（绕过a标签）
需求的由来是这样的：我需要做一个点击的动画效果，涉及到获取当前元素的位置，但是下一层的a标签会干扰到实际的获取情况，所以我需要绕过下面的标签，只获取触发器，下面是图js原生的 getBoundingClientRect()方法，可以获取到当前元素的相对浏览器位置逻辑是获取到元素之后检查这个标签是否为a标签，是则寻找他的父元素（触发器），再用找到的父元素使用get....Rec...
2020-02-11 01:25:59
531
1
原创 Vue/cli 4.x 无法创建新项目的解决办法
自己在vue create的时候发现报错，提示vue package mistach解决办法：core-js版本过于老旧首先卸载vue/cli和vue sudo npm uninstall -g @vue/clinpm uninstall -g vue然后重新install vue，更新版本（bash在这一步有可能warn你core-js过于老旧）然后更新...
2020-01-01 18:46:47
2058
原创 react改变wangeditor源码默认高度
装antdPro的项目同样适用在node_modules文件夹下找到=> wangeditor源码文件夹下的=> release文件夹下的=> wangEditor.js在大概1191行左右找到这样的几行代码或者可以搜索 $tabContentContainer.css 这个字段，在这个文件里是唯一的改height为你想要的...
2019-04-25 20:10:07
610
原创 react + antd 项目常用操作汇总(更新中)
表格内访问地址const columns = [ { title: '访问地址', render: (text, record) => <a target="_blank" href={record.guid}>{record.guid}</a>, },];// 这里的record从数据中取得JS逻辑跳转路由页面co...
2019-04-23 17:52:11
674
原创 react+wangEditor安装及官方demo
组建好react项目之后用npm安装wangEditor：npm install wangeditor安装好之后在页面进行引入（demo是在APP.js写的）：import ... import E from 'wangeditor' // 这里引入wangeditorclass App extends Component { constructor(pro...
2019-04-11 14:29:57
1555
2
原创 git常用项目命令总结（node_modules不小心上传了)
git clone + ssh 或者 https // 拉取项目(要么从新打开，要么cd进入项目)git branch -r // 检查远端分支git checkout -b xxx // xxx是分支名称，加了-b就是说如果没有这个分支会新建一个分支(此时进入这个分支)git branch...
2019-03-31 15:17:51
682
原创 深度讲解rem和em的逻辑与实现原理
需求的由来 大家在做网站或者移动端app、小程序的时候一定都碰到过布局问题，不同的前端工程师也会有不同的解决办法，flex布局，%流式布局，以及衍生出的栅格布局等等方法，方法有很多，但是还是会碰到例如单一页面的局部布局很难处理这样的问题，要是因为个小地方就引用个框架太麻烦，但是直接用css布局还很困难，这里面尤其是像下图这样文章类的页面，为了适配不同的屏幕分辨率要进行缩放，这更是很...
2019-03-29 01:02:17
1054
原创 css方法让图片锁定高宽比全屏居中(背景和img两种)
第一种是把图片放进父元素bacground里，也就是不用子元素：.css{ background: url('../../bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;...
2019-03-27 00:57:25
2142
原创 Cookie详解，如何配置实战级cookie【登录检测】
看到网上有一些博客，但大多都是直接复制粘贴过来的，而且没什么讲解，所以自己想做一个(￣▽￣)~* Cookie是网页记录在本地文件的一段信息，通常用于本地检测用户的登录状态。一般来说，是用户在成功登录后，网站会记录下一个字段，然后设置一个失效期限，当用户再次登录该网址的时候，网站会判断本地是否有该网址指定的cookie字段，如果在失效期限内则能检索到该cookie，也就不必再次登录。反之如...
2018-11-29 21:07:28
1673
原创 【APICloud】选项卡切换万用js函数
之前自己做项目的时候遇到过这个问题，现在想起来就传上来了^-^ 因为项目需求，标签的个数和具体的选项个数都是后台可改变的，所以需要用万用的函数解决标签切换的问题，得益于apicloud的出色设计，最后抠出来了这个方案，简单的例子是这样的（3x4的例子 PS：这里所有的标签和选项的个数和名称以及简介都需要可更换）HTML代码：<div class="frame_2"> ...
2018-06-20 17:17:10
1174
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人