前端
文章平均质量分 52
小刘爱搬砖
学习过程中遇到的一些问题与笔记,谨此记录,学艺不精,欢迎指点。
仅供学习使用,转载文章如有侵权,请联系删除。
展开
-
JS数组map和filter方法的使用以及比对
map()map 不会检测空数组map 不会改变原始数组map(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];callback : 从当前元素函数产生新的数组元素thisArg : 对象作为该执行回调时使用返回一个新的数组,数组中的元素为原始数据经过调用函数进行处理后的值,主要用来获取对象数组中的某些特定属性。比如一个对象数组包括姓名和年龄,我们需要单独将年龄抽取出来就可以用原创 2022-04-12 09:40:43 · 8301 阅读 · 1 评论 -
Vue的防抖和节流(接口频繁调用如何处理)
首先描述一下我所使用的业务场景:系统有一个批量审批的功能,每个审批的流程需要根据提交的用户实时的反馈回去进去用户页面的刷新,如果一个用户同时有多个流程被审批通过,前端会向服务端频繁的多次调用同一个接口,造成服务器压力过大和页面卡顿,非常影响用户体验。目标:需要短时间内向服务端频繁调用接口时只去调用最后一次的接口。(防抖)防抖和节流的区别:主要体现在执行次数上的区别,比如我们写一个200ms的延迟时间,节流就是每200ms执行一次,而抖动是只有在最后一次事件的200ms内调用一次回调函数。防抖和节流都可以原创 2021-09-27 14:15:40 · 5655 阅读 · 0 评论 -
前端打印通过form表单格式向服务端传递的参数
文章转载自:程序猿雪儿https://www.cnblogs.com/cuteCoderSnow var m_params = getOptions(); for(let i=0;i< self.files.length;i++){ param.append('file', self.files[i]);//通过append向form对象添加数据 } var m_params = getOptions(); param.append("name",转载 2021-09-15 16:42:16 · 666 阅读 · 0 评论 -
Element-UI el-select 默认值问题,根据另一个select选项的变化修改【已解决】
这里我就不展示完整的代码了,仅展示所用到的代码附上官方文档的地址:https://element.eleme.cn/#/zh-CN/component/select首先看一下我们需要进行修改的两个select<el-col :xs="33" :sm="33" :lg="12" > <el-form-item label="加油卡号" prop="fuelCardId"> <el-select v-model="fuelCardId" filterable c原创 2021-08-13 10:05:59 · 2151 阅读 · 0 评论 -
前端JavaScript -- 闭包详解
文章目录闭包的由来闭包的应用闭包的缺点闭包的由来<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>闭包</title></head><script> /** * 闭包的产生? * 当一个嵌套的内部函数引用嵌套的外部函数的变量,就产生了闭包原创 2021-02-22 18:27:04 · 194 阅读 · 0 评论 -
前端JavaScript -- 原型详解
JS 高级的四大重点- 原型和原型链- 执行上下文与上下文栈- 作用域与作用域链- 闭包<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原型</title></head><body><!-- 1. 函数的prototype属性 每个函数都有一个prototype原创 2021-02-22 18:23:56 · 191 阅读 · 0 评论 -
前端 JavaScript -- Json
JSON — java script object notation JS对象表示法。 json的格式和js对象格式相同,js中对象的属性名加不加双引号都可以,但在json中对象的属性名必须加双引号,其他的与js语法一致。{ "name" : "武松", "age" : 18, "sex" : "男"}//js对象var jsObj = { name : "武松", age : 18, sex : "男"}//json字符串var Json原创 2021-02-19 18:54:28 · 120 阅读 · 0 评论 -
前端 JavaScript -- 定时器及其应用(切换图片、动画效果实现、轮播图)
提示: 本篇文章过长,原本打算将文章分成三篇,但由于知识点都是相关串联的,考虑了一下还是决定放在一起,设置了目录 供大家选择性阅读主要进行定时器的介绍简单使用,主要利用定时器实现动画效果,让图形变化更符合人的视觉要求,在最后利用定时器实现了轮播图功能。具体的功能实现以及注释都在代码中这里我就不再进行赘述。文章目录定时器、延时器简介点击按钮实现图片自动切换动画效果的实现轮播图定时器、延时器简介主要介绍如何构建一个定时器定时器:见名知意,根据设定的时间不断的回调函数(单位为毫秒 3000 = 3s.原创 2021-02-18 14:02:13 · 4666 阅读 · 1 评论 -
前端 JavaScript -- 键盘按下松开事件
实现的主要功能:判断按下了哪个按键,可以实现部分内容输入文本框不显示通过判断按下键来条件输出return false;所有的注释都在html中,解释的很详细,我就不再一一解释注:这里我用的js是ES6 定义变量时采用let ES6以下替换为var即可判断键盘按下的是哪个键<script> window.onload = function () { /** * 键盘事件不能绑定div,一般绑定给容易获取焦点的对象 eg:input原创 2021-02-13 17:26:29 · 2003 阅读 · 0 评论 -
前端 JavaScript -- 实现元素的拖拽功能
实现元素的拖拽功能,类似于桌面的图标,鼠标点击长按可以移动元素 当鼠标松开,元素固定到鼠标松开的位置。<style> #box1{ width: 100px; height: 100px; background-color: rebeccapurple; position: absolute; } </style> <script>原创 2021-02-13 17:11:46 · 2396 阅读 · 2 评论 -
Layui 引入jQuery.Cookie插件
首先你需要下载jQuery.Cookie.js下载地址然后将文件复制粘贴至你的项目的静态文件资源中,我和layui引入的jquery.js放在一起并将文件改名为了cookie.js,如下图所示然后修改cookie.js的文件内容(后面有详细的修改好的js)layui.define('jquery', function (exports) { //依赖jQuery var jQuery = layui.jquery; //插件内容 将jquer原创 2021-01-18 13:58:51 · 2890 阅读 · 2 评论 -
阿里图标库使用(在线使用)
1.首先你需要准备一个github或者新浪微博账号用来登录(拥有阿里员工账号也可)地址:https://www.iconfont.cn/2.选择图标库,在搜索框选择需要搜索的图标3.点击需要使用的图标并入库(如图所示)4.点击右上角购物车按钮5.将所入库图标添加至项目,若没有项目可以自己创建一个(创建项目按钮如图所示)6.出现如图所示的界面,下面那个icon-arrow-right 调用这个图标(字体),点击查看在线链接7.点击复制代码,将代码放到html文件的link中引入<原创 2020-10-13 14:02:30 · 3468 阅读 · 2 评论 -
Get方式和Post方式的区别
Get:通过url进行数据的提交,安全性较差,是提交密码等数据时一定不能使用get方式提交;浏览参数会被保存到浏览历史中;数据量会受到url长度的限制,一般用于数据量较小的数据提交。Post:Post通过请求header进行请求提交,相比较get明文提交更安全一些;参数不会保存在浏览历史中,数据信息在url中也不可见;每一次回退或者刷新数据都会被重新提交。...原创 2020-06-21 16:18:55 · 128 阅读 · 0 评论 -
EL表达式 基础
为了解决对Java语法不熟悉的人完成对jsp的开发,出现了El表达式。语法EL表达式不再使用<%%> 转而使用 $ { },以${为开头 }收尾,通过使用 . 和 [ ] 存取数据。如:${book.name} ${book.[name]}当需要访问一个数组时可以$ {book[0] [”name“] } 、${book[0].name};在存取特殊字符时如 - . 等必须使用[ ] , 如 ${book[“book-name”]}保留的关键字:eq 、and 、true 、fla原创 2020-06-15 16:52:26 · 337 阅读 · 0 评论 -
LayUI 向弹出层Input的Value属性传值
Layer 向弹出层Input的Value属性传值及父层访问弹出层页面的方法。1.传值let userId = "1";layer.open({ type:2, title:'修改用户信息', btn:['确定','取消'], area: ['400px','380px'], content:"${pageContext.requ...原创 2020-04-29 14:22:17 · 2661 阅读 · 0 评论 -
JQuery $().click()与$().on("click"...)区别
jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式。就拿().click()和().click()和().click()和(document).on(‘click’,‘要选择的元素’,function(){})来说,都是点击事件的操作,但是也有不同的地方。$(选择器).click(fn) 当选中的选择器被点击时触发回调函数fn...转载 2020-04-26 15:18:02 · 1756 阅读 · 0 评论 -
Js测试输出输入框的值输出 [object htmlinputelement]
[object htmlinputelement] 获得的是HTML页面的input元素说明已经取到了这个元素,由于马虎没有去取这个input元素的值,所以输出为 [object htmlinputelement]//通过id来获取当前input输入框的值var username = document.getElementById("username").value;注:ID是元素...原创 2020-04-15 11:34:58 · 3216 阅读 · 0 评论 -
JS -- console.log测试输出,闪烁一下后消失
今天写JS遇到的一个小问题:在提交按钮中写的Button点击事件,每次点击后在console中闪烁一下就消失了,也不报错。检查了一下发现有个<form class="layui-form" action=" "> </form>表单,这样会刷新提交的页面所以每次单击都闪烁输出一下就消失,将form中的action方法去掉即可,与后台相连时再添加上即可。...原创 2020-04-12 12:51:15 · 3049 阅读 · 0 评论 -
Jsp绝对路径
在JavaWeb开发中,常使用绝对路径的方式来引入JavaScript和CSS文件,这样可以避免因为目录变动导致引入文件找不到的情况,常用的做法如下:一、使用${pageContext.request.contextPath}代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名,这样不管如何部署,所用路径都是正确的。例如:1 <!...转载 2020-04-05 14:57:31 · 160 阅读 · 0 评论 -
分享几个好用的前端框架
1.Bootstrap Bootstrap官网2.LayUI LayUI官网3.ElementUI ElementUI使用方法都差不多,根据文档的提示就可以操作可以本地下载也可以在线引用(推荐下载,将资源放入自己项目中)个人比较喜欢LayUI 的弹窗功能和图标,三者都使用的栅格布局,将页面等分,可以直接找到要使用的组件将代码copy即可(已经引入所需的资源 css js等)...原创 2020-03-12 13:33:21 · 323 阅读 · 0 评论 -
Vue基础工程创建流程
配置好需要的环境vue vue-cli webpack打开cmd 进入需要创建文件的路径创建一个vue工程vue init webpack 工程名安装工程所需的依赖(在编译器中也可以下载,但是在编译器中下载,在使用时不会产生提示建议提前下载,方便使用)跟着提示修改或者默认回车,vue-router、EsLint、unit tests 等等如果自己手动配置按N即可,也可以Y自...原创 2019-12-09 22:23:59 · 91 阅读 · 0 评论