- 博客(70)
- 收藏
- 关注
RSS订阅原创 Windows在git-bash安装zsh
博主现在已经转mac用户。但是因为家里的台式机是是win装黑果遇到各种问题，最终还是放弃在家使用mac环境。但是又用习惯了zsh的各种插件。所以开始琢磨如何在win中使用一套舒适的环境。最开始我是使用wsl中的linux环境安装zsh。但毕竟属于子系统，很多环境是不共享。因为我是一名前端工程师，当做桌面程序开发的时候。在wsl需要另外配一套环境启动。后面在google查阅之后。...
2022-07-22 01:56:30
3002
6
原创 解决Docker提示unsupported console settings, you just need to disable the legacy
第一步： 调出窗口第二步：输入 回车，打开命令行第三步：在菜单栏右键点击 第四步：取消 第五步：重启计算机，重新打开docker即可
2022-06-29 22:11:51
359
原创 win11在cmder中使用vim查看内容的时候空白
依次选择，最终打上个就可以了“Show system menu (RCIickfcr Settings)” -》 “Debug” -》 “properties” -》 “Use legacy console (requires relaunch, affects all consoles)”
2022-06-21 00:53:03
1140
原创 Mac微信多开以及防撤回方案
前言众所周知，微信无论在 Win 还是 Mac 都是默认不支持多开的。可是我们这些将账号分为公司账号和私人账号的人（海王）。是远不能满足我们的需求。所以只能通过特殊的手段来实现我们的需求。在手贱把微信升级之前，你可以直接使用 WeChatExtension-ForMac 安装一下该插件即可实现微信 + 防撤回。可在昨天不小心把微信升级到了 3.4.0 后，在次安装发现打开就会弹出签名的错误。（如果你还是可以用，那么恭喜你！下面不用继续看了）。为此我经过艰苦的寻找（百度 2分钟，google 1分钟）才
2022-04-18 19:18:12
3489
原创 nestjs遇到问题，如何在webstorm进行调试
在开发过程中，经常需要log出来我们的数据查看。而像node程序终端log出来的数据不具备良好的可读性，所以能不能像浏览器调试一样阅读呢。顶部菜单找到 RUN 接着选择 Edit Configurations 会弹出一个窗口接着点击 + 号，选择 Node.js 接着参考下面图片，将 Node parameters 和 Javascript file 的参数修改为对应的数值。...
2022-04-17 21:34:03
1593
原创 学Vue3核心概念与面试官斗智斗勇（一） 收集触发依赖
本文章依据阅读源码的理解进行编写。如果有什么错误的地方，欢迎指正交流学习。最近也在帮助想入行前端的朋友进行学习，如果有需要交流学习，可以添加微信 gdgzyw。聊天、学习、打游戏都阔以~学习源码最快的方式就是理解概念后，自己写一个简版的功能。所以我们得先搭一个环境，这里采用测试驱动的方式进行。初始化项目初始化 package.json 和安装依赖yarn init -yyarn add -D @babel/core @babel/preset-env @babel/preset-types.
2022-03-14 01:25:32
1267
原创 Web安全常见基本知识
1、XSS跨站式脚本攻击。Cross-Site Scripting。因为与 CSS 重名所以变更为 XSS。反射性通过在传参处植入代码，实现数据的传输。存储型借助存储能力，植入恶意代码。当用户读取该输入时，如果是直接运行到页面。就会把恶意脚本一并执行。常见危害获取页面数据获取Cookies劫持前端逻辑发送请求偷取网页数据偷取用户信息偷取用户的登录态欺骗用户防范方案HEAD通过添加 header 来禁止 XSS 过滤ctx.set('X-XSS-Protection',
2022-03-08 22:19:27
5432
原创 通过JBTools设置命令行启动IDE
需求想通过类似vscode一样，可以通过在命令行输入 code 目录 直接启动 vscode 到对应目录。想实现这个问题，只需要把对应的ide的快捷启动放置 /usr/local/bin 目录下。那么你在终端中可以直接识别到该执行程序。设置终端启动打开 tools，点击设置开启生成脚本，并指定生成目录如果你是 windows 可以生成后，先去环境变量确认是否已经自动添加了。确认后但还是没生效，只需要重启一下就可以了现在就可以在命令行进行使用...
2022-02-14 11:15:26
464
原创 dayjs计算连续打卡时间
前言最近做的个人项目中，需要统计用户连续打卡的时间。网上搜索了很多资料，方法有很多。比如使用mysql分组条件查询、窗口排序等。考虑到自己需求没有这么复杂，只需要计算最近一次的连续天数。就是直接使用dayjs计算。思路mysql查询对应用户所有的打开记录，进行降序排序。获取第一个时间，判断时候在今天或昨天的范围。如果是则表示仍在连续打卡范围，如果不是直接返回0天判断最后一次打开是否是今天，不是的话从昨天开始查找每次遍历天数加一，直到发现不是连续的则中断遍历这里数据添加的时候，限制了一天
2022-02-06 01:40:40
552
原创 nods中mysql时间相差8小时
前言最近在做自己的一个记账项目，后端nestjs中使用typeorm的mysql。当添加记录时，发现所以时间都相差了8小时。后面查了一下资料发现因为默认 timezone 是用 UTC 的。所以只需要设置成我们自己的时区即可。解决方法ormconfig.json{ "type": "mysql", "host": "localhost", "port": 3306, "username": "", "password": "", "database": "developme
2022-01-16 21:18:02
1342
原创 react使用vitest的一些问题
1、TypeError: vite_ssr_import_0.default is not a function为项目中使用到了classnames，但是他提示不是个函数解决方法安装classnames-es-tsyarn add -D classnames-es-ts配置vite别名export default defineConfig({ ... resolve: { alias: { classnames: "classnames-es-ts" },
2022-01-08 18:01:01
1049
原创 使用原生js实现复制剪贴板
在平时需求中，经常会遇到一些秘钥，或者一大串文章需要复制再或者百度网盘链接。此时我们可以提供一个按钮，让用户一键复制const el = document.createElement('input');el.setAttribute('value', secret);document.body.appendChild(el);el.select();const flag = document.execCommand('copy');document.body.removeChild(el);f
2021-12-28 09:13:01
331
原创 Java使用Junit4.jar进行单元测试
一、下载依赖包分别下载 junit.jar 以及 hamcrest-core.jar二、添加到依赖在项目跟目录创建 lib 文件夹，并把下载的依赖包拖进去鼠标移动到依赖包上，右键选择 Add as Library...。依次添加 junit.jar 以及 hamcrest-core.jar 到 library 中三、设置 test 目录在项目根目录创建 test 文件夹，右键设置 Mark Directory as —— Test Sources Root四、创建测试类随便写一个类
2021-11-07 23:14:54
505
原创 算法入门及简单练习——队列
队列什么是队列队列是一种特殊的线性表，只允许在队列的头部删除节点，在末尾添加新的元素。在我们现实生活中，超市排队结账就是一个典型的例子。第一个排队的结账后，从队列头部离开。想要结账的需要在队尾进来等待。常见的方法enqueue 从队列尾部添加一个元素（我也结账了，过来排队）dequeue 从队列头部删除一个元素（我结账好了，离开队伍）head 返回头部元素（我看看谁排在了最前面）size 返回队列的大小（有多少个人在排队呢？）clear 清空队列（11点啦，够钟关门了。全部人离开
2021-08-27 11:01:48
262
原创 算法入门及简单练习——栈
栈先进后出（后进先出）push 添加一个元素到栈顶pop 弹出栈顶的元素top 返回栈顶的元素isEmpty 判断是否为空size 返回栈里元素的个数clear 清空栈使用js的数组实现一个栈function Stack() { const items = [] // 从栈顶添加元素，压栈 this.push = function (item) { items.push(item) } // 弹出 this.pop = function () {
2021-08-25 17:59:48
106
原创 hoc实现表单组件的设计思路
前言通过模仿 rc-form 的实现思路，可以学习一下 hoc 的使用场景。暴露 createForm() 函数通过 createForm 函数，返回一个组件。该组件拓展了我们的一些方法。export function createForm(Cmp) { return class extends Component { getFieldDecorator = () => {} getFieldsValue = () => {} getFie
2021-08-20 10:04:49
103
原创 React使用cra创建项目，开启装饰器
前言今天使用 cra 创建了个项目。打算研究一下 rc-form 的实现思路。发现项目并未开启装饰器。并提示下面的错误。Support for the experimental syntax 'decorators-legacy' isn't currently enable解决方案安装对应的依赖库yarn add @babel/plugin-proposal-decorators customize-cra react-app-rewired接着配置一下根目录 config-override
2021-08-19 15:55:10
296
原创 两数相加浅析
前言这是一道 LeetCode 简单题。下面我们简单的做一下，算法萌新，欢迎大佬提供更好的解决思路。无脑for循环思路通过双重循环，进行逐一比较当他们其中某个值相加等于 target 时，直接返回对应的下标 i, jfunction twoSum(nums, target) { for(let i = 0; i < nums.length - 1; i++) { for(let j = i + 1; j < nums.length; j++) { if(num
2021-08-16 17:48:59
113
原创 大数之和浅析
前言我们知道当在浏览器输入 9999999999999999999999 + 9999999999999999999999 时，它的结果是一个科学计数法。往往我们不需要也看不懂科学计数法。所以需要实现一个函数来实现大数相加。分析我们可以通过把一个很大的数字，拆分成一小部分一小部分的加起来。通过字符串形式，我们手动模拟进位的操作如果当他满 10 的时候，我们保留个位，将十位（也就是进位）保存起来当下次计算的时候，我们加上进位代码实现const addStrings = (num1, num2)
2021-08-16 15:35:03
209
原创 快速排序过程分析
浅析过程快速排序的原理是，通过定一种中间基准值。与这个基准值进行比较，即可区分成比该值大的一组，以及比该值小的一组。然后继续对区分好的数组进去取基准，在进行比较。直到该数组无法切分后，再将一层层向上合并，最终返回结果。时间复杂度为 O(nlogn)代码实现思路判断传进来的数组长度是否可以分割，也是用于终止递归的一个判断条件对数组获取中间值，并抽离出来定义两个数组，分别保存左右两边的数据集。对数组进行循环，比中间值大的存到right中，比中间值小的存到left中。进行递归，分别在对left
2021-08-13 16:00:09
149
原创 计数排序过程分析
浅析过程计数排序的原理是通过统计给定数组中，每个值出现的次数，最后通过统计后对应值出现的次数，从小到大返回一个新的数组。代码实现思路需要先计算出最大值及最小值获得该数组的区间，并通过大减小计算该数组最大可能长度，因为数组下标是从0开始，所以需要得出结果后加1。定义一个空数组，用于统计出现次数。循环给定数值，通过 值 - 偏移量 = 下标 的公式，对空数组对应下标进行统计次数。定义一个新数组用于保存排序后的结果。接着循环用于统计的数组，通过判断次数，并通过公式反推 下标 + 偏移量 = 值 将值添
2021-08-13 12:03:41
94
原创 Mac/Windows下如何使用安卓模拟器开发UniApp
1、Mac篇1.1 网易MuMu1.1.1 下载并安装网易MuMu模拟器官网下载地址1.1.2 进入adb的目录cd /Applications/NemuPlayer.app/Contents/MacOS1.1.3 连接模拟器的端口./adb kill-server && ./adb server && ./adb shell2、Windows篇2.1 夜神2.1.1 下载并安装https://www.yeshen.com/2.1.2 运行设置端口
2021-07-31 22:56:26
695
原创 简单实现VueRouter了解其实现原理
1、前言本篇文章循序渐进带大家实现VueRouter的实现原理，阅读前需要对vue的使用有基本的认识，学习过class了解其基本概念。实现注意点:如何注册插件实现router-view和router-link两个组件如何根据当前路由显示对应组件路由切换时如何更新组件嵌套路由如何实现带着这些问题下面我们就开始一步一步的实现最终代码链接github 链接2、准备测试数据我们可以使用VueCli搭建一个VueRouter的项目。这里简单的说一下命令# 如果你使用 yarnyarn
2021-07-12 14:33:21
449
原创 简单实现Vuex了解其实现原理
1、前言本篇文章循序渐进带大家实现Vuex的主要功能，阅读前需要对vue的使用有基本的认识，学习过class了解其基本概念。下面我们就开始吧最终代码链接github链接2、准备测试数据我们可以使用VueCli搭建一个Vuex的项目。这里简单的说一下命令# 如果你使用 yarnyarn global add @vue/cll# 如果你使用 npmnpm install -g @vue/cli# 创建 Vue2 项目vue create vue-study安装完后，直接启动该服务c
2021-07-09 23:30:15
246
5
原创 React使用context进行组件通信
1、介绍之前文章介绍了使用Props进行参数和函数引用的传参达到组件通信的效果。这次使用context来实现这个效果。2、创建组件创建 Grandpa、Father、Son1、Son2、Son3 组件const Grandpa = () => { return ( <> <div>我是 Grandpa</div> <Father /> </> )}const Father = ()
2021-07-07 10:53:51
185
原创 windows11安装C++编译器mingw-w64
1、下载压缩包https://winlibs.com/2、解压出来3、配置环境变量4、打开终端进行测试5、成功
2021-07-07 09:51:30
11160
9
原创 简单了解常见http状态码的意思
HTTP 状态码在日在开发中，前端需要通过后端接口请求数据。在响应中存在标识该资源的状态的状态码。虽然该状态码可以随意修改，但是为了规范化，我们还是需要了解一下常见的状态码意思。2XX 成功200 成功，表示请求被服务端正确处理204 No Content，表示请求成功，但响应中不含有主体部分205 Reset Content，同 204 一样，但是要求请求方重置内容206 Partial Content，进行范围请求3XX 重定向301 moved permanently，永久性重定
2021-07-06 13:53:23
199
原创 了解defineProperty，实现一个简单的vue数据响应式
1、前言本文章相关代码地址：https://github.com/layouwen/blog_demo_defineproperty如果本文章对你有所帮助，请不要吝啬你的 Start 哦~2、对象进行读写监听const obj = { name: 'layouwen',}Object.defineProperty(obj, 'name', { configurable: true, enumerable: true, get() { console.log('触发get'
2021-04-21 23:36:50
233
原创 一步步实现一个Promise
1、前言本篇文章，默认你已经知道什么是 Promise ，然后我会带你一步步的实现一个简易的 Promise。将会以循序渐进的方式，分步骤实现。本文章相关代码地址：https://github.com/layouwen/blog_demo_lpromise如果本文章对你有所帮助，请不要吝啬你的 Start 哦~2、三种状态此处代码，点击这里Promise 它一共会有三种状态：pendingfulfilledrejected下面我们自己实现一个类，默认为 pending 状态，通过调用
2021-04-19 03:37:49
268
原创 你不知道的WebComponent
1、原生也有组件？现在Vue、React的大规模流行。前端组件化已经成为潮流，但是原生的组件又有多少人了解了。下面通过几个代码示例，让你快速了解原生怎么写组件。2、通过继承 HTML 实现组件代码demo示例// 通过继承 HTMLImageElement 实现组件化class MyImg extends HTMLImageElement { constructor() { super() const src = 'https://resource.ttplus.cn/publ
2021-04-02 02:40:11
365
原创 带你快速了解设计模式
1、设计的原则1.1 单一职责原则每个类只需要负责自己的那部分，类的复杂度就会降低。1.2 开闭原则对扩展开放，对修改关闭1.3 里氏替换原则所有引用基类的地方必须能透明地使用其子类的对象。换句话说父类的对象替换成子类来使用，而程序执行效果不会改变。1.4 迪米特法则迪米特法则（最少知识原则），一个类对于其他类知道的越少越好，就是说一个对象应当对其他对象有尽可能少的了解，只和朋友通信，不和陌生人说话。1.5 接口隔离原则多个特定的客户端接口要好于一个通用性的总接口。尽可能将接口单独抽
2021-04-01 03:06:59
148
原创 速览JavaScript字符串、数组、对象、MathAPI
1、字符串1.1 获取字符串的对应下标数值const str = 'abc123ABC'console.log(str[1]) // 输出结果为：bconsole.log(str.chatAt(1)) // 输出结果为：b1.2 获取字符串的长度const str = "123456"console.log(str.length) // 长度为：61.3 获取字符串的Unicode的编码const str = '中国'console.log(str.charCodeAt(0))
2021-03-28 02:46:03
97
原创 Vue简化版真实DOM转虚拟DOM
1、大致思路获取#app根节点，创建VNode类用于创建虚拟DOM，创建vDom函数，用于生成虚拟DOM对象。根据元素的 nodeType 判断类型，对真实DOM的参数进行处理创建虚拟DOM。对每个元素的 childNodes 进行遍历，递归的进行 vDom 的创建。2、代码实现class Vue { constructor(option) { this.obj = document.querySelector(option.el) let AST = vDom(this.obj)
2021-03-18 11:21:25
370
原创 使用charles进行小程序抓包
1、前言因公司需求，需要使用uni进行平台同步开发。其中字节跳动的真机调试就很烦人。ios无法进行真机调试，及时用安卓进入调试也只能看到发送请求。响应你就别想看了。以至于你想看每个请求的响应数据，都要用console出来。所以引出来今天这篇文章。如何使用charles进行小程序抓包。2、下载charles下载地址3、安装没什么好说的，无脑下一部即可。Next => 勾选 I accept the terms is the License Agreement => Next =&
2021-02-20 00:15:48
2835
原创 跨域CORS、JSONP、服务器中转
1、同源策略当两个服务器的 源 不完全相同的时候，无法获取另一个的数据。不同的页面，无法相互访问数据。1.1 获取网站的源window.origin或location.origin1.2 判断源是否相同源 = 协议 + 域名 + 端口号当协议、域名、端口号（完全一致）才是同源，否者都为不同源http://baidu.com 与 http://www.baidu.com 不同源http://baidu.com 与 http://qq.com 不同源2、跨域为了解决同源策略无法相互
2021-02-14 12:51:57
253
原创 AJAX以及轮询
1. 传统表单提交与AJAX比较1.1 Form表单<form action="/form.html" method="post"> <input type="text" name="username" placeholder="username" /> <input type="password" name="password" placeholder="password" /> <input type="submit" /></fo
2021-01-30 17:14:31
439
原创 数据Mock与后端联调
1、前言通常前端开发的时候，我们的页面已经开发完成。但是后端的接口不一定已经写完就了。这时候我们就可以自己去伪造一些符合规范的数据，用于前期的测试，等到后端接口完成的时候我们可以在进行一个接口联调。2、Mock数据的方法2.1 自己手写一个简易服务器返回数据对于我们前端来说，我们天生就会一个后端开发语言，nodejs即可实现。我们只需要创建一个简易服务器，对请求路径进行判断，返回对应的mock数据。const http = require('http')const fs = require('
2021-01-30 15:24:01
600
原创 浅谈ES6后的TDZ时间死区
1、const、let和var在es6新特特性这，let和const可以达到局部作用域的效果。1.1 varvar a = 4function say () { console.log(a) var a}say()大家在网上听的最多的就是var会进行变量提升，事实也是如此。上面例子中，函数外部声明变量a赋值为4。当调用函数时，内部的变量a会提到log前提前声明，并且默认赋值为undefined。然后才log。如下图var a = 4function say () { var
2021-01-27 09:46:41
124
原创 快速了解Grid布局
1、如何让元素使用grid布局给元素添加 grid 或 inline-grid 样式2、设置行和列使用 grid-template-columns 设置每一列的宽度使用 gird-template-rows 设置每一行的高度div { grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto;}注意：属性可以使用 repeat函数 进行书写。如：分为8列，每列百分
2020-12-25 18:25:44
451
1
原创 快速学会Mackdown语法
1、命令1.1 标题写法# 一级标题## 二级标题### 三级标题以此类推预览一级标题二级标题三级标题1.2 换行一个回车或两个个回车1.3 链接写法[链接文字](链接地址)预览链接文字1.4 图片代码预览[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7sPXdxFm-1608890619459)(图片地址)]1.5 一行代码写法`代码`预览代码1.6 多行代码使用两个 ```包起来。可以
2020-12-25 18:03:52
238
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人