![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端体系
文章平均质量分 59
苏一恒
一个博主的自我修养:从扎实的基础到深入浅出,不要做知识的搬运工。
展开
-
mkcert生成本地SSL证书+Nginx搭建HTTPS,并反向代理到web页面
以下操作皆在mac环境下,win朋友请自行调整命令。生成证书安装mkcertbrew install mkcertbrew install nss # if you use Firefox生成根证书mkcert -install通过“钥匙串访问.app”搜索mkcert,并信任证书。生成个人证书mkcert my.com localhost 127.0.0.1证书文件在执行目录中,成功创建之后,会在该目录下生成如下两个文件:证书 XXX.pem私钥 XXX-key.pemNg原创 2021-07-07 11:04:07 · 1632 阅读 · 0 评论 -
ibag——可视化前端脚手架工具,包含CLI和Web引导页
这个是我的本科毕业设计,也算是对自己的大学前端知识的一个汇总。毕业快乐!介绍ibag是一个可视化的、快速的、可定制化的前端脚手架!目前已支持React和Vue。为什么要用ibag对于很多前端开发者,创建一个React/Vue项目后,需要引入一些其他辅助库,如ESlint、Mocha等等,在安装完依赖后,还需要根据相应地文档创建某些配置文件或写相关脚本等等,ibag将以上的流程整合自动化起来,开发者可以自由地根据自己的需求,在可视化的Web页面上勾选辅助库的选项,剩下的就交给ibag吧!特性.原创 2021-07-02 19:09:21 · 890 阅读 · 1 评论 -
为Github库添加Packages
克隆项目到本地git clone https://github.com/***/npm-repo.git初始化npm,添加namenpm init --scope=github用户名这–scope的目的是为了把name:repo改成name:@827652549/repo的形式,这个是github packages必须要求的。添加一个github的token进入https://github.com/settings/tokens/new,勾选repo、 write:packages rea原创 2021-05-27 12:14:50 · 567 阅读 · 0 评论 -
js利用requestAnimationFrame实时检测当前动画的FPS帧率
FPS每秒传输帧数,我们常规的fps一般是60,接下来利用requestAnimationFrame来实现fps检测的demo先说下原理:requestAnimationFrame的回调函数执行次数通常与浏览器屏幕刷新次数相匹配,而利用这个API实现动画的原理就是回调函数内再次调用requestAnimationFrame,所以页面不断重绘时,然后检测1秒内requestAnimationFrame调用的次数,就是当前的FPSwindow.requestAnimationFrame() 告诉浏览器—原创 2020-09-26 12:27:57 · 2942 阅读 · 0 评论 -
ElementUI表格table使用JS控制滚动
ElementUI表格table使用JS控制滚动需求通过js来控制表格的某一行出现在可视区域中分析和实现在ElementUI中,并支持表格table组件的滚动,我这里通过js控制table的scrollTop来实现需求框架封装好了的组件el-table,然而我们并不能直接获取到table,我通过一步步定位到table在el-table的位置,这里就不再阐述定位过程,直接上结果:<el-table :data="tableData" :highlight-current原创 2020-08-11 11:41:00 · 1745 阅读 · 0 评论 -
想要自我介绍与众不同?游戏版“时间线”Canvas模块给你信心!
时间轴游戏模块小新快跑介绍本项目为苏一恒个人网站的(预备)组件之一,以游戏的形式展示自己的比较重要的人生历程(时间轴)。创造不易,感谢手动star????游戏说明键盘左右键控制人物,按压即可移动,松开即可暂停。当经过不同建筑时会有不同的说明,所有的历程按照时间顺序一字排开。安装/启动说明将项目下载到本地并执行命令npm install npm run start迁移说明可以将整个GamePine文件夹迁移到你的项目中,然后引入组件width:设置模块在浏览器中的宽度imp原创 2020-05-16 14:36:24 · 317 阅读 · 0 评论 -
多边形的布尔运算(intersection交集, union并集, difference差异, xor 异或)
文章目录前言正文实现思路效果展示缺点代码实现前言这是工作中的一个需求,要求使用PixiJS来进行绘制,所以这里就不使用原生Canvas或是其他绘制工具了。但归根结底,原理都是一样的。正文多边形的布尔运算( boolean operation on polygons)包括: intersection交集, union并集, difference差异, xor 异或。具体表现如,Photos...原创 2020-05-07 23:25:04 · 7736 阅读 · 0 评论 -
前端代码实现一个棒棒糖(使用canvas,非CSS)
无意间看到春招群里发“面试官让实现一个棒棒糖”,觉得挺有意思,于是就简单实现了一个<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Title</title></head><body>...原创 2020-04-06 10:33:11 · 1462 阅读 · 0 评论 -
【面试必备】用最明白的话总结面试最常问的HTTP
本文旨在用“通俗”一点、又不失专业的话术,来说明白这些知识点。文章目录HTTP请求方法URL和URI的区别GET和POST有什么区别?PUT和POST都可以给服务器新增资源,有什么区别?PUT和PATCH都可以向服务器更新资源,有什么区别?HTTP请求报文是什么样的?HTTP响应报文是什么样的?聊一聊HTTP首部有哪些?RFC2616定义的47种首部字段通用首部(General Header F...原创 2020-03-31 08:26:28 · 332 阅读 · 0 评论 -
第一次发布npm包时可能遇到到问题。重名、邮箱验证、登录账号、淘宝源换成npm源
怎么发布自己到模块到npm?这个文章写得简单明了,这里我就不过多阐述。https://www.jianshu.com/p/f5d4c891830f不过补充一点:在发布包之前,首先去npm市场去搜以下有没有重名,如果有重名是会发布失败的。问题1:邮箱验证npm ERR! code E403npm ERR! 403 403 Forbidden - PUT http://reg...原创 2020-03-05 13:06:50 · 4666 阅读 · 0 评论 -
Flex弹性布局的用法+圣杯布局
Flex布局弹性布局基本上能解决所有的布局方案。基本概念采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start...原创 2020-02-24 09:44:09 · 347 阅读 · 0 评论 -
第一次做完React项目后你可能需要了解的。
部署项目使用Restful的React项目编码完成后,需要打包和后端代码进行接轨。在package.json设置代理proxy,将ip:端口号与后端代码服务器匹配。react项目npm run build以打包项目。将生成的build文件夹部署到Nginx服务器上进行反向代理。后端代码部署到tomcat上。如果这台主机是云服务器的话,莫忘了配置域名,同时要在ECS实例控制台中开放端口...原创 2020-02-23 21:32:01 · 865 阅读 · 0 评论 -
正则表达式常用助记
正则表达式普通字符 没有显式地指定为元字符的所有打印字符和非打印字符.包括大小写字母、数字、标点、其他符号.非打印字符字符描述\cx匹配一个由x指明的控制字符,如“\cM”代表“Control-M”;x必须为大小写字母\f匹配换页符\n匹配换行符\r匹配回车符\t匹配制表符\v匹配垂直制表符\s匹配任何空白字符,包括等...原创 2020-02-19 23:37:57 · 238 阅读 · 0 评论 -
React自定义组件使用onClick传参注意:onClick只是一个名字而已!
核心:React自定义组件不是真实DOM,所以没有onClick属性,如果对React自定义组件写上onClick,也只是个单纯的名字而已,onClick的值作为props传到子组件.例如:function Square(props) { return ( <button onClick={props.onClick} ...原创 2020-02-12 18:59:08 · 3365 阅读 · 2 评论 -
A template was not provided. This is likely because you're using an outdated version of create-react
在使用create-react-app创建项目时,控制台爆出这个A template was not provided. This is likely because you're using an outdated version of create-react-app.Please note that global installs of create-react-app are ...原创 2020-01-31 20:34:43 · 2666 阅读 · 0 评论 -
最短的话给你讲清楚box-sizing(盒模型属性)
box-sizingbox-sizing是更改盒模型的属性,有两个属性值: content-box:对应W3C盒模型 border-box:对应IE盒模型W3C盒模型内容宽高不包含padding和border,IE盒模型包含.W3C盒模型示例当W3C盒模型时,如果宽高固定,再设置padding或border时,总尺寸=原始尺寸+增加的尺寸例如,原始宽度100px,...原创 2020-01-20 10:12:32 · 490 阅读 · 0 评论 -
web网页实现打电话,发短信,发邮件等:万能的a标签
a标签等href属性中等URL可以是浏览器支持等任何协议不废话,直接上代码<a href="tel:10086">打电话10086</a><a href="sms:10086">发送短信</a><a href="mailto:strick@pw.org?cc=jane@pw.com">发送邮件</a>在线演...原创 2020-01-19 14:25:52 · 1033 阅读 · 0 评论 -
webstorm打开的页面如何通过手机访问?
情景:静态页面想用手机测试。电脑软件webstorm中的项目,在电脑打开访问,复制浏览器地址,并修改localhost为本地IP地址,在手机上无法访问。原因:复制的浏览器地址端口号大于10000,所有无法访问解决:设置端口File | Settings | Build, Execution, Deployment | Debugger:Built-in server1.设置端口小...转载 2020-01-19 11:51:14 · 633 阅读 · 0 评论 -
React开发引入antd后首次加载过慢的解决办法
我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门:https://github.com/827652549/CanvasStudy解决问题的第一步,先分析原因:打开开发者工具=》NetWork,先clear一次,刷新,在network中可以看到,加载时间耗时...原创 2019-02-28 23:06:24 · 7598 阅读 · 0 评论 -
IDEA向右复制一列的实现,本列元素同时复制
我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门:https://github.com/827652549/CanvasStudy在做项目时,有一段从json中提取的代码 "n0": 0, "n1": 0, "n2": 0, ...原创 2019-03-05 14:13:18 · 3315 阅读 · 3 评论 -
html2canvas的ignoreElements的使用方法
我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门:https://github.com/827652549/CanvasStudy在用hrml2canvas时,官方文档针对于ignoreElement属性给出了以下说法:其中中间列表示默认值。突然箭头...原创 2019-04-13 20:33:03 · 10591 阅读 · 4 评论 -
react+antd项目的打印功能的另类实现(html2canvas)
我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门:https://github.com/827652549/CanvasStudyreact+antd项目的打印功能的另类实现(html2canvas)需求:在react+antd项目中实现指定区域的打印功...原创 2019-04-13 21:13:01 · 5901 阅读 · 6 评论 -
搭建react环境之babel配置
本地安装 $ npm install --save-dev babel-cli编译插件ES2015转码规则npm install --save-dev babel-preset-es2015React ES2015转码规则$ npm install --save-dev babel-preset-reactES7不同阶段语法提案的转码规则(共有4个阶段),选...转载 2019-04-24 18:04:35 · 4144 阅读 · 0 评论 -
antd-mobile create-react-app react 按需加载无效
我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门:https://github.com/827652549/CanvasStudy不管你什么原因,你最好先看看官方文档https://mobile.ant.design/docs/react/use-with-...原创 2019-04-25 12:03:45 · 281 阅读 · 0 评论 -
JavaFX读取摄像头(JavaFX嵌入Swing视频流的方法)
我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门:https://github.com/827652549/CanvasStudy目录概述核心工具主要过程概述Java嵌入带有Swing视频流的Jpanel核心工具webcam-c...原创 2019-07-26 15:17:04 · 3549 阅读 · 12 评论 -
JavaFX、Controller、FXML之间传递变量、函数
我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门:https://github.com/827652549/CanvasStudy写在前面如果为了解决此问题,你有多次去使用各种方法去尝试JavaFX的加载顺序、试验自己的猜想是否正确,那么我将直接用最简洁的话...原创 2019-08-01 11:15:41 · 4126 阅读 · 2 评论 -
【通用】Mac在终端中为文件夹开启最高权限(起源于idea创建node项目)
在使用npm的过程中,出现一个常见的错误代码-13的权限问题,之前都是直接在npm命令前加上sudo来解决,但是这次,我使用Idea创建node项目时,又出现了那个报错,我知道那是权限问题,但这次操作者不是我,而是idea,他可不会加sudo。所以,问题可以这样解决:找到你需要开启最高权限的文件夹A的目录B 用终端打开B目录 chmod -R 777 文件夹名A意思,...原创 2019-09-06 01:19:17 · 1702 阅读 · 0 评论 -
妙啊!简单理解Node中模块化(module)的实现原理。(module.exports和require的原理)
什么是模块化????️在使用Node写代码的时候,我们常常会使用module.exports来导出一个变量或函数,用require(文件名)来导入对应的变量或函数示范:在Node上写代码的小伙伴都知道:先来看这段代码(hello.js)var str = '你好';function hello(name) { console.log(str+','+name+'!');};...原创 2019-09-06 13:15:22 · 613 阅读 · 0 评论 -
百度统计网站流量出现“代码未生效”的应对情况
解决“代码未生效”你可能像我一样,使用百度统计来统计网站的访问情况,但是我在按照官方给的方法添加入我的js统计代码时,在百度统计管理台检查显示“代码未生效”。我的网址其实是一个用于跳转的页面,目的是跳转到其他页面<html lang="zh-CN"><head> <meta charset="UTF-8"> <title&g...原创 2019-09-11 23:27:08 · 8367 阅读 · 0 评论 -
mac npm install XX权限权限报错的完美解决方法(修改npm全局安装包的位置,解决EACCES权限拒绝问题)
简介 在macOS系统下,npm默认的全局安装路径是在/usr/local/lib/node_modules下。例如:当我们执行npm i -g vue-cli时,实际上是把vue-cli这个模块安装到了/usr/local/lib/node_modules目录下了。 ⚠️注意:/usr/local/lib这个是系统目录,会有权限问题,虽然可以使用sudo执行,但是还是有部分机器,即...转载 2019-09-17 15:56:24 · 3089 阅读 · 2 评论 -
第一次在MDN上贡献自己的代码
发现问题最近在研究HTML5 Canvas中的CanvasRenderingContext2D.transform()这个方法,它是用来坐标变换的函数,在MDN上学习方法的时候,我看到是中文页面版,但是在演示区块(如下图)有个bug,每次修改参数值都会带来canvas页面的一个错乱。当我查看演示源代码时发现了一个问题,就是每次修改后没有重置变换的单位矩阵,从而导致图像显示不正确。解...原创 2019-09-19 22:15:20 · 267 阅读 · 0 评论 -
web前端知识体系梳理
前言现在是信息时代,经过 web1.0 时期、web2.0 时期到现在的移动互联网时期,信息获取越来越高效,坐着不动就会有大量的新闻、博客、资讯向你推荐而来。作为一名靠谱的程序员,你免不了要查阅大量的文章、视频和书籍来充斥你的知识量,不断学习。但是现在网上大量的信息堆积起来,对于你来说意味着什么?你如何去合理的筛选、梳理这些获得的信息,又如何去知道自己现在还缺什么信息?到这里就应该提出本文...转载 2018-12-03 13:46:56 · 357 阅读 · 0 评论