认真的小孩有糖吃-CSDN博客

原创 react-dnd拖拽表单组件列表实例

API 学习：https://blog.csdn.net/gaofeng6565/article/details/115696823项目准备：https://codepen.io/选择React，AntDesign 模式，添加依赖 react-dnd(@14.0.2)，react-dnd-html5-backend(@14.0.0)ListDrag.jsimport React, { useState } from "react";import { Button } from "antd".

2021-04-14 14:28:28 1160 2

原创 react-dnd实现拖拽API学习

官网文档链接：https://react-dnd.github.io/react-dnd/docs/overviewReact DnD 是什么？React DnD是React和Redux核心作者 Dan Abramov创造的一组React 高阶组件，可以在保持组件分离的前提下帮助构建复杂的拖放接口。React DnD 的需求默认使用 HTML5 拖放API，但支持不直接操作 DOM DOM 和拖放的源和目标解耦融入HTML5拖放中窃取类型匹配和数据传递的想法React DnD 的

2021-04-14 14:11:06 1020

原创 slice, concat拷贝数据的理解

众所周知，数组在JavaScript中如果简单的赋值[数组A] = [数组B]，那么AB是共用同一个内存地址，修改A/B中任何一个都会造成两者一起变化。这个时候就涉及到数组拷贝问题使用slice()/concat()返回新数组实现拷贝这种方法可以很简单的实现数组拷贝，直接调用数组方法，在代码中一句话就能搞定。arr.slice(0): 数组的slice(star，end)方法，通过传入的参数截取数组，并且返回，截取后的数组，如果开头无结尾，就截取从开头到结尾的所有数据，slice()方法的数组是从

2021-03-20 19:39:46 368

原创 2021需要了解的JavaScript优化技巧

在这里，我会介绍一些新的语法糖，它可以优化你的 JavaScript 代码，使代码更简洁。下面是一份JavaScript 语法糖列表，你需要了解一下。1.包含多个条件的if语句//longhandif (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') { //logic}//shorthandif(['abc','def','ghi','jkl'].includes(x)){ }2. if...els.

2021-03-20 19:28:25 183

原创虚拟DOM也是操作DOM,为什么说它快？

1. 虚拟DOM也是操作DOM,为什么说它快？虚拟DOM 不会进行排版和重绘操作。虚拟DOM 进行频繁修改，然后一次性比较并修改真实DOM 中需要改的部分，最后在真实DOM 中进行排版与重绘，减少过多DOM节点排版与重绘损耗真实DOM 频繁排版与重绘的效率是相当低的虚拟DOM有效降低大面积（真实DOM节点）的重绘月排版，因为最终与真实DOM比较差异，可以只渲染局部总之，一切为了减少频繁的大面积重绘引发的性能问题，不同框架不一定需要虚拟DOM, 关键看框架是否频繁会引发大面积的DOM操作

2021-03-10 13:37:11 640 5

原创 Node.js 文件路径

系统中的每个文件都有路径。在Linux 和 macOS 上，路径可能类似于：/users/ca/file.txt在Windows 上则有所不同，具有类似一下的结构：C:\users\ca\file.txt当在应用程序中使用路径时需要注意，因为必须考虑到这种差异。可以使用以下方式将此模块引入到文件中：const path = reuqire("path");从路径中获取信息给定一个路径，可以使用以下方法从其中提取信息：dirname : 获取文件的父文件夹。 bas

2021-02-26 14:31:03 173 1

原创 nodejs内置模块fs的使用

fs.stat 检测是文件还是目录 fs.mkdir 创建目录 fs.writeFile 创建写入文件 fs.appendFile 追加文件 fs.readFile 读取文件 fs.readdir 读取目录 fs.rename 重命名 fs.rmdir 删除目录 fs.unlink 删除文件 fs.createReadStream 从文件流中读取数据 fs.createWriteStream 写入文件 fs.stat检测是文件还是目录 const fs=require(

2021-02-23 17:18:27 354 2

原创微信小程序背景音频播放

在onShow函数中const backgroundAudioManager = wx.getBackgroundAudioManager()backgroundAudioManager.title = '此时此刻'backgroundAudioManager.epname = '此时此刻'backgroundAudioManager.singer = '许巍'backgroundAudioManager.coverImgUrl = 'http://y.gtimg.cn/music/phot

2021-02-22 16:43:27 214

原创 git创建分支，提交代码，删除分支

拉取代码：(默认拉取的是master分支的代码)git clone https://xxxxxx.gitgit branch 查看本地分支git branch -a 查看远程端的所有分支创建分支：（默认是基于当前所在分支创建的）git checkout -b feature/aaa 本地多了一个分支名为 pgf 并且会自动切换到当前分支git add . 提交修改的/ 新建的内容到暂存区git commit -m "提交内容的描述信息" 把暂存区的内容添加到本地仓库g...

2021-02-19 15:59:15 262

原创 react-cropper图片裁剪，旋转应用

最近写项目，遇到一个有意思的需求，分享一下实现过程：需求简单描述：对现有图片（网络路径）进行裁剪，也可以上传一张图片进行裁剪，旋转，达到自己想要的效果。应用技术：react hook，ant-design，react-cropper（插件）项目中需要安装插件:npm install react-cropper --save-dev注：这里用的react-crooper 版本号 @1.2.0 ，不同版本存在使用中的差异，所以这里注明当前例子使用的是1.2.0。组件中引用：imp

2021-02-07 11:20:02 1151

原创移动端布局rem换算理解

vw100vw = 屏幕宽度vh100vh = 屏幕高度根节点字体大小1rem = 1html 的字体大小相关参数：widthinitial-scalemaximum-scaleuser-scable假设给定设计稿的宽度是750px，按照这样的计算方式得到：750px = 100vw100px = 100/(750/100)vw = 100/7.5 vw100px = 13.33333vw这个时候设置 html 的font-size..

2020-09-23 16:22:47 735

原创 webpack@3基础配置学习

注：此文中 webpack 使用的版本是 3.12.0，webpack-dev-server 2.11.51、全局安装webpacknpm install webpack -g --save2、创建项目并初始化新建项目文件夹（例如：webpack-demo） vscode 打开此文件夹，初始化项目 npm init -y3、在项目中安装 webpack 并添加 webpack 的配置信息npm install [email protected] -D // @3.12.0指定安装..

2020-09-11 17:46:12 521

原创 css3动画（三维立方体）

话不多说先上效果：HTML<div> <div class="td-cube"> <ul> <li class="front">1</li> <li class="back">2</li> <li class="top">3</li> <li class="bottom">4</li> <li class="left"&g

2020-08-10 17:58:35 211

原创数组去重的方法总结

1、最简单方法（indexOf 方法）实现思路：新建一个数组，遍历要去重的数组，当值不在新数组的时候（indexOf 为 -1）就加入该新数组中；function unique(arr){ var newArr = []; for(var i = 0; i < arr.length; i++){ if(newArr.indexOf(arr[i]) == -1){ newArr.push(arr[i]) } }

2020-08-10 17:15:29 249

转载 js对象、原型、继承（学习篇）

想要搞清楚原型、原型链、继承这一堆概念之前首先要搞清楚对象是啥ECMAScript 中的对象其实就是一组数据和功能的集合。 ——— javascript 高级编程设计第三版对象是一种数据类型，js 中的数据类型分为原始类型和引用类型，原始类型也叫基本类型或者值类型。原始类型：Undefined、Null、Boolean、Number、String引用类型：Object上面提到了 Undefined、Null 这两种数据类...

2020-08-05 16:28:55 158

原创 Yarn命令详解

简介Yarn 对你的代码来说是一个包管理器。它可以让你使用并分享全世界开发者的（例如 JavaScript）代码。 Yarn 能够快速、安全、并可靠地完成这些工作，所以你不用有任何担心。通过Yarn你可以使用其他开发者针对不同问题的解决方案，使自己的开发过程更简单。使用过程中遇到问题，你可以将其上报或者贡献解决方案。一旦问题被修复， Yarn会更新保持同步。代码通过包（package）(或者称为模块（module）) 的方式来共享。一个包里包含所有需要共享的代码，以及描述包信息的文...

2020-07-16 14:13:54 1054 1

原创 redux学习之demo

1、demo 解析2、新建一个react项目3、项目大概这个样子4、先给自己建立一个Store库，这就是你redux数据的仓库了store文件夹下有两个文件，（1）reducers，把你各个页面的reducer汇合起来，给他们起不同的好听的名字，我这里只有一个home页面import { combineReducers } from 'redux'import home from 'pages/home/reducer'export def...

2020-06-23 14:05:56 298

原创 redux源码学习

在做了一段时间react 项目之后，发觉自己遇到了瓶颈，给定的项目能按照react , redux 固定的模式来套用实现效果，然而深究却不知其意，一直在做无谓的代码搬运工而已，为了改变自己当下这种状态，找了很多对 redux 源码解析的例子，大多写的不明所以，思路不清晰，直到看了这篇文章【redux源码解析】，心中豁然开朗，故作为笔记记录一下。redux源码解析1、首先让我们看看都有哪些内容2、让我们看看redux的流程图Store：一个库，保存数据的地方，整个项目只有一...

2020-06-19 18:02:46 167 1

原创 Mongodb在nodejs中的初步尝试

此篇仅介绍mongodb的安装与使用，可在上一篇【nodejs和express 初步学习之（get,post接口）】的基础之上进一步学习。1.安装mongoose模块npm install mongoose --save2.加载mongoose核心模块var mongoose = require(‘mongoose’);3.指定连接本地数据库端口和数据库名mongoose.connect(‘mongoose://localhost:27017/Test’);4. ...

2020-06-16 14:56:23 115 1

原创 nodejs和express 初步学习之（get,post接口）

1. 新建文件夹命名为 node-demo//进入node-demo 文件夹cd xxx/node-demo 回车2. 初始化项目文件，并安装依赖包 express// 初始化项目目录npm init// 安装 express 依赖包npm install express --save// 安装 body-parser npm install body-parser --save// 安装 multernpm install multer --save3. 在项目目录

2020-06-16 10:43:44 1230 1

原创 MongoDB 语法基本操作整理

1: use dbname切换到某个数据库，如果不存在，则会创建并切换。2: show dbs 查询所有的数据库。3 db.createCollection("表名")在数据库中创建一张表（数据集合），这个命令不常用，通过db.表名.insert() 使用表时如果不存在会自动创建。4 show collections查看当前数据库中所有的表（数据集合）(数据集合类似于关系型数据库中的表)5: 数据集合.insert()---》db.people....

2020-06-02 15:03:02 1715

原创 Mongodb安装与可视化工具配置

1.安装与配置1.1 安装包安装（安装方式一）mac 下下载地址：https://www.mongodb.com/download-center/community下载安装即可。1.2 命令行安装（安装方式二）# 进入 /usr/localcd /usr/local# 下载sudo curl -O https://fastdl.mongodb.org/osx/mongodb-osx-ssl-x86_64-4.0.9.tgz# 解压sudo tar -zxvf mong

2020-06-02 14:59:32 625

原创 svn使用总结

1. 进入官网，找到相关的版本进行下载。注意系统是32位还是64位。下载完成进行安装。2.安装完成打开软件，如下图：3.下面新建一个项目版本库，在版本库上，右键选择新建Repository。4.弹出如下窗口，输入项目名称，然后点击下一步。5.接下来，选择第二项，即图中所圈选项，然后下一步。6.之后，弹出窗口，采用默认设置，点击Create创建，直到Finish完成。7.文档结构如下：8.新建用户，在Users右键新建，弹出窗口，输入...

2020-05-29 15:36:47 367 1

原创正则使用实例整理

1、只是不能输入空格<input type="text" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">2、不能输入空格及英文状态下的逗号<input type="text" onkeyup="this.value=this.value.replace(/[, ]/g,'')">3、只能输入数字方式一：<input type="text" maxlength="11" onkeyu

2020-05-29 14:55:36 231 1

原创 vue移动端引入swiper

最终效果：注：vue 版本：2.5.2 vue-awesome-swiper 版本：3.1.3 ，如果需要使用swiper 不需单独引入1. 引入 vue-awesome-swipernpm install [email protected] --save-dev2. 页面使用<swiper ref="mySwiper1" :options="swiperOption"> <swiper-slide> ...

2020-05-27 17:25:23 1820 3

原创图片上传篇（base64格式，压缩上传）

1. html 准备<div class="upload_img"> <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none" /> <div @click="uploadFile"> <p>添加图片</p></div>2. 获取到选择的图片，检查选择的是否是图片

2020-05-26 16:05:13 552

原创微信公众号开发篇（获取经纬，地图导航）

1. 引入jssdk在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。备注：支持使用 AMD/CMD 标准模块加载方法加载//安装npm install weixin-js-sdk --sa...

2020-05-25 16:56:19 1551 1

原创微信公众号开发篇（扫一扫）

1. 引入jssdk 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js 如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。备注：支持使用 AMD/CMD 标准模块加载方法加载//安装npm install weixin-js-s...

2020-05-25 16:39:58 960 1

原创 node版本管理之 nvm 安装与使用

卸载已安装到全局的 node/npm如果之前是在官网下载的 node 安装包，运行后会自动安装在全局目录，其中 node 命令在/usr/local/bin/node，npm 命令在全局node_modules目录中，具体路径为/usr/local/lib/node_modules/npm安装 nvm 之后最好先删除下已安装的 node 和全局 node 模块：npm ls -g --depth=0 # 查看已经安装在全局的模块...

2020-05-15 16:48:00 951 3

gaofeng6565的博客