qiqi-fairy-CSDN博客

原创关于react的组件间传参，今天自己全部写了一遍

组件间传参-react props组件间传参今天很高兴，因为确实对于react用的半知不解的，有些东西很迷茫的，但是又不大好意思麻烦别人，就今天整理出来后就感觉到了很顺畅，很有成就感忍不住想分享一下，嘻嘻props是react的三大属性之一，主要用于数据传参父组件给组件传参：父组件中在子组件的实例上面泻药传的属性，然后在子组件中直接通过this.props直接接收---------------父组件import React, { Component } from 'react'import

2021-05-26 18:03:38 372

原创 ES6中新增的字符串新增方法

ES6中新增的字符串新增方法indexOfincludesstartsWithendsWith var str = "lezijie" // 找到字符在第几位，按下标算，从0开始 console.log(str.indexOf("i")); // 3 // 可以用来替换indexOf, 不过返回的是布尔值，表示是否找到了参数字符串 console.log(str.includes('j')); // true

2021-05-25 14:23:17 150 1

原创 for...of循环字符串的遍历器接口

字符串的遍历器接口（for…of…循环）ES6为字符串添加了遍历器接口，使得字符串可以被for…of循环遍历for (let code of 'foo') { console.log(code)}除了遍历字符串，这个遍历器最大的优点是可以识别大于0xFFFF的码点for…of循环for…of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合。但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是，它可以正确响应break、continue和return语句.

2021-05-25 14:02:52 2299

原创在react项目中点击编辑按钮回填数据

点击编辑按钮回填数据因为是react项目，所以做得时候比较费劲，有结果了就记录一下，方便下次学习点击编辑按钮拿到本行数据<a onClick={() => {this.handlEditValue(record.id)}}>编辑</a>方法中包含了请求后台数据的路径以及请求方式，返回的是本行的数据// 点击编辑，跳转页面 handlEditValue = (id) => { // console.log(id); // 本行id

2021-05-24 18:26:21 908

原创 React中点击选择复选框时下面内容变化

React中点击选择复选框时其下面内容变化选一个：选一个：都选：都不选：以上就是需求：我刚开始判断还是不够严谨的，控制的时候没有写清楚，是因为MJ告诉我是怎么控制，又学到一招了啊因为是复选框，就可以用*length*来进行判断呢代码来啦：这就是主要的逻辑呢：handleCheck = (e) => { if(e.length === 0) { this.setState({ flagPerson: false,

2021-04-27 18:10:23 618 1

原创 React中有关于单选按钮的选择以及其下内容的变化

选中单选按钮以及下面内容的变化目前碰到的需求是: 点击单选按钮，选择不同的按钮来显示不同的内容用的是 react 的组件库 Ant Design：这就是需要做到的要求：刚开始亏很懵逼的，然后通过学习做到了，但是用的是：组件来吧，看看代码：import React, { Component } from "react";import { Row, Col, Radio, Checkbox, Input } from "antd";const plainOptions = ['星期一',

2021-04-27 17:52:28 1075

原创 react中关于富文本编辑的应用

react中所使用的富文本编辑器这两天接触到的需求中有一个模块是需要有富文本编辑器的，所以去学习了一下有关富文本编辑器的在react中的应用我是用的是： react-quill1、先安装依赖包npm i react-quill --save2、引入import ReactQuill, {Quill} from 'react-quill'3、初始化constructor(props) { super(props) this.reactQuillRef = nul

2021-04-26 18:20:48 3096

原创 React组件传值之子组件给父组件传值

子组件给父组件传值类组件子组件中调用一个方法：然后将这个方法写在父组件之中父组件中写好父组件的展示区，其中展示区也包含着子组件将方法的调用赋值给子组件的属性中，一起用bind解决this指向问题，如此就可实现子组件给父组件传值上代码：---- 父组件：import React, { Component } from 'react'import Child from './component/Child'export default class App extends Compon

2021-04-16 11:27:20 176

原创 React获取后台数据

React获取后台数据箭头函数写法：getXXX = () => { axios.get(", {params: {"参数1", "参数2"}}).then(res =>{ console.log(res) const data = res.data.XXX this.setState({xxx: data}) })}async、await 写法： async getTableData(val) { const res = await axios.get

2021-04-12 16:27:55 1655 1

原创 react请求后台数据接口成功传参成功但是数据data出错

react请求后台数据接口成功传参成功但是数据data出错POST请求成功，传入的参数也没问题但就是 res.data.msg 报错出错表示：问题在于res.data.code ,而不是res…data.msg，定位错误失败

2021-04-09 13:15:40 778

原创最全数组方法以及JSON的处理方法

有关于数组的一切方法数组元素操作方法1、创建数组的两种方法数组字面量 new Array() 检测是否为数组 instanceof 运算符 isArray()2、添加元素 1、push() 在我们数组的末尾，添加一个或者多个数组元素 ①：push 是可以给数组追加新的元素 ②：push() 参数直接写数组元

2021-03-01 10:34:23 684 2

原创九九乘法表

九九乘法表一共有9行，但是每行的个数不一样，因此需要用到双重循环。外层的for循环控制行数i,循环9次，可以打印9行。内层的for循环控制每行公式j。核心算法：每一行，公式的个数正好和行数一致， j<=i。每行打印完毕，都需要重新换行。\t 表示空格。var str = '' for (var i =0;i<=9;i++) { for(var j=1;j<=i;j++) { str += j+'x'+i+'=

2021-02-25 16:36:04 118

原创 ES6新增语法总结与案例

ES6新增语法1、let、const(1)、变量声明let和const var a = 123 // let 声明的变量不存在预解析 console.log(a); let a = 123(2)、// let 声明的变量不存在预解析 let a = 123 let a = '123' console.log(a);(3)、// ES6 引入了块级作用域 if(true) { // var flag = 12 let flag = 11 } console.lo

2021-02-25 16:04:48 324

原创面试高频点总结-web前端开发

Git版本回退git reset --hard 版本号Node是什么是一个让JavaScript 运行在服务端的开发平台是一个基于Chrome V8引擎的JavaScript运行环境再简单地说：Node.js 就是运行在服务端的 JavaScript搭建Vue项目：1、基于可视化工具 vue ui2、基于命令行 vue create 项目名称路由导航守卫全局导航守卫beforeEach()router.beforeEach( function(to, from ,

2021-01-13 00:41:56 105

原创操作中关于启用与禁用的按钮操作-VUE实操

关于按钮调用接口切换先上图其中的status是常量引入的文件，主要是逻辑写的简单，我有重新更改了一份关于有对话框的禁用启用按钮事件。handleStatus(val) { console.log(val.state); var status = ""; if (val.state === true) { val.state = 0; status = "禁用"; } else { v

2020-12-08 20:25:09 5579 5

原创路由导航编程式导航的记录数据-实际操作错误记录

先上图关于路由导航：编程式 $router.push。声明式：<router-link :to="...">注：query传过去的参数，接收时也要进行query接收，不能用params.主要完成了在学科分类的点击事件时，跳转到目录的界面不过是根据目录名称来渲染的页面，不过相同的参数取得是 ID。...

2020-12-08 19:30:37 2040

原创使用button按钮来模拟input的文件以及图片上传的事件、原生写法

使用button按钮来模拟input的图片上传基本思路1、搭建 HTML 结构2、构建 JavaScript 块，写逻辑3、验证通俗的讲就是：先点击按钮，在点击按钮时模拟点击 input，然后再来监听 input本身带的 change事件，用来实现具体的图片上传话不多说，上代码：上文中的： URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑

2020-12-04 16:56:46 2688 3

原创查漏补缺-数组去重、数组翻转、递归函数、冒泡排序

数组的去重数组去重原理：先有一个旧数组，一个空的新数组，然后去遍历旧的数组，如果存在重复的元素就保留一个元素并将其添加到新数组中，如果只是一个单独的数组元素，没有其他的重复项，也将其添加到新数组中。注意：新数组.indexOf(元素) === -1 就是来判断旧数组中的元素是否存在于新数组。具体代码如下：*代码执行结果是：[1, 2, 4, 85, 6, 84, 69]递归函数递归就是指：在函数自身自己调用自己但是递归函数有一个很明显得问题就是：如果没有返回条件，会造成死循环

2020-11-07 16:50:48 133

原创 Vue基础知识记录、指令合集、事件绑定、事件传参

Vue 基础知识点：Vue的基本使用步骤 1、需要提供Vue.js库文件 2、需要标签用来填充数据——id选择器 3、new vue( {} ) 4、把Vue提供的数据填充到标签里面——{{xxx}}实例化Vue时必须要加的属性：var 变量名 = new Vue（{ el: " ", data: { } }）其中，el 表示 Vue要控制哪个标签data 用来存放数据HTML中应用时，采用 {{ }} — 差值表达式 <div> {{in

2020-11-01 13:35:03 131

原创模拟快递单号查询的实现

实现快递单号查询的具体实现思想与核心 1、快递单号输入内容时，上面的大号字体盒子(con)显示(这里面的字体更大) 2、表单检测用户输入：给表单添加键盘事件 3、同时将快递单号里面的值（value）获取过来赋值给 con盒子（innerText）作为内容 4、如果快递单号里面内容为空，则隐藏大号字体盒子（con）盒子键盘事件用keyupkeydown: 事件触发时，文字还没有落入文本框中keypress:事件触发时，不仅文字还没有落入文本框中且不识别功能键CSS

2020-10-24 16:36:39 3688

原创时钟web服务器的注意点以及web服务器的创建注意点、模块化的注意点

时钟案例的注意点：1. fs.writeFile() 只能创建文件，不能创建路径2. 重复调用fs.writeFile()写入同一个文件时，新内容会覆盖旧内容http模块：专门用来创建 web 服务器的模块，node.js官方提供 http 模块提供的 http.createServer() 服务器和普通电脑的区别：服务器上安装了 web 服务器软件。 IIS、Apache等等 web 服务器软件：

2020-10-21 19:38:58 150

原创 Node.js中有关于npm、nrm 的命令，查漏补缺

1. Node.js中的第三方模块又叫做包来源于：第三方个人或团队开发过来的免费的、开源的为什么需要包：为提高开发效率包基于内置模块开发的国外公司 npm、Inc，网站http://www.npmjs.com 是全球最大的包共享平台下载： http://registry.npmjs.org 服务器上来下载

2020-10-21 19:31:09 184

原创 CMD输入ping命令提示: cmd（命令提示符）输入ping显示“ping不是内部或者外部命令，也不是可运行程序

cmd中:输入ping显示“ping不是内部或者外部命令，也不是可运行程序在电脑的开始运行里面输入：cmd（命令提示符）du输入ping显示“ping不是内部或者外部命令zhi，是dao设置错误造成的，解决方法如下：1、首先鼠标右键点击我的电脑，选择属性。2、高级系统设置3、在系统属性对话框中，选中“高级—环境变量”4、用户变量选择Path，然后在系统变量中选择PATH，点击“编辑”5、在变量值的后面，加一个分号将System32的所在路径加进入去，如系统安装在C盘则为C:\Windows\S

2020-10-18 21:16:34 1555

原创 Live-Server的使用-Live-Server安装

Live-Server的使用之前在VScode中安装过很多次的live-server，但都用不了，不是打不开网页，就是打不开端口，今天晚上偶然又试了一次，出乎意料的好了，话不多说上证明：安装VScode安装成功后，重新启动VScode2.重新启动后，新建html文件，然后右击，出现以下两条指令说明安装成功，否则重装注意：以上代码出现一条则需立马卸载重装3. 另外，测试是否成功需在命令提示符中输入命令：npm install -g live-server出现以下代码则说明安装成

2020-10-11 19:25:10 1188

原创 Git具体命令详解-git应用

Git命令 :1. 版本控制软件方便管理项目代码的版本 Git SVN2. 版本分类： 1)、本地版本控制系统：单击运行，不支持多人协作开发数据库发生故障则不能恢复 2)、集中化基于服务器-客户端的运行模式不支持离线提交版本更新中心服务器

2020-10-10 16:22:56 65

原创最全Git代码

Git命令：Git中基本命令的使用： git init —初始化 git status /s — 查看状态 git add . — 加入暂存区 git commit -m "注释" — 提交到仓库Git分支命令的使用 git branch — 查看分支 git branch 分支名 — 创建分支 git checkout -b 分支名 — 切换到某分支混合写法： git checkout -b 分支名称删除分支 git branch -d 分支名分支合并 git

2020-10-10 16:17:45 1003

原创 empty的用法以及JSONP的错漏之处

查漏补缺：empty（）移除被选元素的内容parent()选出被选元素的直接父元素能够说出什么是同源策略以及常见的解决方案同源：协议、域名、端口全部都一致的话，才可以互相之间进行访问解决方案： CORS能够说出JSONP的实现原理通过script标签的src属性并不受同源策略的影响来实现的能够知道如何使用jQuery发起JSONP请求$.ajax({url: ‘http://www.liulongbin.top:3006/api/jsonp’,url: ‘h

2020-10-08 20:51:53 354

原创文件上传，利用XMLHttpRequest来实现 ---进度条

利用XMLHttpRequest完成文件上传功能新手上路，记录篇上传文件： POST方式文件上传，利用XMLHttpRequest实现*页面的UI结构：***JavaScript部分：**目前来说。基本功能已经实现，但是为了页面更加美观，关于文件上传看起来更加直观，在页面利用bootstrap搭建一个进度条。其UI结构：关于进度条的计算onprogress —— 监听文件上传的进度e.loaded —— 已传输的字节e.total —— 需传输的总字节e.length

2020-10-07 21:07:40 367 1

原创利用 JQuery来实现简单的文件上传功能

利用JQuery完成文件上传功能既然是基于JQuery的功能，那么肯定是需要jquery.js文件的，可以自行下载，百度就有*链接：jquery.js链接不多说，上代码：**注：AJAX封装的函数：并且是全局函数ajaxStart() —— 开始时的回调函数ajaxStop() —— 结束时的回调函数**...

2020-10-07 20:43:27 1221

原创原型对象实现继承是容易出错的点

继承属性属性继承时call 函数需要用this指向当前Son，且call函数需要带参数方法继承方法继承时通过子构造函数的原型对象继承父构造函数以上代码可供参考，注解也很详细，可以自行参考。注：原型对象实现继承方法时容易出现的错误：以上为利用原型对象实现继承时容易出错的点，注意方法继承时要指回子构造函数。...

2020-10-06 21:44:57 86

weixin_45778591的博客