草庐IT

纯前端

全部标签

【前端点击穿透】pointer-events属性详解

什么是pointer-events?pointer-events属性是一个指针属性,是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。ThisCSSproperty,whensetto“none”allowselementstonotreceivehover/clickevents,insteadtheeventwilloccuronanythingbehindit.当这个属性设置为none时,元素则不接收hover、click事件,由他后面的元素进行接收。/*Keywordvalues*/pointer-events:auto;pointer-events:none;pointer

前端晋升答辩-性能优化篇范式

本文力争为你参加晋升答辩时,提供一个论述性能优化相关工作的范式。简单点儿来说,就是按照这个范式文来准备、阐述,就可以博得晋升评委的认可与喜爱。痴迷写页面UI的前端千篇一律,懂得量化收益的前端万里挑一。现在已经不是刀耕火种的前端原始时代了,能够高保真实现页面UI是每一个前端的基本技能,“没有功劳还有苦劳”这句话也不再适用于前端晋升了。你辛苦的工作可能会看在直属leader的眼里,知道你为了业务天天熬夜加班,会让你年终绩效更好一些,但是在晋升答辩中,尤其是高职级同学的晋升,基本都是跨部门、或通道评委评审的,他们是不会认为这些重复性劳动、像流水线一样的工作有什么重要价值。如何让他们在短短时间内认识到

前端uniapp+后端springboot 详细教程《实现微信小程序授权登录》(附完整前后端项目demo)

实现微信小程序授权登录1、前端技术栈1.1、uniapp1.2、前端封装工具1.3、Hbuilderx构建uniapp项目2、后端技术栈2.1、创建springboot后端项目2.2、数据库准备2.3、创建实体类2.4、后端工具类2.5、mapper和service接口2.5、Service实现类2.6、微信用户的控制层Controller微信小程序官方登录流程图:参考微信小程序登录官网文档1、前端技术栈1.1、uniapp使用uniapp构建一套代码多端使用的前端框架项目1.2、前端封装工具dateUtil.js:功能:1.时间日期格式化2.传入日期是否和当前日期的比较完整代码://判断传入

Required request body is missing: 前端接口报错错误解决

在前几天的工作中遇到了一个小小的问题这是完整报错:Requiredrequestbodyismissing:publiccom.trs.common.core.domain.AjaxResultcom.trs.document.controller.DocumentController.add(com.trs.document.domain.params.AddDocumentDTO)"这个接口在Apifox上经过测试是没有问题的,那么因此就是前端接口设置出了问题。解决方法:这个接口报错的大意是:必需的请求正文缺失因此检查一下接口文档,发现数据是写在body里的因此返回检查接口代码,代码如下:

前端图片压缩解决办法

文章の目录问题产生背景解决办法1、使用纯js解决2、插件js-image-compressor写在最后问题产生背景在某一h5的项目,要求上传的图片格式为base64,问题是用户上传的图片基本都在MB级别,转base64以后,图片的体积会增大30%以上,随着图片的体积增加,转换的base64格式文件体积越大,如果此时前端不对用户上传的图片体积进行压缩,可能会导致服务器压力过大,从而崩溃;解决办法1、使用纯js解决解决思路:1、通过input文件选择框拿到要上传的图片文件file2、FileReader.readAsDataURL()读取file内容。完成后result属性中将包含一个data:U

前端H5实现微信授权

背景:前段时间做了一个H5项目,H5项目需要放在微信公众号里面,并且需要通过微信授权拿到openId,所以就需要实现h5授权微信这个功能了。原理:其实原理就是前端在本项目首页去请求微信端提供的一个地址,并且在地址上配置微信所需要的参数,比如最重要的就是你要配置微信最后获取到参数之后跳转你自己项目的地址,所以这就是h5授权微信的方式,通过用户项目跳转微信提供的地址,微信会把你所需要的参数拼接在你所填写的地址上面,最后跳转回来,你就可以直接从路径上获取了。        参考地址:微信公众号官方文档 网页授权|微信开放文档实现方式:由于实现起来原理都是一个,所以大概有三种实现方式,分为前端获取和后

前端系列——vue2+高德地图web端开发(使用和引入)

vue2+高德地图web端开发(使用和引入)前言准备工作高德地图的个人开发者注册高德api网址1.点击进行注册2.注册完之后进入控制台3.创建新应用4.添加高德2.0新增创建vue2的项目npm引入高德官方文档1.安装2.进入项目3.NPM方式安装使用Loader4.在component目录下新建MapContainer.vue5.编写基础页面结构6.在中引入AMapLoader6.1import6.2引入安全密钥完整代码7.构建地图7.1data数据声明7.2methods中构建初始化地图方法7.3mouted生命周期中调用方法对页面进行渲染完整代码vue使用结果展示第一步:创建vue2的项

【实战】前端必会 —— 微信小程序 跳转 微信公众号

文章目录一、跳转方案二、获取biz三、小程序跳转公众号web-view|微信开放文档一、跳转方案跳转方案的选择关键在于目的性:引流关注:直接跳转公众号页面内容查看:使用web-view直接查看二、获取bizbiz相当于微信公众号的唯一身份标识PC端随意打开一篇公众号文章,使用非微信内置浏览器打开,F12,network(网络),fetch/XHR过滤,可以看到这些请求参数中都是带有biz的%3D即=三、小程序跳转公众号将获取到的biz插入到下面两个链接:`https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=${biz}==#wec

前端开发视频监控(flv / rtmp 格式)

标题前端开发进行视频监控。rtmp格式在2020年底就不再进行支持,所以要让后端将rtmp格式的视频格式转换成flv格式的。一、基于vue的页面开发:安装flv插件,使用import引入npminstall--saveflv.jstemplate>divid="welcome_page">el-row>el-col:span="12">divclass="mainContainer">videoid="videoElement1"class="centeredVideo"controlsautoplaywidth="90%"height="576">Yourbrowseristoooldwhi

前端开发视频监控(flv / rtmp 格式)

标题前端开发进行视频监控。rtmp格式在2020年底就不再进行支持,所以要让后端将rtmp格式的视频格式转换成flv格式的。一、基于vue的页面开发:安装flv插件,使用import引入npminstall--saveflv.jstemplate>divid="welcome_page">el-row>el-col:span="12">divclass="mainContainer">videoid="videoElement1"class="centeredVideo"controlsautoplaywidth="90%"height="576">Yourbrowseristoooldwhi