工作&笔记

周粥舟轴

已于 2023-02-15 19:48:10 修改

阅读量275

点赞数

文章标签：前端 react

于 2022-11-26 13:18:58 首次发布

本文链接：https://blog.csdn.net/qq_48438492/article/details/128049579

版权

🐛 GIT

Git 提交代码到远程仓库

1、将代码存到暂存区
git add .
2、提交详情（查看下方commit规范）
git commit -m “feat: update”
3、拉取一次代码（避免提交冲突）
git pull
4、将代码推送到远程分支
git push

Git Commit 规范

feat : 新特性
fix: 修改问题
refactor: 代码重构
docs: 文档修改
chore: 其他修改
test: 测试用例修改
style:代码格式修改

git 创建分支并推送远程

1、在本地创建一个分支
git branch 分支名
2、查看当前自己所在的分支
git branch
3、查看所有分支以及自己当前所在的分支
git branch -a
4、切换分支
git checkout 分支名
5、新增并切换到改分支
git checkout -b 分支名
6、推送新分支到远程
git push --set-upstream origin 分支名
7、删除本地分支
git branch -d 分支名
8、删除远程分支
git push origin -d 分支名

git 分支合并到master

1.首先切换到自己的分支(比如分支叫：feature)
git checkout feature
2.把本地分支拉取下来
git pull 或者 git pull origin feature
3.切换到主分支master
git checkout master
4.合并代码到主分支上
git merge feature
5.可以 git status 检查一下是否合并成功，是否有冲突
6.检查没问题，推送代码
git push 或者 git push origin master

Git 冲突

待更新

Git 版本回退

回退到上一个版本
git reset –hard HEAD^
回退到上2个版本
git reset –hard HEAD~2
回退到指定版本，可以先git log查看版本号
git reset --hard 版本号

🧐 Node

npm 报错处理

1.解决npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dep
查阅相关资料后说原因是：安装的包与已经存在的包有冲突。
解决方法：使用npm install xxx – force或者npm install xxx --legacy-peer-deps来安装。

--legacy-peer-deps

--force

💎 React

React Native

待更新

React踩坑

待更新

偶遇到的实用小组件

1.react-json-view
一个可以对jswon对象进行渲染的组件，样式自由度较高
详细开发文档可参考 react-json-view

2.antd charts 折线图自定义筛选
自定义一个table筛选，配合数据切换，颜色切换
效果图：
在这里插入图片描述
代码详解：待更新

3.ahooks - useScroll (监听元素的滚动位置)
可以监听元素的位置，控制元素的滑动
效果图：
在这里插入图片描述
代码详解：

  //引入ahooks
  import {useScroll} from "ahooks"
  
  //使用ref,进行元素绑定，绑定所需监控位置的元素
  const ref = useRef(null);
  const scroll = useScroll(ref);
  console.log(scroll); //打印结果 ： 例-{"left":0,"top":0} 
  //同时可以改变 left 和 top ，进行元素的横向与纵向滑动。💫

**3.React-highlightl **
高亮显示，可用于代码展示
效果图 :
在这里插入图片描述
代码详解：

//引入依赖
import Highlight from "react-highlight";
//可以自己选择主题样式，在node_modules/highlight.js/styles/你喜欢的样式名
import "react-highlight/node_modules/highlight.js/styles/nnfx.css"; 
const defaultValue = `
//可以高亮展示代码
const App = () => {
  return (
    <Highlight className="java">组件的使用</Highlight>
  )
};
export default App;
`
//下面可以自己使用这个组件了
//例如：
  <Highlight className="java">{ defaultValue}</Highlight>

🙅🏻‍♀️ 前端常备

屏幕自适应布局

待更新

老生常谈 ~ Flex

待更新

善用正则

//由数字、26个英文字母或者下划线组成的字符串:
    ^[0-9a-zA-Z_]{1,}$
//非负整数（正整数 + 0 ）:
    ^/d+$
//正整数:
    ^[0-9]*[1-9][0-9]*$
//非正整数（负整数 + 0）：
    ^((-/d+)|(0+))$
//负整数 :
    ^-[0-9]*[1-9][0-9]*$
//整数:    
    ^-?/d+$
//非负浮点数（正浮点数 + 0）:
    ^/d+(/./d+)?$
//正浮点数 :
    ^(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*))$
//非正浮点数（负浮点数 + 0）:
    ^((-/d+(/./d+)?)|(0+(/.0+)?))$
//负浮点数 :
    ^(-(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*)))$
//浮点数 :
    ^(-?/d+)(/./d+)?$
//由26个英文字母组成的字符串 :    
    ^[A-Za-z]+$
//由26个英文字母的大写组成的字符串 :
    ^[A-Z]+$
//由26个英文字母的小写组成的字符串 :
    ^[a-z]+$
//由数字和26个英文字母组成的字符串 :
    ^[A-Za-z0-9]+$
//由数字、26个英文字母或者下划线组成的字符串 :    
    ^/w+$
//email地址 :
    ^[/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+$
//url:    
    ^[a-zA-z]+://(/w+(-/w+)*)(/.(/w+(-/w+)*))*(/?/S*)?$
//年-月-日:
    /^(d{2}|d{4})-((0([1-9]{1}))|(1[1|2]))-(([0-2]([1-9]{1}))|(3[0|1]))$/
//月/日/年:
    /^((0([1-9]{1}))|(1[1|2]))/(([0-2]([1-9]{1}))|(3[0|1]))/(d{2}|d{4})$/
//Emil:
    ^([w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$
//电话号码:
    (d+-)?(d{4}-?d{7}|d{3}-?d{8}|^d{7,8})(-d+)?
//IP地址:
    ^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$
//匹配中文字符的正则表达式：
    [/u4e00-/u9fa5]
//匹配双字节字符(包括汉字在内)：
    [^/x00-/xff]
//匹配空行的正则表达式：
    /n[/s| ]*/r
//匹配HTML标记的正则表达式：
    /<(.*)>.*<///1>|<(.*) //>/
//匹配首尾空格的正则表达式：
    (^/s*)|(/s*$)
//匹配Email地址的正则表达式：
    /w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*
// 匹配网址URL的正则表达式：
    ^[a-zA-z]+://(//w+(-//w+)*)(//.(//w+(-//w+)*))*(//?//S*)?$
//匹配账号是否合法(字母开头，容许5-16字节，容许字母数字下划线)：
    ^[a-zA-Z][a-zA-Z0-9_]{4,15}$
// 匹配国内电话号码：
    (/d{3}-|/d{4}-)?(/d{8}|/d{7})?
//匹配腾讯QQ号：
    ^[1-9]*[1-9][0-9]*$
//只能输入数字：
    ^[0-9]*$
//只能输入n位的数字：
    ^/d{n}$
//只能输入至少n位的数字：
    ^/d{n,}$
//只能输入m~n位的数字：
    ^/d{m,n}$
//只能输入零和非零开头的数字：
    ^(0|[1-9][0-9]*)$
//只能输入有两位小数的正实数：
    ^[0-9]+(.[0-9]{2})?$
//只能输入有1~3位小数的正实数：
    ^[0-9]+(.[0-9]{1,3})?$
//只能输入非零的正整数：
    ^/+?[1-9][0-9]*$
//只能输入非零的负整数：
    ^/-[1-9][0-9]*$
//只能输入长度为3的字符：
    ^.{3}$
//只能输入由26个英文字母组成的字符串：
    ^[A-Za-z]+$
//只能输入由26个大写英文字母组成的字符串：
    ^[A-Z]+$
//只能输入由26个小写英文字母组成的字符串：
    ^[a-z]+$
//只能输入由数字和26个英文字母组成的字符串：
    ^[A-Za-z0-9]+$
//只能输入由数字和26个英文字母或者下划线组成的字符串：
    ^/w+$
//验证用户密码(正确格式为： 以字母开头，长度在5~17 之间，只能包含字符、数字和下划线)
    ^[a-zA-Z]/w{5,17}$
//验证是否包含有 ^%&',;=?$/"等字符：
    [^%&',;=?$/x22]+
//只能输入汉字：
    ^[\u4e00-\u9fa5]{0,}$
//只含有汉字、数字、字母、下划线不能如下划线开头和结尾
    ^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$
//只含有汉字、数字、字母、下划线，下划线位置不限
    ^[a-zA-Z0-9_\u4e00-\u9fa5]+$
//2~4个汉字
    @"^[\u4E00-\u9FA5]{2,4}$正则表达式
//url
//第一位是【1】开头，第二位则则有【3,4,5,7,8】，第三位则是【0-9】，第三位以后则是数字【0-9】。
var reg = /^1[3|4|5|7|8][0-9]{9}$/;
//手机号第二位不作限制
var reg = /^1[0-9]{10}$/;spa

阿里云图片压缩

前往详细说明（点击跳转）

🛎️ 数据处理

在实际开发中，后端返回的数据格式千奇百怪，前端需要对数据进行处理，得到我们“期望”的数据结构，方便我们使用

抽丝剥茧

常用到：

//对数据进行展开，一层层拿到想要的数据，进行构造🎈
Object.entries(data).forEach(([key,value]) =>{
  console.log("key",key)
  console.log("value",value)
})

🚨 展望

自己最近想做的 “小玩意儿”，就是玩~ （后期考虑将工具类进行融合）

网易云热评（独自emo）

待更新

在线json数据查看器

待更新

在线十六进制颜色转化显示

待更新

在线时间戳转各种形式时间

待更新