前端Beginners-CSDN博客

原创 react 的路由传参

1、路由传参1、动态路由传参使用prop进行接收 props.match.params.参数名2、query传参this.props.history.push({pathname: ‘路由’,query:{参数名：参数值}})接收:this.props.location.query.参数名3、state传参this.props.history.push({pathname: ‘路由’,state:{参数名：参数值}})接收:this.props.location.state

2022-05-19 15:24:28 8500

原创 React Router详解

在学习react-router时，应该对比着以前学习的router相关知识进行学习，比如：路由跳转，路由传参，路由重定向等，接下来会对react-router的学习进行记录，如果存在错误请谅解！在react的项目中需要在根目录下对react-router进行下载：npm i react-router-dom下载后需要对Route进行引入，是个内置的组件。该组件是有两个属性一个是path，一个是component，path是组件对应的路由，component是对应的组件import { Route

2022-05-13 17:04:56 3025

原创 Hook详解（二）

接着上次hook钩子函数的记录，本次主要是对剩下的Hook函数useMemo,useref,useContext,useRecuder,useRecuser进行学习记录1、useMemo(记忆组件)该Hook函数与上次讲的useCallback(记忆函数)的功能是类似的，结构也是类似，在使用是也是需要进行引入,传入的也是两个参数，第一个是函数，第二个是依赖数组，当数组中没有参数时,只会执行一次，状态变化也不会执行，当依赖中有值在该值发生变化后执行。import React, { useMemo, u

2022-04-30 17:27:45 679

原创 Hooks详解（一）

在React中，创建组件的方式有两种：类式组件和函数式组件。对于刚刚学习react的我（小白）类式组件还是比较容易理解和学习，因为在之前有Vue的学习基础，React的类式组件和Vue的组件可以对比着进行学习，相对来说还是比较容易的。没有学习过类式组件的可以自行进行学习，在这里就不过多说明。本文章是本人在学习React Hooks所总结的，其中为了方便理解不乏一些大白话，望理解！下面就开始Hooks的相关介绍吧！对比类式组件来说函数式组件中没有状态和生命周期，这就是hooks所产生的原因，可以让函数式组

2022-04-06 16:58:02 2140

原创 MongoDB基本指令

show dbs 显示当前所有数据库use 数据库名进入数据库（没有要进入的数据库也不会影响）db 表示当前所处的数据库show collections 查看数据库中有几个集合对数据库的增删改查CRUD）操作：插入：db.集合名.insert(doc{}) //向集合中插入一个文档插入多个就传一个数组就可，数字里是各个对象db.集合名.insert([ ])查找：db.集合名.find()

2022-04-01 16:29:34 63

原创 webpack-js的兼容性处理和语法检查

**js的语法检查**进行js语法的检查我们需要 eslint-loader 和 eslint注意我们只检查的是自己写的源代码，不检查第三方库(如果进行了检查会出现错误)我们还需要设置检查的规则，在package.json文件中eslinkConfig中进行设置在设置规则是我们需要airbnb规则，为了使用airbnb这个规则我们需要下载eslint-config-airbnb-base 和eslint-plugin-import{ test: /\.js$/, //对js文件

2021-06-18 14:57:46 199

原创 webpack--css的兼容性处理和压缩

css兼容性处理我们需要使用一个库：postcss 要想使用这个库，我们必须使用两个东西，一个loader和一个插件postcss-loader 和 postcss-preset-env所以我们需要进行下载：$ npm i postcss-loader postcss-preset-env -Dpostcss-preset-env的作用：帮助postcss找到package.json文件中的browserslist里面的配置，通过配置加载指定的兼容性样式由于我们是解决css兼容性的问题，所以

2021-06-12 18:29:16 121

原创 webpack开发环境的搭建

将所有的打包资源配置进行整合：const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { //入口文件 entry: './src/index.js', //输出文件 output: { path: path.resolve(__dirname, 'build'), filename: 'b

2021-05-23 16:13:58 97

原创开发环境webpack的基本配置

**下载：**$ npm i webpack webpack-cli -g 首先先全局安装$ npm i webpack webpack-cli -D 本地安装**运行指令：**1、开发环境：$ webpack “原入口文件路径” -o “打包到的文件路径” --mode=development2、生产环境：$ webpack “原入口文件路径” -o “打包到的文件路径” --mode=production使用webpack我们如果不进行配置的化只能处理js与json的

2021-05-21 10:13:21 158

原创 jQuery中Ajax的基本使用

**get请求：**$.get(URL,传递的参数，回调函数)$.get('http://127.0.0.1/server',{a:100,b:200},function(){....})**post请求：**(与get请求是一样的)$.post(URL,传递的参数，回调函数)$.post('http://127.0.0.1/server',{a:100,b:200},function(){....})还可以加第四个参数：（设置响应体的数据类型）$.get(‘http://

2021-05-20 09:54:55 66

原创 Ajax基本使用

由于Ajax是基于node的环境下进行的，所以我们在使用前先有确保已经下载node同时我们还需要进行下载express $ npm i express在script标签下进行书写const xhr = new XMLHttpRequest(); //设置请求方法和URL xhr.open('GET', 'http://127.0.0.1:3000/server'); //请求发送 xhr.send(); //事件绑定处理服务端返回的结果 //on

2021-05-18 10:35:37 87

原创 Gulp-其他文件的打包

**1、图片：**图片我们自己是不需要进行压缩的const imgHandler = function () {return gulp //这里要加return .src('./src/img/**') .pipe(gulp.dest('./dest/img/'))}//将图片文件打包任务导出module.exports.imgHandler = imgHandler;**2、videos：**video我们自己是不需要进行压缩的

2021-05-16 10:09:18 116

原创 gulp插件--html打包

下载：npm i -D gulp-htmlmin将js打包插件引入到gulpfile.js文件中const htmlmin= require(‘gulp-htmlmin’)得到的是处理流文件的函数在管道函数中直接使用就可以了,需要传递参数const htmlHandler = function () {return gulp //这里要加return .src('./src/html/*html') .pipe(htmlmin({

2021-05-13 10:22:59 159

原创 gulp插件--js打包

gulp-uglify将js文件进行压缩下载：npm i -D gulp-uglify将js打包插件引入到gulpfile.js文件中const uglify= require(‘gulp-uglify’)得到的是处理流文件的函数在管道函数中直接使用就可以了注意：不可以使用ES6语法，一旦使用就会发生报错一个创建一个导出相对应const jsHandler = function () {return gulp //这里要加return .src('./s

2021-05-05 22:24:47 287

原创 gulp常用插件 -- css打包

gulp的各种插件的作用是执行各种各样的压缩混淆转码任务的**1、gulp-cssmin**进行压缩css文件：去空格下载：npm i -D gulp-cssmin //导入：const cssmin = require(‘gulp-cssmin’) //在gulpfile.js文件中进行导入导入以后得到一个处理流文件的函数直接在管道函数里执行就好用法：在gulpfile.js文件中进行打包配置例子：简单的压缩css文件（这是gulp@3 的书写语法）const gu

2021-05-03 22:13:31 296

原创 gulp的常用API

1、gulp.task(任务名称，任务处理函数)作用：创建一个基于流的任务2、gulp.src(路径信息)作用：找到源文件例子：gulp.src(’.a/b.html’) 找到在a目录下找到b.html文件gulp.src(’.a/*.html’) 找到a目录下的所有html后缀文件3、gulp.dest(路径信息)作用：将一个内容放入指定路径下4、gulp.watch(路径信息，任务名称)作用：监控指定目录下的文件，一旦发生变化执行后面的任务5、gulp.series(任务

2021-05-02 16:51:55 150

原创 gulp的使用

我们必须要一个结构完整的目录由于我们在打包完我们的文件名与源文件名是一致的我们也是不可以进行改名的，如果我们更改了名字我们在引入相应的文件就会出现错误通常我们在项目文件夹下建立两个文件dist与src文件夹src文件夹下放我们的相关源码 html，css，jsdist文件夹下我们放我们打包过后的文件这个文件不需要我们自己区创建，在我们打包完成就生成了2、同时我们还需要建一个gulpfile.js的文件，与src同级在这个js文件里写我们整个项目的打包配置流程在每个项目在进行打包时，每次都需

2021-05-01 15:24:46 132

原创 Gulp初识

gulp是前端的打包构建工具打包：把文件压缩，整合，移动，混淆gulp是基于流的打包构建工具首先介绍什么是流：流有两种：流文件和流格式流文件：是一种文件传输格式，一段一段的进行传输流格式：从头到尾的加工过程，从源开始一步一步的进行加工，完成下一步是基于上一步的结果gulp是基于流格式打包构建工具gulp的依赖环境：依赖于node环境进行开发底层封装的就是node里的读写文件gulp的作用：对于css来说：压缩，转码（自动添加前缀）对于js文件：压缩，转码（ES6–>ES5）

2021-04-30 10:26:56 60

原创 svn与git

**svn：**svn存在的是每个版本的差异，需要内存比较小，但是回滚的速度比较慢优点：存储在单一的服务器，便于集中管理缺点：1、服务器宕机：写的代码得不到无法及时存储2、服务器损坏：整个项目丢失**git：**git每次存储的是项目的完整快照，需要的硬盘相对较大，但是Git会对项目进行压缩，最后与svn相差不了太多，并且回滚速度较快**git操作的基本流程：**底层命令：创建工作目录，对工作目录进行修改1、git add ./这个命令相当于git hash-objec

2021-04-29 20:51:19 90

原创 canvas操作图片& 设置背景

**canvas操作图片:**在画布上插入图片：在canvas中获取图片的路径：var img = new Image();img.src = “路径”ctx.drawImage(img,x,y,img.width,img.heigth)方法**在canvas设置背景：**ctx.createPatter(图片，平铺方式)方法这个方法有返回值，如果我们想要对我们的画布设置背景例：var patter = ctx.createPatter(图片，平铺方式);ctx.fillSty

2021-04-25 23:04:42 5689

原创 canvas绘制曲线和变化

**绘制圆：**arc方法ctx.arc(x,y,半径，开始位置的弧度，结束为的弧度，方向参数)方向参数是ture/flase 默认的是false（默认是逆时针方向）弧度的转换：度数 * Math.PI / 180（x,y）为圆心的位置在确定圆为实心还是空心实心：ctx.fill(); 边框：ctx.stroke();**绘制一条有弧度的曲线：**arcTo（）方法：arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。arcTo(x1,y1,x2,y2,r);一

2021-04-25 23:01:47 257

原创 canvas绘制路径

我们单独使用canvas绘制图形时我们只可以绘制矩形，但是我们还会有其他的图像，我们绘制其他的图像我们就要通过绘制路径的方法图绘制其他的图形**绘制路径的步骤：**1、移动画笔到起始位置：ctx . moveTo(x,y);2、绘制一条当前位置到下一个位置的线line（线）：（需要几条就画几条）ctx.lineTo(x,y);3、确定图像是填充的还是空心实线：**填充：**ctx.fill(); //里面没有参数会自动合璧路径**轮廓：**ctx.stroke();

2021-04-20 11:39:17 453

原创 canvas

**简介：**canvas是H5中新增的元素，可以通过JavaScript中的脚本绘制图形注意;我们在使用canvas时，遇到低版本浏览器不支持时，我们在canvas标签中添加的所有元素内容都会被显示出来，我们就可以利用这一点添加提醒语句，如果支持则不管canvas中存在什么都会被隐藏不会显示，我们在浏览器看到的只是canvas，通俗的来讲canvas只是画布**使用：**canvas只是一个画布，要想在其上绘制内容我们需要找到他的渲染上下文getContext（）方法，这个方法主要是用

2021-04-19 21:12:30 66

原创 H5中的小功能

**classList方法：**这个方法可以操作class，在原来的H4等，我们如果想要操作类会比较麻烦在H5中我们添加一个类：testNode.classList.add(" ");**删除一个类：**testNode.classList.remove(" ");**切换的方法：**（如果没有就新增，如果有就删除）testNode.classList.toggle(" ");**H5中获取自定义属性值：**dataset方法：例：我们在使用这个方法是，我们的命名要以d

2021-04-18 16:04:13 83

原创 H5新增标签

**新增语义化标签：**hgroup：代表网页或section的标题当元素出现多个层级，我们可以将h1~h6放在其中注意：1、如果只有一个标题标签就不要使用hgroup2、存在多个就使用3、如果有多个标题和文章数据，标题标签（h1~h6）就使用hgroup包住，和其他数据一起放入header标签中header：代表网页或section的头部（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；（2）article：特殊

2021-04-15 14:44:54 56

原创 attribute与property

**相关概念：**attribute：html的预定义和自定义属性我们统称为attributeproperty：js原生对象的直接属性我们称为propertyproperty属性为布尔值的，我们称为布尔值属性property属性值为非布尔值的，我们称为非布尔值属性**attribute与property的同步关系：**非布尔值属性：实时同步布尔值属性：property永远都不会同步attribute在没有动过property的情况下attribute会同步property在动过

2021-04-12 14:59:23 122

原创 less

**less的注释：**如果注释在less文件中使用 / / 时，编译在css文件中这个注释不可以（不显示），是给开发者看的如果在less文件中注释使用/ ** / 这个注释时，在编译完成的css文件中是显示的，给用户看到**less文件中的变量：**在多次使用一个值时，我们在进行修改时会比较方便1、在less文件中可以定义变量，必须使用@变量名：属性值例：比如在一个CSS文件中，pink色使用的次数比较多那么我们就可以进行定义变量@color：pinkbackgroun

2021-04-05 16:19:41 96

原创操作元素

操作元素是DOM的核心内容1、操作元素修改内容：innerText和innerHTML都可以进行对元素内容的修改，元素.innerText = 修改的内容；innerText与innerHTNL都可进行元素内容的删除，但是他们还存在许多的不同相同点：1、他们两种都可进行元素内容的删除2、都可以保留元素内容innerText:1、不可以识别HTML标签，在输入与输出都不会识别，输入会把HTML标签当中字符串进行输出，输出不会识别，不会进行输出2、输出时不保留空格和换行innerHTMK:

2021-04-02 22:16:23 243

原创继承模式

**原型链继承：**得到父类构造函数的方法前面我们说到，所有的实例有一个内部指针，指向它的原型对象，并且可以访问原型对象上的所有属性和方法。doggie实例指向了Dog的原型对象，可以访问Dog原型对象上的所有属性和方法；如果Dog原型对象变成了某一个类的实例 aaa，这个实例又会指向一个新的原型对象 AAA，那么 doggie 此时就能访问 aaa 的实例属性和 AA A原型对象上的所有属性和方法了。同理，新的原型对象AAA碰巧又是另外一个对象的实例bbb，这个实例bbb又会指向新的原型对象 BB

2021-04-01 15:57:40 126 1

weixin_45615650的博客