自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(367)
  • 资源 (4)
  • 收藏
  • 关注

原创 React 中实现拖拽功能-插件 react-beautiful-dnd

拖拽

2024-02-04 07:22:38 688

原创 发布订阅模式的应用:解决react中复杂层级的数据交互

这种情况往往是不知道跨越多少不同层级的情况。以自定义事件为调度中心,创建一个。:商品加入购物车的操作。

2024-02-02 08:00:16 414

原创 深拷贝的几种方法

1、JSON.parse()和JSON.stringify()可以将JavaScript对象序列化为一个JSON字符串,再使用JSON.parse()将其解析为一个新的对象,从而实现深拷贝。需要注意的是,该方法只能处理部分数据类型,例如字符串、数字、布尔值、数组和对象等。对于函数、Date对象、正则表达式等类型,则无法正确地进行序列化和反序列化。当对象内存在undefined、symbol、function类型的属性时,在序列化过程中会被忽略;

2024-02-02 07:52:06 444

原创 webpack 入门1

当 webpack去解析 jquery的时候,会去解析jquery这个库是否依赖其他的包。我们对于这类不会依赖其他包的库,我们在打包时没有必要去解析,提高打包效率。举例,我们打包一个React项目,把一些不常改动的依赖包,如:react, react-dom, axios,antd等单。第二次打包时,就会发现这些包已经打包好了不需要再打包,这样可以提升性能。template:'./public/index.html',//页面模版。module中的一个属性,作用:不去解析指定的库依赖,提高打包效率。

2024-01-29 07:59:17 403

原创 history路由解决刷新出现404的问题2

同时需要注意在使用 History 模式时,需要保证所有路由的访问路径都指向 index.html,否则仍然会出现404错误。以 Nginx 为例,需要在。

2024-01-23 07:42:18 431

原创 history路由解决刷新出现404的问题

1. 前端项目写完之后,把src件夹打包 (利用webpack、babel把项目里面的jsx / vue 、scss文件变异成js、css和html),命令如下。在项目打包上线时,如果采用的是哈希模式,不会出现404,原因是 url 中 # 号后面的内容不会发给后端当作资源路径请求服务器。1. 根据前端发送的请求以及后端已有的资源路径做判断(正则)匹配,区分哪些是前端路由哪些是后端路由。该html文件需部署在服务器上才能正常显示(只有一个html文件,是因为项目本身是SPA),

2023-12-05 07:34:36 676

原创 webpack对项目优化

webpack对项目优化

2023-01-30 22:51:20 177 1

原创 React全局变量

React全局变量

2022-10-18 00:40:16 3010

原创 js获取当前浏览器窗口大小;修改url地址,但不刷新页面。

获取当前浏览器窗口大小.

2022-10-18 00:18:58 797

原创 js页面滚动,设置锚点,控制页面滚动到某个节点位置

页面滚动,设置锚点

2022-10-17 23:51:30 4244

原创 css设置 图片根据宽或高 等比例缩放

common {}

2022-09-05 07:54:39 4736

原创 前端免安装Nginx 部署

前端不安装Nginx情况下部署

2022-06-29 08:31:59 940

转载 Webpack Proxy工作原理?为什么能解决跨域?

是什么webpack proxy,即 webpack 提供的代理服务基本行为就是接收客户端发送的请求后转发给其他服务器其目的是为了便于开发者在开发模式下解决跨域问题(浏览器安全策略限制)想要实现代理首先需要一个中间服务器,webpack 中提供服务器的工具为 webpack-dev-serverwebpack-dev-serverwebpack-dev-server 是 webpack 官方推出的一款开发工具,将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起

2022-05-09 00:56:22 510

原创 纯函数,,

纯函数是这样一种函数,即相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用通俗来讲就两个要素:1.相同的输入,一定会得到相同的输出。2.不会有“触发事件”、更改外部输入参数、依赖外部变量数据、打印log等等副作用。/*不是纯函数,因为同样的输入,输出结果不一致*/function a( count ){ return count + Math.random();}/*不是纯函数,因为外部的 arr1 被修改了*/function b( arr ){ return ..

2022-03-20 17:06:30 154

原创 正则使用.

1.请编写js函数,该函数将一个骆驼命名的变量标识符,修改成下划线命名。如:"testAddOrEdit"->"test_add_or_edit"functionfn(str){returnstr.replace(/([A-Z])/g, "_$1"),toLowerCase();//()有什么作用呢?"testAddOrEdit".replace(/([a-z])[A-Z])/g,"$1_$2")注意:这里有$0\$1\$2...,这是由于表达式有(),表达式有子表达式。因为有3个子...

2022-03-20 17:05:44 489

原创 高阶函数和闭包、函数柯里化

高阶函数:使用回调函数就使用过高阶函数啦。柯里化:就是函数和参数结合产生一个新函数。柯里化是固定部分参数,返回一个函数接受 剩余参数,的函数结构。目的为了缩小适用范围,创建一个针对性更强的函数。核心思想是把多参数传入的函数拆成单参数(或部分)函数,内部再返回调用下一个单参数(或部分)函数,依次处理剩余的参数。而反柯里化,从字面讲,意义和用法跟函数柯里化相比正好相反,扩大适用范围,创建一个应用范围更广的函数。使本来只有特定对象才适用的方法,扩展到更多的对象。// ES6方式!function

2022-03-20 16:13:01 224

原创 js在浏览器上怎样直接预览 .log文件

工作中遇到需要在浏览器上直接预览.log,.conf这样的文件。const fn = (url: string)=> { const res = await request(url); const win = window.open("", '_blank'); win.document.write(`<pre>${res}</pre>`) win.document.close()}...

2022-03-20 00:05:06 949

原创 安装nginx详细步骤

// 1.连接服务器jiapengtao@edzdeMacBook-Pro/%sudossh121.10.36.11Password:[email protected]'s password:WelcometoAlibabaCloudElasticComputeService!// root用户目录下及查看目录[root@iZbp17ebha43uzqhnutg2pZ~]#ls-al// 切换到服务器根目录[root@iZbp17ebha43uzqhnutg2pZ~...

2021-10-19 01:41:12 369

转载 Authentication failed for “http://xxxxxx“

这是因为修改了用户名或密码导致验证出现问题,所以解决问题的办法就是使用新密码重新登录就好了。1、配置用户信息git config --global user.name [username]git config --global user.email [email]2、查询用户信息git config --list3、如果push遇到在输入密码是错误的后,就会报这个错误fatal: Authentication failed for解决办法:git config --sy

2021-08-20 08:57:54 1982

转载 使用moment.js轻松管理日期和时间

当前时间:moment().format('YYYY-MM-DD HH:mm:ss'); //2014-09-24 23:36:09今天是星期几:moment().format('d'); //3转换当前时间的Unix时间戳:moment().format('X');相对时间20120901相对当前日期是2年前moment("20120901", "YYYYMMDD").fromNow(); //2 years ago7天后的日期:moment().add('days'...

2021-08-02 02:17:33 366

转载 如何快速完全删除node_modules

1.安装npm包–rimrafnpm install rimraf -g2.在cmd指令下,进入所需删除的node_modules的 项目文件夹里,再输入指令rimraf node_modules3.简单粗暴得秒删完成

2021-07-31 19:24:52 308

转载 git commit -m

细说 commit 的参数详细。Header包括三个字段:type、scope和 subject。(scope可选)git commit -m 'fix: #512 bug'git commit -m 'feat($login): remember user name'(1)typetype用于说明 commit 的类别,只允许使用下面7个标识:feat : 新功能fix : 修补bugdocs:文档style:格式refactor:重构test : 增加测试chore:

2021-07-31 19:19:03 1385

原创 修改hosts文件

1. window系统修改路径:2. Mac系统打开终端输入:sudo vim /etc/hosts打开hosts文件,键盘输入 i (插入),修改hosts文件后,按 esc 键退出,再按shift+:键,再输入w和q,保存退出。二、Hosts是干啥用的1. hosts就相当于本地的一个dns缓存,比如说什么需要访问一个网站,如果没有hosts文件的本地解析的话就需要的浏览器访问远程的dns解析服务器,等待dns服务器返回ip信息后我们的浏览器才可以向目标网址所指向的服务器发出请.

2021-07-01 00:19:23 2348

转载 js取整数、取余数的方法

取整1.取整// 丢弃小数部分,保留整数部分parseInt(5/2)  // 22.向上取整// 向上取整,有小数就整数部分加1Math.ceil(5/2)  // 33.向下取整// 向下取整,丢弃小数部分Math.floor(5/2)  // 24四舍五入// 四舍五入Math.round(5/2)  // 3取余// 取余6%4  // 2...

2021-03-16 09:07:50 369

原创 vscode 前端警告记录解决

1. propType [name] is not required, but has no corresponding defaultProp declaration原因:没有设置defaultProp 默认值。UploadImageList.defaultProps = { value: [], onChange: () => { },}UploadImageList.propTypes = { value: PropTypes.array, onChange:...

2020-12-04 00:28:22 2379

原创 事件冒泡 + 拖拽 + 图片懒加载 + 生命周期演示

1.<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> 表单,设置默认值</title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script sr

2020-09-20 01:55:18 200

原创 js数组分组、去重、

例,将数组中的连续数字分组oldArr = [1,2,3,7,8,9,15,17,18,19] 根据这个数组可以得到以下一个二维数组 newArr = [[1,2,3],[7,8,9],[15],[17,18,19]]function fn(arr){ var result = [], i = 0; const list = arr.sort((a, b) => a-b); list.forEach((item, index) => { i

2020-09-16 00:12:42 1685

原创 WebSocket 聊天室demo

阮一峰的网络日志WebSocket教程http://www.ruanyifeng.com/blog/2017/05/websocket.html koa2+WebSocket聊天室demo:https://github.com/ThenMorning/koa2WebSocket/blob/master/client.html代码参照该demo所写

2020-09-07 08:05:35 141

原创 iframe 嵌入页面后无法显示的问题

查看浏览器控制台发现:X-Frame-Options可用于指示是否应该允许浏览器呈现在一个页面<FRAME>或 <IFRAME>中. 以确保网站内容是不是嵌入到其它网站.<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="X-Frame-Options" content="SAMEORIGIN / D...

2020-09-04 09:12:40 18166

原创 VScode 函数与后面括号之间加空格

vscode的设置文件在vscode的:file 》首选项 》setting代码如下:{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候自动格式化 "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格

2020-07-25 00:27:48 15165

原创 Git中出现Fatal:Could not read from remote repository.的问题。

Git中出现Fatal:Could not read from remote repository.的问题。Git全局配置和单个仓库的用户名邮箱

2020-07-11 14:49:38 309

原创 修改 hosts文件

1.找到c盘这个目录:C:\Windows\System32\drivers\etc2. mac系统 打开终端(应用程序——实用工具),运行: sudo vi /etc/hosts

2020-03-04 20:15:31 147

原创 使用nvm 管理 node版本

参考文档:https://github.com/nvm-sh/nvm#install--update-script步骤:依次执行下面两个命令。curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bashexport NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}...

2019-12-20 01:38:20 575 1

原创 Git 命令提交代码

0. 拉取某项目代码:先cd到某个目录下。 git clone xxxxx某项目git地址。 cd 项目名1. git放弃本次某文件的修改git status //查看当前分支更新内容。 git checkout -- src/page/xxxxx/xxxx.js // src路径下的文件2. git切换远程分支git branch //查看已有分支。...

2019-12-07 12:42:05 4727

原创 在线json格式化工具

https://www.json.cn/#

2019-10-16 09:33:28 255

转载 css3 实现左右布局

.box{ display: flex; justify-content: space-between;//左右平均布局 width:300px; height: 300px; background: pink;}.left ,.right{ background: red; width: 100px; height: 100px;}————————...

2019-10-16 09:31:11 551

原创 hook使用记录

最近有前端项目使用了hook,就使用中遇到的问题总结。1. hook中没有了this的概念,因此在遇到触发事件函数要传递参数时,要写成匿名函数的形式(因为传参数时没有了事件绑定bind这个方式)。2. 组件销毁时,可在其匿名函数的形式中重置组件的store里的状态。3. useEffect函数使用时,后面要带个参数,表示参数变化时才会再次执行。若不带参数,会形成死循环。4. 若ho...

2019-09-29 02:24:38 438

转载 window系统中生成github的公钥文本

转载:https://jingyan.baidu.com/article/3aed632ed01dd17010809127.html工具/原料 window操作系统 已经安装好的git工具 方法/步骤 首先去安装好git,如果没有安装好可以去官网下载, 下载地址为:https://git-scm.com/downloads 安装好后,点击鼠标右键,...

2019-08-03 12:05:09 251

转载 javascript对象的浅拷贝、深拷贝和Object.assign方法浅析

javascript对象的浅拷贝、深拷贝和Object.assign方法浅析这篇文档写的很好https://segmentfault.com/a/1190000014107100

2019-07-11 09:29:26 232

原创 js根据年月,获取当前月的天数。

(new Data(2019,5,0)).getData();

2019-04-28 09:08:06 2013 1

电脑屏幕录制软件

这是一个不错的电脑屏幕录制软件,操作简单,可靠。视频录制。

2018-01-19

MQtt 数据交互工具

MQtt协议开发项目时,用于产生数据的工具,以便为开发提供模拟数据。项目测试对接工具。

2018-01-05

Linux版的 Postman工具

Linux版的 Postman工具

2018-01-05

64位swt.jar包

Cannot load 32-bit SWT libraries on 64-bit JVM 怎么解决?

2017-10-10

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除