大前端
关注
分享
扫一扫
文章平均质量分 67
大前端相关分享
解忧杂货铺Q
但行好事，莫问前程
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Nodejs使用Net模块创建TCP服务器和客户端
1、前言这里不得不先说下TCP和websocket通讯的区别：区别按照OSI网络分层模型，IP是网络层协议，TCP是传输层协议，而HTTP是应用层的协议。在这三者之间，SPDY和WebSocket都是与HTTP相关的协议，而TCP是HTTP底层的协议。WebSocket则提供使用一个TCP连接进行双向通讯的机制，包括网络协议和API，以取代网页和服务器采用HTTP轮询进行双向通讯的机制。本质上来说，WebSocket是不限于HTTP协议的，但是由于现存大量的HTTP基础设施，代理，过滤，身份原创 2022-05-23 13:21:19 · 2368 阅读 · 0 评论 -
KOA: 本地开发保持Node 应用实时刷新
npm install -g nodemon然后如果你的入口文件是app.js则只需要在package.json里修改命令即可{ "name": "audio-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "nodemon app.js" }, "author": "", "license": "ISC", "dependenci.原创 2022-05-18 21:49:57 · 498 阅读 · 0 评论 -
JS正则表达式知识点
介绍点语法定义所谓正则表达式，就是一种描述字符串结构模式的形式化表达方法。这是《精通正则表达式》对于它的定义，反正我看了这句话还是不知道正则表达式是干嘛用的，不过没关系，下面我们先来看一下JavaScript的正则表达式中一些常用的语法。创建方式在JavaScript中，我们可以通过RegExp()构造函数或者RegExp直接量两种方式去创建正则表达式。var pattern1 = /s$/;var pattern2 = new RegExp('s$');上面代码中的pattern1和原创 2022-05-15 13:09:11 · 462 阅读 · 0 评论 -
linux下查找 nginx.conf 所在位置
方式1☁ projects： locate nginx.conf/nginx/conf/nginx.conf/etc/nginx/nginx.conf这种情况下，就不太清楚，到底哪个才是真正的配置文件了方式2☁ projects： nginx -tthe configuration file /etc/nginx/nginx.conf syntax is okconfiguration file /etc/nginx/nginx.conf test is successful这种方式，原创 2022-05-14 13:35:05 · 2563 阅读 · 0 评论 -
mac无法将xxx.zip解压缩到下载（错误 - 无此文件或目录）
文件过大时，mac 无法将xxx.zip解压缩到下载（错误 - 无此文件或目录），此时可以修改zip后缀为rar, 使用Unarchiver解压。原创 2021-03-27 07:23:59 · 5473 阅读 · 0 评论 -
typescript：Mapped Types
type Person = { name: string; age: number; location: string}// 1、Mapped Types 只匹配泛型的key，自定义value类型type OptionFlag<T> = { [Property in keyof T]: boolean}const t1:OptionFlag<Person> = { name: false, age: false, location: false原创 2022-03-21 13:26:51 · 1052 阅读 · 0 评论 -
typescript类型和构造器签名new
// 1、限定普通变量类型class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } run(): void { console.log(`Person run :: name=${this.name} age=${this.age}`);原创 2022-03-17 17:55:38 · 1486 阅读 · 0 评论 -
sinopia搭建npm私有仓库
文章目录前言安装进程守卫注册用户上传组件下载私有库组件前言随着前端工程的日益扩大，一个成熟的团队都需要有npm私服。所以搭建一个npm私有仓库是基本的团队建设。搭建私服有很多种方法，这里我们讲解一下如何利用sinopia搭建。安装安装sinopia[root@AlexWong opt]# npm i sinopia -g# 直接启动[root@AlexWong opt]# sinopiaSinopia doesn't need superuser privileges. Don't ru原创 2021-05-15 23:45:37 · 803 阅读 · 2 评论 -
nrm(npm镜像管理工具)
nrm(npm registry manager )是npm的镜像源管理工具，有时候国外资源太慢，使用这个就可以快速地在 npm 源间切换。# 全局安装alex:scaffold $ npm i nrm -g# 查看镜像列表alex:scaffold $ nrm ls npm -------- https://registry.npmjs.org/ yarn ------- https://registry.yarnpkg.com/ cnpm ------- http://r.cnpm原创 2021-05-11 08:12:13 · 468 阅读 · 0 评论 -
获取一个长度为10的随机不重复数组
如何获取一个随机不重复数组方法1const randomNum = () => Math.floor(Math.random() * 10);const count = 30;const uniqueList = [];for (let index = 0; index < count; index++) { const num = randomNum(); if(!uniqueList.includes(num)){ uniqueList.push(num)原创 2021-04-29 00:09:11 · 1519 阅读 · 0 评论 -
js数组去重个N种方法
案例var arr = [1, 1, true, true, 'true', null, 'null', NaN, 'NaN', undefined, { test: 1}, { test: 1}, { test: 2}];解决方案// 方法1// 使用ES6 Set var result = [...new Set(arr)];console.log(JSON.stringify(result));// 无法过滤Object//[1,true,"true",nu原创 2021-04-12 12:09:13 · 151 阅读 · 0 评论 -
函数防抖debounce与函数节流throttle实现及原理
文章目录前言函数节流throttle函数防抖前言函数节流: 指定时间间隔内只会执行一次任务；函数防抖: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行；场景：比如连续输入文字后发送 AJAX 请求进行验证，此时需要使用函数节流，只执行一次。如果是判断浏览器窗口resize时，每次resize都调用处理函数，又很浪费浏览器性能。此时应该采用函数防抖，每隔一段时间执行一次。函数节流throttle规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只原创 2021-03-25 22:13:56 · 336 阅读 · 0 评论 -
手写Function.prototype.bind()
Function.prototype.bind()bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用const obj = { name: 'cat', getName: function(){ return this.name; }}console.log(obj.getName());//此时this指向obj// 结果为catfn = obj.getNam.原创 2021-03-25 08:08:16 · 173 阅读 · 0 评论 -
浏览器输入网址到页面渲染都发生了什么？
键入域名比如baidu.com----> 判断缓存是否存在 ----> TCP解析URL中对应的IP ---> 根据IP建立TCP连接（三次握手）---> HTTP发送请求传输数据 ----> 服务器处理请求，返回请求数据 ----> 浏览器渲染页面，构建DOM ----> 构建完成，关闭TCP连接(四次挥手)URLURL 代表着是统一资源定位符scheme://host.domain:port/path/filename说明:scheme - 定义原创 2021-03-24 19:44:14 · 311 阅读 · 0 评论 -
repaint(重绘)和reflow(回流)
文章目录前言reflow(回流)repaint(重绘)前言repaint(重绘)和reflow(回流)，其实是老生常谈的事情，一直从没正式写过总结，晚上偶然想起，不如简单写一下。首先我们说下，浏览器的简单的渲染流程如下：解析html构建DOM树 ----> 解析css构建CSS树：此时html和css被解析成树形的数据结构构建Render树：将DOM树和CSS树结合形成的Render树布局Render树：有了Render树，浏览器已经知道那些有哪些节点，各个节点的css定义和以及它们的原创 2021-03-24 12:37:58 · 1405 阅读 · 0 评论 -
子元素如何在父元素中水平垂直居中
文章目录1、父box高度固定，子box宽高固定2、父box高度固定，子box高度不固定3、父box高度固定，子box无论宽度高度固不固定1、父box高度固定，子box宽高固定方法1 <div class="box"> <div class="box-cont"> 水平垂直居中 <br> </div> </div> <style> .box { position: relative原创 2021-03-23 21:08:54 · 201 阅读 · 0 评论 -
（孔乙己茴香豆的的“茴”字有几种写法）三栏布局两边固定中间自适应
文章目录1、margin负值法2、自身浮动法3、绝对定位法4、flex布局5、table布局6、grid布局1、margin负值法中间部分一定放最上面，左浮动创建BFC。左右部分均左浮动，左侧负margin值一定等于中间部分的宽度，右侧负margin值等于右侧部分的宽度。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA原创 2021-03-23 14:30:03 · 456 阅读 · 0 评论 -
vue项目皮肤切换方案
文章目录1、theme.less2、引用theme.less3、皮肤切换vue项目有换肤的需求，那么如何换肤呢。一般是准备两份黑白版UI设计色调。采用CSS var()函数自定义变量属性调用。定义一个名为 "--background" 的属性，然后使用 var(--background) 函数调用该属性。思路就是，切换皮肤时，切换不同的不同皮肤的自定义属性值。默认黑色背景，每次切换皮肤，存储本地存储。1、theme.lesstheme-b.less:root { --background:原创 2021-02-27 09:27:15 · 1710 阅读 · 0 评论 -
获取浏览器运行环境
// Browser environment sniffing var inBrowser = typeof window !== 'undefined'; var inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform; var weexPlatform = inWeex && WXEnvironment.platform.toLowerCase(); var UA.原创 2021-02-24 09:52:41 · 543 阅读 · 0 评论 -
Docker-compose一键部署nginx、mysql 和 spring boot项目
文章目录1、前言2、安装3、配置1、前言Docker-Compose项目是Docker官方的开源项目，负责实现对Docker容器进行统一编排。可以统一对同一个项目所需要的多个容器进行管理发布，避免了一个个去发布的繁琐过程。一个工程当中可包含多个服务，每个服务中定义了容器运行的镜像，参数，依赖。一个服务当中可包括多个容器实例。比如：现在有一个项目使用，包括nginx、spring boot 和 mysql。一般部署：分别部署三个容器，nginx容器，jdk容器部署spring boot的jar包和原创 2021-02-01 15:56:24 · 1966 阅读 · 0 评论 -
javascript正则替换换行符“↵“
cosnt text = "5555↵6666↵"text = text.replace(/\r\n|\n|\r/g,"<br/>")console.log(text)"5555<br/>6666<br/>"原创 2021-01-27 14:18:51 · 937 阅读 · 0 评论 -
CentOS一键安装nginx-1.19.6
nginx-1.19.6.sh[root@ script]# cat /opt/script/nginx-1.19.6.sh#!/bin/sh# 从源码安装nginx-1.19.6# 解压后包名App=nginx-1.19.6# 安装包名称AppTar=nginx-1.19.6.tar.gz# 安装目录AppInstallBase=/opt# 安装目录下包名AppName=nginx# 脚本目录ScriptDir=$AppInstallBase/script# 安装包保存目录.原创 2021-01-22 11:22:39 · 1086 阅读 · 1 评论 -
CentOS安装Nginx报错‘conf/koi-win‘ and ‘/opt/soft/build/nginx/conf/koi-win‘ are the same file
执行 make install 命令时，出现的 cp: ‘conf/koi-win‘ and ‘opt/soft/build/nginx/conf/koi-win‘ are the same file事件还原：nginx-1.19.6.tar.gz解压目录：/opt/soft/build/nginx[root@AlexWong nginx]# lltotal 808drwxr-xr-x 6 1001 1001 4096 Jan 22 11:07 auto-rw-r--r-- 1 1001原创 2021-01-22 11:16:46 · 1306 阅读 · 0 评论 -
nginx cache添加缓存和删除缓存
1、前言说起缓存，大家也许知道CDN。购买CDN服务后，服务提供商会把你的资源都缓存到各个加速节点上，当用户访问时，会自动获取距离用户最近节点的缓存资源，直接由最近的节点快速响应，有效解决网站访问慢，延迟高等问题。nginx缓存和CDN不同，nginx是缓存到当前机器上，减少同一资源的重复请求和服务器并发请求的压力，让网站响应访问更快。nginx主要采用proxy_cache_path指令，去定义共享的缓存2、配置缓存nginx.confproxy_cache_path /data/ngin原创 2021-01-19 19:47:51 · 2693 阅读 · 1 评论 -
Nginx配置http访问自动跳转到https
最近申请了SSL证书，但是需要保证历史http地址访问依然生效需要在nginx中设置两个server，一个保证http访问从80被转发443，然后强制使用SSL证书加密了server { listen 80; server_name www.test.com; # permanent是301永久重定向，redirect是302临时重定向 rewrite ^(.*) https://$server_name$1 permanent;}server { list原创 2021-01-18 16:18:52 · 4503 阅读 · 2 评论 -
http中的301和302的区别
文章目录HTTP 响应代码全部列表301 Moved Permanently被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个 URI 之一。如果可能，拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定，否则这个响应也是可缓存的。302 Found请求的资源现在临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，原创 2021-01-14 15:28:49 · 868 阅读 · 0 评论 -
Git提交代码提示1080 Failed Access
取消Git代理设置git config --global --unset http.proxygit config --global --unset https.proxy设置代理git config --global https.proxy https://127.0.0.1:1080原创 2021-01-06 13:28:00 · 235 阅读 · 0 评论 -
vue项目history路由，F5刷新页面，页面404问题，nginx try_files解决方案
有关history路由原理以及为什么刷新会404请查看往期文章这里不再赘述为什么404的原因。其实如果这么理解，可能会更加容易些。服务器会请求你所填写的真实地址，比如/about-us/where-to-go，会依次查找文件地址about-us、where-to-go，但是vue项目和普通项目不同，这只是路由，并不是真的文件目录地址，所有的路由都是依赖于SPA单页应用的index.html。所以当刷新时，找不到对应产生404。所以我们需要使用nginx的try_files，去查找index.html.原创 2020-12-28 19:49:28 · 5368 阅读 · 2 评论 -
centos 7 使用pm2从零部署easy-mock模拟数据服务
文章目录特性准备工作启动最近，要急需做一个APP项目的DEMO, 作项目报告使用，从零开始写接口也来不及了，打算自己模拟一些假数据提供给前端使用，所以把目光转向了 easy-mock 。可惜 easy-mock官网，近几天不能访问，无奈只能自己搭建一个 online 服务。github下载地址：https://github.com/easy-mock/easy-mockEasy ...原创 2019-10-25 14:57:00 · 1030 阅读 · 0 评论 -
关于Video Src 带有 blob:http的视频如何下载
文章目录1、利用Chrome 浏览器插件2、第二种方法 找到 `m38u` 文件, 使用 `window `下载工具 `M3U8下载工具`3、审查 下载的 JS 资源：我们如果使用爬虫，想爬取一些视频的时候，会发现一些网站提供的视频链接打开是 404；<video id="av-player0_html5_api" class="emav-tech js-evernote-checked...原创 2020-12-09 11:13:38 · 11703 阅读 · 0 评论 -
Git删除分支/恢复分支，操作指南
1、删除本地分支删除一个本地分支如果需要删除的分支不是当前正在打开的分支，使用branch -d直接删除git branch -d <branch_name>如果需要强制删除该分支的话，就需要在命令中使用-D选项git branch -D <branch_name>2、 删除远程分支git push origin --delete <branch_name>或者git push origin :<branch_name>3、原创 2020-12-08 17:38:11 · 3713 阅读 · 1 评论 -
shell命令删除历史文件，仅保持最新的三个文件
tarFolder='tar'#保留文件数ReservedNum=2FileDir=./$tarFolderdate=$(date "+%Y%m%d-%H%M%S")# 获取副本数量FileNum=$(ls -l $FileDir | grep ^- | wc -l)env="prod"# 统计当前文件夹下文件的个数# 只保留PROD下副本数量为最新的 3个if [ -n $1 ] && [ "$1" == "$env" ] && [ -d $tarF原创 2020-12-08 17:37:13 · 1959 阅读 · 1 评论 -
HTTP相关知识点
HTTP文章目录HTTP1、技术介绍2、历史3、HTTP session 会话3.1 持续连接3.2 HTTP 会话状态4、HTTP authentication 认证5、Message format 消息格式5.1 request message 请求消息Hypertext transfer protocol（简称：HTTP）超文本传输协议。HTTP是WWW(world wide web 万...翻译 2019-07-27 09:30:15 · 180 阅读 · 0 评论 -
微信公众号开发入门须知：开发者认证和获取Access_token
文章目录1、开启公众号开发者模式1.1 申请公众号2.2 开发者配置2、AccessToken3、JS接口安全域名1、开启公众号开发者模式1.1 申请公众号微信的开发者文档真的有点丈二和尚摸不着头脑，有点让人迷糊。做微信公众号开发，先注册微信公众号，最好有一个服务器和一个备过案的域名，不然很多jsapi接口无法调试。一般情况下，个人注册订阅号，企业注册企业号。2.2 开发者配置公众...原创 2019-06-01 20:20:00 · 8968 阅读 · 0 评论 -
关于Video Src 带有 blob:http的视频如何下载的问题
文章目录1、利用Chrome 浏览器插件2、第二种方法 找到 `m38u` 文件, 使用 `window `下载工具 `M3U8下载工具`3、审查 下载的 JS 资源：我们如果使用爬虫，想爬取一些视频的时候，会发现一些网站提供的视频链接打开是 404；<video id="av-player0_html5_api" class="emav-tech js-evernote-checked...原创 2019-06-14 00:39:20 · 50224 阅读 · 0 评论 -
Nginx同一个server部署多个静态资源目录
一般情况，有时候业务需求，需要在一个server下面不同目录部署两个不同的项目。比如 http://domain:port/admin 匹配的是 admin 项目比如 http://domain:port/react 匹配的是 react 项目我们在nginx.conf里面写一个新的server；server { listen 6002; server_name **.*...原创 2019-09-13 11:20:05 · 9603 阅读 · 0 评论 -
window和document各种宽高计算
1、盒子模型所谓CSS盒子模型是：margin + border + padding + content举例说明：<style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; padding: 20px; margin: 20px; ...原创 2019-07-27 09:47:19 · 582 阅读 · 0 评论 -
HTTP 报头字段列表
HTTP 报头字段列表文章目录HTTP 报头字段列表1、Message Format 报文格式1.1、start-line 开始行1.2、request-line 请求行1.3、status line 状态行1.4、Header Fields 头部字段1.5、message body2、Standard request fields 标准请求头字段HTTP报头字段 是 HTTP中请求和响应消息...翻译 2019-07-27 09:27:43 · 409 阅读 · 0 评论 -
TCP三次握手和四次挥手过程
TCP三次握手和四次挥手过程文章目录TCP三次握手和四次挥手过程1、三次握手（1）三次握手的详述（2）总结三次握手过程：（3）为什么A还要发送一次确认呢？可以二次握手吗？（4）Server端易受到SYN攻击？2、四次挥手（1）四次挥手的详述（2）总结四次挥手过程：（3）为什么A在TIME-WAIT状态必须等待2MSL的时间？（4）为什么连接的时候是三次握手，关闭的时候却是四次握手？（5）为什么T...原创 2019-07-27 09:22:48 · 160 阅读 · 0 评论 -
JavaScript - 并发模式和 Event Loop 事件循环解读
文章目录1、Runtime concepts 执行相关的概念stack 栈Heap 堆Queue 队列2、Event Loop 事件循环Run-to-completion 运行到结束Adding messages 添加消息Zero delays 零延迟1、Runtime concepts 执行相关的概念Javascript 有一个基于Event Loop 事件循环的并发模型；下面讲解一个理论...原创 2019-06-08 16:36:28 · 289 阅读 · 0 评论