- 博客(107)
- 收藏
- 关注
RSS订阅
原创 给自己的网站接入https居然需要升级centos内核？
给自己的网站接入ssl前言自己的域名已经买了快3年了，一直没有接入https，当时开发小程序和webrtc也需要使用证书，但是当时懒得弄，现在想上线一个webrtc的项目了，必须得搞了，记录一下，方便自己也能帮助别人。https简介这个我们就不说了，几百年的面试题了，什么超文本传输安全协议，SSL加密过程，对称加密非对称解密，简单，只记录安装过程，就不回忆了。安装1. 访问配置证书的网站 letsencrypt 点击get started进入点击Certbot，选择你的云服务器应用
2021-10-20 16:38:24
1224
2
原创 实现一个webpack plugin代替jenkins的CD
背景去年的时候针对自己的线上项目搞过jenkins，但是jenkins一直获取不到github上的项目，加上自己的项目迭代比较慢(两个月一推代码)，平常的公司需求又比较多，所以就搁置了。这两天想起来这个事，又在复习webpack，突然想到我可不可以实现一个webpack plugin，在打包的时候上传webpack的产物到线上node服务上，然后node服务把产物写入服务器的指定文件夹，这样的话不也实现CD(持续部署)了吗，感觉理论上是可行的。目的1. 再次复习webpack plugins相关
2022-05-19 09:05:36
187
1
原创 webpack devtool详解
前言devtool也是之前常用的一个配置，我们稍微了解下吧，不研究太深，毕竟现在都不怎配置他。内容devtool是配置sourceMap的。sourceMap大家都知道，我们本地或者测试环境出了错误，可以在source中迅速定位错误，用到的就是 .map (map文件)，这个文件中是源文件映射(主要是源文件代码)。但是我们在network中看不到.map文件的请求，盲猜一波是浏览器做了屏蔽，不让我们看这种请求。(毕竟是源码，我单独下载map文件是可以下载下来的)接下来，当devtool被配置为
2022-04-02 19:49:44
6560
2
原创 webpack4 分包(splitChunks)
前言用过webpack已经很久了，一直没有好好研究过分包，今天花点时间来好好研究下这个。优势打包优化： 公共代码提取，体积变小用户体验优化：按需加载，下载更快，白屏更短过程module、chunk和bundle要研究分包，首先要分清这三个概念module: 模块，每个import 都是一个module模块chunk: 依赖链路模块，我的个人理解，因为从一开始的entry配的入口文件开始，随着递归寻找其他的依赖文件，最后把所有的依赖串起来，这就是一个chunk。但是我们可以拆分多个chu
2022-04-02 17:15:58
4201
1
原创 静态加载、动态加载、同步加载、异步加载
动态加载和静态加载指的是什么时候加载，动态加载是运行时加载（CommonJS），静态加载是编译(预编译)时加载（ES6）。当然es6也提供的动态加载，即import() 。动态加载：require() 、import()静态加载：import同步加载还是异步加载指的是加载的方式。 静态加载中都是同步加载的。动态加载中CommonJS的require是同步的。而es6import()是异步的。同步加载：import 、 require()异步加载：import（）、 require(['xxx'
2022-04-02 16:34:15
1602
3
原创 最近webpack优化的一些总结
前言最近优化了一些webpack项目的构建体积与速度，结合公司做的一些默认配置，大部分应用打包速度已经快到飞起，在这记录一下自己和公司做的一些webpack优化。过程帮助我们分析的插件下载 webpack-bundle-analyzer 和 speed-measure-webpack-pluginnpm i webpack-bundle-analyzer speed-measure-webpack-pluginwebpack-bundle-analyzerwebpack-bundle-a
2022-03-31 17:31:13
3345
1
原创 自定义vue组件 和 自定义vue组件npm包
自定义组件 <div id="components-demo" style="margin-top:10px"> <button-counter></button-counter> </div>import Vue from 'vue';Vue.component('button-counter',{ template: '<button @click="count+=1">点击了{{count}}次</but
2022-03-08 16:17:43
1101
1
原创 webpack配置不打包第三方包
最近看friday源码的时候，看到项目中很多依赖使用了公司cdn服务器获取，cdn的优势我们知道，但是项目在打包的时候不是会把所需的生产环境依赖打包进去嘛？原来webpack有个配置externals(帮助我们防止哪个包打进dist里面)。通常情况下我们不打包第三方包，因为第三方包太大，和bundle打包到一起会造成资源体积过大，所以我们还是通过script标签的方式把第三方资源引入到页面中，只需要通过以下配置即可，这里以jQuery为例。1、下载第三方包npm i jquery2、在页面中引入资
2022-02-25 21:31:52
1634
1
原创 改变词法作用域的eval和with
eval和with是一些源码(比如最近在看的friday)中常用的方法。evaljavascript中的eval函数可以接受一个字符串作为它的参数，并能将该参数作为代码进行执行，也就是说在你写代码的地方可以生成代码并运行，来看如下代码：var str="console.log(1)";eval(str); //1上面代码运行结果是控制台输出打印了1，而str只是一个字符串参数。看着好像是可以动态的生成代码了，我们再来看如下的代码:function foo(str,a){ eval(
2022-02-25 09:39:13
476
1
原创 single-spa、乾坤、friday接入实战
前言最近开发的项目中有使用到微前端，微前端在我这分为两大类，iframe、single-spa系列，在这篇文章我会记录下微应用的 single-spa、乾坤的使用和一些理解，我们公司内部的friday没有开源，在这里就不记录了。...
2022-02-12 19:59:07
742
1
原创 :nth-of-type()不起作用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .test:nth-of-type(1) { background: pink; } </style></head>
2021-12-20 13:53:52
1106
原创 css3 grid栅格布局
前言说实话，长这么大还从没用过栅格布局，都是在各个css面试题上了解，今天来系统的学习一下。知识点.father { display: grid; /* display: inline-grid; */ border: 1px solid #000; width: 1000px; height: 600px; /* grid-template-col
2021-12-07 17:28:50
269
原创 node服务器支持https请求
node服务器支持https请求水文一篇前段时间给自己的域名接入了https，但是前端向后端发起请求的时候报了这么一个错误net::ERR_SSL_PROTOCOL_ERROR意思是https的请求不能向http服务器发起，所以，我们要把node服务加上ssl...
2021-11-25 16:22:21
2628
1
原创 Centos7搭建coturn服务器
Centos7搭建coturn服务器前言最近想上线一个多功能的在线音视频聊天应用，需要STUN_TURN服务器，新出的 开源项目coturn同时实现了stun和turn服务的功能，所以，我打算直接安装coturn中继服务器安装1. 安装依赖yum install -y make gcc cc gcc-c++ wget openssl-devel libevent libevent-devel openssl yum install git (不必须)2. 下载conturn项目包我们为
2021-10-26 11:28:47
3032
4
转载 Vue.js 容易忽略的 API 详解
nextTicknextTick 是 Vue.js 提供的一个函数，并非浏览器内置。nextTick 函数接收一个回调函数 cb，在下一个 DOM 更新循环之后执行。比如下面的示例：<template> <div> <p v-if="show" ref="node">内容</p> <button @click="handleShow">显示</button> </div></templat
2021-09-09 11:41:52
120
1
原创 vue复习——mixins
Mixins(混入)混入，很久没用了，复习一下，我所理解的混入其实与computed一样，不会改变原先的值，只会做一层过滤。就像computed一样，像filter一样，像vuex中的getter一样。接下来，我用几张图片来展示一下混入的用法，这几张图片分别从，值，方法，生命周期来展示。值混合对象中的参数num组件1中的参数num进行+1的操作组件2中的参数num未进行操作看两组件中分别输出的num值可以看到，确实只是过滤的作用方法混入对象中的方法组件中的方法打印输出
2021-09-08 21:37:57
67
原创 express接入log4
前言前端时间，我的 综合管理平台 前端接入了sentry，并且还在打包时上传了Sourcemap，前端的异常能够非常快速的定位，在这篇文章我要介绍下 综合管理平台 后端接入log4(打印日志)与sentry，帮我们快速定位到后端错误。安装 npm install log4js --save 配置...
2021-09-08 16:23:52
244
原创 vue2中的provide和inject
前言我们云诊室因为是单文件富应用。一个页面无数个无数层组件，用到非常多的props和$emit，今天不小心看到 provide和inject 这两个属性，也可以用来传值，在这里记录一下。首先先来个复习。复习父传子：props子传父：$emit父获取或调用子的数据或方法：this.$ref['child']，this.$children子获取父组件的属性或方法：this.$parents开始provide和inject是 提供与注入的意思，在这里我想到了nest里面service层作为pr
2021-09-03 10:31:47
6767
原创 node项目接入redis
安装百度网盘下载地址：Redis-x64-3.2.100.zip 密码：kdfq进入到解压的目录，下载部署服务redis-server --service-install redis.windows.conf开启服务redis-server --service-start开发1. node中使用redisnpm i redis --save2. 引入// 接入Redis,存储与获取历史消息(相比数据库)更快,损耗更少const redis = require("redi
2021-08-28 20:58:37
1183
原创 express中间件与nest中间件
我所理解的中间件就是在请求打过来的过程中，对请求或者请求内容(req.body、req.query)做一些特殊处理。并且，中间件一定是函数。比如，body-parser，会特殊处理post请求，使得express支持post请求比如，Check.checkToken请求，会对打过来的请求的请求头进行token校验，如果存在token，就放行，否则返回 “你没有权限”...
2021-08-20 13:35:28
307
原创 github+gitlab ssh共存
背景本人gitlab使用的是ssh提交github使用的是https提交动力前两天github发了一个公告，说不再支持https方法了，可能是因为不安全所以，我要把当前所有github项目的https转为ssh方法一、再次生成公钥、私钥首先我们要保证有两个ssh，一个github的一个gitlab的，当然，你要是偷懒这两个用一个密钥那我无话可说，规范些的话就搞两个邮箱(公司的+自己的)。我的 /.ssh文件夹已经有这三个文件了(当时配置gitlab时生成的)所以，我们要生成，gith
2021-08-18 12:01:10
622
原创 学习nest之后的一些感悟
装饰器最新写nestjs项目时，接触到很多装饰器，今天对装饰器来个详细的纪录装饰器本身是一个函数，我觉得他最直接的意思就是 给当前类、函数、字段、参数格外的功能。由于目前装饰器概念还处于提案阶段，不是一个正式可用的JS功能，所以想要使用这个功能，不得不借助翻译器工具，例如Babel工具或者TypeScript编译JS代码转后才能被执行。IOC与DI控制反转（Inversion of Control，缩写为IOC），是面向对象编程中的一种设计原则，可以用来减低计算机代码之间的耦合度。(最简单的就是分
2021-08-03 21:52:23
162
原创 彻底分清git merge和git rebase
git merge和git rebase都有合并分支的作用，但是这两种具体有什么区别呢？跟我一起来看一下吧git mergegit merge mastergit merge master devgit merge 的用法如下，在dev分支上，将master分支拉到(合到) dev分支。git rebasegit rebase mastergit rebase 的用法如下，在dev分支上，将master分支拉到(合到) dev分支。区别我们知道，如果 git merge 的话，.
2021-07-27 20:00:07
143
原创 错误分支新建文件后如何 git stash
我们知道，如果有一天我们在错误分支上修改了代码。这时候，我们想切换到正确分支，我们需要把修改的代码stash到缓冲区，切换完分支后，pop出来，然后在提交。git stashgit checkout targetbranch git stash popgit add .git commit -m xxx但是如果我们在错误分支有新增的文件，会出现直接stash会出现错误我们可以把新增的文件add到暂存区，然后在stashgit add 新增文件git stashgit checkout
2021-07-13 13:54:46
245
原创 跟着我实现一个vscode插件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BWLOfQ46-1625790393515)(%3Cimg%20src=%22C:%5CUsers%5CFUJINT~1%5CAppData%5CLocal%5CTemp%5C%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_16257356667760.png%22%20alt=%22img%22%20%3E#pic_center)]...
2021-07-09 10:47:30
1645
8
原创 webpack 打包优化的四种方法（多进程打包，多进程压缩，资源 CDN，动态 polyfill）
如今，webpack 毫无疑问是前端构建领域里最耀眼的一颗星，无论你前端走哪条路线，都需要有很强的webpack 知识。webpack 的基本用法这里就不展开讲了。主要探讨一下如何提高 webpack 的打包速度。这篇文章以 vue cli3.0+，webpack4.0+，nodejs10.0+ 这几个版本为例。一、打包分析1.1、速度分析我们的目的是优化打包速度，那肯定需要一个速度分析插件，此时 speed-measure-webpack-plugin 就派上用场了。它的作用如下：分析整个打
2021-07-07 09:27:16
278
原创 从0开发一个自己的npm包
之前写过一些npm包，但是每次都会忘记具体流程，今天做个简单记录。一、注册npm账号https://www.npmjs.com二、开发自己的npm包1. 初始化npm包npm init生成package.json文件{ "name": "create-random-value", "version": "1.0.0", "description": "通过传参生成指定长度的随机字符串", "main": "index.js", "scripts": { "tes.
2021-07-03 22:05:09
184
原创 一些多参数函数的具体作用
经常能碰到一些js函数有多个参数，今天来整理一下，会持续更新的！！！1. addEventListener()我们知道点击或者其他事件触发时，对应的dom元素有三个阶段：捕获——目标——冒泡，第三个参数可以区分开是捕获阶段(由外向内)还是冒泡阶段(由内向外)，同样我们改变下面这两个函数的位置，可以先让dom元素冒泡再捕获。addEventListener('onclick',function(){console.log('这是捕获阶段')},true)；addEventListener('.
2021-06-27 21:21:30
121
原创 node+react+vue项目-指定域名-部署阿里云(全程记录)
今天阿里云来了条短信，说学生机快到期了，要尽快续费。我的所有个人项目都在上面(包括即将要答辩的毕业设计)，赶紧去续费，没想到没有学生优惠了，阿里云 “云翼计划” 取消了，恢复原价了，145块钱一个月，直接裂开。。。重新搞一个学生机，顺便记录下阿里老云翼活动地域离你近点比远点好，镜像选系统镜像(linux) CentOS7.3，这是我的老配置，直接买一年的。新服务器IP：47.95.234.230老服务器IP：123.57.5.134对老服务器有感情了，纪念一下。重置服务器密码本地看一看
2021-04-21 20:43:45
822
8
原创 async await如何实现并发
还记得去年实习参加秋招，二面面试官龙哥(现在的小组长)问了一个面试题，async await如何实现并发？今晚突然又想起来，赶紧整理一下
2021-04-02 23:17:20
1826
原创 处理前端异常
一、需要处理哪些异常？JS 语法错误、代码异常AJAX 请求异常静态资源加载异常Promise 异常Iframe 异常跨域 Script error崩溃和卡顿二、try…catch…同步代码可以捕获到异常，语法错误和异步代码无法捕捉异常。同步错误try { let name = 'jartto'; console.log(nam);} catch(e) { console.log('捕获到异常：',e);}捕获到异常： ReferenceError: nam is
2021-03-31 23:06:38
507
1
原创 ES6知识点补充
Symbolsymbol是数据类型的一种，已有的数据类型基本数据类型:字符串、布尔、数字、null、undefined、symbol、bigInt(大于9007199254740992的数)引用数据类型：对象(对象、数组、函数)等Symbol.for()与Symbol()这两种写法，都会生成新的 Symbollet sy = Symbol('a')let sy1 = Symbol('a')sy === sy1 // falselet s1 = Symbol.for('foo');
2021-03-31 17:00:29
96
1
原创 强缓存、协商缓存具体过程
当我们第一次访问某个页面时，我们会获取这个页面的静态资源文件，把他保存在本地磁盘，这种缓存被称为 http缓存 ，http缓存分为两种，强缓存 和 协商缓存 ，接下来就具体分析一下这两者。一、判断强缓存和协商缓存根据上面的图，当浏览器第2——>n次访问此网页时，首先会去本地磁盘 判断是强缓存还是协商缓存，根据第一次请求时，服务端返回的expires和Cache-Control来判断(第一次请求返回的响应头同样被保存在磁盘里，里面有expires和Cache-Control两个字段的信息)，exp.
2021-03-31 10:27:25
675
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人