前端-大杂烩
该模块主要涉及前端技能点分享、技能拓展,知识面拓展等等;
Zachary_zlc
资深爱码士!!
展开
-
2021真题
2021 js真题转载 2022-02-07 16:17:21 · 58 阅读 · 0 评论 -
【特殊字符正则】
// 特殊字符&表情const regEn = /[`~!@#$%^&*()_+<>?:"{},./;’[]]/im;const regCn = /[·!#¥(——):;“”‘、,|《。》?、【】[]]/im;const regEmoji = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;原创 2022-01-05 13:08:56 · 84 阅读 · 0 评论 -
sql语法
(注意:查询编辑控件可以使用选中执行 ,命令有:select update delete )一、基础查询语法:1.基本使用方法:select *(列名) from chart(表名) where name='张三'(条件)2.模糊查询及逻辑关系:select * from chart where name like '张%' and sex='男’3.添加别名:(as 可以省略)select name as 姓名 ,sex as 性别 ,邮件=email from ch原创 2021-06-07 16:10:01 · 94 阅读 · 0 评论 -
利用粘性定位(position: sticky;) 封装一个移动端可冻结首行和第一列的表格
兼容性分析:1.position: sticky 属性的兼容性:chrome 56 以上,edge 16以上,ie不支持;2.由上述属性决定的该表格更适用于不考虑兼容性的移动端;<template> <div class="table-container"> <table> <thead> <tr> <th v-fo原创 2021-05-21 10:35:10 · 560 阅读 · 0 评论 -
vue node 做RSA加密 ;; 利用jsencrypt插件(该部分放前端) node-rsa模块(该部分放node端)
前言:1.bcrypt 进行md5 加密后存在库中的密码密文是不可逆的;2.前端再用bcrypt 进行加密,两段密文是不一样的;3.bcrypt 方法比对只有该模块提供的compare方法,但是该方法要求同时提供原明文密码和库中的密文密码(一般为了保护用户账号安全,都这样放)才可以判断出密码是否正确;4.生成公私钥的方法一般用linux系统中的openssl:生成私钥:openssl genrsa -out rsa_private_key.pem 1024生成公钥:openssl rsa -in原创 2021-05-17 20:14:55 · 706 阅读 · 1 评论 -
服务器端(node) nodemailer outlook邮箱 node-canvas echarts 服务器动态生成图表转成base64图片以邮件形式发送
function generateLineImage (myTitle, myLegend, data) { var options = { title: { text: myTitle, left: 'center' }, legend: { bottom: 0, data: myLegend }, grid: {原创 2021-05-10 18:18:15 · 532 阅读 · 0 评论 -
封装一个通过 nodemailer发送邮件的工具(node服务器发送邮件)
const nodemailer = require(“nodemailer”);let adminConfig = {host: ‘xxx.163.com’, // 邮箱主机地址// port: 465, // SMTP 端口 SSL的同465// secure: true,ignoreTLS: true,auth: {user: ‘xxx.com’, // 邮箱账号pass: ‘xxx’, //密码}}const sendEmail = async (userEmail, name原创 2021-04-29 19:37:34 · 289 阅读 · 0 评论 -
axios cancelToken source 取消接口请求时遇到的坑
问题描述:按照以下axios官方文档说明,使用source.tokenhe source.cancel终止请求时,调用一次source.cancel,会把所有的请求都终止,并且再次发送请求都发不出去了;解决办法:1.请求拦截器:config里面添加token(注意source=cancelToken.source()注意:每个请求被拦截的时候都新生成一个source;2.把刚才添加的source 存储到store的数组中(setCancelToken是存soure,setClearRequests原创 2021-04-29 10:15:02 · 3110 阅读 · 0 评论 -
react生命周期(新)
1.将会移除:willMount 和willUpdate;2.mounting阶段:constructorrendercomponentDidMountupdating阶段:rendercomponentDidUpdateunmounting阶段:componentWillUnmount原创 2021-04-12 23:15:55 · 67 阅读 · 0 评论 -
理解nodejs的事件循环
nodejs的一轮事件循环包含六个阶段:timer:I/O callbacks:idle(空转):poll:check:close callback:原创 2021-04-11 21:32:25 · 202 阅读 · 0 评论 -
基本的TS使用
NumberBooleanString数组:String[]Number[]Boolean[]泛型:ArrayArrayArrayArray元祖:[Boolean,String,Number]函数:函数function(name:String)String默认参数function add(name:String=‘zachary’)可选参数function add(name?:String=‘zachary’) 可选放后边剩余参数function add(。。。r原创 2021-04-08 23:44:55 · 103 阅读 · 0 评论 -
导航栏输入URL到页面渲染的过程(其实就是浏览器的工作原理,重点关注)
输入URl开始:=> 浏览器向域名服务器请求进行DNS查找(以前未访问过,访问过的话先向缓存进行查找);**=>**服务器或者缓存返回一个IP地址(浏览器会缓存一段时间以减少首屏时间);**=>**通过IP定位到服务器后,浏览器通过TCP的三次握手与服务器建立连接;**=>**浏览器代替用户发送一个http的 GET请求,实际是向服务器请求一个包含html的包;**=>**服务器返回相应的响应头和html(TTFB 是用户通过点击链接进行请求与收到第一个HTML包之间原创 2021-04-08 10:46:41 · 162 阅读 · 0 评论 -
node: express + session + cookie的鉴权机制
一、准备工作:1.本地安装redis库,我用的是菜鸟教程–提供的git连接上的 ‘Redis-x64-5.0.10.zip’版本;2.安装好redis没问题后,跑起来别关cmd窗口;3.创建程序如下:备注:session.js和redis.js放在同一个文件夹config下管理的;创建express服务器: app.js文件// 引入创建模块const express = require('express')const http = require('http')const session原创 2021-01-26 16:48:25 · 297 阅读 · 2 评论 -
javaScript的 this绑定分析
注意:js中的this指向是根据执行上下文来确定的:绝大多数情况:1.全局执行上下文: this 指向widnow ,严格模式下指向undefied2.函数执行上下文:默认绑定: 函数调用时无前缀,默认this 指向widnow ,严格模式下指向undefied注意:严格模式下调用不在严格模式中的函数,并不会影响this指向;隐式绑定:如果函数调用时,前面存在调用它的对象,那么this就会隐式绑定到这个对象上注意1:如果函数调用前存在多个对象,this指向距离调用自己最近的对象;注意2:隐式原创 2021-01-22 16:35:17 · 108 阅读 · 3 评论 -
新版浏览器原生的observer
观察器:Intersection Observer,交叉观察者。Mutation Observer,变动观察者。Resize Observer,视图观察者。Performance Observer,性能观察者。参考及后续学习地址:https://blog.csdn.net/qiwoo_weekly/article/details/102791689...转载 2020-12-18 11:17:54 · 153 阅读 · 0 评论 -
分享 一个好玩的 DOM API toggleAttribute(==setAttribute 和 removeAttribute)
用于切换设置属性的API<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <bod原创 2020-12-18 10:26:45 · 198 阅读 · 0 评论 -
拿到对象数组 根据子项(对象)--时间字符串--属性排序
描述:很多时候,前端会拿到[{a:1},{1:2},{a:3}…]类似的数据,然后去渲染页面,但是需求中要求升序或者降序渲染:既有如下方法:结合Array.sort() 使用Array.sort(getTimeSortByObjPropUp(‘排序依据的属性’)):说明:因为array.sort(func)sort 方法需要传入一个函数 like:function(a, b) {return a - b}下面的处理方法在此基础上进行升级,用闭包处理后再加入到sort方法中,一次来完成对象数原创 2020-12-17 14:36:36 · 148 阅读 · 1 评论 -
用递归方式查找字符串出现次数最多的字符及数量的方法(递归实现)
请按需调整输出结果:let str = 'abcabcacbbbbacabbvvvccccccccccccccccaavbaaaaaab' // 测试案例getHighestFrequencyStr(str, ['', 0]) // 执行方法 输出--["c", 20]let str = 'abcabcacbbbbacabbvvvccccccccccccccccccccccaavbaaaaaab' // 测试案例getHighestFrequencyStr(str, '', 0) //输出-原创 2020-12-16 17:02:26 · 552 阅读 · 0 评论 -
javascript 日常开发常用的方法(字符串、数组、对象)
字符串:1-str.length2-str.indexOf()3-str.lastIndexOf()4-str.search()5-str.slice(start,end) // 接受负值6-str.substring(start,end)7-str.substr(start,length)8-str.replace(target, new)9-str.toUpperCase()10-str.toLowerCase()11-str1.concat(str2,str3,str4,…)1原创 2020-12-09 17:30:41 · 79 阅读 · 0 评论 -
手写VNode(简单易懂) 基于递归 最终结果 获取根元素及其所有的子节点信息,并保存成jsVNode对象
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>create vue</title> </head> <body> &原创 2020-12-09 15:10:16 · 587 阅读 · 1 评论 -
函数合成与柯里化
123原创 2020-12-09 10:56:57 · 151 阅读 · 0 评论 -
请求头中的referer host
referer:(知识源头MDN)Referer请求头包含了当前请求页面的来源页面的地址,即表示当前页面是通过此来源页面里的链接进入的。服务端一般使用Referer请求头识别访问来源,可能会以此进行统计分析、日志记录以及缓存优化等。较为常见的应用:主要是服务端用来校验XSRF攻击,适合一般情况校验,因为referer校验是可以使用特殊的方式被伪装(请自行了解);Host:(知识源头MDN)请求头指明了请求将要发送到的服务器主机名和端口号。如果没有包含端口号,会自动使用被请求服务...原创 2020-11-18 13:38:29 · 869 阅读 · 0 评论 -
git reset --hard 需要保留的修改没了怎么办?git fsck --lost-found
git reset --hard 也有还能拯救的情况,兄弟稳住别慌,看我能救你不?1.如果你没git commit 也没git add,那就彻底完犊子了。(卧槽,兄弟,给你狂的,不明白咋回事你都敢git reset --hard ,你真的疯了)1.git commit后执行的git reset --hard :此时 git reflog 能找到本地仓库的操作日志,再次git reset --hard [HEAD或者前面的id都可以] ,此时可以理解为原路返回上次git reset --hard 那.原创 2020-11-16 17:14:15 · 1986 阅读 · 2 评论 -
redis数据存储和mongoDB的区别及对比(一个前端人员对数据存储的思考)
!!!老炮们都知道管redis叫‘redis缓存’;跟mongodb叫‘mongodb数据库’(事出必有因,为什么呢?)。redis和mongodb都是优先把关系型数据(一般非关系型数据一般存Sql,具体请自行百度或者咨询公司的后台)存储到内存当中。但是,存在如下区别:Redis:redis内存不足时,会自动执行系统的LRU(其实就是内存自动回收机制),对数据进行删除,根据redis官方文档的描述,redis存储key和value的大约值都为512M;redis能够支持非常丰富的数据存储结构,如ke原创 2020-08-17 19:27:10 · 673 阅读 · 0 评论 -
实现前后端分离式开发-在webpack项目中进行MOCK(mock)-1(入门级)
1.webpack.config.js 最上面:constMock=require('../mock/mock.js'); (该文件在哪如何定义看第3步)2.devServer中:(before能否提前处理ajax请求,app是个很复杂的对象,请不要过分纠结,写上就行了,原来的配置内容不要动即可)before(app){Mock(app...原创 2020-03-25 17:35:52 · 404 阅读 · 0 评论 -
前端知识及项目中常用的的概念和个人理解整理分享-6(其它前端知识可来我的博客主页查看o,有高见的时候,可以密我哦)
22.vue构建项目时,data中的数据一定要采用函数式包裹,其最核心的目的是保证每个组件上的数据都是独立的。 为啥这样说:这样说其实跟js的数据存储是有关系的,函数执行时会创建独立的作用域空间(就是变量的有效范围),如果不用函数包裹的话,每个组件的data 都是内存的同一个地址,一个数据改变了,其他也改变了,这样完全不符合我们的代码预期. 那为...原创 2020-03-25 09:20:13 · 153 阅读 · 0 评论 -
前端知识及项目中常用的的概念和个人理解整理分享-5(其它前端知识可来我的博客主页查看o,有高见的时候,可以密我哦)
21.如何理解前端工程化,模块化、组件化开发:其实简单点理解前端项目参照系统工程的模式去开发,以达到前端项目的文件结构树更清晰,方便维护和可持续开发利用,开发效率更高的目的。工程化的具体操作可以细分为模块化和组件化,模块化即将一些可复用的代码片段进行独立封装,能够达到代码复用、开发时间、提高代码复用性、减少项目体积等目的;组件化开发即根据视图结构对代码片段封装在不同的组件中,每个结构都作为一个...原创 2020-03-24 17:45:54 · 123 阅读 · 0 评论 -
前端知识及项目中常用的的概念和个人理解整理分享-3(其它前端知识可来我的博客主页查看o,有高见的时候,可以密我哦)
19.关于深拷贝和浅拷贝: 浅拷贝:只拷贝对象的基础属性值,对属性值为对象或数组的属性则拷贝指针; 深拷贝:拷贝对象的所有属性作为一个全新的对象。拷贝前后的对象互不影响; 注 意: 实际项目中较为常用的浅拷贝方法是Object.assgin() ,深拷贝方法是JSON.stringgify()和JSON.parse()...原创 2020-03-18 15:06:02 · 86 阅读 · 0 评论 -
前端知识及项目中常用的的概念和个人理解整理分享-2(其它前端知识可来我的博客主页查看o,有高见的时候,可以密我哦)
17.vue的底层原理: 核心是数据劫持:(利用defindProperty做数据劫持,即调用Data对象中所有的属性(所有数据字段)的get()和 set()方法; Observe:监视数据变化,添加订阅者和更新函数,数据变化则触发set()并通知订阅者; Compile:解析模板变量成数据,为所有的元素节点添加更新函数和订阅...原创 2020-03-17 16:42:14 · 93 阅读 · 0 评论 -
前端知识及项目中常用的的概念和个人理解整理分享-1(其它前端知识可来我的博客主页查看o,有高见的时候,可以密我哦)
1.Vue的核心概念:数据驱动(双向数据绑定),组件复用(降低重复开发,简化开发);2.关于v-model指令:实现MVVM思想的核心指令,双向数据绑定,即数据发生变化,同步视图,视图发生变化,同步数据;3.MVVM双向数据绑定带来的优越感: 双向数据绑定给人的最大的优越感就是方便。当数据data发生变化时,页面自动发生更新。但是有一个缺点也是因为自动更新而导致的,因...原创 2020-03-17 09:01:03 · 156 阅读 · 0 评论