- 博客(35)
- 收藏
- 关注
RSS订阅原创 如何使用Node编写开发小工具
如果是使用拷贝文件夹然后再修改，一个文件夹最少要花费三五分钟，现在大概不要5秒；这样就可以在这两个文件在愉快的写文档了。在做有些项目的时候有时候会遇到要重复创建内容大概相同的文件，但是命名和文件夹存放不一样的业务。比如说组件参考文档框架的。上面文件目录里面的内容都相差不大，就是文件名和组件名不一样， 那么我们可以使用。的编写，就是需要大量的拷贝相同的文件代码，其目录大概如下。脚本之后，就可以执行了，在项目的。然后在编辑器控制台或者。
2023-11-08 11:58:01
126
原创 前端如何不变形的渲染图片大小和图片上的内容位置
对象，拿到图片的原始长宽然后转化为相对位置的百分比，然后把相对位置的百分比赋值给元素样式；现在就不管页面里的图片大小怎么展示，图上的点都是相对不变的。比如上图上有一个锚点鼠标附上去会展示关键文字，对图片上进行解释；这个蓝点的位置是在后台设置的相关位置，可以改到任何位置展示，要如何实现这个功能呢？通过创建JS对象可以解决很多实际情况中的问题，比如动态给图片赋值宽高，而使图片不会变形。在做前端项目时可能经常会页面图片大小变形或者压缩的情况，一般情况就是。可以看到上面有一个比较核心的地方，就是。
2023-11-01 16:33:31
320
原创 如何在Next.js中使用react-viewer图片预览
将依赖包引入到文件之中，然后封装成组件，以备后面业务逻辑中使用；使用npm，或者pnpm进行包安装依赖包。
2023-10-12 14:50:17
556
原创 React如何优化减少组件间的重新Render
比如在项目中常常遇到的组件重复渲染，有时候组件重复渲染如果内容是纯文本，不打印日志就不容易发现重复渲染了；中需要准确的拆分子组件，组件内的数据组件内部单独控制，可以减少很多不必要的干扰造成的渲染，组件拆分的颗粒度要非常细，在最小的组件内更新视图，不会影响其他的组件；组件的更新机制之一，父组件更新，子组件全部会重新渲染；那就需要合理进行组件的拆分和逻辑梳理了；去设置父组件渲染的数据，父组件视图更新会导致父组件中所有的子组件更新；按钮，会发现控制台会打印两个组件的日志，说明子组件1和2都被更新了，这也是。
2023-10-12 12:37:08
570
原创 Vue项目中如何使用Vuex进行全局管理
项目中有一些交互和数据通信比较复杂的地方，需要用到一个全局状态管理，那么他就可以使用。如果项目是使用服务端渲染则不能做持久化，在服务端不能访问。最后一点，也比较重要，Vuex在刷新的时候存在。持久化处理，这个持久化处理一般就是把数据存储在。对象，这里面有一些细节大家可以多多琢磨。
2023-10-11 14:33:23
102
原创 Vue/Nuxt框架开发的PC端网站兼容平板设备的
大家做项目的时候有没有遇到过一些不符合常理的开发需求，例如：开发的时候PC端和H5是两套站点，一般H5站点会适配平板设备，但是如果需要改成PC端适配平板呢；前期开发PC端没有考虑到PC端会有需要兼容平板的一天，完犊子了，这可怎么办？PC端的站点的长宽单位都是px，写的固定长度；而且会有固定的版型（就是页面一般会有一个最小宽度，比如1200px，1280px，1380。
2022-09-16 15:02:42
2422
1
原创 nuxt.js服务端渲染项目性能优化总结
众所周知，Vue作为前端开发的三大框架扛把子之一，在国内众多小微厂使用还是很多的，都知道Vue一般作为客户端渲染模式，在某些业务场景可能十分不友好，比如电商业务；为啥说不友好呢，因为Vue一般是使用客户端渲染，数据都是通过Ajax请求回来的，搜索引擎无法抓取到动态的内容，所以要用到服务端渲染，服务端有多种实现方式，Vue官方也自带SSR解决方案，由于项目前端使用的是Nuxt实现的SSR。...
2022-08-15 21:34:06
1389
原创 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
原创 前端防止用户重复提交请求的方案
在项目开发时，在网络情况比较差的情况下，可能用户在提交表单时多次点击，然后导致多次请求后台接口导致数据重复写入，造成数据混乱。这个场景在前端和后端都能处理，但后端一般会让前端处理这个问题(手动狗头)，那么前端需要怎么处理呢。第一种方案：以Vue+ElementUI项目为例，如下面所示代码所示，简单实用。<template><!--... todo --> <el-button size='small' :disabled="Loading" :loading=
2022-05-14 15:53:17
3057
1
原创 vue祖孙组件之间传值和事件传递,孙子组件中调用爷爷组件关闭el-dialog
在vue项目中可能会遇到这种开发情景，如下一个公用的form.vue组件：<!--公用组件 form.vue--><el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-
2022-04-13 19:00:33
3938
原创 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
原创 创建一个react项目
写了许久的Vue了，现在准备写个React后台项目来练练手，首先第一步创建一个React项目。第一步肯定需要安装node开发环境，这个可以看这篇文章。创建React项目，第一步需要安装node.js，因为之前我已经开发Vue，所以node环境是OK的，执行以下命令，全局安装React脚手架命令：$ npm install -g create-react-app在全局安装的过程中，如果出现React脚手架版本必须在1x.x.xx以上，目前版本是9.x.xx，需要升级node提示的时候。这时候千万不
2022-02-14 18:53:16
942
原创 使用nvm管理切换node版本
在不同的项目中有时候依赖的node版本不一致，需要安装多个node版本依赖进行管理，这时候就需要使用nvm进行node版本管理操作。首先进行nvm包的下载，找到下面这个进行下载下载地址。下载完成之后进行鼠标双击打开安装操作，直接next，next操作。下面这一步一定要注意，有些文中说安装之前必须卸载之前安装的node，我安装时并没有卸载node，这一步很关键，就是安装nvm时选择安装node路径一定是你已经安装的node的文件路径。在后面安装进程中会询问是否把之前安装的node模块加入nvm管
2022-02-14 18:50:51
9864
原创 前端开发环境node安装
如果现在前端使用Vue/React/Angular等主流前端框架脚手架来进行开发，那么首先就是进行node环境的安装配置，因为这几个框架都是在node环境下进行运行的。首先在node官网进行合适版本的node.js下载地址。下载完成之后双击打开进行安装，直接点击next，next操作，如下这个步骤需要注意将路径改为D盘或者其他盘路径，最好是英文名路径，因为后面可能需要配置系统环境变量，然后接着next，next直到安装完成。然后在cmd命令行里输入node -v查看node安装版本，如果提示no
2022-02-14 18:02:35
665
原创 vue中常见的传值方式
vue中的传值方式在平时项目开发中,经常使用的VUE开发的时候,会把一些功能相似的模块封装成一个组件.在像组件传入相关通信,然后就可以实现功能的输出,不必注重内在逻辑的实现,这可以理解为封装,组件的主要的通信方式就是’接口’,这个接口可以是一个参数或者是一个函数操作的开始.哈哈,说了这么多这是我自己的见解.说远了,我们具体说说VUE的传值方式.VUE中的传值方式有几种常见的方式,例如:父子组件通信,兄弟组件通信,vuex状态管理等等;这些也不准备仔细展开讲,只是简单的汇总一下遇到的各种VUE传值方式.
2022-01-22 17:43:15
764
原创 前端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
2596
原创 前端性能优化防抖与节流
在项目中，我们有时候做需求的时候会与后端做一些交互，需要去频繁的调取接口，比如模糊查询的下拉列表，是否勾选邮件订阅，如果使用change事件去异步查询接口，可能会在短时间频繁调取接口，同时操作人数过多极容易给后端服务器照成极大的压力。(本来这事是不屑于做的，但是隔壁项目组经常甩锅给我们，说我们code影响他们性能[手动滑稽])这时候我们就应该从前端做些优化操作了，前端防抖和节流就产生了。防抖：就是在用户连续操作停止之后的一段时间会触发一次事件，不会频繁请求接口，需求如下图例子所示：这里是一个邮件订阅功
2020-11-17 20:11:59
240
原创 前端js分享会话到facebook
在做项目的时候，前端开发难免会在业务运营需要推广的情况下，需要把自己的网站分享到Facebook、Twitter和Email等平台中，以提高自己网站的曝光了，实现外部引流。首先,我们先看一下分享到Facebook平台怎么操作.其实能做跨境电商的都是有办法连接到外网的,这点不必多说,下面我们具体来看看实现方案。首先我们需要引入facebook集成的sdk包,然后放到项目中,如下图所示:<script type="text/javascript">(function(d, s, id){
2020-08-27 13:07:33
2409
原创 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
2135
原创 前端vue导出excel文件的操作
我们都知道在前端开发管理平台的时候难免会遇到需要导出数据的情况，前端该如何导出数据呢？下面我们直奔主题。首先在请求后端接口的时候需要下载excel文件，我们把excel问价下载的方法简单的封装一下，如下所示：//utils.jsexport function downloadTemplate (data, fileName = '导出文件.xlsx') { const blob...
2020-02-16 11:56:18
532
原创 前端JavaScript基本的数据类型
任何一门语言都有其相对应的数据类型，Javascript也不例外，Javascript的数据类型大致可以分为两类：基本数据类型：其值可为String，Number，null，undefined，Boolean，Symbol（es6新增）引用数据类型：除了基本数据类型以外的Object（Array，Function，Reg，Object）等存放位置区别首先，这两种数据类型存放位置是不一样...
2019-12-30 16:21:48
316
原创 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
原创 Javascript数组扁平化
js中的数组可以说是使用中频率最大的之一,有时候一些复杂的多维数组需要转成简单的一维数组来处理,这就是数组扁平化 let arr = ['1','2','3','4','5',['6','7',['8','9']],['10']] // 扁平化之后[ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10' ]首先我们可以观察一下,使用简单粗暴的方...
2019-12-06 12:06:28
109
原创 nginx在window下的命令行操作
nginx在window下的命令行操作在开发中难免会遇到项目需要打包放到nginx上去模拟打包完成之后的环境,看到其他的同时启动nginx直接双击nginx.exe程序,修改匹配之后然后再使用任务管理器关闭进程,重新双击,感觉很繁琐,记录一下nginx在window下的操作指令启动nginx,进入window的dos命令行编辑器E:\nginx-1.14.2>nginx.exe /...
2019-10-31 11:01:14
1198
原创 使用cryptoJS进行数据加密与后台进行交互
使用cryptoJS进行数据加密后台进行交互在项目开发中经常会遇到敏感数据传递给后台,在传输的过程中为了防止数据没劫持,关键的数据经常需要用于加密传输,然后在后端进行解密操作处理验证,一般加密会有对称加密和非对称加密.因为项目中需要用到加密,查了一下文档,前端加密的js文档貌似只看到了利用cryptoJS用来加密的,首先在加密之前我们需要引入该js文件,其引入方式有两种:第一种通过npm安装...
2019-10-25 17:16:24
877
原创 前端js手机号脱敏加密
前端js手机号脱敏加密关于数据敏感的问题.可能在开发过程中经常遇到,有时候后端传给前端的明文数据我们需要在界面上进行脱密加密,以达到掩耳盗铃的目的,加密的实现方式有很多,主要是关于字符串的处理.使用js的slice()字符串切割方法,拿到字符串之后进行处理var str = '18127446988'var enStr = str.slice(0,3) + '****' + str.s...
2019-10-25 15:32:50
6026
1
原创 移动端手机h5上传图片旋转90度
移动端手机h5上传图片会旋转90度的问题h5页面调用相机正常情况下都是正常的,但是有些手机横着照相的时候就会正常的,iphone正确的拍照方式是横屏的,而用户往往是竖屏拍照上传的,就相当于照相机反转了90度,当你横屏拍照上传,图片就是正确的,一张生成的图片是无法辨别方向的,就只有在上传之前反转了.首先我们借助exif-js可以实现相机镜头的读取,不支持IE10以下,也直接引用的js文件,可能这...
2019-10-21 21:07:49
3023
原创 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
原创 使用phpstudy插入中文数据展示??的问题
公司电脑有权限,需要申请嫌装mysql比较麻烦,就装了一个PHPstudy学习一下使用PHPstudy搭建的学习数据库,发现使用插入数据命令会导致插入数据显示??问题,小白不易首先查了一下文档,貌似都是说文本编码方式不对,按照文档设置了编码方式。修改以下文件夹文集配置；[mysql]default-character-set=gbk[mysqld]character-set-ser...
2019-08-19 12:01:34
321
原创 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
905
原创 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
20244
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人