js
文章平均质量分 71
qq_45272329
这个作者很懒,什么都没留下…
展开
-
Vue/Nuxt框架开发的PC端网站兼容平板设备的
大家做项目的时候有没有遇到过一些不符合常理的开发需求,例如:开发的时候PC端和H5是两套站点,一般H5站点会适配平板设备,但是如果需要改成PC端适配平板呢;前期开发PC端没有考虑到PC端会有需要兼容平板的一天,完犊子了,这可怎么办?PC端的站点的长宽单位都是px,写的固定长度;而且会有固定的版型(就是页面一般会有一个最小宽度,比如1200px,1280px,1380。原创 2022-09-16 15:02:42 · 2423 阅读 · 1 评论 -
nuxt.js服务端渲染项目性能优化总结
众所周知,Vue作为前端开发的三大框架扛把子之一,在国内众多小微厂使用还是很多的,都知道Vue一般作为客户端渲染模式,在某些业务场景可能十分不友好,比如电商业务;为啥说不友好呢,因为Vue一般是使用客户端渲染,数据都是通过Ajax请求回来的,搜索引擎无法抓取到动态的内容,所以要用到服务端渲染,服务端有多种实现方式,Vue官方也自带SSR解决方案,由于项目前端使用的是Nuxt实现的SSR。...原创 2022-08-15 21:34:06 · 1393 阅读 · 0 评论 -
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 评论 -
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 · 3940 阅读 · 0 评论 -
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 评论 -
前端开发环境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 · 666 阅读 · 0 评论 -
创建一个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 阅读 · 0 评论 -
vue中常见的传值方式
vue中的传值方式在平时项目开发中,经常使用的VUE开发的时候,会把一些功能相似的模块封装成一个组件.在像组件传入相关通信,然后就可以实现功能的输出,不必注重内在逻辑的实现,这可以理解为封装,组件的主要的通信方式就是’接口’,这个接口可以是一个参数或者是一个函数操作的开始.哈哈,说了这么多这是我自己的见解.说远了,我们具体说说VUE的传值方式.VUE中的传值方式有几种常见的方式,例如:父子组件通信,兄弟组件通信,vuex状态管理等等;这些也不准备仔细展开讲,只是简单的汇总一下遇到的各种VUE传值方式.原创 2022-01-22 17:43:15 · 764 阅读 · 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 评论 -
前端JavaScript基本的数据类型
任何一门语言都有其相对应的数据类型,Javascript也不例外,Javascript的数据类型大致可以分为两类:基本数据类型:其值可为String,Number,null,undefined,Boolean,Symbol(es6新增)引用数据类型:除了基本数据类型以外的Object(Array,Function,Reg,Object)等存放位置区别首先,这两种数据类型存放位置是不一样...原创 2019-12-30 16:21:48 · 316 阅读 · 0 评论 -
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 阅读 · 0 评论 -
使用cryptoJS进行数据加密与后台进行交互
使用cryptoJS进行数据加密后台进行交互在项目开发中经常会遇到敏感数据传递给后台,在传输的过程中为了防止数据没劫持,关键的数据经常需要用于加密传输,然后在后端进行解密操作处理验证,一般加密会有对称加密和非对称加密.因为项目中需要用到加密,查了一下文档,前端加密的js文档貌似只看到了利用cryptoJS用来加密的,首先在加密之前我们需要引入该js文件,其引入方式有两种:第一种通过npm安装...原创 2019-10-25 17:16:24 · 877 阅读 · 0 评论 -
前端js手机号脱敏加密
前端js手机号脱敏加密关于数据敏感的问题.可能在开发过程中经常遇到,有时候后端传给前端的明文数据我们需要在界面上进行脱密加密,以达到掩耳盗铃的目的,加密的实现方式有很多,主要是关于字符串的处理.使用js的slice()字符串切割方法,拿到字符串之后进行处理var str = '18127446988'var enStr = str.slice(0,3) + '****' + str.s...原创 2019-10-25 15:32:50 · 6026 阅读 · 1 评论