前端开发
文章平均质量分 60
羽化半径
底层的码农
展开
-
google recaptcha v2 and v3
网站之前一直用的是google recaptcha v2 ,同一页面内如果有多个表单需要保护也很麻烦,官方也没什么文档。自己折腾了一下大致如下:单页面多表单利用callback引入js:<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script> <script type="text原创 2021-03-19 15:22:35 · 1357 阅读 · 0 评论 -
Axios 跟 easymock一些傻傻分不清的问题
easymock除了经常宕机其实还是蛮好用的,省了很多事。当然你要是没仔细阅读他们的api要求设置不对也是会蒙圈的。mock端:客户端:axios默认是以json形式发送数据就是什么都不设置的情况下其实默认是这样的,headers: {'Content-type': 'application/json'}这些貌似全没问题,但是你会发现easymock根本拿不...原创 2019-08-15 17:51:03 · 311 阅读 · 0 评论 -
Git和Github的一些常用操作命令
记性不太好经常忘记命令,整理一下方便翻阅。查看git设置git config --list设置git用户git config --global user.name="Your Name"git config --global user.email="Your Email"初始化gitgit init一般情况下还需要创建一个.gitignore文件设置忽略提交的文件,...原创 2019-08-07 17:38:22 · 128 阅读 · 0 评论 -
使用Pupeteer写一个自动化测试用例
Pupeteer就是那个著名的无头浏览器了,它能做的事情很多,什么爬虫,自动化测试用例不在话下。这里写了一个简单的测试用例没有搞太复杂,仅供参考:项目地址:https://github.com/yafully/autotest具体操作流程是:登录-选择指定产品-加入购物车-结算代码如下:抽象一个初始化公共类const puppeteer = require('puppeteer'...原创 2019-08-01 10:12:05 · 559 阅读 · 0 评论 -
前后端图片旋转的一些纠葛
这几天折腾把前端旋转后的图片在后端合成出来。遇到一些问题。这里有2种解决办法:方法一:使用canvas,在画布里面旋转并在客户端合成图片转换成base64到服务器即可,但是这样做有个很大的问题就是图片文件很大的时候提交得半天,而且浏览器post数据是有大小限制的。并且项目里面已经用到了SVG,混合使用可能坑比较多,暂时没有考虑。方法二:前端使用transform: rotate...原创 2019-07-04 14:05:54 · 637 阅读 · 0 评论 -
图片环形分布的那些破事
最近跟合成自定义图片杠上了,总是在搞这些无聊的事,之前文字环形分布是用svg解决的,但是图片环形分布就呵呵了。于是做了些折腾:SVG:offset-path 能实现环形分布,实现成本最低,可以直接在客户端转化图片,精确度高,但是浏览器支持度惨不忍睹:如果无视兼容性推荐这个:具体实现如下:<style>@supports (offset-path: path('M...原创 2019-07-08 16:22:22 · 518 阅读 · 0 评论 -
CentOS 安装WebP图像转换lib的坑
libwebp是谷歌出品的新一代图片格式,仓库地址是https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html通过它确实可以把图片再次压缩一些。但是这货总是很诡异的在cenos上安装不上或者突然又安装上了,可能是我centos玩得不怎么牛掰吧。谷歌版的安装方法是下载安装包解压tar xv...原创 2019-06-18 11:23:12 · 4883 阅读 · 0 评论 -
Canvas、SVG、PHP GD库之间的恩恩怨怨
继折腾Magento项目有这么一个需求就是客户定制产品,网上的商业插件都比较呵呵惨不忍睹。而且需求也决定了必须手动开发。这里记录一下具体思路和踩过的坑。需求如下:客户在购买时需要实时反馈效果,加入购物车之后就要反馈出客户定制的实际效果图片,并把重要步骤的图片(如:客户上传的原图,处理后的图、合成图、定制文本等等)一并体现到订单数据里面。开工前准备:前端打算用到的技术:Vue、Jqu...原创 2019-05-31 12:54:44 · 1019 阅读 · 0 评论 -
easy mock的一些直接拿来用的小玩意
EasyMock确实很方便可以随心模拟远程数据省了很多时间,大脑容量有限MockJs那些API记不住,所以把常用的一些方法贴在这,免得哪天失忆了。const Random = Mock.Random;const len = 20;let list = [];for (let i = 0; i < len; i++) {list.push(Mock.mock({ ...原创 2019-06-09 16:53:25 · 454 阅读 · 0 评论