- 博客(181)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 生成可信任的SSL证书
什么 SSL 证书才是安全的证书？不满足会展示如下提示信息：CA(Certification Authority) 机构签发 SSL 证书。SSL 证书根据验证级别分为三种类型DV SSL，域名验证型只验证网站域名所有权的简易型 SSL 证书，此类证书仅能起到网站机密信息加密的作用，无法向用户证明网站的真实身份OV SSL，组织验证型需要验证网站所有单位的真实身份的标准型 SSL 证书，此类证书也就是正常的 SSL 证书，不仅能起到网站机密信息加密的作用，而且能向用户证明网站的真实身份。
2024-03-19 15:40:42
2292
原创 SVN离线部署
在 subversion 中包含有服务端和客户端，在执行命令时需要分清服务端命令和客户端命令。使用 root 账号，创建 svn 账号，之后切换 svn 账号进行登录。切换到 conf 目录下，修改 svnserve 配置文件。在创建的这个版本库下会自动创建 svn 相关的配置文件。安装 apr-util-1.6.3 时出现报错。安装 apr-util-1.6.3。解决方案：安装 expat 依赖。首先，需要创建 svn 版本库。安装 subversion。安装 apr-1.7.4。目录里，之后解压文件。
2024-03-05 14:49:50
1100
原创 Nexus搭建npm私库（角色管理、上传脚本）
分析依赖锁时，包下载不下来，这个就只能用笨方法（缺什么依赖，npm i 之后把对应包 tgz 包下载下来）仓库组：通过仓库组统一管理多个仓库，这样我们在项目中直接请求仓库组即可请求到仓库组管理的多个仓库。：nexus 必须使用 Java1.8，我现在用的是 Java17，提示信息让咱们配置。如果没有下载，点一下 click here 重新下载，下载还是很快的。禁止上传，group 仓库禁止上传，上传到 hosted 即可。多线程推送，上传包较多可以使用，如果包过多可能会导致电脑卡死。
2023-12-06 17:08:31
2415
原创 阿里云效部署前后端
OSS 是对象存储的意思，一般一个项目对应一个 Bucket (存储桶)，可以通过一个地址来访问里面的文件，配置成静态站点后，将自己的域名通过 CNAME 解析到该地址，项目就能访问了。，阿里云企业级一站式 DevOps，可以免费使用（会限制人数、流水线数量等，个人项目够用了）。OSS 上传，第一次弄，需要先进入阿里云对象 OSS，创建 Bucket。设置构建命令，构建生成文件目录，选择所需要的 Node 版本。选择对应的服务添加对应的主机，之后添加对应标签及内容。添加单元测试，这里我就不添加了。
2023-11-30 16:55:45
691
2
原创 云服务器-从零搭建前后端服务（自动化部署、数据库）
根据对应 repo 就可以使用 dnf 进行安装了，但是安装是有认证的，需要使用 rpm 导入 GPG 密钥以确保软件合法。Jenkins 本身是依赖 Java 的，所以我们需要先安装 Java 环境。使用 dnf 安装的，很难找到 jdk 安装的位置，会有些小问题。redis 是 c 语言开发，安装 redis 需要先将官网下载的源码进行编译，编译依赖 gcc 环境。直接下载可能会超时，没超时按 Github 安装方法即可（我是按超时的方法下载的）去官网下载或者使用 wget 下载到指定目录。
2023-11-22 17:42:31
405
原创 TypeScript_树结构-BST树
完美二叉树（Perfect Binary Tree），也称满二叉树（Full Binary Tree）二叉搜索树（BST，Binary Search Tree），也称二叉排序树或二叉查找树。也就是为了能够删除有两个子节点的 current，要么找到它的前驱，要么找到它的后继。不过大部分术语都与真实世界的树相关，或者和家庭关系相关(如父节点和子节点)二叉搜索树不仅仅获取最值效率非常高，搜索特定的值效率也非常高。树（Tree）：n（n>=0）个节点构成的有限集合。二叉搜索树的删除有些复杂，我们一点点完成。
2023-09-04 18:17:43
299
原创 TypeScript_队列结构-链表
0,1,···,n-1 这 n 个数字排成一个圆圈，从数字 0 开始，每次从这个圆圈里删除第 m 个数字（删除后从下一个数字开始计数）。例如，0、1、2、3、4 这 5 个数字组成一个圆圈，从数字 0 开始每次删除第 3 个数字，则删除的前 4 个数字依次是 2、0、4、1，因此最后剩下的数字是 3。链表和数组一样，可以用于存储一系列的元素，但是链表和数组的实现机制完全不同。这个问题是以弗拉维奥·约瑟夫命名的，他是1世纪的一名犹太历史学家口。改变 head 当前指向的节点，指向 newHead。
2023-08-31 10:38:29
503
原创 TypeScript_线性结构-数组-栈结结构
因为对于很多企业来说，想要短时间考察一个人的能力以及未来的潜力，数据结构与算法是非常重要的指标，也会成为它们的硬性条件。给定一个只包括 ‘(’，‘)’，‘{’，‘}’，‘[’，‘]’ 的字符串 s ，判断字符串是否有效。解决问题的过程中，不仅仅数据的存储方式会影响效率，算法的优劣也会影响效率。你会发现，解决问题的办法有很多，但是好的算法对比于差的算法，效率天囊之别。通常数组的内存是连续的，所以数组在知道下标值的情况下，访问效率是非常高的。栈（Stack），它是一种受限的数据结构，使用接口定义栈的结构。
2023-08-31 10:30:42
151
原创 vue2.6升级vue2.7（panjiachen升级指南）vue-cli5多页面应用升级的坑
webpack5 不再自动填充 Node 核心模块，如果你想使用的话需要从 npm 安装兼容的模块并自己包含它们。比如这里报错 ‘disableHostCheck’ 是未知属性，就可以在这个文档中查一下，看看它改成了什么。升级 sass 版本 和 sass-loader 版本，注意里面 deep 写法也需要改变，需要改为。升级完 vue-cli 需要解决一下 vue-cli 语法升级报的错，需要修改。如果不这么做，需要进行如下操作，十分麻烦。，使用的是 vue2.6.14，现在升级为 vue2.7.x。
2023-08-16 16:21:24
3389
2
原创 前端必备的nginx知识点
如果短时间访问量过高，会造成服务器压力大（压缩是消耗服务器资源的），提前打包好 gz，服务器压力就没那么大了。在访问服务端时，一般会请求一些静态资源，如 js、css、图片等，这些资源可以在反向代理服务器中进行缓存，减少服务器的压力，而动态请求可以继续请求服务器。每次有请求发出时，缓存会将此请求发到服务器，服务器端会验证请求中所描述的缓存是否过期，若未过期（注：实际就是返回304），则缓存才使用本地缓存副本。该响应是专用于某单个用户的，中间人不能缓存此响应，该响应只能应用于浏览器私有缓存中。
2023-06-26 15:29:44
1462
原创 Pinia 与 Vuex 使用区别
Pinia 与 Vuex 使用区别、用法区别、去掉 mutations、去掉 modules、getters 用法改变
2022-08-26 15:55:04
858
原创 Windows Git Bash 里使用 rsync（图文结合）
快速高效，支持断点续传、按需复制的文件拷贝工具，并 支持原创服务器拷贝Windows 安装使用 rsync下载如下几个压缩文件：依次解压：解压 ，Window 默认情况下无法进行解压该文件方法一： 下载 7zip-zstd 安装包 进行解压之后会生成 文件夹，里面有 压缩包再对它进行如上操作即可解压完成方法二： 使用 zstd-v1.4.4-win64.zip 文件 进行如下操作，会直接生成 文件夹注意！！！： 解压后需要把解压后的 目录下的 文件名改为 解压后生成一个 （文件夹里面
2022-07-13 10:42:45
2380
原创 Webpack 打包文件核心源码
源码调试打包后的文件就是一个函数自调用，当前函数调用时传入一个对象这个对象我们为了方便将之称为模块定义，它就是一个键值对这个键名就是当前被加载模块的文件名与某个目录的拼接这个键值就是一个函数，和 node.js 里的模块加载有一些类似，会将被加载模块中的内容包裹于一个函数中这个函数在将来某个时间点上会被调用，同时会接收到一定的参数，利用这些参数就可以实现模块的加载操作针对于上述的代码就相当于是将 {}（模块定义）传递给了 modules打开调试工具，创建 launch.json导出
2022-05-10 17:24:25
1516
2
原创 webpack 打包（plugin、loader 工作原理）
模块化工具由来ES Modules 存在环境兼容问题模块文件过多，网络请求频繁所有的前端资源都需要模块化概要Webpack 作为 模块打包器（Module bundler），可以把零散的文件打包到一个 JS 中，对于有环境兼容的代码可以在打包过程中通过 模块加载器（Loader） 对其进行编译转换Webpack 还具备 代码拆分（Code Splitting） 能力，将应用中所有代码按照我们的需要进行打包，这样就可以渐进式加载，不会导致文件过碎或过大Webpack 支持以模块化
2022-05-07 15:15:19
1438
原创 函数式编程范式
目录文章目录目录认识函数式编程一等公民的函数函数是一等公民高阶函数闭包函数式编程基础纯函数柯里化（Haskell Brooks Curry）函数组合Point FreeFunctor（函子）函子MayBe 函子Either 函子IO 函子Task 函子Pointed 函子Monad 函子认识函数式编程函数式编程指北阮一峰 函数式编程入门为什么要学习函数式编程随着 React 的流行受到越来越多的关注Vue 3 也开始拥抱函数式编程函数式编程可以抛弃 this打包过程中可以更好的利用
2022-04-19 17:36:06
912
原创 使用 nvm 搭建 node 环境
使用 nvm如果 GitHub 无法进入，可以参考这篇文章：解决 Github 无法登录的问题Windows 修改 C:\Windows\System32\drivers\etcMAC 修改 \etc\hosts140.82.113.4 github.com199.232.69.194 github.global.ssl.fastly.net使用 nvm 好处：快速切换或更新 node 版本，并能保持系统干净安装 nvmMac 安装官网安装步骤操作即可：nvm GitHubc
2022-04-13 12:12:25
2601
原创 性能优化问题指南（访问 URL 流程、首屏加载、内存管理）
从输入 URL 到页面加载显示完成都发生了什么URL 解析检查缓存DNS 解析TCP 三次握手客户端与服务端进行信息通信TCP 四次挥手客户端渲染**URL解析：**UI 线程会判断输入的地址地址是搜索的关键词还是访问站点的 URLDNS 解析： 接下来 UI 线程会通知 Network 线程，让其发起网络请求先要进行 DNS 查找，要去把域名转换成 IP 地址建立链接过程中还要看协议，如果使 HTTPS 需要建立 TLS 连接如果碰到 301 （永久移动）则要重新
2022-03-20 14:10:21
1709
原创 前沿优化解决方案（预渲染、长列表优化、骨架屏）
拯救移动端图标 SVGIconfonticonfonticofontfontawesomeIconfont 相较于 PNG 的优势：多个图标使用一套字体，减少获取时的请求数量和体积因为网站会有很多图标，如果使用 PNG，每个图标都需要单独设计一个文件，这样浏览器就需要对每一个文件进行加载。虽然可以使用雪碧图来规避请求数量，但是这就需要关心 icon 的定位了iconfont 就是一套字体，就只需要获取一套字体即可矢量图形，可伸缩，可以直接通过 CSS 修改样式（颜色、大小等）
2022-03-19 09:33:25
835
原创 传输加载优化（资源压缩、资源缓存、HTTP2）
启用压缩 GzipGzip 是用来做网络资源压缩，帮助我们减少资源文件在网络传输大小的技术，可以高达 90%如下是 MacOs 安装方法，Windows 安装方法及使用可以参考我这篇文章：项目技术架构-Nginx 服务器搭建安装 homebrew：https://brew.sh/index_zh-cn/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2022-03-13 21:22:10
4940
原创 构建优化（webpack 优化）
webpack 优化配置webpack4 引入了 mode 模式，可以配置开发和生产模式，就可以使用一些已经默认好的插件帮我们达到想做的效果Tree-shaking上下文未用到的代码（dead code）给予 ES6 import exportTree-shaking 基础：无论是自己还是第三方，必须是模块化的，要基于 ES6 import export 导入导出的形式才可以，生产模式会默认启动 Tree-shaking，主要依赖于 TerserPlugin 插件Tree-shakin
2022-03-10 17:30:15
2096
原创 资源优化（图片、字体优化）
资源的压缩与合并为什么要压缩合并减少 HTTP 请求数量减少请求资源大小HTML 压缩：使用在线工具进行压缩使用 html-minifier 等 npm 工具html-minifier-terserCSS 压缩：使用在线工具进行压缩使用 clean-css 等 npm 工具JS 压缩与混淆使用在线工具进行压缩使用 Webpack 对 JS 在构建时压缩CSS JS 文件合并：比如有 20 个 CSS，合并成一个 CSS 可能会比 20 个分别加载要快，
2022-03-07 17:32:54
478
原创 代码优化（配合V8引擎进行优化）
JS开销JS 开销在哪资源大小相同的情况下，JS 开销更高Bottom-Up：自下而上，可以看下里面具体做了哪些事情，耗时多久Evaluate Script：解析耗时 101.6msThe cost of JavaScript in 2019对于一个网站而言，总共的网络加载过程中，压缩后 1.4 M 的 JS 在整个网络加载耗时中占 1/3解决方案Code Splitting：代码拆分，按需加载当前路径需要哪些资源就加载哪些资源，不需要的延迟加载或访问需要它的页面再加载
2022-03-07 11:47:49
1192
原创 渲染优化（CRP、回流重绘）
关键渲染路径前端性能优化之关键路径渲染优化浏览器怎么把页面渲染出来，渲染过程分很多环节，就是 关键渲染路径（CRP）CRP：Critical Rendering Path浏览器渲染过程：JavaScript（触发视觉变化） -> Style（浏览器对样式重新进行计算） -> Layout（布局） -> Paint（绘制） -> Composite（合成）JavaScript：可以通过 JavaScript 实现一些页面上视觉上的变化，例如：添加 DOM 元素、j
2022-03-04 09:16:24
714
原创 性能优化的指标和工具
性能指标和优化目标NetworkQueueing：资源需要经过排队才能从浏览器发出去，浏览器会对资源请求进行优先级安排，高优先级的内容先安排进行请求DNS Lookup：每个资源实际上有个域名，域名最终要被翻译成 IP，然后找到这个服务器initial connection：找到资源之后，客户端与服务器建立链接的过程SSL：有的网站是 https，为了安全性，使用了 SSL 证书，需要进行安全性验证，过程称为 SSL 写上Request sent：请求发送出去Wait
2022-02-27 21:52:14
2556
原创 前后端消息推送汇总（WebSocket）
WebSocket参考视频：震惊，全网最好的 WebSocket 通信原理，聊天室，websocket工具库为什么需要 WebSocketWebSocket 是一种基于 TCP 连接上 全双工 通信的协议，相对于 HTTP 这种非持久协议来说，WebSocket 是 持久化网络通信协议服务器可以 主动推送消息给客户端客户端和服务器 只需要一次握手HTTP 是 半双工 通信协议（同一时刻信息流向只能是单向）通信只能由客户端发起，服务器才能响应，服务器不能主动向客户端发送数据客户端与服
2022-02-17 18:11:47
2734
原创 五、字典_JavaScript数据结构与算法
字典与集合类似，字典也是一种存储唯一值的数据结构，但它是以 键值对 的形式来存储ES6 中有字典，名为 Map字典的常用操作：键值对的增删改查const m = new Map()// 增m.set('a', 'aa')m.set('b', 'bb')// 删m.delete('b')// m.clear()// 改m.set('a', 'aaa')// 查m.get('a')349. 两个数组的交集349. 两个数组的交集输入输出输入：nums1 =
2022-01-29 16:15:08
1290
原创 四、集合_JavaScript数据结构与算法
集合一种 无序且唯一 的数据结构ES6 中有集合，名为 Set集合的常用操作：去重、判断某元素是否在集合中、求交集// 去重const arr = [1, 1, 2, 2]const arr2 = [...new Set(arr)]// 判断元素是否在集合中const set = new Set(arr)const has = set.has(1)// 求交集const set2 = new Set([2, 3])const set3 = new Set([...set].f
2022-01-27 10:36:18
1989
原创 三、链表_JavaScript数据结构与算法
链表链表是多个元素组成的列表。元素存储不连续，用 next 指针连在一起数组 VS 链表数组：增删首尾元素时往往需要移动元素链表：增删非首尾元素，不需要移动元素，只需要更改 next 的指向插入一个节点效率很高，只需修改它前面的节点，使其指向新加入的节点删除一个节点，将待删除的元素JavaScript 中没有链表，可以使用 Object 模拟链表const a = { val: 'a' }const b = { val: 'b' }const c = { val: 'c'
2022-01-25 10:41:49
946
原创 二、队列_JavaScript数据结构与算法
队列是一个 先进先出 的数据结构。JavaScript 中没有栈，但可以用 Array 实现栈的所有功能const queue = []queue.push(1)queue.push(2)const item1 = queue.shift()队列应用场景需要 先进先出 （First in First out）的场景。日常生活中栈的应用：打印队列、食堂打饭排队、键盘打字食堂排队打饭先进先出，保证有序JS 异步中的任务队列JS 是单线程，无法同时处理异步中的并发任务使用任务队
2022-01-11 15:57:53
434
原创 一、栈_JavaScript数据结构与算法
栈是一个 后进先出 的数据结构。JavaScript 中没有栈，但可以用 Array 实现栈的所有功能const stack = [];stack.push(1);stack.push(2);const item1 = stack.pop();const item2 = stack.pop();栈应用场景需要 后进先出 （Last in First out）的场景。日常生活中栈的应用：盘子、托盘、书堆等十进制转二进制判断字符串的括号是否有效函数调用堆栈文本编辑器、绘制程序中的撤销
2022-01-10 19:13:47
499
原创 Vue3 一些面试题
Vue3新功能createAppemits 属性多事件处理Fragment不再限于模板中的单个根节点移除 .sync 改为 v-model 参数异步组件的引用方式移除 filterTeleport以前称为 <Portal>，译作传送门（之前都是放在 APP 里，用这个可随意放置）Suspense可以嵌套层级中等待嵌套的异步依赖项Composition APIreactiveref、toRef、toRefsrea
2022-01-07 10:24:50
18462
1
原创 Vue2 一些面试题
v-show 和 v-if 区别v-show 通过 CSS display 控制显示和隐藏v-if 通过判断组件真实渲染和销毁，而不是显示和隐藏频繁切换显示状态用 v-show，否则用 v-ifv-if当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，意味着：v-if 将分别重复运行于每个 v-for 循环中，会造成性能问题。所以，不推荐 v-if 和 v-for 同时使用const compiler = require('vue-template-c
2021-12-28 14:56:55
502
原创 Vue 原理【响应式、虚拟DOM和Diff算法、模板编译】
Vue 原理原理的意义知其然知其所以然——各行业通用的道理了解原理，才能应用的更好大厂造轮子（业务定制、技术 KPI）如何考察考察重点，而不是考察细节。掌握好 2/8 原则和使用相关联的原理，例如：vdom、模板渲染整体流程是否全面？热门技术是否有深度？重要的原理组件化响应式vdom 和 diff模板编译渲染过程前端路由原理题为何 v-for 中要用 key描述组件渲染和更新的过程双向数据绑定 v-model 的实现原理如何理解 MVVM组件化基础
2021-12-24 18:07:25
938
原创 项目和构建发布
前端项目构建前端代码为什么要打包浏览器只能识别 html、css、js 代码，浏览器没办法识别 vue 文件没法识别 ES6 import export 代码，也没法识别 CommonJS 中的 require module.export修改 vue.config.js 的 publicPath 的 / 为 .module.exports = { publicPath: '.'}之后打包项目将 dist 文件夹拷贝到 Nginx 目录下远程时需要把 upload.conf 中 a
2021-12-06 15:48:46
1218
scalabel-master.rar
2020-05-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人