前端
文章平均质量分 60
liuarmyliu
这个作者很懒,什么都没留下…
展开
-
npm link的简单应用
npm link的简单应用一个项目中,会使用很多依赖,大部分依赖都是开源的第三方依赖,甚至于会有自己造轮子开发的依赖在项目中,这时候就会出现一种情况,比如我又一个自己开发的项目A,在这个项目中使用了一个自己造的轮子依赖B,他们一直相安无事相处了很久,但是有一天我对这个轮子依赖B进行了一些功能性的添加,但是我不知道这次的功能增加是否会对我的项目A产生不兼容影响,所以我需要测试一下。那么我们有什么测试方法呢?一种最不推荐的方法把我们修改后的轮子依赖B发布一个beta版本在我们的项目A中安装这个bet原创 2022-01-26 15:28:32 · 874 阅读 · 1 评论 -
Vue-cli@4.x sockjs-node/info失败导致无法热更新
最近在写基于vue-cli@4.5写Vue3项目,写着写着发现不太对劲,每次我修改了*.vue文件后都自己手动刷新才显示新修改的内容,我一直记得vue2项目都是有热更新的,而且到Vue3官方文档也说明了脚手架安装的项目自带热更新,拆箱即用一开始我以为是我项目写的过程中修改了某些配置,导致热更新失败了,我又重新创建了一个vue3项目结果项目启动后依旧没有热更新,我打开network一看,居然有一堆报错,因为是sockjs.js,所以我猜测我的热更新失败因该是和这个有关我的报错信息,我看了这个请求的原创 2021-03-12 20:41:01 · 1955 阅读 · 2 评论 -
Sass(Scss)简单认识
Sass(Scss)简单认识我个人平时比较常使用的是Less,但是公司前端开发是在Vue中用Sass,为了统一一下语言,所以学习一下Sass。简单介绍Sass和Less一样是Css的预处理器,相比于Css需要重复写大量重复的样式,Sass和Less的好处可以节省大量重复的代码操作,可以通过嵌套样式代码,父子节点之间的关系更加明确,同时还有引入变量,循环,函数等Sass Or Scss其实在官网显示的是sass,但是我们在vue中通常写的是lang = 'scss',其实两个比没有太大的区别,简言之原创 2021-02-08 16:52:55 · 850 阅读 · 0 评论 -
Syn_Flood 泛洪攻击
Syn_Flood 泛洪攻击什么是泛洪攻击Syn-Flood攻击是当前网络上最为常见的DDoS攻击,也是最为经典的拒绝服务攻击,它利用了TCP协议实现上的一个缺陷,通过向网络服务所在端口发送大量的伪造源地址的攻击报文,就可能造成目标服务器中的半开连接队列被占满,从而阻止其他合法用户进行访问。在TCP连接的时候需要进行三次握手那么泛洪攻击就是利用三次握手中最后一次的确认握手来发起攻击攻击者先伪造地址对服务器发起连接请求,服务器收到请求后会返回确认ack,给真正的地址客户端,真正的地址客户端其实并没原创 2021-02-03 20:17:20 · 1565 阅读 · 0 评论 -
有关原型的一些方法
整理一下有关原型或者原型链上常出的一些方法1. istancenofa instanceof b用来判断a的原型链上是否有b的存在// instanceoffunction Father(){ this.sayFather = 'i am father'}function Son(){ this.saySon = 'i am son'};Son.prototype = new Father();var son = new Son();console.log(son ins原创 2021-02-03 20:15:36 · 217 阅读 · 0 评论 -
Axios见解+源码浅析
Axios见解+源码浅析 在前后端项目开发过程中,从前台获取后台项目是一个很基本的操作,在我最开始学习的时候,是用XMLHttpRequest用于发送数据,到后面用JQuery封装好的ajax,开始接触前端VUE框架后,用axios来请求数据为什么使用axios而不是ajax其实一开始我也有这样的想法,既然已经有了ajax,为什么我们在VUE项目中还是推荐使用呢,参考一些文章得出以下结论主要从以下几个方面来看大小axios的体积比ajax要小的多,因为使用ajax要使用JQuery库(性原创 2021-01-29 16:56:35 · 223 阅读 · 0 评论 -
vue-cli4.5创建Vue3.x引入element-ui
在Vue项目中常使用的一个UI库就是element-ui了注意目前element-ui只支持Vue2.6以下的版本,如果想在Vue3.0使用这个组件库,就要使用element-pluselement-plus官网步骤在Vue3项目根目录下vue add element-plusnpm install vue-cli-plugin-element-plus全局引用src/plugins/element.jsimport ElementPlus from 'element-plus'im原创 2021-01-18 19:26:21 · 3659 阅读 · 8 评论 -
Vue3项目搭建
此文将介绍如何搭建一个Vue3项目基于官方文档条件Node 8+vue-cli 4+npm 6.1+可以再cmd中输入以下指令查看当前版本node -vvue -Vnpm -v对于 Vue 3,你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。要升级,你应该需要全局重新安装最新版本的 @vue/cli:// 卸载npm uninstall vue-cli -g// 安装npm install @vue/cli -g也可以使用cnpm下载,这原创 2021-01-15 16:38:40 · 456 阅读 · 0 评论 -
事件循环机制
事件循环机制首先,JavaScript是一门单线程语言,在一个时间上只能做一件事情那么我们我们可能有很多个事情(任务)需要去完成,这时候,JavaScript就把我们要完成的任务放在了任务队列,并且分为了同步任务和异步任务任务队列所有任务都可以分为同步任务和异步任务。同步任务就是我们要立即执行的任务,一般会直接进入主线程执行。异步任务,就是可以异步执行的任务,比如网络资源请求,setTimeout这些,会通过任务队列( Event Queue )的机制来进行协调同步任务进入主线程,异步任务进入任原创 2020-12-20 19:21:49 · 213 阅读 · 0 评论 -
URL到整个页面加载完毕显示在屏幕上的整个流程
URL到整个页面加载完毕显示在屏幕上的整个流程输入地址浏览器查找域名的IP地址浏览器向web服务器发送一个http请求服务器的永久重定向响应浏览器跟踪重定向地址服务器处理请求服务器返回一个Http响应浏览器显示HTML浏览器发送请求获取嵌入在HTML中的资源(图片、音频、视频、css、js等)1.输入地址当我们输入网站地址的时候,浏览器就开始智能匹配的url,他会从我们的历史记录,书签等地方去查询我们可能会输入的url,然后显示出来2.浏览器查找域名的IP地址请求一旦发起,浏原创 2020-11-25 11:16:49 · 737 阅读 · 0 评论 -
web交互技术
在我们平时的生活过程中,会进行很多实时交互的动作,比如在微信聊天,查看股市行情,我们需要实时的获取服务器端的最新数据,那么如何实时获取服务端最新消息?我们有五大web交互技术:轮询长轮询长连接推送webSocket背景知识在了解这五大技术之前,我们先要了解一下HTTP协议的通信机制浏览器和服务器基于TCP/IP协议,通过“三次握手”建立连接建立连接后,客户端发送请求给服务器端服务器端收到请求,给予相应的相应信息客户端与服务器端断开连接(HTTP1.0服务器响应后会主动断开连接,H原创 2020-11-25 09:29:10 · 843 阅读 · 0 评论 -
express跨域设置cookie完成用户免登录
一个用户免登录的demo,前台页面在5500端口,后台代码在3000端口运行结果前期准备下载node相关依赖cnpm install express,body-parser,cookie-parser //镜像地址下载比较快前台页面准备用于登录的页面cookieLogin.html<!-- * @Author: army liu * @Date: 2020-11-22 13:47:37 * @LastEditors: army liu * @LastEditTime: 202原创 2020-11-22 16:41:04 · 713 阅读 · 1 评论 -
缓加载
在开发多图页面的过程中,如果一次性请求大量的图片,对带宽的占用是很高的,所以我们可以使用缓加载,在需要用到这部分资源的时候再去对该部分的资源进行请求实现普通的scroll事件监听处理缓加载<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s原创 2020-11-22 13:09:37 · 198 阅读 · 1 评论 -
JS将图片转成base64和二进制流,将二进制流转成base64
基于原先做的一个业务,需要将后端传过来的二进制流图片展示出来图片转base64function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0原创 2020-11-16 15:49:18 · 12982 阅读 · 0 评论 -
JavaScript内存管理解释
在奇舞周刊上看到的一篇文章,文章地址原文是英文的,我在有道+四级的帮助下翻译了一些JavaScript内存管理解释很多时候,对于JavaScript开发者可能对内存管理毫无了解,毕竟JavaScript引擎帮你解决了这个问题从一方面来说,你会遇到类似于内存泄露的问题,只有你知道内存是怎么样工作的,你才能解决这个问题在这篇文章,我会向你介绍如何分配内存和垃圾处理,同时,如何去避免普通的内存泄露内存生命周期在JavaScript中,当我们创建一个变量,函数,或者任何一个你可以想到的数据类型,JS引原创 2020-11-08 21:21:32 · 155 阅读 · 0 评论 -
解决跨域的方法
解决跨域的九种方法在讲跨域之前,应该先了解一下浏览器的同源策略同源策略是浏览器之间的一种约定,是浏览器最基本和最核心的安全策略,如果没有同源策略,网站很容易受到XSS和CSRF等攻击。同源策略就是指网站:协议+域名+端口号三者相同在同源策略下限制的内容:cookie,localStorage,sessionStorage,ajax请求有三个标签允许跨域加载资源<img><link><srript>常见跨域场景当协议、子域名、主域名、端口号中任意一个原创 2020-11-06 13:06:32 · 249 阅读 · 0 评论 -
css居中方式
html结构比较简单<body> <div class="outer"> <div class="inner"> </div> </div></body>水平居中1.margin*{ padding: 0; margin: 0; } .outer{ width: 400px; height: 400px; backgrou原创 2020-10-20 10:23:45 · 91 阅读 · 0 评论 -
微信小程序css报错:at-rule or selector expected
在写微信小程序,前几天还好好的,今天换了一个基础库后发现wxml页面报错了错误提示虽然页面能够显示,功能能够使用,但是看得很不舒服如何修改:在微信开发者工具右下角,把HTML换成XML更改前:更改后:就没有报错了...原创 2020-10-15 15:19:22 · 3962 阅读 · 1 评论 -
Cannot read property ‘protocol‘ of undefined
因为采用了外部写api文,在引用时如果写错了就会有这个问题,mark一下原创 2020-10-07 16:26:52 · 177 阅读 · 0 评论 -
vue+vant+koa2+MongoDB实现注册功能
最近学了一下koa2和MongoDB,写个注册功能更加熟悉一下首先,用vue+vant把注册页面写出来1.Vue方面都是一些很常用的知识点,vant是一个比较适用于移动端的UI组件库,而element-ui更加适合h5网页版register.vue<template> <div> <van-nav-bar title="用户注册" left-text="返回" left-arrow @click-left="goBack" />原创 2020-10-06 11:20:56 · 454 阅读 · 0 评论 -
CDN字体跨域问题
用vue写了一个h5移动端页面,因为涉及到了很多动图所以用了腾讯云的CDN加速,但是出现了一个神奇的问题,图片类都可以使用CDN地址,但是字体文件浏览器却报了跨域错误原因是:字体文件在CDN服务器上、项目部署在后端的服务器然后解决方法是:将字体文件转成base64,这个网站可以转换记得要把这个勾上然后把里面的css,copy到自己的项目要用到的地方,就可以愉快的显示了...原创 2020-09-29 19:57:25 · 789 阅读 · 0 评论 -
inline-bock间隙问题
当我们想让多个div标签排在同一水平线上时,我们一般第一时间想到的就是display:inline-block,但是此时每个div之间都有一定的间隙,这就是inline-block间隙问题,也有人叫换行符/空格间隙问题举一个简单的例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=原创 2020-09-29 13:33:22 · 105 阅读 · 0 评论 -
link和@import之间的区别
link和@import都可以导入css样式,但是他们之间有什么区别?区别:1.link不仅可以导入样式表,还可以导入其他如如favicon,但@import只能导入样式表2.link是XHTML语法,不存在兼容问题,但是@import是在css2.1才提出,在IE5+后才支持,所以对低版本的浏览器不兼容3.可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。4.link是在页面加载的的同时一起加载的,@import是页原创 2020-09-28 15:35:27 · 2831 阅读 · 0 评论 -
vue前后端对接(代理转发)
1.vue项目基于webpack在config目录下的index.js在cssSourceMap后面添加proxyTable: {'/': { target: "http://localhost:3000/", //后端地址 changeOrigin: true, //允许跨域 pathRewrite: { // 路径重写, '^/': '' // 替换target中的请求地址,也就是说以后你在请求http://xxxx/v2/XXXXX这个地址的时候直接写成/v原创 2020-09-02 14:28:36 · 1755 阅读 · 0 评论 -
小程序父子组件传值
先了解一下子组件的注册页面结构大概是这样的在父组件中:在父组件中,使用自己写的子组件<classDetail></classDetail>,传递的值名称是detail//父组件的wxml <classDetail detail="{{item}}"></classDetail>//父组件的jsdata:{ item:"我是父组件" }要把子组件注册进去//父组件的json"usingComponents": {原创 2020-08-21 13:43:12 · 3665 阅读 · 0 评论 -
JS 异步解决方案的发展历程以及优缺点
1.回调函数(callback)setTimeout(() => { //回调函数内部}, 1000)缺点回调地狱不能用try catch捕获错误不能return回调地狱的根本问题在于:缺乏顺序性:回调地狱导致调试困难,和大脑的思维方式不符嵌套函数存在耦合,一旦有所改动,牵一发动全身(控制反转)嵌套函数过多的话,很难处理错误优点解决了同步的问题2.PromisePromise就是为了解决callback所产生的问题Promise实现了链式调用原创 2020-08-13 15:25:07 · 1168 阅读 · 0 评论 -
Set、Map、WeakSet 和 WeakMap 的区别
Set和Map主要应用场景是数组重组和数据存储Set是一种叫做集合的数据结构,形式类似于数组,没有键值对;Map是一种叫做字典的数据结构,形式类似于对象,有键值对。集合(Set)ES6新增的一种新的数据结构,类似于数组,但成员唯一且无序,没有重复的值。Set本身就是一种构造函数,用来生成Set数据结构const s = new Set();[1,2,3,4,4,3,2,1].forEach(e => s.add(e))for(let i of s) { console.log(i);/原创 2020-08-13 10:48:28 · 877 阅读 · 0 评论 -
node+websocket 简易多人聊天室
websocket和node一起搭建一个简单聊天室,全部源码已经上传到github具体实现环境搭建创建一个文件夹,建立相对应的css目录,js目录(其他可以先不用管)再根目录下执行命令,安装socket.ionpm install socket.io项目搭建1.构建服务器在js目录下建立一个app.js//app.jslet app = require('http').createServer();let io = require("socket.io")(app);let p原创 2020-08-06 18:02:11 · 2273 阅读 · 0 评论 -
JS - 数组方法的效率
JS - 数组方法的效率pop(),push()等在数组尾部操作的方法的时间复杂度为O(1)forEach()、map()、shift()、unshift()、等需要遍历或者在数组头部操作的方法的时间复杂度为O(n)splice()、concat()、find()等方法的时间时间复杂度为O(n),但最优情况可能为O(1),如splice()在数组尾部操作、find()第一个元素就符合条件。不是十分确定的解释:因为 JS 数组是用 HashTable 实现的(上网查资料至少 V8 引擎中是),在数组中转载 2020-08-05 17:11:19 · 2381 阅读 · 0 评论 -
Cannot set headers after they are sent to the client
在nodeJs连接mysql返回语句时老是报这个错误,原因返回了多次响应,所以在每一次返回语句中,要及时加上return没修改前app.get('/addScore', function(req,res){ let query = req.query; console.log(query) var sql = `update team set totalScore = totalScore+${query.score}, count = count+1 where id = ${query.原创 2020-08-05 14:09:28 · 1677 阅读 · 0 评论 -
node连接mysql数据库,封装增删改查
最近写了一下node,用nodejs和vue写了一个很简易的评分管理系统,总计一下在node连接mysql首先,我们需要安装一下mysql的模块,在你服务器工作目录下执行命令npm install mysql --save在js中引入该模块,配置一下端口号,密码什么的const mysql = require("mysql");var connection = mysql.createPool({ host: "localhost", user: "root", passwor原创 2020-08-05 14:05:59 · 2339 阅读 · 2 评论 -
canvas实现画板(移动端+h5)
代码如下:<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>画板</title> <style> * { padding: 0; margin: 0; } body { background: #ccc;原创 2020-08-03 15:51:13 · 2045 阅读 · 0 评论 -
原生JS实现Vue双向绑定
原生Js实现Vue双向绑定Vue数据双向数据绑定是通过发布者-订阅者模式来实现的,在正常使用Vue的时候,调用data里的属性是这样的var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); }});里面有一个set和get,这是使用了Object里面的defineProp原创 2020-08-02 00:03:30 · 2081 阅读 · 1 评论 -
JavaScript手写call,apply,bind
JavaScript手写call,apply,bindcall,apply,bind,都能在JavaScript中改变this指向,那么如何用原生的JS来实现呢?call实现思路参考call的语法规则,需要设置一个参数thisArg,也就是this的指向;将thisArg封装为一个Object;通过为thisArg创建一个临时方法,这样thisArg就是调用该临时方法的对象了,会将该临时方法的this隐式指向到thisArg上;执行thisArg的临时方法,并传递参数;删原创 2020-08-01 13:57:17 · 1311 阅读 · 0 评论 -
HTTP常见状态码
网络中的状态码有五大类:1xx(临时响应),2xx(成功),3xx(重定向),4xx(请求错误),5xx(服务器错误)1xx(临时响应)100 (继续) 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。101 (切换协议) 请求者已要求服务器切换协议,服务器已确认并准备切换。2xx(成功)200 (成功) 服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。201 (已创建) 请求成功并且服务器创建了新的资源。202 (已接受) 服务器已接受请求原创 2020-07-26 13:54:43 · 1564 阅读 · 0 评论 -
Web Worker 介绍和简单实例
JavaScript是单线程语言,前面的任务没做完,后面的任务只能等着。web worker可以为JavaScript创建多线程环境,好处是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。Web Worker 有以下几个使用注意点。(1)同源限制分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。(2)DOM 限制Worker 线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也原创 2020-07-25 23:46:47 · 2321 阅读 · 0 评论 -
解决微信小程序引入iconfont,彩色图标变纯色
刚接触小程序,发现在引入iconfont图标,原来是彩色的图标变成了纯色这是引入小程序内的显示这是在iconfont上的图标我引用的方法是在iconfont上在线生成css,将里面的css复制直接粘贴到wxss就会出现这样的情况原来小程序对应font-class不支持多色引用方法名支持多色兼容性unicode×好font-class×良好symbol√差mini-program-iconfont-cli(微信小程序解决方案)把iconfon原创 2020-07-24 11:37:26 · 6056 阅读 · 24 评论 -
浏览器存储
浏览器存储数据在开发过程中,有些数据我们需要多次用到,但是如果每一次需要就去和服务器请求,那么无疑会造成一定的资源浪费,所以我们可以根据业务需求,把一些数据在浏览器中存储起来,目前最常见的存储方案是:Cookieweb存储(localStorage和sessionStorage)IndexedDBCookie背景因为HTTP协议是无状态的,即服务器不知道用户上一次做了什么,这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中,用户浏览了几个页面,买了一盒饼干和两瓶饮料。最后结帐时原创 2020-07-17 17:11:17 · 1575 阅读 · 0 评论 -
性能优化:细说浏览器渲染的重排与重绘
前端性能优化:细说浏览器渲染的重排与重绘前端性能优化因为涉及到计算机网络、数据算法、图形图像处理、浏览器渲染等多方面计算机知识,常作为前端工程师乐此不疲的技术讨论话题,也正因如此,它也是面试时容易被问及的面试题之一。缘起本篇文章缘起一次偶然的面试问答所引申出的思考整理,着笔于浏览器渲染的角度,探讨前端性能优化的思路和实践建议,当然,浏览器渲染是一个复杂的过程,本文笔者将围绕重排和重绘两个关键词开始行文。目录结构文章大致行文思路如下:URL从输入到页面展示的过程DOM和JavaScript的转载 2020-07-23 12:59:34 · 1819 阅读 · 0 评论 -
JavaScript之防抖节流
JavaScript之防抖节流我记得比软设的时候师兄问有没有使用防抖函数或节流函数,当时了解但是没用,过了将近一年,有些知识都忘了,痛定思痛,赶紧补上。防抖函数(debounce)在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。这个描述就可以知道他的使用场景:输入框校验,手机号、邮箱验证输入检测,防误触防抖一般情况下,我们肯定是和Ajax结合,用于和后端进行数据交互,如果频繁的发起Ajax请求,那么无疑会造成很多资源上的浪费<!DOCTYPE html><原创 2020-07-17 00:09:47 · 1695 阅读 · 0 评论