前端
文章平均质量分 72
qq_45272329
这个作者很懒,什么都没留下…
展开
-
如何在Next.js中使用react-viewer图片预览
将依赖包引入到文件之中,然后封装成组件,以备后面业务逻辑中使用;使用npm,或者pnpm进行包安装依赖包。原创 2023-10-12 14:50:17 · 556 阅读 · 0 评论 -
Vue/Nuxt框架开发的PC端网站兼容平板设备的
大家做项目的时候有没有遇到过一些不符合常理的开发需求,例如:开发的时候PC端和H5是两套站点,一般H5站点会适配平板设备,但是如果需要改成PC端适配平板呢;前期开发PC端没有考虑到PC端会有需要兼容平板的一天,完犊子了,这可怎么办?PC端的站点的长宽单位都是px,写的固定长度;而且会有固定的版型(就是页面一般会有一个最小宽度,比如1200px,1280px,1380。原创 2022-09-16 15:02:42 · 2423 阅读 · 1 评论 -
Element-ui的Carousel走马灯组件动态渲染高度
在前端vue项目开发中经常会用到走马灯的场景,然而在采用Element-ui的情况下,el-carousel走马灯组件有一个默认的固定高度300px。如下所示:.el-carousel__container { position: relative; height: 300px; // element-ui 默认高度}这样会导致网页的全屏的banner被压缩或拉伸,变形十分难看,在一个认真的切图仔眼里是无法容忍的。然而业务方在使用的时候没有按照相关图片规范来上传符合规格的图片大小。所原创 2022-05-31 15:12:43 · 2736 阅读 · 0 评论 -
前端防止用户重复提交请求的方案
在项目开发时,在网络情况比较差的情况下,可能用户在提交表单时多次点击,然后导致多次请求后台接口导致数据重复写入,造成数据混乱。这个场景在前端和后端都能处理,但后端一般会让前端处理这个问题(手动狗头),那么前端需要怎么处理呢。第一种方案:以Vue+ElementUI项目为例,如下面所示代码所示,简单实用。<template><!--... todo --> <el-button size='small' :disabled="Loading" :loading=原创 2022-05-14 15:53:17 · 3058 阅读 · 1 评论 -
JavaScript中存在else if语句吗?
很多前端开发者认为JavaScript中存在else if语句,因为平时我们可以这样写代码:var flag = 1if (flag == 0) { console.log('hello')} else if () { console.log('world')} else { console.log('hello world')}但事实上真的如此吗?事实上JavaScript没有else if语句,但是if和else只包含单条语句的时候可以省略代码块{},下面大家肯定不会陌生:if(f原创 2022-03-08 17:00:59 · 1972 阅读 · 1 评论 -
使用nvm管理切换node版本
在不同的项目中有时候依赖的node版本不一致,需要安装多个node版本依赖进行管理,这时候就需要使用nvm进行node版本管理操作。首先进行nvm包的下载,找到下面这个进行下载下载地址。下载完成之后进行鼠标双击打开安装操作,直接next,next操作。下面这一步一定要注意,有些文中说安装之前必须卸载之前安装的node,我安装时并没有卸载node,这一步很关键,就是安装nvm时选择安装node路径一定是你已经安装的node的文件路径。在后面安装进程中会询问是否把之前安装的node模块加入nvm管原创 2022-02-14 18:50:51 · 9867 阅读 · 0 评论 -
vue中常见的传值方式
vue中的传值方式在平时项目开发中,经常使用的VUE开发的时候,会把一些功能相似的模块封装成一个组件.在像组件传入相关通信,然后就可以实现功能的输出,不必注重内在逻辑的实现,这可以理解为封装,组件的主要的通信方式就是’接口’,这个接口可以是一个参数或者是一个函数操作的开始.哈哈,说了这么多这是我自己的见解.说远了,我们具体说说VUE的传值方式.VUE中的传值方式有几种常见的方式,例如:父子组件通信,兄弟组件通信,vuex状态管理等等;这些也不准备仔细展开讲,只是简单的汇总一下遇到的各种VUE传值方式.原创 2022-01-22 17:43:15 · 764 阅读 · 0 评论 -
前端javascript如何分享内容到twitter和Email
接着上篇讲,上篇讲了如何分享到facebook,这篇我们讲一下如何分享到twitter和Email,首先分享到twitter和Email不像分享到facebook一样可以有回调,这两分享是没有回调的,分享成功失败,也不知道,但是会触发事件.我们先来看下分享到twitter,首先引入twitter的sdk文件,如下图所示: window.twttr = (function (d, s, id) { // 引入sdk var t, js, fjs = d.getElementsByTagN原创 2020-11-19 21:15:38 · 2603 阅读 · 0 评论 -
前端性能优化防抖与节流
在项目中,我们有时候做需求的时候会与后端做一些交互,需要去频繁的调取接口,比如模糊查询的下拉列表,是否勾选邮件订阅,如果使用change事件去异步查询接口,可能会在短时间频繁调取接口,同时操作人数过多极容易给后端服务器照成极大的压力。(本来这事是不屑于做的,但是隔壁项目组经常甩锅给我们,说我们code影响他们性能[手动滑稽])这时候我们就应该从前端做些优化操作了,前端防抖和节流就产生了。防抖:就是在用户连续操作停止之后的一段时间会触发一次事件,不会频繁请求接口,需求如下图例子所示:这里是一个邮件订阅功原创 2020-11-17 20:11:59 · 240 阅读 · 0 评论 -
前端js分享会话到facebook
在做项目的时候,前端开发难免会在业务运营需要推广的情况下,需要把自己的网站分享到Facebook、Twitter和Email等平台中,以提高自己网站的曝光了,实现外部引流。首先,我们先看一下分享到Facebook平台怎么操作.其实能做跨境电商的都是有办法连接到外网的,这点不必多说,下面我们具体来看看实现方案。首先我们需要引入facebook集成的sdk包,然后放到项目中,如下图所示:<script type="text/javascript">(function(d, s, id){原创 2020-08-27 13:07:33 · 2409 阅读 · 0 评论 -
git 操作基本四部曲操作
关于git仓库提交代码的一些操作1.初始化git仓库,在本地生产git文件夹,建立远程仓库连接,查看连接远端地址$ git clone url$ git init$ git remote set-url origin url // 设置远端地址$ git push -u origin master$ git remote add origin url // or $ git remot...原创 2020-03-07 14:02:27 · 339 阅读 · 1 评论 -
前端使用nginx进行代理设置
1.开发为什么进行nginx代理设置?一般在前端开发中设置nginx代理是为了解决跨域问题,问什么要进跨域行为设置呢?因为浏览器的同源策略,导致在a站点拿不到b站点的资源,然而前后端分离开发,前端开起的服务和后端起的服务IP地址不同,导致拿不到资源。如下图所示:上图两个cookie是后端设置在服务器端的用来验证请求是否合法,前端需要拿到这个cookie传给后端来通过验证,但是这个是在a站点,...原创 2020-02-23 19:21:20 · 2136 阅读 · 0 评论 -
前端vue导出excel文件的操作
我们都知道在前端开发管理平台的时候难免会遇到需要导出数据的情况,前端该如何导出数据呢?下面我们直奔主题。首先在请求后端接口的时候需要下载excel文件,我们把excel问价下载的方法简单的封装一下,如下所示://utils.jsexport function downloadTemplate (data, fileName = '导出文件.xlsx') { const blob...原创 2020-02-16 11:56:18 · 532 阅读 · 0 评论 -
JavaScript 中 call()、apply()、bind() 的用法与区别
JavaScript 中 call()、apply()、bind() 的用法与区别在js的开发当中,会经常使用到call()、apply()、bind()这三个函数,这三个函数到底是干嘛的呢?其实很简单,这其中最主要的区别是this的指向问题,这三个函数都是改变函数内部Function的this指向。首先,我们先看一下下面的例子: // 例子一 var myDog = 'tom' va...原创 2019-12-19 15:21:50 · 396 阅读 · 0 评论 -
移动端手机h5上传图片旋转90度
移动端手机h5上传图片会旋转90度的问题h5页面调用相机正常情况下都是正常的,但是有些手机横着照相的时候就会正常的,iphone正确的拍照方式是横屏的,而用户往往是竖屏拍照上传的,就相当于照相机反转了90度,当你横屏拍照上传,图片就是正确的,一张生成的图片是无法辨别方向的,就只有在上传之前反转了.首先我们借助exif-js可以实现相机镜头的读取,不支持IE10以下,也直接引用的js文件,可能这...原创 2019-10-21 21:07:49 · 3024 阅读 · 0 评论 -
vue+vant图片上传压缩图片大小
vue+vant图片上传压缩图片大小可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件其实这儿所说的压缩,就是图片重绘,改变图片大小首先我们看一下代码://html<div class="upload"> <van-uploader :after-read="onRead" :b...原创 2019-10-13 17:48:27 · 7238 阅读 · 19 评论 -
vue获取手机验证码倒计时
现在有许多移动端登录是使用的是手机号码加验证码的方式登陆的,但是很多时候为了防止恶意获取短信验证码需要在前端做一些控制。例如下列场景:我们在前端写一个定时器函数,显然可以满足倒计时功能,但是页面被刷新的话,倒计时就会丢失,那我们可以把倒计时的数组储存到cookie或者session中,可以满足页面刷新不丢失的效果,但是用户关闭掉页面,还是会存在倒计时丢失.最后我们需要把倒计时时间记录在l...原创 2019-10-13 17:28:54 · 910 阅读 · 0 评论 -
vue2.0升级vue3.0报错
vue2.0升级vue3.0报错报错误[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-in...原创 2019-08-01 12:31:10 · 906 阅读 · 0 评论 -
vue中使用element-ui上传图片编辑回显的
element上传图片回显问题在项目中会使用到element上传图片预览问题,上传一张也许简单,但是上传多张就有一些坑了,贴上代码// HTML<div class="form-item-height"> <label class="text-right">添加商品图片:</label> <el-upload action="s...原创 2019-06-19 12:26:45 · 20246 阅读 · 3 评论