- 博客(47)
- 收藏
- 关注
RSS订阅原创 关于绝对定位确定div高度
关于绝对定位：相对于最近的已定位的父元素进行定位，脱离原有层。才发现定位还有个妙用，可以确定自适应高度：在父元素高度确定的基础上，同时设置top、bottom的值，可确定当前div的高度...
2020-11-21 14:52:44
1103
原创 tomcat存放静态资源访问跨域问题
问题：将一较大的静态资源文件放在tomcat上，页面请求访问，出现跨域问题解决：tomcat/conf/web.xml加入如下配置，设置允许跨域<filter> <filter-name>CorsFilter</filter-name> <filter-class>org.apache.catalina.filters.CorsFilter</filter-class> <init-param> <
2020-11-19 14:01:12
1585
2
转载 微前端-初步理解
微前端入门必看：https://alili.tech/archive/ea599f7c/single-spa中文文档：http://www.mianshigee.com/tutorial/single-spa-5.x-zh/入门初试文档：https://www.cnblogs.com/scdisplay/p/11648701.html#!comments微前端的应用场景?项目技术栈过于老旧,相关技能的开发人员少,功能扩展吃力,重构成本高,维护成本高.项目过于庞大,代码编译慢,开发体差,需要一种更
2020-10-23 17:33:40
236
原创 JS中的类、原型与继承再理解
JS中的类与继承1.面向过程与面向对象2.封装2.1 创建一个类2.2 属性与方法封装2.3 创建对象的安全模式3.继承3.1 子类的原型对象-类式继承3.2 创建即继承-构造函数继承1.面向过程与面向对象面向过程按照传统流程编写一个一个函数来解决需求的方式，即为面向过程变成方式面向对象把需求抽象成一个对象，然后针对这个对象分析其特征(属性)与动作(方法)，这个过程就是面向对象编程。其中，这个对象就是我们所说的类，把这些需求整理放在一个对象里的过程，就称之为封装的过程。Javascrip
2020-10-22 17:24:36
213
转载 JavaScript 中 console 的用法
JavaScript 中 console 的用法偶然看到这篇文章，解锁console更多用法。用了这么多年console.log的我，竟然不知道还可以这么用！文章地址：https://www.cnblogs.com/xunxiao/p/8861894.html在此，我也记录一下：...
2020-10-16 15:57:42
158
原创 关于动画播放的一些记录(setInterval和requestAnimationFrame)
FPS （每秒传输帧数(Frames Per Second)）FPS 表示的是每秒钟画面更新次数。我们平时所看到的连续画面都是由一幅幅静止画面组成的，每幅画面称为一帧，FPS 是描述“帧”变化速度的物理量。 理论上说，FPS 越高，动画会越流畅，目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲 FPS 为 60 frame/s 时动画效果最好，也就是每帧的消耗时间为 16.67ms。 对于不同帧频的用户体验大致如下：能够达到 50～60 FPS 的动画将会相当流畅，
2020-10-16 15:31:05
348
转载 关于浏览器调度进程与线程的一些记录
1.查看浏览器进程快捷键shirft + Esc2.浏览器进程从上面的图我们可以很明显的看出== Chrome 是一个多进程的架构==，我们打开一个浏览器时会启动多个不同的进程协助浏览器将页面为我们呈现出来：浏览器进程插件进程GPU进程渲染进程浏览器进程浏览器最核心的进程，负责管理各个标签页的创建和销毁、页面显示和功能（前进，后退，收藏等）、网络资源的管理，下载等。插件进程负责每个第三方插件的使用，每个第三方插件使用时候都会创建一个对应的进程、这可以避免第三方插件crash
2020-10-14 17:12:09
157
原创 nginx配置踩坑记录
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2020-09-21 16:56:06
361
原创 浏览器安全机制-----Samesite
iframe内嵌其它系统登录页：开始是可以登陆成功的，过了几天，突然无法登陆了，而浏览器直接访问内嵌系统，还是正常登录的，这是为什么呢？ 看到如下警告信息：“Samesite”，这可是第一次见，于是查一查：现象火狐可以、chrome版本<80可用问题了解Chrome 51 开始，浏览器的 Cookie 新增加了一个SameSite属性，用来防止 CSRF 攻击和用户追踪。Chrome升级到80版本后，默认限制了cross-site携带cookie，导致cookie失效我这里就是i
2020-07-31 15:16:53
770
转载 函数与原型再理解
数据类型与函数是很多高级语言中最重要的两个概念，前者用来存储数据，后者用来存储代码。JavaScript 中的函数相对于数据类型而言更加复杂，它可以有属性，也可以被赋值给一个变量，还可以作为参数被传递…正是这些强大特性让它成了JavaScript 的“一等公民”。this 关键字什么是 this？this 是 JavaScript 的一个关键字，一般指向调用它的对象。这句话其实有两层意思，首先 this 指向的应该是一个对象，更具体地说是函数执行的“上下文对象”。其次这个对象指向的是“调用它”的对象，
2020-07-08 09:46:44
435
原创 js 数据类型深入理解
1.undefined类型判断undefined类型：推荐方法：if(typeof x === ‘undefined’)；var x; //undefinedvoid 0; //undefined--常用于表示不做任何操作2.Number类型Infinity代表无穷大，加上负号，代表无穷小使用场景：可表示最高优先级或最大权重精度问题：原因是计算时js引擎会先转为二进制，加法运算后，再转回十进制，对于小数位易出现误差['0','1','2'].map(parseInt) //[0
2020-07-07 20:01:56
181
原创 深入理解DOM操作
什么是 DOMDOM（Document Object Model，文档对象模型）是 JavaScript 操作 HTML 的接口（这里只讨论属于前端范畴的 HTML DOM），属于前端的入门知识，同样也是核心内容，因为大部分前端功能都需要借助 DOM 来实现，比如：动态渲染列表、表格表单数据；监听点击、提交事件；懒加载一些脚本或样式文件；实现动态展开树组件，表单组件级联等这类复杂的操作。如果你查看过 DOM V3 标准，会发现包含多个内容，但归纳起来常用的主要由 3 个部分组成：DOM 节点
2020-07-07 19:01:24
353
原创 ant-design-vue按需加载报错
按照官网提供配置方法进行配置：ant-design-vue按需加载npm run dev运行报错如下：这里试错后提供两种解决方案：1.babel.config.js中配置的style:true;修改为style:“css”;["import", { "libraryName": "antd" }]: import js modularly//在项目编译阶段，可以对引入的 antd 样式文件进行编译，从而可以压缩打包尺寸；["import", { "libraryName": "antd", "
2020-06-28 15:59:36
785
原创 web 渲染性能认识
看到如下几篇文章有感：帧详解(https://aerotwist.com/blog/the-anatomy-of-a-frame/)chrome运行时性能瓶颈分析performance渲染性能概述：https://developers.google.com/web/fundamentals/performance/renderingcss触发器：https://csstriggers.com/坚持仅合成器的属性和管理层计数：https://developers.google.com/web/fun
2020-05-11 15:14:14
305
原创 tomcat对前端部署web应用的贡献--静态资源压缩和history路由模式的路径映射
关于tomcat的及静态资源压缩：问题：vue工程打包后的app.js大小是2.3MB，请求时间过长除了代码级别的打包优化外，tomcat竟然也能做出一些贡献，如下是tomcat做出相应设置后的请求详细：如上明显看出请求效率明显提升，那我们是做了什么工作？怎么来理解呢？首先看鼠标hover时提示的这句话407KB transferred over network, resource...
2020-04-15 11:10:55
1312
原创 SVG.JS使用animate循环动画设置
最近有需要进行svg的绘制，接触到了这个svg绘制插件svg.js基础绘制参考官网说明：https://svgjs.com/docs/3.0/shape-elements/#svg-rect以及svg基础绘制说明：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes当然官网也有很多功能说的不太详细，比如：...
2020-04-09 16:36:08
2414
原创 linux下前端部署常用命令
cd到指定文件夹ls：查看当前子目录结构文件压缩：zip -q -r xx.zip xx文件解压：unzip xx.ziptomcat：cd到bin文件夹tomcat是否启动：ps aux | grep tomcattomcat启动：sh startup.sh或者./startup.shtomcat关闭：sh shutdown.sh...
2020-03-25 10:51:26
426
转载 vueCli@3.x自定义插件开发(npm发布)
这里我完全按照以下博文教程操作：参考教程：https://www.cnblogs.com/wisewrong/archive/2018/12/28/10186611.htmlnpm官网说明：https://www.npmjs.cn/getting-started/publishing-npm-packages/这里有几点需要注意：包命名：包名不能和npm上已有包重名，否则publish发布...
2020-03-03 17:37:01
336
原创 vueCli@3.x工程模板
├── public │ ├── favicon.ico // 网站图标 │ ├── lib // 存放直接引用、不经过webpack依赖处理的静态文件，如turf.min.js│ └── index.html // 作为入口模板,也是main.js 绑定的 dom├── src // 整个工程文件目录│ ├── api...
2020-02-27 10:37:35
228
原创 vue--温故而知新
1.vue组件中的data为何声明为函数(return)首先，Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。其次，当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个...
2020-01-07 17:00:27
153
原创 adobe xd使用的几点记录
记录一下xd使用，还不熟悉，偶尔画一画东西，防止忘记1. 新建画板快捷键：A，即切换到画板模式，鼠标点击文档空白处即可新建画板，右侧面板是画板各移动端型号和不同分辨率参考模板2. 缩放画板按住Alt键，滚动鼠标可缩放ctrl键，结合+/-可进行画板缩放3. 图标使用图标库建议使用iconfont，图标导出为svg/AI，直接拖入画板，即可使用4. 图层选中鼠标点选-直接选...
2019-12-30 19:11:40
1499
原创 mockJS入门-前端接口请求数据模拟
使用场景：前后端分离，接口返回数据不能及时提供，导致前端效果调试受限制。这时我们就需要自己模拟数据来进行前端效果调试，而mockJS就是帮助我们提高模拟数据效率的一套工具库。测试环境：vue@3.0，axios服务请求mock安装npm install mockjs --savemockjs配置在main.js中配置import Mock from 'mockjs'Vue.p...
2019-12-25 11:43:16
437
原创 lodash入门使用
之前有常看到lodash，但是一直没有详细了解，也没有用，现在有时间可以认真看下了。好多东西都是，没了解没入门都会觉得应该不会那么容易上手，然后就暂时放置，然后安于原来熟悉的开发方式了，还是一个字 —— 懒。可能尝试一件新事物并没有想象中那么地花费时间和精力，坚持一个好的习惯也没有想象中那么的艰难~——————————————————————————————————————————————...
2019-12-24 14:11:11
614
原创 CSS伪元素常用效果实现
伪元素：顾名思义，不是真正的dom元素，或者可以说，他是依附于某一特定dom元素的虚拟dom元素.我们可以利用伪元素解决很多样式问题，今天就是想详细列举回顾下：清除浮动对浮动影响的父元素，添加伪元素样式（当然清除浮动也有别的办法）.box:after{ clear:both; content:'.'; display:block; width: 0; height: 0; ...
2019-12-23 15:18:20
284
原创 web端css实现高斯模糊：filter/backdrop-filter
客户要求实现前端实现毛玻璃效果：即PS中的高斯模糊效果翻了翻资料发现还真是能实现，甚至连正片叠底效果都能实现，不得不感慨css3的日益强大。1. dropback-filter:用法：直接作用于当前元素，当前元素及其父元素，或其背景都会被高斯模糊/* SVG 过滤器 */backdrop-filter: url(commonfilters.svg#filter);/* <fil...
2019-12-20 16:47:03
2185
原创 H5新增crossOrigin属性
之前遇到问题回顾：leaflet接口初始化栅格底图(protobuf二进制转图片)，因chrome浏览器自动升级至v77版本，栅格底图无法正常显示，(浏览器直接打开可显示图片，pbf请求状态200，控制台报跨域警告，火狐、edge等浏览器正常请求和显示)。解决过程：后台栅格图服务已设置允许跨域，前端调用leaflet API接口，无法尝试另外的前端跨域处理想部署同一台服务器，使其同源，栅...
2019-10-28 15:17:09
697
转载 Promise 笔记
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。...
2019-10-23 11:33:45
152
转载 Set、Map结构笔记
SetES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构(new Set)。add()方法向 Set 结构加入成员， Set 结构不会添加重复的值Set函数接受数组作为参数，也可接受类似数组的对象作为参数，提供了一种数组去重的方法。 [...new Set(array)] Array.from...
2019-10-22 10:21:49
90
原创 flex结合ellipsis实现同行元素同时自适应与优先自适应
遇到过这样的需求，html代码：<p class="p"> <span class="price">建议零售1000元整</span> <span class="text">条形码：23543654765876900000</span> </p>css代码：.p{ width:300px;...
2019-10-16 18:03:37
357
原创 Vue中v-for隐藏的坑 - 不能实时更新
用v-for循环出一个子组件，更新父组件的状态时，希望子组件中相应更新状态，可是，更新后的状态却没有传递到子组件中进行更新，问题的解决历程如下：1. 反省是不是我哪里的写法错了，忘记加key，于是加上key主键：然而并未有什么作用？我首先确认了，父组件中状态确实更新了，那么子组件中呢2.父组件setXXState方法执行后，我让子组件TitleBox组件forceUpdate(...
2019-08-26 11:01:15
5557
原创 关于日期的相关处理方法
时常会遇到一些关于日期的处理逻辑，以下就此做一些记录，方便以后用：1. 判断是否为闰年能被4整除但不能被100整除，或可以被400整除function isLeapYear(year) { return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0); }某个月份是有29号，则为闰年functi...
2019-08-15 18:51:12
214
原创 vueCli@3.0安装插件莫名报错，可能原因
vueCli@3.0安装插件时，常莫名报错：安装axios/iview：vue add axios/iview --savenpm ERR! errno -4048，Error: EPERM: operation not permitted这里看来时权限问题，其实不然，因为之前安装都是ok的，以后从这几方面尝试下：重启电脑，没有什么时重启解决不了的可能是npm缓存导致，这里可强制清下...
2019-08-13 13:48:53
781
原创 关于vue-cli@3.0中使用EasyScroll插件--jsx语法以及Babel7配置
新项目决定尝试vue-cli@3.0脚手架，脚手架内容变动较大，还在一步步地踩坑，这里针对jsx语法支持和babel7配置做踩坑记录：需求背景：@2.0中一直在用一款滚动条插件EasyScroll，此插件依赖JSX语法，原用法1.安装vue-jsx插件npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-...
2019-08-08 16:45:01
1406
原创 对于高清图片背景加载慢的处理新的
前端做登录页时常会遇到这样的问题：要求登录页背景图高清，可高清图片太大，普遍加载慢，导致加载过程中背景图不完整而使交互体验变差关于这一点我一直这样做的，给背景图容器，多加一层同宽高的父容器，分别设置背景图即处理一张低分辨率模糊，最主要是小、加载快的背景图pre-bg压在下面，上面一层放高清大背景bg，加载过程中，pre-bg很快加载完成，我们会立即看到一张模糊的背景图紧接着就是高清b...
2019-08-02 09:54:11
1604
原创 vue-cli@3.0使用Axios请求本地json文件报错404
想要本地模拟json数据请求，@3.0版本脚手架较2.0版本改变较大，实现过程中发现还有很多坑需要踩一踩，这里需要做一些说明：vueCli@3.0版本脚手架对外暴露的静态文件入口是public文件夹(原来是static)，这里本地json文件也应该放在这里网上有些资料说相对路径会报错，绝对路径可以，这里测试发现，加上本地访问域名和端口一起访问才可以这里就很坑的感觉了，还没有找到其他的可...
2019-07-22 17:07:46
3516
转载 前端设置特定IP对网站的访问限制
偶然遇到这样的需求：只设置部分网段IP对当前网站的访问权限，第一眼看到这个需求，我的第一反应是，这必然不是在前端来处理的，前端也处理不了。随后网上查了一下，还真看到挺多这方面的资料：1.网上有很多IP查询的入口，这里我们以搜狐入口为例，2.设置我们可访问的ip列表IPList3.查询本机IP，若不在IPList内，则强制退出，转至空页面代码实现如下：<script src="h...
2019-07-19 14:55:59
3475
原创 vue-cli@3.0使用Axios插件记录及本地代理配置
vue-cli@2.0版本时，一直在用vueResource，但似乎axios呼声更高。所以vue-cli@3.0决定使用axios试试。3.0版本的插件安装方式有所改变：vue add xxx下面按照操作顺序来说：1.安装axios插件安装及使用vue add axios安装成功后，终端提示已更新package.json/package-lock.json/plugins/axios...
2019-07-18 10:46:23
570
转载 GPU与CPU比较
一、CPU与GPU对比CPU是一个有多种功能的优秀领导者。它的优点在于调度、管理、协调能力强，计算能力则位于其次。而GPU相当于一个接受CPU调度的“拥有大量计算能力”的员工。下图是处理器内部结构图：DRAM即动态随机存取存储器，是常见的系统内存。Cache存储器：电脑中作高速缓冲存储器，是位于CPU和主存储器DRAM之间，规模较小，但速度很高的存储器。算术逻辑单元ALU是能实现多组算术...
2019-07-12 15:23:05
988
原创 excel基础操作-数据有效性和条件格式
数据有效性：加入可选列表项选中带操作行列，点选数据-有效性，选择“序列”，来源中选择已准备的列表条件格式：对特定内容单元格进行颜色样式区分选中带操作行列，点选条件格式 - 突出显示单元格规则，选择合适的规则项，可多条规则叠加...
2019-06-28 09:50:50
4590
转载 两台服务器之间快速文件传输
百度经验：https://jingyan.baidu.com/article/7908e85c77055eaf481ad223.html涉及命令：用CRT分别连上两台需要传输文件的linux系统服务器，并检查防火墙是否关闭。查看防火墙状态：/etc/init.d/iptables status若防火墙启用，暂时关闭防火墙：/etc/init.d/iptables stop2.检查...
2019-06-27 14:21:42
4851
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人