- 博客(42)
- 收藏
- 关注
RSS订阅原创 github创建仓库踩坑
前言：因为想要在把自己写的项目存起来，就在github上创建了个仓库。。。结果莫名其妙的一堆问题。。。。。🤕🤕1.首先，请大家登录自己的账号。我不知道已经忘记密码多少回了。。。。😵💫😵💫如果忘记，就请点击【忘记密码】🤭。。2.新建个仓库可勾可不勾，反正我没勾🙃，正常填写，最后点击【create repository】3.创建成功后，就会有个仓库地址，直接克隆就可以。我clone的是https的地址，以下操作也是对于https 克隆方式。在终端执行：git clone 👆上面的地址
2022-03-02 17:38:55
969
4
原创 原生操作节点
1.获取子节点1.1 父节点.children1.2 父节点.childNodes 标准属性 var oUl = document.getElementsByTagName("ul")[0]; //获取子节点 //1.1 父节点.children 非标准属性 一般用这个 var children = oUl.children; console.log(children); //HTMLCollection(6)
2021-08-18 15:00:51
1814
原创 react 预览图片 @hanyk/rc-viewer
1.安装包npm i @hanyk/rc-viewer2.引入import RcViewer from "@hanyk/rc-viewer";3.使用 let options = { navbar: false, //关闭缩略图 fullscreen: false, //播放全屏 loop: false, //是否循环 上一个 下一个 toolbar: {
2021-08-16 15:26:47
905
7
原创 6位交易密码框
import React, { Component } from 'react'import { Form, Input } from 'antd';export default class Passwordbeifen extends Component { constructor(props) { super(props) this.password1 = React.createRef() this.password2 = React.cr
2021-07-07 20:35:41
319
原创 深拷贝浅拷贝
1.JSON.parse JSON.Stringfy 深拷贝缺点：它会抛弃对象的constructor，深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object；这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，也就是说，只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON； let arr = [{a:1,b:1},{a:2,b:2}] let arr3 = JSON.parse(JSON.s
2021-05-28 10:55:14
85
原创 前端密码加密
1.安装npm install crypto-js --save2.引入import CryptoJS from "crypto-js";3.使用//后端接口返回AES_IV,AES_KEY handleGetAesApi = () => { getAesApi() .then((res) => { this.setState({ stateIv: res.data.
2021-05-26 15:26:49
292
原创 react 复制文本信息
1.安装npm i react-copy-to-clipboard2.引入import { CopyToClipboard } from 'react-copy-to-clipboard';3.使用handleCopy = () =>{ message.success('复制成功！') } const text = `收款账户名称：【${repaymentMsg.accountName}】\n收款账户号码：【${repaymentMsg.accountN
2021-05-26 15:19:14
266
原创 window.open()预览pdf文件
1.另一个窗口预览pdfvar pdfResult = res.data //base64 不带data:application/pdf;base64前缀let pdfWindow = window.open("")pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, " + pdfResult + "'></iframe>")2.下载p
2021-05-26 15:12:43
6242
2
原创 raect 路由懒加载lazyLoad lazy
1.引入import react,{Component,lazy,Suspense} from 'react'const Home = lazy(()=>{import './home'})const About = lazy(()=>{import './about'})import Load from './load'2.使用Suspense作用为Home或About组件没加载出来的时候页面呈现的画面，可以是组件，也可以是dom节点，其组件引入不可是懒加载<Sus
2021-04-18 18:41:25
132
原创 BrowserRouter与HashRouter的区别
1.底层原理不一样 BrowserRouter使用的是H5 history API,不兼容IE9与一下版本HashRouter使用的是URL的哈希值2.path表现形式不一样 BrowserRouter路径中没有#，例如：localhost:3000/demo/text HashRouter路径中包含#，例如：localhost:3000/#/demo/test3.刷新后对路由state参数的影响 BrowerRouter没有任何影响，因为state保存在history对象中.
2021-04-15 15:44:35
243
原创 页面刷新样式丢失问题
有些公共样式文件放在publish文件夹下，在index.html中引入样式文件，有时页面刷新样式丢失。解决办法：1.<link type="text/css" rel="styleSheet" href="/reset.css" /> //href路径不要写相对路径，类似于‘./reset.css’2.<link type="text/css" rel="styleSheet" href="%PUBLIC_URL%/reset.css" /> //加%PUBLIC_
2021-04-14 09:25:26
1379
原创 react兄弟组件传值之事件发布与订阅PubSubJS
1.安装npm i pubsub-js2.引入import PubSub from 'pubsub-js'3使用//组件a-发布消息PubSub.publish('one','hello') //两个参数 第一个为传递的消息名，第二个为传递的信息//组件b-订阅消息(一般在组件挂载完成进行订阅)componentDidMount(){ this.a = PubSub.subscrib('one',(msg,data)=>{ console.log(msg)
2021-04-11 21:00:03
226
原创 生成唯一标识 uuid nanoid
注：uuid与nanoid均可以生成唯一标识，但uuid较大，我们用nanoid步骤：1.安装npm i nanoid //uuid为npm i uuid 2.引入import {nanoid} from 'nanoid' //nanoid为函数3.使用nanoid()
2021-04-11 20:36:33
502
原创 前端 react 面试题
1.react介绍React 是Facebook内部的一个JavaScript类库。React 可用于创建Web用户交互界面。React不是一个完整的MVC框架,最多可以认为是MVC中的V（View）,甚至React并不非常认可 MVC开发模式。React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。React 引入了虚拟DOM（Virtual DOM）的机制。React 引入了组件化的思想。React 使用Facebook专门为其开发的一套语法糖–JSX。2.
2021-03-21 16:12:24
1355
原创 react 对props进行类型限制 props-type
react进行组件传值时，对props类型进行限制,在接收值的组件进行类型限制1.引入 import PropsType from 'props-type'
2021-03-21 11:33:52
1428
原创 展开运算符 ... 的使用
1.展开数组let arr1 = [1,2,3]let arr2 = [4,5,6]console.log(...arr1) //1 2 3//合并数组：let arr3 = [...arr1,arr2] console.log(arr3) //[1,2,3,4,5,6]2.不能直接展开对象，需在花括号包裹下let obj ={ name:'张三', age:'14'}console.log(...obj) //报错 展开运算符.html:21 Uncaug
2021-03-20 22:09:21
173
原创 每天一道面试题前端
1. 浏览器端的存储类型有哪些，如何判断应该使用那种存储？1.cookie：只在设置的cookie过期时间之前一直有效，即使窗口和浏览器关闭。数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制。cookie只属于某个路径下,cookie数据不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如回话标识。在所有同源窗口中共享的2.sessionStorage：仅在当
2021-03-17 10:02:46
450
原创 react路由动态传参
1. "?"传参返回值：//传参 this.props.history.push('/admin/billingSystem/payment/billPay?from=bill&type=one&id=' + record.id)//取参 //1.npm install querystring //2.querystring.parse() 方法将 URL 查询字符串 str 解析为键值对的集合。querystring.parse(this.props.location.s
2021-03-10 14:44:25
804
原创 常用的数组方法
注：详细请看 https://www.w3cschool.cn/javascript_guide/javascript_guide-7ock268s.html#toc101. push()，在数组的末尾添加一个元素，返回添加后的数组长度，改变原数组2. pop(),在数组的末尾删除一个元素，返回删除的那个元素，改变原数组3. unshift(),在数组的第一个位置添加元素，返回添加后的数组的长度，改变原数组4. shift()，删除数组的第一个元素，返回删除的元素，改变原数组5. reverse(
2021-03-05 15:15:40
122
1
原创 常用字符串方法
1.字符串方法 padStart,padEndES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。'x'.padStart(5, 'ab') // 'ababx''x'.padStart(4, 'ab') // 'abax''x'.padEnd(5, 'ab') // 'xabab''x'.padEnd(4, 'ab') // 'xaba'上面代码中，padStart()和padEnd()一
2021-03-04 13:47:00
269
2
原创 前端下载流，及base64,导出excel
1.下载流 downLoadFile = (option) => { let params = { originalFileName: option.file.originalFileName, relativePath: option.file.relativePath, newFileName: option.file.newFileName }; unCrudeHttp(
2021-03-02 14:34:00
859
原创 react 前端导出excel表格
1.下载安装npm install js-export-excel2.引入import ExportJsonExcel from "js-export-excel";3.根据后端数据导出excel,后端数据如：4.导出函数 handleExportCurrentExcel = (ExcelData) => { //ExcelData为后端返回的data数组 let sheetFilter = ["ticketNo", "ticketAmount", "tic
2021-02-22 10:25:44
2260
4
原创 vue创建项目的目录结构
-开头都是文件夹-build webpack打包的配置项-config webpack配置项 比如：webpack可以帮助我们跨域-node_modules 项目依赖包-src ***** 你写的代码-assets 静态资源 会参与打包-components 组件App.vue 根组件main.js 入口文件-static 静态资源，里面放img ,你不去修改的c...
2020-02-18 20:53:02
457
原创 Vue-cli安装
1.vue-cli1.安装webpacknpm i webpack -gmac: sudo npm i webpack -g2.安装vue-clinpm i vue-cli -g //默认安装的是vue2.9mac:sudo npm i vue-cli -g注意：如果你npm安装报错了，建议使用下面两句命令：npm config set strict-ssl false //关闭n...
2020-02-18 20:49:59
249
原创 快排
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
2019-12-20 19:15:06
101
原创 自定义插件
工具类方法： 扩展的语法：$.extend({ "方法名":function(){} }) 调用：$.方法名() 对象级别的方法： 扩展语法：$.fn.extend({ "方法名"：function(){} }) 调用：$(选择器).方法名()...
2019-12-20 19:14:38
135
原创 百度导航
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin: 0;padding: 0;list-style: none} ...
2019-12-19 20:04:52
126
原创 导航 滚动到对应位置
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{padding: 0;margin: 0;list-style: none;} ...
2019-12-19 19:48:38
135
原创 滚动条
<!doctype html><html><head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0;padding:0; } .box{width: 200px;height...
2019-12-19 09:33:14
88
原创 jquery中的事件和动画
阻止事件冒泡 阻止默认行为原生js：阻止事件冒泡：ev.stopPropagation?ev.stopPropagation():ev.cancelBubble=true阻止默认行为：return false ev.preventDefault?ev.preventDefault():ev.returnValue=falsejquery:阻止事件冒泡:ev.stopPropagat...
2019-12-19 09:00:01
95
原创 jquery操作闭合标签内容
操作闭合标签内容 /* 操作标签内容 1.闭合标签 $(选择器).html() 取值赋值一体 取值： $(选择器).html() 设置： $(选择器).html(值) 特点：覆盖之前已经存在的内容，识别标签 $(选择器).text() ...
2019-12-17 20:49:05
346
原创 深拷贝封装
只有对象才有Object.prototype.toString（）方法；要想精确获取其它资源数据类型 加call Object.prototype.toString.call(source)； //封装精确的获取数据类型 function getType(source){ return Object.prototype.toString.call(source).sl...
2019-12-17 10:01:43
548
1
原创 js初识
1.网站基本组成*HTML：超文本标记语言 搭建网站结构CSS：层叠样式表 修饰网页样式JavaScript:脚本语言 进行网页交互2.js发展史1995 网景Netscape ：大型的商用浏览器解决问题：表单验证的问题布兰登.艾奇：10天 ---- LiveScript-- JavaScript同年：微软 ie3.0搭载了克隆版的JScriptECMA:欧洲计算机制...
2019-12-16 21:38:47
98
原创 js数据类型
1.js数据类型六大类，5个基本数据类型，1个复杂类型（对象类型，引用类型）5个基本数据类型：Number，String,Boolean,null,undefined复杂类型Object(object，function，array)1.1 number//1.Numbervar n1 = 10;var n2 = 5.5;//typeof:检测变量数据类型console.log(t...
2019-12-16 21:33:44
97
原创 运动函数
拖拽鼠标在元素中按下，不松手在页面中移动，让元素跟随鼠标移动松开鼠标，拖拽停止 var oDiv = document.getElementsByTagName("div")[0]; //1.按下 oDiv.onmousedown = function(ev){ var ev = window.event || ev; ...
2019-12-16 21:31:54
347
原创 事件
1.事件对象 event（每个事件发生时，都会产生自己的事件对象）事件处理函数：当事件发生的时候调用的函数事件对象：当事件发生的时候，浏览器会将事件相关的信息(鼠标位置，事件类型，)存储在事件对象中，event事件对象兼容：var ev = window.event || ev;//console.log(window.event);//低版本ff undefined//console....
2019-12-16 21:31:21
184
原创 cookie与正则
一、cookieCookie 是浏览器访问服务器后，服务器传给浏览器的一段数据。浏览器需要保存这段数据，不会轻易删除（保存在计算机中）。此后每次浏览器访问该服务器，都必须带上这段数据。cookie 实际上是指小量信息，只能存储4KB，是由 Web 服务器创建的，将信息存储在用户计算机上的文件,比如用户登录某个网站，浏览器会提示是否保存用户名和密码方便下次登录，如果保存就是将信息保存在cooki...
2019-12-16 21:31:06
381
原创 面向对象
一、面向对象两种编程模式：面向过程：注重过程面向对象：注重结果Js基于对象对象的特征：封装 继承 多态对象的组成：属性：静态的，对象的描述 --------------------- 变量方法：动态,对象的行为 -------------------------- 函数二、创建对象1.字面量创建//1.字面量创建 属性 和 方法var obj = { ...
2019-12-16 21:30:38
112
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人