- 博客(97)
- 问答 (1)
- 收藏
- 关注
RSS订阅转载 非常简单的清除axios请求（vue，react通用）
1、添加js文件实现添加与删除接口的功能。import axios from 'axios'class CancelToken { // 声明一个 Map 用于存储每个请求的标识 和 取消函数 static pending = new Map() // 白名单, 写入接口名称 static whiteRequest = [] /** * 得到该格式的url * @param {AxiosRequestConfig} config * @returns
2022-05-07 14:36:57
2878
原创 简单的聊天室
基于express+socket.ioexpress框架直接安装后得到模板这是socket官网的例子： https://socket.io/get-started/chat/** * Module dependencies. */var app = require('../app');var debug = require('debug')('server:server');var http = require('http');const { Server } = require("soc
2021-12-27 12:06:33
275
原创 滚动一屏距离
const top_page = () => { if (document.documentElement.scrollTop === 0) { return } let timmer; let h = document.documentElement.clientHeight let n = 0 timmer = setInterval(() => { n++; console.log.
2021-12-13 19:41:25
350
原创 滚动页面触发相应位置动画 ---react
需要实现的效果： （滚动到内容区域触发）第一段内容移动效果第二段内容淡入第三段内容缩放实现思路 滚动过的距离+当前窗口的高度>元素到顶部窗口的距离 ===>则触发动画整体代码import React,{useRef,useEffect,useState} from 'react';// 此函数用于获取一个元素到最外层窗口的距离// 接收两个参数// obg---> Dom元素// direction----->方向 top|bottom|left|
2021-12-13 19:34:12
1494
1
原创 vue路由权限
1，配置每个页面的meta信息meta:{ grade:[1,2,3], //权限等级 title:'页面标题', icon:'图标', show:'是否展示导航'} 2，将无权限的页面路由直接配置到routeslet routes = [ { path: '/login', name: 'login', component: () => import('../components/login/login.vue') }, // 404 {
2021-12-07 21:15:27
525
原创 百度地图实用案例
1、创建一个js文件export function BMPGL(ak) { return new Promise(function (resolve, reject) { window.init = function () { // eslint-disable-next-line resolve(BMapGL) } const script = document.createElement('scri
2021-12-07 20:25:56
154
原创 vue递归组件
这是用来展示后台左侧导航的代码<template> <div> <el-menu router unique-opened> <el-submenu :index="index + ''" v-for="(obj, index) in data" :key="obj.name" > <template slot="title"> <router-link :to=".
2021-12-07 20:17:37
508
原创 前端面试题网址合辑
八个笔试&面试仓库1.Front-end Developer Interview Questions网址：https://h5bp.org/Front-end-Developer-Interview-Questions/2.CS-Interview-knowledge-Map网址：https://github.com/InterviewMap/CS-Interview-Knowledge-Map3.Daily-Question网址：https://github.com/shfshanyue
2021-11-14 12:51:47
655
原创 react如何在父组件中调用子组件事件
类组件将子组件的this传到父组件，给父组件添加一个属性，值为this，之后就可以通过父组件的属性调用子组件的事件了import React,{Component} from 'react';class View extends Component{ FunCenter = (_this) => { this.$child = _this; }; FunRecovery() { console.log() this
2021-09-03 16:05:42
564
原创 前端性能——数据持久化
如何实现数据持久化一般情况下，借用本地存储用的比较多，或者一些插件，如vue的keep-alive，配合redux使用的persist为什么需要数据持久化1、减少发起请求的次数，从而提高性能。场景：比如一个网站，数据是每天更新一次，间隔时间长，当然就可以将请求到的信息存储到本地，第二次进入获取信息从本地拿2、用户体验方面登陆的状态，不用每次都需要登陆表单填写，切换页面之后数据不会消失实现数据持久化的方法1、localStorge特性: 永久存储,手动清除,存储大小5M 语法
2021-08-26 08:15:17
1238
原创 mobx的使用
mobx的使用1、APImobx-reactProvider 包裹根组件，用于传递数据observer 组件变为响应式inject 接收mobx实例(用于类组件)MobXProviderContextmobxobservable 声明变量action 声明函数用于修改observable 的值makeObservable 更新状态2、安装yarn add mobxyarn add mobx-react使用@语法糖需要安装yarn add @babel/plug
2021-08-24 21:12:49
509
1
原创 02 解构赋值
解构赋值1.1 什么是解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值1.2 数组解构赋值和对象解构赋值的区别数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。2.1 数组的解构赋值// 报错let [foo] = 1;let [foo] = false;let [foo] = NaN;let [foo] = un
2021-08-22 21:40:05
85
原创 01let和const
1.1 let作用声明局部变量特性不存在变量提升不能重复声明不作为window属性块级作用域暂时性死区（声明前不能使用）1.2 const作用生成常量特性与let一致globalThis 对象Es5模块中的this是windowEs6模块中的this是undefined函数中的this，如果函数不是作为对象的方法执行，而是单纯作为函数执行，this会指向顶层对象，但是严格模式下this会返回undefined不管是严格模式，还是普通模式，new Functi
2021-08-22 20:36:53
51
原创 ts基础认识
基础数据类型// 基础类型(ts中变量一开始是什么类型，后期赋值的时候，只能用这个类型的数据，是不允许用其他数据类型赋值给当前的这个变量)(() => { //布尔类型 // 基本语法 // let 变量名：数据类型 = 值 let flag: boolean = true console.log(flag) // 数字类型 let a1: number = 10 //十进制 // 还有2进制 8进制 16进制 // 字符串类型 let str: str
2021-08-15 20:40:38
356
原创 css默认样式以及解决办法
display:inline-block会出先参差不齐的情况？父级添加font-size：0;dt dd li的空隙解决？overflow:hiddenv-align:top; (只在dt，dd中生效)background正确的书写方式？background:#fff url(’./’) center center no-repeat
2021-08-15 20:12:12
113
原创 nodejs系列
Nodejs介绍Node.js是一个Javascript运行环境（runtime）。它让JavaScript可以开发后端程序，它几乎能实现其他后端语言能实现的所有功能。单线程Node是基于Google V8引擎，V8引擎是Google发布的一款开源的JavaScript引擎。Nodejs最擅长高并发npm命令npm i 生成nodemodules包npm init 生成package.json文件npm install 包 添加到dependencies配置中npm install
2021-08-12 10:31:51
104
原创 js面试题
1、如何中断promisereturn new Promise(()=>{}) 返回一个初始值即可或者使用catch2、如何获取async失败的回调用 try catch 就会可以获取到
2021-08-05 12:10:51
51
原创 context的使用
概念一种组件间通信方式，常用于【祖组件】与【后代组件】间通信应用开发过程中，一般不会使用context，一般都用它封装react插件//1 创建Context容器对象：cosnt XxxContext = React.createContext();// 2 渲染子组件时，外面包裹XxxContext.provider，通过value属性给后代组件传递数据：<xxxComponent.Provider value={数据}> 子组件</xxxComponent.Pro
2021-08-05 11:53:24
247
原创 hooks的常用Api
Ref HookRef Hook可以在函数组件中存储/查找组件内的标签或其他数据语法：const refContainer = useRef()作用：保存标签对象，功能与React.creatRef()一样Effect Hook1、Effect Hook 可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子）2、React中副作用操作：发ajax请求数据获取设置订阅/启动定时器手动更改真实DOM3、语法和说明useEffect(()=>{ //在此可以执
2021-08-05 11:47:39
571
原创 插件类……
生成线上环境安装： yarn add serve -g使用：serve build生成唯一id值安装：yarn add nanoid引入：import {nanoid} from 'nanoid'使用：nanoid()
2021-08-05 11:09:02
56
原创 redux&react-redux
reduxredux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写目录reduxstore.js：该文件专门用于暴露一个store对象，整个应用只有一个store对象reducers文件夹：本质是一个函数,接收：perState(第一次时undefined)，action，返回加工后的状态。index.js 根状态文件，将所有reducer文件做集中管理actions文件夹：专门用于创建action对象contant.js：该模块是用于定义acti
2021-08-01 16:00:12
237
转载 react路由
react路由分三种react-rotuer-dom这里主要介绍 react-rotuer-domBrowserRouter：最大的容器，全局只能有一个，route所有的配置都要放在里面才会有效果 Browser(有浏览器的意思) 所以一般直接包裹app.js的根元素。HashRouter：与BrowserRouter作用相同，不同是以hash的方式进行跳转。Link :<Link to="/name"> 进行跳转Route : <Route p
2021-07-25 21:25:48
315
转载 算法篇(暂时就接触一个)
diff算法逐层对比，最小的力度是标签1、虚拟DOM中key的作用：1-1、简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。2-2、详细的说：当状态的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，随着React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下a、旧虚拟DOM中找到了与新虚拟DOM相同的key：a-1、若虚拟DOM中的内容没变，直接使用之前的真实DOMa-2、若虚拟DOM内容变了，则生成新的真实DOM，随后
2021-07-25 20:44:55
52
原创 组件通信之pubsub
pubsub释：消息订阅与发布点击进入gitee作用使用于任意组件间通信安装yarn add pubsub-js引入(每个组件使用时都需要)使用es6引入：import PubSub from 'pubsub-js;使用CommonJS：const PubSub = require('pubsub-js');语法发布//异步发布主题PubSub.publish('主题','内容'）//同步发布主题，这在某些环境中更快//但是当一个主题在相同的执行链,小心使用PubSu
2021-07-24 18:45:47
422
原创 js组装知识(待续……)
object.assign()这个方法回使源对象上的[[Get]]取得属性的值,然后使用目标对象上的[[Set]]设置属性的值实际上对每个源对象执行的是浅复制,如果多个源对象都有相同的属性,则使用最后一个赋值的值let obj1 = { get a() { return 'aaa' }}let obj2 = { set a(val) { console.log(val) }}console.log(obj1.a) //'aaa'// 对象引用let o
2021-07-23 20:44:21
86
原创 自己会用的一些网址
npm网址git网址谷歌插件查兼容的git教程廖雪峰vant官网vue3官网webpack官网iocnfont图标库猫云（免费的前端开源项目）javascript教程lodashreact官网智能PNG和JPEG压缩antd Ui插件chart 官网图标库css三角形产生器网易云Api...
2021-07-23 20:16:42
73
1
原创 react实现页面多个模块的切换
前言这是做的一个多模块切换的一个案例，也是第一会这样大量的使用表单，大概有7，8个模块，这里用其中的一个模块来做展示以下三张图片对应的就是三个模块了这是第一个展示面这是第二个编辑页这是呈现数据的页面实现过程1、每一个模块就是一个组件<script> // 这里定义一个默认值，作为第一个显示的模块 state={cls='tj'}</script><div className="module1"> <div className=`m
2021-07-23 19:39:20
1405
转载 dom的操作方法
dom的获取document.getElementById(‘id’)document.getElementsByClassName(‘class’)document.getElementsByTagName(‘tag’)document.getElementsByName(‘name属性’)document.querySelect(‘选择器’)document.querySelectAll(‘选择器’)节点类型nodeType标签：1 ，属性：2，文本：3获取相邻的，或父子级的d
2021-07-20 19:20:43
251
原创 react如何获取表单数据
react如何获取表单数据？分为两种情况： 第一种是每次输入都会更新状态 第二种是只有用到的时候才获取（会用大量的ref，不推荐）这里主要介绍第一种//这是我们要操作的数据 state = { resume:{ username: '', password:'' } } //通过传参的方式 setdata = (objname, key) => { console.log(window) return (e) =>
2021-07-20 12:18:12
2329
转载 构造函数、实例、原型对象、继承
一、构造函数与原型对象之间的关系：有一个Star构造函数，每一个构造函数里面都有一个原型对象，是通过构造函数的prototype指向这个原型对象的同样在这个原型对象里面也有一个属性叫constructor，它又指回了构造函数可以把构造函数看为是父亲，父亲通过prototype指向儿子原型对象，告诉别人看我有一个厉害的儿子叫原型对象，而原型对象里面又有一个属性constructor,又指回了构造函数说，看我有一个厉害的老爹，两人互相吹捧了一番二、构造函数、实例对象与原型对象之间的关系：我们可以通
2021-07-18 10:08:06
180
原创 ref绑定dom的三种写法
1、字符串形式这种字符出串写法因为效率不好，所以不推荐使用语法 标签上使用ref="name" 进行绑定方法中this.refs.name拿到dom<input ref="input1" type="text" placeholder="点击按钮弹出内容" /><button onClick={ this.showData }>按钮</button>showData = () => { const { input1 } = this.re
2021-07-18 09:34:50
889
原创 axios的安装指令
react中安装axiosyarn add axios//安装代理yarn add http-proxy-middleware
2021-07-17 12:27:10
1792
原创 关于项目经验的
页面常用的尺寸PC：内容区宽度：早期：60 980 10001200 1380字体大小：12px 14px16px 18px常用字体：“微软雅黑”Arial（针对英文）H5： 750(大多设计稿的宽度)暂时保留页面状态，例：分页、选项卡sessionStorage存储实现一般情况下请求数据流程加载过程中有loading动画，默认至少1秒(不然一闪而过也会给用户不好的体验)，请求完毕，loading消失，有数据则渲染页面，没数据显示提示内容像图片这种加载不出的
2021-07-17 12:24:50
57
1
原创 ajax，jsonp，axios面试题
什么是前后端联调？react中axios跨域的配置const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function (app) { app.use( // https://home-api.pinduoduo.com/home/mediareports?page_number=1&page_size=20 // /home 用的是二级目录的部分
2021-07-17 12:21:26
335
2
原创 react中规范类型接口的使用
安装yarn add prop-types使用{name:'小红',age:13,sex:"女"}//场景 name String类型，必传// age Nuber类型，默认值18// sex String类型，默认值男Person.propTypes={ name:PropTypes.string.isRequired, sex:PropTypes.string, age:PropTypes.number}Person.defaultProps = { s
2021-07-17 11:58:13
363
原创 react中类组件&this指向
这是一个标准的类组件import React,{Component} from 'react';class View extends Component{ constructor(props){ super(props) } state={} //写在这里跟写在constructor中一样，都可以起到初始化的效果,并且可以省去this fn(){} fn1(){} render(){ return( <div> <button onClick={th
2021-07-17 11:32:06
522
空空如也
uniapp中使用mock不生效问题
2022-11-16
uniapp（vue3）挂载uView-ui 报错
2022-11-09
nvm list 提示 No installations recognized
2022-02-20
TA创建的收藏夹 TA关注的收藏夹
TA关注的人