- 博客(62)
- 收藏
- 关注
RSS订阅原创 js数组的常用方法
js创建一个指定长度的数组const array = new Array(9).fill(’’)数组常用的方法join()：用指定的分隔符将数组每一项拼接为字符串join()方法用于把数组中的所有元素转换一个字符串，默认使用逗号作为分隔符push()：向数组的末尾添加新元素push()方法从数组末尾向数组添加元素，可以添加一个或多个元素pop()：删除数组的最后一项pop()方法用于删除数组的最后一个元素并返回删除的元素unshift()：向数组首位添加新元素unshift()方法可向
2022-03-17 12:10:10
544
原创 实现文本内容是超链接时自动转换为超链接
文本内容出现超链接时，自动让其变成超链接解决办法：使用自定义指令实现数据过滤转化为超链接// 自定义指令 全局指令,引用就自行引用了import Vue form 'vue'Vue.directive('openLink', { bind(el) { // 获取内容 let textR = el.innerText // 判断内容是否为空 if (textR.length) { // 匹配超链接正则 let reg = /(https?|ftp|file)(:\/\/
2022-01-12 15:47:21
2044
2
原创 基础知识点 css篇
隐藏元素的方法有哪些display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。z-index: 负值：来使其他元素遮盖住该元素，以此
2021-11-15 15:10:00
213
原创 webpack插件篇
html-webpack-plugin作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口（将 webpack中entry配置的相关入口chunk 和 extract-text-webpack-plugin抽取的css样式 插入到该插件提供的template或者templateCon
2021-10-26 20:40:32
173
原创 JSON.stringify常用的特性（避坑）
特性1.undefined、任意的函数以及symbol值，出现在非数组对象的属性值中时在序列化过程中会被忽略2.undefined、任意的函数以及symbol值出现在数组中时会被转换成 null。3.undefined、任意的函数以及symbol值被单独转换时，会返回 undefinedJSON.stringify(undefined) // undefinedJSON.stringify(null) // nullJSON.stringify({val:undefined}) // {}JS
2021-10-11 11:33:57
1453
原创 手动实现map、filter、reduce数组循环方法
map该方法返回一个新数组，其结果是循环原始数组中的每个元素都执行提供的函数后所返回的结果，原始数组有多大，返回新的数组就有多大function map(arr, mapCallback) { // 首先，检查传递的参数是否正确。 if (!Array.isArray(arr) || !arr.length || typeof mapCallback !== 'function') { return []; } else { let result = []; //
2021-10-10 14:15:19
158
原创 vue项目中修改element-ui源码，如何运用到项目中 (修改 node_modules 里的文件,并应用)
由于element组件不满足项目的需要，需要对源码进行修改，如何在使用到项目中，发现直接修改源码以后不生效，原因是因为其实项目中所引用的并不是直接源码，而是通过打包好后的lib文件。源码只是相当于提供给你参考的，整个项目的运行，靠的都是lib文件夹下的打包文件。如果修改呢第一步，实现从git上拉取element的源码第二步，安装依赖 npm install，并跑起项目第三步，修改packages中的源码，再进行打包（npm run dist）最后一步，找到你的项目中的node_modules包下的
2021-09-09 11:56:24
7399
3
原创 z-index的理解
z-index的理解只有定位元素（position:relative/absolute/fixed/sticky）的z-index才有作用<style> .main{ position: relative; width: 500px; height: 500px; } .son{ position: absolute; width: 200px; height:200px; z-index: 10; background: red; top: 0; left: 0;
2021-09-06 17:00:50
202
原创 scss 的基本使用
使用变量SASS通过$符号去声明一个变量，来存储需要复用的信息$variable-color: #333;.main { color: $variable-color;}编译后产生的CSS代码.main { color: #333; }嵌套以嵌套的方式使用CSS，但是过度的使用嵌套会让产生的CSS难以维护.main { ul { margin: 0; padding: 0; } li { display: inline-block; } a
2021-09-01 15:04:21
188
原创 jsPlumb使用html2canvas无法识别svg
使用VFD流程设计器图片下载问题利用html2canvas处理svg生成canvas，之后在利用canvas转成base64进行图片展示使用html2canvas对svg线条没有显示问题，实际画出的流程图为但是点击生成流程图片的时候线条却不见了原因是因为利用html2canvas处理svg成canvas时是异步进行，还没有生成出来就画canvas肯定就没有了呀解决办法这个是点击生成图片的方法 VFD流程设计器的图片生成的源码解析exportFlowPicture () { cons
2021-04-13 18:04:14
13952
3
原创 浏览器打印解决input框内容无法获取值得问题 print()
在使用浏览器的打印功能时，在DOM上，input中的值没有在元素内，只有纯文本的才可以被print();可以动态设置input的value值，实现input也可以打印出来使用vue的自定义指令来实现input的打印功能由于打印是浏览器重新打开一个html文件来实现的，所以在原页面使用的样式都是无效的，要编写打印html的时候要把css文件引入进去，或者在打印的html文件里直接写style样式，或者通过vue的data设置样式变量，在文件中引用，方法一：使用vue的自定义指令，给input绑定，在
2021-03-24 10:34:17
17430
2
原创 js实现回到顶部，以及回到指点div顶部
1. 是用锚点回到页面顶部利用a标签链接实现回到顶部<body style="height:2000px;"><div id="top"></div><a href="#top" style="position:fixed;left:0;bottom:0">我要回到顶部</a></body>2. 使用scrollTop或者scrollTo()方法<body style="height:2000px;">&l
2021-02-25 16:47:59
24991
原创 elementui表单的一些用法
form表单的一些用法validate（）时elment-ui封装好的用于对整个表单进行验证validate的参数是一个回调函数。该回调函数在校验结束后被调用，是否校验成功和未通过校验的字段。若不传入回调函数，则会返回以promise参数：Function( callback : Function( boolean,obj ) )isPass是布尔值，为true时表示校验通过。调用validate()校验时，需要prop属性绑定校验项的字段名，如上图所示。如果prop属性不绑定name这个字段
2020-08-29 13:54:51
700
原创 element表格的表头添加*星号
vue怎么实现element表格里表头信息提示功能？第一、给el-table添加:header-cell-class-name<el-table :header-cell-class-name="func"></el-table>第二、在vue的methods中编写方法// 给头部添加星星func(obj) { let list = ['表头1', '表头2', '表头3','表头4',] if(list.includes(obj.column.label)) {
2020-08-27 17:17:00
23519
原创 常用命令之git
git本地上传远程如果你的本机是安装成功第一次使用，先配置一下一些基本的信息$ git config--global user.name "Your Name"$ git config --global user.email"email@example.com"第一，先在码云上创建一个项目第二，进入本地项目目,然后把初始化一下，把本地的目录变成git本地仓库, git status 可...
2020-07-09 20:31:58
8901
转载 学会使用$attrs跟$listeners
在父子组件通讯，或者父孙通讯$ attrs与$ listeners的主要应用是实现多层嵌套传递。组件A与组件B通信一般都会使用组件B中转，即A传递给B，B再给C，但是如果A到C组件之间嵌套的组件过多，需要传递的事件和属性较多，会导致代码繁琐，代码维护困难。在vue2.4中，为了解决该需求，引入了attrs和attrs和attrs和listeners，新增了inheritAttrs选项。组件数据通讯利用$attrs官方定义：包含了父作用域中不作为prop 被识别 (且获取) 的特性绑定 (clas
2020-06-28 20:21:59
9281
原创 利用Vue.observable创建一个小型状态管理文件
如果小型项目用vuex的话，可能会繁琐冗余，这个时候可以用到vue2.6的新apiVue.observableimport Vue from 'vue'//引入vue// 通过Vue.observable创建一个对象export const store = Vue.observable({ data1: {}, data2: []})// 定义 mutations, 修改属性export const mutations = { setdata1(data1) { sto
2020-06-23 21:11:15
281
原创 利用hookEvent监听组件生命周期函数
例如没有hook的时候，需要在生命周期里使用方法，维护代码也需要往后查看，如果两个函数相差几百行代码呢 mounted() { window.addEventListener('resize', this.xxx) }, updated() { // 干了一些事 }, created() { // 干了一些事 }, beforeDestroy() { // 组件销毁时，销毁监听事件 window.removeEventListener('r
2020-06-23 20:20:00
895
原创 移动端的宽高随着分辨率的变化对应变化
移动端的宽高随着分辨率的变化对应变化，比如说要在移动端画圆，但是怎么样让他的宽高比例一致呢，如果用rem来对圆的半径，那么无非就是定死半径了，用百分百是不能适配各移动端的。如果在一个div里平均显示两个圆并且这两个圆半径相同，无非就是宽高相同而且随着屏幕的大小的变化进行半径变化，一般来说可以是这样一个大div中2个小div，这两个小div宽是大div的50%，高度呢就无法设置了，因为高度用百分比的话相对的父级的，但是父级默认是被子级撑开的，所以百分百是不行的，写多少百分比高度都是为0，但是默认的padd
2020-06-11 18:53:49
424
转载 js实现数组对象去重（包括里面的所有属性）、判断数组以及对象中的内容是否相同
ES6有一个方法来判断两个对象是否相等console.log(Object.is(a,b))但是这个相等，和我们平时要的相等可能不一样这个方法判断的是a和b是不是同一个指针的对象比如说var a = { id:1};var b = a;console.log(Object.is(a,b)); //true但是下面这种情况就不管用了var a = { id:1};var b = { id:1}console.log(Object.is(a,b)); //fa
2020-05-18 16:18:38
25127
原创 解决问题之跨域请求
https://www.bilibili.com/video/BV1oJ411473Y?p=81.jsonp2.webpack 的代理3.webpack的plugin第一步安装插件npm install -S webpack-dev-middleware把后端跟前端绑在一起第二步4.在后端配置cors注意：在res.header（）…之后要加next（），图片的没有加...
2020-04-24 20:39:28
195
原创 事件循环机制（宏任务与微任务）
js是单线程的，按照从上往下顺序执行，js引擎线程会在适当的时候去消息队列取出消息放到栈中，顺序执行的时候，比如说鼠标点击事件会放到消息队列中，对应的回调函数会先放到消息队列中等待，比如说栈中的func2是message1消息队列的函数，就是先要把栈里的函数全部执行完才会去消息队列里拿下一个message，如此循环就是事件循环（event loop）。但是呢，消息队列里有宏任务队列跟微任务队列，有限执行微任务队列里的，把所有的微任务队列里的都执行完了才会执行宏任务队列里的。
2020-04-18 16:42:33
244
原创 promise语法及回调
一般new一个promise容器，promise容器里有三个状态，但是每次只能存在一个状态，即下面图片的三个小圈，pending正在执行，resolve是成功的，reject是失败的成功后就把data传到resolve这个状态中then里的第一个function就是resolve，第二个function就是reject代码图示：then（function(){return aa...
2020-03-18 17:00:34
374
原创 XSS，CSRF攻击及预防等一些web安全问题
一.XSS1.定义xss中文名：跨站脚本攻击。xss的重点不在于跨站点，而是在于脚本的执行，当用户浏览该页面的时候，那么嵌入到web页面的script代码会执行，因此会到达恶意攻击用户的目的2.分类（3种）.反射型（非持久（一次性）、需要服务器）一般指攻击者通过诱惑的方式来诱惑用户去访问一个包含恶意代码的url，当点击时就会直接在主机浏览器上执行（会获取cookie的信息）存...
2020-03-18 16:46:10
8991
转载 express从mysql数据库获取数据
1、首先npm install mysql --save安装mysql2、在server文件夹下新建config文件夹，config中新建db.js文件，代码如下：// 创建数据库连接const mysql = require("mysql")const connection = mysql.createConnection({ host: "101.132.36.129", ...
2020-03-01 17:21:41
667
原创 原型跟原型链 、prototype跟proto
1.原型跟原型链每个对象都有一个原型对象，对象是以其为模板，从原型继承方法和属性。原型对象也有原型，并从中继承方法跟属性，一层一层，这种关系就是原型链。这些属性跟方法是定义在object的构造函数的prototype属性上的，而非对象实例本身。在传统的面向对象语言中，是通过定义一个类，此后创建对象的实例，类中定义的属性跟方法都复制到实例中，而js中并不是这样复制的，而是通过在对象实例和他的构造...
2020-02-21 11:11:09
8861
原创 js的一些简单算法（包括一些经典力扣，持续解题）
//判断str是否有数字function strnum(str) { var a1 = new RegExp('[0-9]') var new_str = a1.test(str) return new_str}//计算两个数相乘的值，未知小数(求精度)function num(a, b) { var a1 = a.toString(); var...
2020-02-18 23:07:37
1334
1
原创 事件委托
看百度事件委托https://blog.csdn.net/z69183787/article/details/54019756或https://www.cnblogs.com/ranyonsue/p/6780795.html
2020-02-14 11:57:39
186
原创 简简单单的学会闭包
闭包就是fn2，能读取其他函数内部变量的函数（定义在函数内部的函数）var a = 123;var fn1 function(){ var b = 234 function fn2(){ console.log(b) } return fn2}var res = fn1()res()闭包特点：闭包就是函数内部跟函数外部链接的一座桥梁用途：可以做一个计数器作用：读取函数...
2020-02-12 15:01:21
11420
原创 vue 路由 router的使用
1.安装npm install vue-router2.在一个模块化工程中使用它，必须要用vue.use()进行手动安装import Vue from ‘vue’import VueRouter from ‘vue-router’Vue.use(VueRouter )
2020-02-11 21:05:26
339
原创 前端基础2
1.原型跟原型链每个对象都有一个原型对象，对象是以其为模板，从原型继承方法和属性。原型对象也有原型，并从中继承方法跟属性，一层一层，这种关系就是原型链。这些属性跟方法是定义在object的构造函数的prototype属性上的，而非对象实例本身。在传统的面向对象语言中，是通过定义一个类，此后创建对象的实例，类中定义的属性跟方法都复制到实例中，而js中并不是这样复制的，而是通过在对象实例和他的构造...
2020-02-09 12:04:02
303
原创 微信小程序获取用户的手机号
在用户点击授权登录的时候，获取手机号可以先看微信小程序的开发文档这里用的是模仿 Node 的 demo，使用 CryptoJS实现纯 js 下解密用户信息要用到cryptojs来解密wxml:<button class="button1" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">登录<...
2019-12-27 17:10:00
761
1
原创 小程序中使用loading组件显示正在加载
三步实现小程序loading组件显示正在加载第一步先在wxml中编写点击事件按钮<button type="default" bindtap="loadingNav">点击弹出正在玩命加载...</button>第二步先在wxml中位置上设置loading<loading hidden="{{loadingHidden}}"> 玩命加载...
2019-12-23 16:10:21
14118
原创 在package.json中配置了build 这个命令了，为什么不能生成dist目录，npm run build 报错
npm run dev后并没有生成dist目录，但是浏览器里却读取了dist里的build.js？为什么呢？？当你跑npm run dev 命令时，打包之后走的是内存里的文件（前提要是先配置了webpack-dev-server），在页面中会通过script标签中的src属性引入的是./dist/builds.js。如果你想要生成dist目录，要通过npm run bulid命令。因为你没...
2019-12-10 17:14:33
18970
原创 webpack配置多入口多出口页面
在配置好单入口的webpack的基础上添加多入口多出口，只需添加其中的代码即可！配置单入口页面webpackwebpack.config.js entry:{ 'index':'./src/index/main.js',//页面一的js 'one':'./src/one/main.js',//页面二的js },//输入路径 output: {...
2019-11-04 10:19:05
687
原创 js懒加载的实现
懒加载其实就是减少一次性对服务器请求资源，导致性能降低的解决方法，比如说商品加载的时候由于商品图片太多，如果一次性加载的话，会导致网页加载慢，从而用户体验差，懒加载原理其实就是在img标签里创建一个data-xxx的自定义属性，这个自定义属性存放的就是真实的img网络路径，而所有图片的src则存放一张空白页，这样子一开始加载页面的时候，只需要访问一次即可，当滚动条滚到图片到可视区域的底部时，则...
2019-10-15 11:24:51
348
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人