GHkmmm-CSDN博客

原创基于Playwright自动化测试部署方案

基于playwright框架，搭建了自动化测试项目，在服务器上使用Docker起容器跑镜像，镜像内容基于playwright的官方镜像，并向其中移入了host文件，以便切换测试用例运行所在的环境（测试/线上环境）。引入测试用例的管理后台，方便测试用例与测试报告的管理。管理后台中可以使用Docker官方提供的远程api创建并运行容器来跑测试用例，也能在管理后台上能看到最终的测试报告。

2022-09-28 17:50:59 1889 1

原创前端图片压缩库shrinkpng，已发布npm，完美支持PNG，JPG...

前端图片压缩库shrinkpng，已发布npm，完美支持PNG，JPG...

2022-07-02 18:15:46 3259 3

原创基于Nuxtjs的同构渲染实践

同构渲染属于是SSR的一种，特点在于可以使用同一套代码构建SSR资源和静态资源，使得应用可以同时具备SSR和SPA的优势。

2022-06-28 13:42:24 793

随着公司各个项目体积的增大，开发环境项目的构建常常能达到一分钟甚至更长，使用vite能快速帮助我们提升项目的构建速度，于是最近开始对公司的项目进行改造，同时为了节省时间成本，生产的环境的构建打算沿用原本webpack的那套配置，仅仅将开发环境由webpack转为vite。一、安装vite相关依赖"vite": "^2.7.13","vite-plugin-html": "^2.1.2","vite-plugin-vue2": "^1.9.3",二、修改index.html的位置将index.

2022-02-09 15:51:38 2396 2

原创 OpenSSH 8.8以上版本出现Permission denied(publickey)的问题出现问题

OpenSSH 8.8以上版本出现Permission denied(publickey)的问题出现问题使用ssh拉取仓库代码时出现报错（确保自己正确配置了ssh）gitlab报错no matching host key type found. Their offer: ssh-rsa,ssh-dssfatal: Could not read from remote repository.Please make sure you have the correct access rights

2021-11-12 14:26:11 1633

原创封装localStorage——为localStorage设置过期时间

原生的localStorage并不支持设置过期时间，只要不清除，是会一直存在的，所以需要我们自己封装一层，最终封装的数据格式如下：keyValueexpiredStorage{“myName”:{“value”:“GHkmmm”,“expires”:1616834788078}}name: { value: #缓存的值, expires: #过期时间}也就是说要将这个对象封装在localStorage中，但是localStorage并不支持存入对象，所以

2021-03-27 17:17:42 1047

原创 Vue 客户端直传OSS跨域、HTTP到HTTPS、上传超时、限制大小问题

一、整体思路客户端先向服务端发送请求，请求格式如下ossPaht：oss绝对地址fileExt：文件后缀类型服务端签名，返回数据，格式如下signedUrl上传目标地址cdnUrl下载可使用地址contentType文件类型通过服务端返回的signedUrl，携带上传的文件请求signedUrl直传OSS二、问题跨域（这个不需要前端解决）协议冲突问题服务端返回的signedUrl是http协议但是客户端域名却是https，https无法向http发送请求解

2021-03-25 14:03:27 3101

原创 Mac环境下的solr+中文分词器配置（Springboot应用）

Mac环境下的solr+中文分词器配置启动solrsolr start服务启动后会提示Started Solr server on port 8983 (pid=1032). Happy searching!打开http://localhost:8983/即可访问solr控制台创建新的coresolr create -c collection创建完成后，可在这里选择到刚刚创建的core（core相当于数据库中的实例）并且在solr的安装目录下可以看到已经自动帮你创建好了对应的文

2020-12-04 17:25:52 197

原创实现前端本地预览音乐文件歌名，歌手，音乐时长（Vue项目）

实现前端本地预览音乐文件歌名，歌手，音乐时长（Vue项目）获取歌名歌手名我们需要借助一个插件jsmediatags使用方法npm install jsmediatags --savenpm安装后在main.js中引入// main.jsimport jsmediatags from 'jsmediatags';// 挂载到Vue的原型上，后面就能通过this直接调用Vue.prototype.jsmediatags = jsmediatags示例文件// xxx.vue<t

2020-11-06 15:12:07 1498 8

原创关于批量上传音乐文件的解决方案（Vue项目）

需求项目是vue项目，要求添加多个音乐文件，然后一次传递到后端刚开始的想法是用一个数组(MusicList)包裹多个音乐对象传递到后端[ ... { album: File, music: File, lrc: File, name: string, artist: string, account: string, type: 0 或者 1 } {

2020-11-06 14:32:02 526

原创在vite项目中展示markdown文件

由于vite不是基于webpack的，所以不能通过引入loader的方式实现加载markdown所以我们需要自制一个vite插件，将md文件转化为js文件1. 创建md.js(或md.ts)在项目根目录下创建plugins文件夹并在其中创建md.js(或md.ts)⚠️ 在 import marked from 'marked'之前我们需要npm intsall markedimport path from 'path'import fs from 'fs'import marked fr

2020-10-07 16:59:52 4796 2

原创 Vue3如何检查子组件类型

需求：检查parent组件的子组件是否为children组件<parent> <children></children></parent>解决方法拿到context.slots.default()，其中包含了parent组件下所有子组件的信息然后遍历context.slots.default()，其中有type属性，通过type属性我们可以知道每一个子组件的类型，是div还是span还是children…import children f.

2020-09-30 15:26:57 674 1

原创 js中的连等赋值问题（图解）

代码var a = {n:1}; var b = a; // 持有a，以回查 a.x = a = {n:2}; alert(a.x);// --> undefined alert(b.x);// --> {n:2}思路赋值是从右到左的，但不要被绕晕了，其实很简单，从运算符优先级来考虑首先创建两个变量a, b，这两个变量同时指向对象{n:1}.运算优先于=赋值运算所以此时先创建了a.x和对象{n:2}然后将a.x和a同时指向对象{n:2}

2020-09-26 12:38:12 283

原创记一次字节跳动面试的编程题

题目描述要求实现一个Quene类，包括task方法传入两个参数延迟执行时间（单位：ms）执行的函数要求实现链式调用start方法执行start方法后依次执行（执行完上一个task方法中的函数后才能执行下一个）示例执行结果：一秒后输出a，十秒后输出b ，再过两秒输出ccodepen演示new Quene().task(1000, () => { console.log('a')}).task(10000, () => { console.

2020-09-20 00:07:09 340 2

原创 Vue项目部署Nginx踩过的坑

一、问题描述在开发环境中，使用的是在vue.config.js中配置devServer的方法解决的跨域，但是打包部署到服务器上后，发现还是无法访问服务端数据，后面查阅资料发现vue.config.js在打包后会失效，所以得在Nginx上配置反向代理实现二、实现反向代理location /api/ { proxy_pass http://<ip地址>/; #反向代理}三、刷新页面404解决配置nginxlocation / { try_files $uri $uri/

2020-09-13 10:42:29 412

原创 js函数柯里化

概念把接受多个参数的函数变换成接受单一参数的函数，并且返回接受余下的参数且返回结果的新函数的技术使用场景参数复用提前确认，避免每次都重复判断延迟计算/运行实现柯里化// 普通say函数function say ( company, academy, name) { console.log(`我的公司是${company},专业是${academy},名字是${name}`)} //调用say('a', 'b', 'c')// 柯里化funct

2020-09-10 10:51:54 118

转载从proto和prototype来深入理解JS对象和原型链

从__proto__和prototype来深入理解JS对象和原型链就标题而言，这是七八篇里起得最满意的，高大上，即使外行人也会不明觉厉！ ????不过不是开玩笑，本文的确打算从__proto__和prototype这两个容易混淆来理解JS的终极命题之一：对象与原型链。__proto__和prototype__proto__引用《JavaScript权威指南》的一段描述：Every JavaScript object has a second JavaScript object (or null

2020-09-09 15:09:16 118

原创万字笔记快速复习计算机网络（图文）

文章目录层次结构设计的基本原则OSI七层模型TCP/IP四层模型计算机网络的性能指标速率时延RTT物理层概述物理层的作用信道的基本概念分用-复用技术数据链路层概述封装成帧透明传输差错检测奇偶校验码循环冗余校验码CRC最大传输单元MTUMTU路径MTU以太网协议详解Mac地址以太网协议数据格式传输过程网络层概述IP协议讲解虚拟互连网络IP协议IP协议的格式路由表简介IP协议的转发流程ARP协议与RARP协议IP地址的子网划分分类的IP地址特殊的主机号特殊的网络号划分子网子网掩码无分类编址CIDR斜线记法网络地

2020-09-03 10:59:04 760 1

原创 js实现快速排序算法

思路假设有这么一个数组let ary = [12, 8, 15, 16, 1, 24]第一步找到中间项15 --> 把它从原来数组中移除 --> 获取这一项的结果第二步让拿出来的每一项和中间项继续比较并创建两个数组（左边数组和右边数组）比中间项小的放到左边比他大的放到右边左边数组：12，8，1右边数组16，24重复上面的操作再分别将左右两个数组再取中间项，再分成左右两个数组，比中间项小的放到左边，比他大的放到右边…代码实现/* * 实现插入排

2020-08-26 16:59:24 272

原创 js实现插入排序算法

思路假定有这么一个数组let ary = [12, 8, 24, 16, 1]插入排序的做法类似于我们平时打的扑克第一轮：先从数组中抽一张“牌”==> 12第二轮：再抓一张牌与之前抓到的牌依次比较如果当前新牌A比手里的某张牌B大,则把A放到B的后面,如果小则继续向前面的牌比前提:如果已经比较到第一张了,则把当前牌A插入到最前面即可==> 8, 12第三轮：==> 8, 12, 24第四轮：==> 8, 12, 16, 24…代码实现/* *

2020-08-25 22:47:52 385

原创 js实现冒泡排序算法

什么是冒泡排序让数组中的当前项和后一项进行比较，如果当前项比后一项大，则两项交换位置(让大的靠后)即可分析假设有这么一个数组let ary = [12, 8, 24, 16, 1]如果采用冒泡排序，那么应该是这么执行的第一轮：12>8 => 交换位置 [8, 12, 24, 16, 1]12<24 => 不交换位置 [8, 12, 24, 16, 1]24>16 => 交换位置 [8, 12, 16, 24, 1]24>1 =&

2020-08-24 23:16:06 274

原创 Iconfont搭建组件库的字体图标库

前言该系列文章主要记录搭建自己组件库中遇到的问题，分享自己在搭建组件库过程中遇到的坑，并且会通过分享源码的方式，讲解每个组件封装的重点难点，最终会发布到npm上。项目已开源至GitHub，喜欢的朋友记得帮我点个star哦！项目源码地址：OreoUI通过Iconfont搭建组件库的字体图标库组件库中搭建自己的字体图标库是必要的所以我们希望在使用到组件库的时候，能通过我们准备好的css文件，通过其中的类名去引用对应的图标<i class="or

2020-08-08 11:48:58 601

原创深入理解v-model

v-model的实质<input type="text" v-model="username"> 其实v-model实质上就是一个语法糖，等价于<input type="text" :value="username" @input="username=$event.target.value">相当于对input框的input事件进行了监听，其实在vue的源码中也是这么实现的想要手写实现修改props值的问题在日常开发中，我们经常会遇到需要修改props中的某个值的场

2020-08-06 11:53:51 238

原创使用vite搭建Vue3项目

全局安装create-vite-app# yarnyarn global add [email protected] # npmnpm i -g [email protected]创建项目目录# oreo-ui是项目名称cva oreo-uicreate-vite-app oreo-ui根据提示安装对应依赖1.cd oreo-ui2.npm install(or `yarn`)3.npm run dev(or `yarn dev`)预览项目在浏览器输入

2020-08-05 20:17:03 10786 1

原创 300行代码实现Vue的MVVM响应式原理

前言源码下载Vue的响应式原理是面试老生常谈的问题了，而大多数人会选择直接背答案这样的形式去应付面试，一旦面试官继续追问，便什么也答不上来了，所以，我希望能通过参考Vue源码的形式，动手编写代码（大概300行左右）实现一个简单的Vue的MVVM框架，从而让我们更好的理解Vue的响应式原理。我们会通过实现指令解析器Compile实现数据监听器Observer实现观察者Watcher来实现整个Vue的MVVM的响应式原理实现的功能不是很完善，如果大家有兴趣，可以自己补充，本次代码主要是完成整

2020-08-04 14:52:25 233 1

原创 Webpack配置详解

Webpack相关文章Webpack的基本使用Webpack的性能优化entry1.string类型单入口打包形成一个chunk输出一个bundle文件。此时chunk的默认名称是mainmodule.exports = { entry: './src/index.js', ...}2.array类型多入口所有入口文件最终只会形成-一个chunk,输出出去只有一个bundle文件只有在HMR功能中让html热更新生效module.exports = {

2020-08-03 10:59:45 200

原创 Webpack的性能优化

HMRhot module replacement 热模块替换/模块热替换作用:一个模块发生变化，只会重新打包这一个模块(而不是打包所有模块) 极大提升构建速度module.exports = { entry: './src/js/index.html', ... devServer: { ... // 开启HMR功能 // 当修改了webpack配置，新配置要想生效，必须重新webpack服务 hot: true ... } ...}

2020-08-02 11:24:06 510

原创 Webpack的基本使用

Webpack基础webpack的五个核心概念EntryOutputLoaderPluginsMode安装webpack cli npm i webpack webpack-cli -D -D是–save -dev的缩写运行指令开发环境//webpack会以./src/index.js为入口文件开始打包，打包后输出到./build/bulit.js,整体打包环境是开发环境webpack ./src/index.js -o ./build/built.js --mode=

2020-08-01 12:04:37 320

原创 Js中this指向问题总结

this的默认指向全局环境下的this指向了windowconsole.log(this) // window函数独立调用，函数内部的this也指向了windowfunction fn(){ console.log(this) // window}被嵌套的函数独立调用时，this默认指向了windowvar a= 0;var obj= { a: 2, foo: function (){ //函数当做对象的方法来调用this指向了obj var tha

2020-07-31 09:27:20 279

原创手写实现promise源码（附源码）

手写实现promise源码源码下载一、前言需要掌握以下知识点promise的基本使用promise常见的APIJs的事件循环机制想复习或者学习promise的同学可以看看这篇文章实现的主要功能Promise.prototype.thenPromise.prototype.catchPromise.resolvePromise.rejectPromise.allPromise.race二、代码实现整体结构实现(function(window){ const

2020-07-30 12:00:56 418

原创 ES6 Promise的基本使用

为什么要用promise1.指定回调函数的方式更加灵活旧的:必须在启动异步任务前指定promise:启动异步任务=>返回promie对象=>给promise对象绑定回调函数(甚至可以在异步任务执行完成后指定）2.支持链式调用，可以解决回调地狱问题回调函数执行异步任务缺点：不便于阅读/不便于异常处理doSomething(function result) { doSomethingElse(result, function(newResult) {

2020-07-30 11:53:36 125

原创 Js三种实现数据双向绑定的方式

几种实现数据双向绑定的方式发布者-订阅者模式(backbone.js)脏值检查(angular.js)数据劫持(vue.js)发布者-订阅者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是vm. set( ' property', value) 这种方式现在毕竟太low了，我们更希望通过vm. property = value 这种方式更新数据，同时自动更新视图，于是有了下面两种方式脏值检查: angular.js是通过脏值检测的方式比对数据是否有变更，

2020-07-29 11:58:24 839

原创六种Js中常见的继承方式（图解）

原型链继承继承方式Vip.prototype = new Breast();//原型链继承的核心语句缺点当原型链中包含引用类型值的原型时,该引用类型值会被所有实例共享;在创建子类型时,不能向超类型的构造函数中传递参数.借用构造函数继承继承方式call执行父构造函数(不是new ), 并绑定this继承特点:如同把父构造函数的内容混入子构造函数// 定义父类function Breast(sizes_index){ this.sizes = [1100， 1200, 1300

2020-07-28 11:27:13 404

原创总结JavaScript不同模块化规范的差别

本篇文章主要介绍CommonJs，AMD，CMD，ES Modules的基本使用与区别CommonJs也就是Nodejs上使用的模块化规范，模块加载是同步加载，服务端能够直接运行，浏览器端要运行需要打包工具打包以后才能运行（比如browserify）基本语法:暴露模块：module.exports = value;exports.xxx = value;引入模块：require(xxx)AMD专门针对浏览器端的，模块加载是异步的，依赖于Require.js基本语法：暴露模

2020-07-26 14:04:05 206

GHkmmm的个人博客