小晗同学-CSDN博客

原创小程序实现摄像头拍照 + 水印绘制

小程序端调用前置摄像头进行拍照，并且将拍好的照片添加水印后返回。下面的代码支持底部定点水印和整体背景水印。技术栈：uniapp、vue。后期还可以继续扩展多方位的定点水印和支持绘制多句话的背景水印...

2023-09-08 21:00:00 1555

原创 React + Next.js 搭建项目（配有对比介绍一起食用）

Next.js是一个React框架，它允许你使用React框架建立有利于SEO的、极度面向用户的静态网站和网络应用。它具有混合静态和服务器渲染、TypeScript支持、智能捆绑、路由预取等功能，无需额外配置。create-react-app与create-next-app的区别：前者是React官方出的构建React单页面应用的脚手架工具；后者是由Next.js的创建者正式维护，能快速构建新的Next.js应用程序，并设置好一切。App Router与Pages Router 的区别...

2023-08-26 18:30:00 2493 2

原创快速搭建 Nuxt2 项目

使用 Nuxt 框架可以帮助开发者快速搭建高性能的 Vue.js 应用程序，并提供了更好的代码组织结构、服务端渲染、自动路由配置和静态站点生成等功能，使得开发过程更高效、维护更容易，同时也提供了更好的用户体验和 SEO 优化。安装 create-nuxt-app 脚手架工具，快速搭建 Nuxt2 项目...

2023-06-26 11:42:26 1583 1

原创 Vue 3 + Vue-Cli 构建和初始化配置项目

使用 Vue 3 + Vue-Cli 构建和初始化配置项目，提供亲测可用的配置项示例，其中包含 eslintrc 文件的配置示例、prettier 配置示例、Axios 请求工具的封装、Store 配置统一导出、CSS 默认公用样式示例、Git 大小写敏感配置、VSCode 相关插件的更替等内容......

2023-06-19 17:47:23 2351 2

原创 Git 笔记 - git diff

git diff 命令用于显示提交和工作树之间的更改，若后面如果不带任何的参数，则一般情况下（工作区与暂存区中无相同改动的文件）显示的是当前工作区的文件与 Git 仓库中文件的差异。二般情况下（工作区与暂存区中有相同的文件）除了相同改动的文件显示的是当前工作区与暂存区的差异，其他文件同一般情况处理。git diff HEAD 一般情况下显示的是当前工作区和暂存区的文件与 Git 仓库中文件的差异。git diff commit 若后面只带有一个 commit，则显示的是 HEAD 与 commit 的差异。

2022-07-30 23:06:36 1043 2

原创 Git 笔记 - git log

git log 命令用于按从近到远的顺序显示提交日志，内容包括 commit id、作者、提交时间和提交信息等。可以从三种模式下对该命令进行详细了解，1. 提交限制模式，-number、--follow、--until、--since、--author、--commiter等。2. 信息简化模式，-p、--stat、--name-only、--abbrev-commit、--relative-date等。3. 定制模式，--pretty=online/short/format+指定格式等。.........

2022-06-25 11:45:00 1083

原创 Git 笔记 - git branch

git branch 用于操作分支：（1）列出本地分支 git branch（2）列出远程分支 git branch -r（3）列出本地和远程分支 git branch -a（4）新建分支 git branch 分支名（5）修改分支名字 git branch -m 新分支名（6）强制修改分支名字 git branch -M 原分支名新分支名（7）删除远程分支 git branch -r -d 分支名（8）查看分支的最新信息 git branch -v（9）查看是否合并到当前分支的分支...

2022-04-29 23:17:02 1252 1

原创 Git 笔记 - git pull

git pull 命令用于从远程获取代码并合并本地的版本，即 git pull = git fetch + git merge。git pull 远程主机名远程分支名:本地分支名可以将远程分支拉取到指定本地分支；git pull 远程主机名远程分支名可以将远程分支拉取到当前本地分支，即冒号后面的部分可以省略；git pull 可以拉取所有远程分支的新版本，并同步当前分支的本地代码，但要本地分支已经和远程分支建立了关联关系（使用 git branch -vv 查看）

2022-03-30 10:24:32 1154 1

原创 Git 笔记 - git reset

git reset 命令用于回退版本，可以指定退回某一次提交的版本。--mixed，默认参数。用于重置暂存区的文件回到某次的提交，工作区保持不变；--soft，用于回退到某个版本，暂存区和工作区不会被改变；--hard，撤销工作区中所有未提交的修改内容，将暂存区与工作区都重置到某版本。执行 reset 命令后，HEAD 会指向历史某版本，但后面的记录依然存在，只是看不到了。使用 git reflog + git reset 就能恢复：用 reflog 查到操作记录的 id，再使用 reset 回到该 id！

2022-02-26 11:08:20 631 1

原创 Git 笔记 - git rebase

git rebase 可以理解为重新设置基线，即将当前分支重新设置开始点。它基于一个分支（后面称该分支为公共分支）来设置当前分支的基线，将当前分支的开始时间轴向后移动到公共分支的最新跟踪提交的最后面，这样当前分支就是公共分支的最新跟踪分支了。rebase 会把当前分支的 commit 放到公共分支的最后面，所以叫变基。就像从最新公共分支又重新拉出来这个分支一样。不要在多人合作的公共分支里使用 rebase。举个例子：现有 master 主分支，小明从 master 拉取并创建了 dev 分支...

2022-01-29 16:35:54 1748 2

原创 Git 笔记 - git cherry-pick

你可以这样理解，git cherry-pick 是一个特别的 git merge。有时候不需要将一个分支全部的代码变动都进行合并，而是将部分的代码变动进行合并，即只合并一个或多个现有的提交。举例：现在有两个分支 master 和 test，希望能将 test 分支里的 commit_b 的提交合并到 master 分支里去......

2021-12-19 18:05:31 977

原创 Git 笔记 - git stash

git stash：备份当前的工作区的内容，将当前的工作区内容保存到 stash 中。它会从最近一次提交中读取相关内容，让工作区保证和最近一次提交的内容一致。参数 save：备份当前工作区内容提供备注信息；参数 list：显示 stash 内所有备份列表；参数 pop：恢复最近一次备份的内容；参数 apply：恢复最近一次或者某一次的备份内容；参数 drop：删除最近一次或者某一次的备份内容；参数 clear：清空 stash 中所有的备份记录和内容......

2021-11-18 21:21:00 554 1

原创 Git 笔记 - git commit

git commit 常用命令：选项 -m ，使用给定 msg 作为提交消息；选项 -a，修改文件后不需要执行 git add 命令，直接就能提交，新建文件除外；选项 -p，使用交互式界面来选择要提交的更改，让用户有机会在将修改后的内容提交前查看差异；选项 -C，获取现有提交对象 commitId ，并在创建提交时重用日志消息、作者信息、时间戳；选项 -c，与 -C类似；选项 -n，这个选项可以绕过 pre-commit 和 commit-msg ；选项 --amend，创建新提交来替换当前分支的提交信息；

2021-10-25 19:02:36 7525 1

原创 Git 笔记 - 基础操作之配置、提交、合并、撤销、回滚...

介绍Git的基础概念，即 git管理的项目拥有工作区，暂存区，Git仓库这三个区域，存在三种状态：已修改，已暂存，已提交。详细描述了如何安装并且配置好git。同时列举了很多git常用的基本命令，其中详细说明了git的分支与合并，撤销与回滚的相关操作；因为开发中会有多人合作开发项目，这个时候学习分支与合并操作就尤为重要了；并且在开发过程中难免会遇到提交代码后，感觉提交的代码差点意思，需要进行撤回和回滚，所以对这些操作必须得有了解，万一哪天就用上了呢，文章中分别对不同的提交情况列出了不同的解决方案......

2021-07-28 16:43:33 520 1

原创 React 生命周期

React生命周期：只有class组件有生命周期方法，函数组件没有生命周期方法。挂载卸载过程 constructor，componentWillMount，componentDidMount，componentWillUnmount；更新过程 componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate，componentDidUpdate，render；常用生命周期方法1. constructor()完成数据的初始化,接收props

2021-04-22 15:44:23 228

原创 React state&setState()

状态即数据；state 的值是对象{}，且为私有对象；函数组件：无状态（无 state）组件，即主要负责数据展示-->静；class组件：有状态（有 state）组件，即主要负责更新 UI-->动；应该使用setState()修改 State里面的值，这样才能重新渲染组件，牢记构造函数是唯一可以给 this.state 赋值的地方；解决事件绑定this指向：在事件处理的地方直接使用箭头函数（this 指向外部环境）；es5 中的 bind 方法，将 this 与实例绑定；利用箭头函数的 class实例方法

2021-04-22 15:29:27 233

原创 React 组件&Props

组件从概念上类似于 JavaScript 函数。它接受任意的入参，即 props，并返回用于描述页面展示内容的 React 元素。当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性以及子组件转换为单个对象传递给组件，这个对象被称之为props。组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props，但可以用新定义的变量来接收 props 里的数据，去修改这个新变量。或使用state，它允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出内容。

2021-04-22 12:04:59 467 1

原创 React 元素渲染

React 只更新它需要更新的部分。组件从概念上类似于 JavaScript 函数。它接受任意的入参（即 props），并返回用于描述页面展示内容的 React 元素。组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。应用程序的 UI 是动态的，并会伴随着时间的推移而变化，所以可以用新定义的变量来接收 props 里的数据，去修改这个新变量。或者使用state,在不违反上述规则的情况下，state 允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出内容。

2021-04-21 17:54:35 235 1

原创 React JSX简介

了解 JSX const element = <h1>Hello, world!</h1>上面的标签语法称为JSX，是一个JavaScript 的语法扩展。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 具有 JavaScript 的全部功能,它可以生成React 元素。在 JSX 语法中，可以在大括号内放置任何有效的JavaScript 表达式。 JSX 表达式里面只能有一个根节点，即需要用一个标签将内容包裹，可以使用<div></div>或空标签<></>

2021-04-21 17:29:20 280 1

原创 React 实现拖动滑动条的扫描滑动效果

页面需求：两张对比图片，实现拖动滑动条展现出扫描滑动效果，增强对比的效果。实现思路：一个大盒子，两张图片放在自己的小盒子里，小盒子堆叠（其中一个小盒子最初宽度为0），再来两个滑动条的图片（选中状态和未选中状态），给滑动条绑定onMouseDown事件，即当鼠标点下，再触发onMouseMove事件，监听鼠标滑动距离来修改初始宽度为0小盒子的动态宽度。注意：1. 绑定监听事件后，一定要记得销毁监听；2. 有些监听函数需要给该元素的父级绑定。

2021-04-15 11:00:49 1078 2

原创快速设置电脑自动关机

快速设置电脑自动关机：使用Win+R组合键，后在弹出的窗口中输入对应命令，或者也可以打开电脑控制台里面输入命令命令框中输入自动关机命令： shutdown -s -t 360，数字以秒为单位，即多少分钟后关机，360就是6分钟后关机；命令框中输入定时关机命令：at 21:30 shutdown -s，21:30自动关机，即到某设定时间，自动关机。回车后会出现提示：Windows将在某分钟后关闭。即电脑进入倒计时状态，倒计时结束电脑自行关闭。若想取消设定的自动关机命令，输入：shutdown -a

2021-03-26 15:09:03 433

原创超全的常用正则表达式

正则表达式是匹配特殊字符或有特殊搭配原则的字符的最佳选择。贪婪与非贪婪模式：在合法的情况下，正则表达式会尽量多去匹配。但若希望尽量少匹配字符，可以在表示数字的符号后面加上一个问号?。（例如：{n,}? 或*?或+?或??或{m,n}?）Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$;密码：^[a-zA-Z]\w{5,17}$;手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|...

2021-03-13 20:51:50 824

原创 Vue-cli 脚手架搭建项目

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：1. 通过 @vue/cli 实现的交互式的项目脚手架。2. 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。3. 一个运行时依赖 (@vue/cli-service)，这个依赖：（1）可升级；（2）基于 webpack 构建····4. 一个丰富的官方插集合，集成了前端生态中最好的工具。5. 一套完全图形化的创建和管理 Vue.js 项目的用户界面。快速创建项目：命令行和图形化界面创建

2021-02-28 23:58:52 5610 1

原创 HTTP 响应状态码

HTTP响应状态码 (HTTP Status Code)，也属于HTTP协议的一部分，用来标识响应的状态。响应状态码会随着响应消息一起被发送至客户端浏览器，浏览器根据服务器返回的响应状态码，就能知道这次HTTP请求的结果是成功还是失败了。常见响应状态码，2**成功响应相关；3**重定向相关；4**客户端响应相关；5**服务端响应相关

2021-02-12 00:52:12 2935 4

原创 JavaScript 事件处理模型：冒泡&捕获

JS事件处理模型：(1)事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素即自底向上。(2)事件捕获：结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素即自顶向下。(3)一个对象的一个事件类型绑定一个处理函数只能遵循一个事件模型，但是若一个对象的一个事件类型绑定两个处理函数，那么触发顺序：先捕获，后冒泡。(4)取消冒泡。(5)阻止默认事件：默认事件为浏览器通过HTML标签或DOM元素提供的一些功能性的性的默认行为。

2020-09-16 10:16:48 2502 1

原创 JavaScript 数组定义及常用方法详解！！！

JavaScript数组定义 01 方法一：构造函数（实例化）var arr = new Array(length/content); 02 方法二：字面量（隐式创建）var arr = []; 03 补充点：稀疏数组指索引不连续，数组长度大于元素个数的数组。JavaScript数组常用方法 01 改变原数组(push,pop,shift,unshift,sort,reverse,splice) 02 不改变原数组(concat,join,split,toString,slice)

2020-09-01 15:55:42 3731 1

原创 JavaScript 浅层克隆和深度克隆

浅层克隆和深度克隆1 相关知识点浅克隆就是将栈内存中的引用复制一份，赋给一个新的变量，本质上两个指向堆内存中的同一地址，内容也相同，其中一个变化另一个内容也会变化。深克隆就是创建一个新的空对象，开辟一块内存，然后将原对象中的数据全部复制过去，完全切断两个对象间的联系。区别：浅克隆和深克隆最大的区别就是对引用值的处理了，即浅克隆之后你改我也改，深克隆之后你改我不改。2 浅层克隆3 深度克隆 3.4 hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性，即是否有指定的键

2020-08-29 20:33:14 3358 2

原创 JavaScript “this“指向及习题

this指向四要点01 函数预编译过程（this -->window）02 全局作用域里（this --> window）03 call/apply（改变函数运行时this指向）3.1 定义和使用3.2 应用举例04 谁.function() (function()里面的this指向“谁”，即谁调用的这个方法，this就指向的是谁。)

2020-08-27 19:51:51 1282

原创 JavaScript 继承模式发展史（圣杯模式!!!）

JavaScript继承发展史：01 原型链（传统模式）优点：父类的方法和属性得到了复用。缺点：过多的继承了没用的属性，子类实例没有自己的属性。02 借用构造函数优点：子类的每个实例都有自己的属性，不会相互影响。缺点：没有实现父类方法的复用，不能继承借用构造函数的原型，每次构造函数都要多走一个函数。03 共享原型优点：用法简单。缺点：不能随便改动自己的原型。04 圣杯模式（important!）优点：中间生成了一个对象，起到了隔离的作用。既可以有父辈的属性和方法，改变自己的时候，也不会影响父辈的属性。

2020-08-27 17:36:10 1351 2

Yuki_yuhan的博客