- 博客(205)
- 资源 (7)
- 收藏
- 关注
原创 Mac 录屏制作gif动图
作为一名优秀的前端程序员,想要输出内容,总需要制作一些动图(前端动效、功能预览、代码讲解等),接下来咱们说一下,使用 Mac 录屏,并转成 Gif格式动图的方法:工具:Mac、QQ操作步骤:1.打开QQ(没有安装QQ的话,请自行安装)使用QQ聊天对话框中的 截图功能(小剪刀),选中“录屏”功能。或者使用 快捷键 command + shift + A2. 按照提示,选择要录屏的区域 进行视频录制。如下图:...
2021-08-13 09:27:48 7955 12
原创 VsCode超实用插件推荐,让你的开发效率火力全开
辅助开发类:1.VeturVUE开发必备插件1.语法高亮,包括 vue/html css/sass/scss/less/stylus js/ts2.语义高亮,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件3.语法错误检查,包括 CSS/SCSS/LESS/Javascript/TypeScript4.emmet 支持5.支持调试6.代码片段自动补全 包括 HTML/CSS/SCSS/LESS/JavaScript/TypeScript2.Vue...
2021-07-30 15:20:54 7059 55
原创 2021 百度网盘网页版 倍速播放技巧(亲测有效)
2021 百度网盘网页版 倍速播放技巧(亲测有效)安装谷歌浏览器(chrome浏览器)打开谷歌浏览器,地址栏输入:chrome://extensions/ 或者 直接点这里在打开的扩展程序 页面,开启右上角 的 “开发者模式”下载 Global-Speed 扩展 点击这里获取 ,或者评论 or 私聊我将 步骤4 中下载的 .crx 文件 拖入 步骤3 打开的页面(chrome://extensions/ )安装成功后,可以看到 Global-speed扩展, 开启该扩展打开百度网盘视
2021-07-05 10:17:39 17398 124
原创 Mac版sourceTree跳过登录
1. 打开sourceTree,提示登录,2. 此时,选中sourceTree,点左上角菜单栏:窗口-->点击显示托管在远端仓库-->弹出拉取失败3.关掉当前登录窗口,离开(quit)-->确定仓库拉取失败-->进入成功...
2018-12-21 15:59:58 5031 5
原创 从头学React之:路由
路由基本使用1、明确好界面中的导航区、展示区2、导航区的a标签改为Link标签 import {Link} from 'react-router-dom'; <Link to="/xxx"></Link>3、展示区写Route标签进行路径的匹配 <Route path="/xxx" component={Demo}/>4、<App> 的最外侧包裹一个 <BrowserRouter> 或 <HashRouter>路由组件
2022-08-05 16:18:23 489
原创 解决 command not found: brew :Mac安装Brew
解决 command not found: brew :Mac安装Brew
2022-06-24 20:35:55 3037 1
原创 纯html项目配置babel,报错Uncaught ReferenceError: require is not defined
需求描述有时候想要写一个简单的测试 demo,只需要一个 html文件 + 一个js文件,但是需要 import 一些npm包,如何做简单的 babel 配置呢?操作步骤创建项目mkdir democd demo此时 demo 目录下空空如也,什么也没有。npm初始化npm init一路回车,此时 demo 下新增了一个 package.json 文件新增 src/index.js 和 index.html 文件,目录结构如下:| - src| |- index.j
2022-05-26 23:43:52 4934 2
原创 React-hooks:useEffect
1.理解函数副作用什么是副作用对于React组件来说,主作用是根据数据(state/props)渲染UI,除此之外都是副作用(比如手动修改DOM)。常见的副作用数据请求(发送ajax)手动修改 DOMlocalstorage操作useEffect 函数的作用就是为react函数组件提供副作用2.基础使用使用步骤导入 useEffect 函数调用 useEffect 函数,并传入回调函数在回调函数中编写副作用处理修改数据状态检测副作用是否生效示例代码import {us
2022-05-06 07:19:28 1798 2
原创 Jest:JS测试框架学习
基本使用安装 yarn add --dev jest新建功能文件 Sum,jsfunction Sum(a,b) { return a + b;}module.exports = {Sum}新建测试文件 Sum.test.js (跟2中功能文件对应,jest会自动匹配)const {Sum} = require("./Sum.js");test("测试求和方法: a+b", () => { expect(Sum(1,2)).toBe(3);})修改 packa
2022-04-12 16:14:17 1203 3
原创 git 本地分支被删除后 如何恢复?(已解决)
恢复 被误删的git分支切回 master 分支,避免影响到当前分支:$ git checkout mastergit relog --data=iso 以标准时间格式展示日志reflog是reference log的意思,也就是引用log,记录HEAD在各个分支上的移动轨迹。$ git reflog --date=iso在 上述操作结果中查找 误删除分支的 commit记录 (如下红框为例)git checkout -b <分支名&g
2022-04-01 18:40:26 6086 5
原创 JSONP请求报错block:mixed-content(已解决)
Mixed Content: The page was loaded over HTTPS,blocked the content must be served over HTTPS问题描述开发环境 调用接口 正常,发布到测试环境时,调用接口提示 “block:mixed-content”问题原因浏览器不允许在https页面里嵌入http的请求开发环境是本地起的http服务,发到测试环境时是 https,而调用的接口地址是固定的 http接口,导致测试环境报错。解决问题方法1.如果该接口支持
2022-03-11 15:29:27 1234
原创 chrome 调试工具小技巧
参考 https://juejin.cn/book/6844733783166418958/section/68447337832041676871.快捷键切换工具栏位置: command + shift + D2.切换 devtools 面板control + [ 向左切换;control+ ] 向右切换control + 1 到 control + 9 1…9直接切换到对应面板3.递增/递减使用 上/下 箭头按键,逐步调整数值(常见于调整css)4.查找内容:contro
2022-03-04 18:08:45 612 1
原创 巧用Es6解构赋值
1、常用解构赋值## 数组解构let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3// 忽略部分值let [ , , third] = ["foo", "bar", "baz"];third // "baz"let [x, , y] = [1, 2, 3];x // 1y // 3// 结合 rset 扩展运算符,分配其余值let [head, ...tail] = [1, 2, 3, 4];hea
2022-02-18 17:28:58 330 2
原创 特殊函数:纯函数
纯函数特征只要是同样的输入(实参),必定得到同样的输出(返回)约束条件不得改写参数数据;不会产生任何副作用,例如网络请求、输入和输出设备等;不能调用Date.now() 或者 Math.random()等不纯的方法;举例redux 的 reducer 函数必须是一个纯函数。纯函数:function test(x) { return 1;}非纯函数:function test1() { return new Date();}function test2(x) { re
2022-02-16 23:22:37 150
原创 React:从头学state
初始版本:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div
2022-01-28 16:47:39 471
原创 手写EventBus
class EventBus { constructor() { this.events = this.events || {}; //{key:Array} } /** * @param {String} eventName * @param {Function} callback */ $on(eventName, callback) { if (thi
2022-01-21 20:04:46 484
原创 前端超实用编码技巧
获取时间戳的 时:分:秒let timeStamp = new Date().getTime(); // 获得时间戳new Date(timeStamp).toTimeString().slice(0,8); // '13:44:41'时分秒 前补0 (倒计时)let hour = 9;// badhour = String(hour).length > 1 ? hour : '0'+hour;// goodhour = String(hour).padStart(2,.
2021-12-31 18:06:33 507 16
原创 const name=“global“; var obj ={ name: ‘123‘, getName:()=>{ console.log(this.name); } } obj.getName()
题目描述:如下代码,执行完 输出内容?const name="global";var obj = { name: '123', getName:()=>{ console.log(this.name); }}obj.c输出结果:空如下所示:易错项:“123”;“global”解析:1.为什么不是 “123”如 this指向这篇文章 第 3 条所示:3.函数是否在某个上下文对象中调用(隐式绑定)?如果是的话,this绑定的是那个上下文对象。如: v
2021-12-17 16:25:19 753 12
原创 NodeJs 常用模块
1.http模块// 引入模块const http = require('http');// 创建服务,// req:获取浏览器信息// res:给浏览器响应信息const proxy = http.createServer((req, res) => { // 设置响应头 res.writeHead(200, { 'Content-Type': 'text/plain' }); // 设置编码格式 res.writ('<head><meta ch
2021-12-10 15:25:41 1193 3
原创 算法系列:5. 二分搜索
/** * @Desc 二分搜索 * 二分搜索 前提是 有序数组 * 从数组中间值开始,如果中间值正好等于搜索值,结束搜索; * 如果搜索值比 中间值大或小,则在大于或小于中间值的那一半数组中继续搜索 */Array.prototype.binarySort = function (selector) { let low = 0; let high = this.length - 1; while(low <= high) { let midInd
2021-11-27 22:35:41 270 4
原创 Todo Tree插件配置
VsCode 编辑器 有一款插件:Todo Tree,可高亮显示标签(支持自定义),便于开发过程中区分各种注释场景。效果如下:配置方法:首先,在应用商店,搜索 “todo tree”,安装插件:然后,打开vscode配置文件:setting.json,加入如下配置:// setting.json{ ... //todo-tree settings "todo-tree.general.tags": [ "todo", "done", "fix",
2021-11-19 18:07:16 1559 1
原创 算法系列:4. 快速排序
/** * @Desc 快速排序 * 分区:在数组中任意选择一个 ‘基准’,所有比基准值小的放到基准值前边,比基准值大的放在基准值后边 * 递归的对基准前后的数组 进行 “分区” */Array.prototype.quickSort = function() { const rec = function(arr) { if (arr.length <= 1) { return arr; } const
2021-11-04 13:42:29 181 1
原创 Props with type Object/Array must use a factory function to return the default value.
问题描述:报错:Props with type Object/Array must use a factory function to return the default value.使用 prop 进行父子组件传值时,设置了默认值(如下),导致报上边的错props: { actData: { type: Object, default: {}, },},报错原因翻译报错信息:props default 数组/对象的默认值应当由一个工厂函数返回解决
2021-10-29 09:49:14 10596 1
原创 算法系列:3. 归并排序
/** * @Desc 归并排序 * 时间复杂度:O(n*logN) * 分:将数组劈成两半,再递归 对子数组执行‘分’操作,直到分成一个个的数 * 合:将两个数合并成一个有序数组,再对有序数组进行合并,直到全部子数组合并成一个完整的有序数组 * 新建一个空数组res,用来存放最终排序后的数组 * 比较两个有序数组的头部,较小者出队并推入res * 如果两个数组还有值,就重复第二步 */Array.prototype.mergeSort = function() { con
2021-10-24 14:44:25 138
原创 算法系列:2. 插入排序
/** * @Desc 插入排序 * 时间复杂度:O(n^2) * 从第二个数开始往前比 * 有比第二个数小的,往后排 * 从第三个数开始往前比,有比它大的往后排 * 以此类推 进行到最后一个数 */Array.prototype.insertSort = function() { for (let i=1;i<this.length; i+=1) { let temp = this[i]; let j = i; while
2021-10-15 14:34:36 106 1
原创 撤销git commit / git add 操作
Git仓库有四个部分:工作区、暂存区、本地仓库(commit历史)、远程仓库工作区: 用户当前编辑的内容 是在工作区,通过 git add 将工作区内容提交到 暂存区;暂存区: git add 之后的修改保存在 暂存区,暂存区内容 通过 git commit 提交到 本地仓库;本地仓库: git commit 后的内容存储在本地仓库,在这里可以通过 git log 查看 commit 历史记录,本地仓库内容 通过 git push 提交到远程仓库远程仓库: git push将本地仓库的修改,推送到
2021-10-09 11:29:48 2065
原创 算法系列:1. 选择排序
/** * @Desc 选择排序 * 时间复杂度:O(n^2) * 找到数组中最小的值,选中它并将它放到第一位; * 找到数组中第二小的值,选中它并将它放到第二位; * 以此类推,执行 n-1 轮 */Array.prototype.selectSort = function () { for (let i=0;i<this.length;i+=1) { let minIndex = i; for (let j = i; j < this.
2021-09-29 10:17:42 132
原创 vuex使用详解-Module模块
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... },
2021-09-17 09:43:34 1391 1
原创 创建自定义名称ssh密钥,并使用不同密钥登录不同服务器
今天整理自己的托管平台时,发现很多个平台共用同一个密钥,即默认的 id_rsa,考虑到风险性,想到使用不同密钥,登录不同平台/服务器,做好隔离。什么是公钥什么是私钥?公钥就好比一把锁,你在一个平台放上你的公钥,就相当于你自己买了把锁在该平台把你的东西锁起来了。私钥好比开锁的钥匙 你在平台上的锁,只有你的私钥这把钥匙才能打开,平台其他人都打不开。公钥可以给任何人,但是私钥只能自己拿着!!一、创建默认ssh密钥一般,我们的密钥存放在 ~/.ssh 目录下,以下以 MacOs示例1.进入.ssh文件
2021-09-14 15:26:00 4839 1
原创 Swiper4.3.3 制作轮播图
想要的轮播图效果如下:(gif制作可参考 这篇文章)代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> <l
2021-08-27 15:38:10 429 4
原创 vscode 左侧扩展活动栏内容消失了怎么办
vscode 左侧活动栏 源代码管理 不见了怎么办?vscode左侧活动栏默认会有 一些内容,今天一不小心,不知道怎么的,将部分内容搞没了(是的,我也不知道怎么搞的 就没了) 如下图:搜索 和 源代码管理都不见了恢复办法1. 恢复 源代码管理项:ctrl + shift + G 快捷键 => 可以看到 "源代码管理" => 单击鼠标右键 => 选择 “重置位置”2. 恢复 搜索:ctrl + shift + F 快捷键 => 找到...
2021-08-19 20:31:01 12163 3
原创 navicat 连接本地mysql报错:2059 - Authentication plugin ‘caching_sha2_password‘ cannot be loaded
问题描述:macOs 10.15 版本mysql-8.0.22-macos10.15-x86_64通过 navicat premium 连接本地mysql时报错:2059 - Authentication plugin ‘caching_sha2_password’ cannot be loaded: dlopen(…/Frameworks/caching_sha2_password.so, 2): image not found解决问题1.打开终端,输入 mysql -u root -p 回车
2021-08-09 10:19:23 404
原创 前端小白从入门到进阶必备的N个网站(建议收藏)
文档学习类1.MDNMDN是一个完整的学习平台,你可以在这里深入学习Web技术以及能够驱动Web的软件,包括:网络标准(例如:CSS、HTML 和 JavaScript)、开发开放网络应用、开发 Firefox 附加组件。2.菜鸟教程菜鸟教程提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识,可以看做是前端开发字典,可在上边查漏补缺。3.W3CSchoolw3cschool是一个专业的W3
2021-08-05 13:45:05 3039 2
原创 .git/hooks/pre-commit: line 2: ./node_modules/pre-commit/hook: No such file or directory
解决办法:找到当前项目中.git/hooks 目录将该目录下的
2021-07-27 09:45:00 2543
原创 Vue3.0系列(二): VUE3.0组合API
一、Vue2.0 存在的问题:“使用data、computed、methods、watch 组件选项来组织逻辑通常都很有效。然而,当我们的组件开始变得更大时,逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人来说,这会导致组件难以阅读和理解。”。“这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外,在处理单个逻辑关注点时,我们必须不断地“跳转”相关代码的选项块。” – vue官网为了 将业务的 数据 和逻辑 结合在一起,Vue 3.0 提供了 组合式
2021-07-23 16:45:57 917 3
原创 将chrome浏览器已安装的扩展打包成 .crx文件
获取 谷歌浏览器扩展插件 .crx 类型扩展文件的方式有以下几种:1. 已安装,并且知道安装包地址:打开谷歌浏览器 => 地址栏输入 chrome://extensions/ => 回车 即可打开扩展页 => 点击 “打包扩展程序” => 选择扩展程序根目录, 打包即可2. 已安装,不知道安装包地址对于已经安装,但是不知道安装包所在地址的扩展程序,可通过第三方网站获取该扩展 .crx安装文件:打开谷歌浏览器 地址栏输入 chrome://extensions/
2021-07-16 16:00:32 1651
3DMax制作高度图 3ds max制作灰度图 heightmaps.doc
2020-06-25
GLUT工具包下载,内含glut.dll、glut.h、glut.lib、glut32.dll、glut32.lib五个文件
2020-03-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人