zengxingX的博客

原创 一键复制功能

【代码】一键复制功能。

原创 vue2国际化

vue2国际化

原创 配置webpack

【代码】配置webpack。

原创 手写Promise

【代码】手写Promise。

原创 大文件上传

使用vue+elementui实现。

原创 3D卡片跟随鼠标

原创 页面加载动画效果

首页加载动画

原创 React Router

1.安装yarn add [email protected]. react-router-dom 这个包提供了三个核心的组件import { HashRouter, Route, Link } from 'react-router-dom'3.使用 HashRouter 包裹整个应用，一个项目这只会有一个 Router<HashRouter> <div className="App">App</div></HashRo

原创 Rect基础 中间件

logger 中间件安装：yarn add redux-logger 导入 redux - logger 从 redux 中导入 applyMiddleware 函数 将applyMiddleware() 调用作为 createStotre 函数的第二个参数 调用applyMiddleware 函数时，将 logger 作为参数传入 后续调用 store.dispatch( )时，控制台就会出现日志信息输出store/index.jsimport { createStore,..

原创 react-redux的基本使用

基本使用1.安装yarn add react-redux2.配置index.jsimport ReactDOM from 'react-dom'import App from './App.js'import store from './store/store.js'import { Provider } from 'react-redux'// 通过 Provider 提供 store 供其他组件内部使用ReactDOM.render( <Provider

原创 Redux 执行过程

获取默认值的执行过程只要创建store，Redux 内部就会调用一次 reducer 这一次调用 reducer 的目的：获取状态的默认值 因为传入的状态值是 undefined ，并且是一个随机的 action type

原创 Redux 核心概念 store

store ：仓库是Redux的核心，负责整合 action 和 reducer 特点 一个应用只有一个 store 创建：const store = createStore（reducer） 获取数据：store.getState() 更新数据：store.dispatch(action) 其他API 订阅（监听）状态变化：const unSubscribe = store.sunscribe(()=>{}),注意先订阅，后续的更新才能被观测到 取消订阅状态变化：unS.

原创 React 核心概念 纯函数

纯函数是函数式编程中的概念，对于纯函数来说，相同的输入总是得到相同的输出。const add = (a, b) => a + badd(1, 2)const add = (a, b) => a + b + Math.random()add(1, 2)add(1, 2)const arr = [1, 2, 3, 4, 5]arr.slice(1, 2)arr.slice(1, 2)arr.slice(1, 2)const arr = [1, 2, 3, 4, 5

原创 Redux 核心概念 action creator

action在 store 文件夹 里创建 actions 文件夹使用函数来创建 action，通过传参把不一样的数据传递过去就好了，我们把这个创建 action 的函数叫做 actionCreator返回一个 action 对象export const increment = (payload) => ({ type: 'INCREMENT', payload,})export const decrement = (payload) => ({...

原创 Redux的基础使用

Redux的安装1.创建 React 项目npx create-react-app xxxx2.安装 Redux 包yarn add reduxRedux 核心概念Redux 提出三个核心概念：action / reducer / store 需要我们写代码的时候遵守action (动作)：描述要做的事情（要干啥） reducer（函数）：更新状态（怎么干） store（仓库）：整合 action 和 reducer （谁来指挥）在视图中，通过store dispatc

原创 React 基础 useCount

createContext 的使用使用场景：跨组件共享数据 Context 作用：实现跨组件传递数据，而不必在每一个组件传递props ，简化组件之间数据传递的过程 <Context.Provider value>：通过 value 属性提供数据。‘ <Context.Consumer>：在 JSX 中获取 Context 中提供的数据。 使用Provider 组件，如果传递了 value ，Consumer 获取到的是 Provider 中的 value 属性值 .

原创 React 基础 useEffect 操作 DOM

使用技巧参数：在获取DOM 时 ，一般都设置Null 返回值：返回一个带有 Current 属性的对象，通过该对象可以得到DOM对象或者类组件实例useEffect 获取DOM1.使用useRef 创建一个有 current 属性的 ref 对象，{current：null}const xxxRef = useRef(null)2.通过DOM 的ref 属性 和上面创建的对象进行关联<div ref={xxxRef}></div>3. 通过 x.

原创 React 基础 useEffect 发送请求

useEffect 是专门用来处理副作用的，所以可以在 useEffcet 内发送请求获取数据 注意：Effect 只能是一个同步函数，不能使用async 原因：如果 Effect 是 async 的 ，此时返回值是 Promise 对象 ，这样的话，就无法保证清理函数被立即调用 为了使用 async/await 语法 ， 可以在 Effect 内部再次创建 async 函数并调用useEffect(() => { async function fetchMyAPI() { .

原创 Reacrt 基础 自定义Hook

作用：复用状态逻辑 自定义Hook 是一个函数 ，规定函数名称必须以useXxx React 内部会据此来区分是否是一个Hook封装一个获取鼠标位置的 Hook，hooks.jsimport { useState, useEffect } from 'react'export const useMouse = () => { const [pos, setPos] = useState({ x: 0, y: 0, }) u...

原创 React 基础 useEffectt

useEffect 不要对依赖项撒谎useEffect 回调函数中用到的数据 （count） 就是依赖数据，就应该出现在依赖项数组中 如果 useEffect 回调函数中用到了某个数据，但是没有出现在依赖项数组中，就会导致一些 BUG 出现 （例如不会更新） 所以 不要对 useEffect 的依赖项撒谎...

原创 React 基础 useState 基本使用

作用：为函数组件提供状态和修改状态的方法使用：导入 useState 函数 调用 useState 函数 并导入状态的初始值 从 useState 函数的放回值中，拿到状态和修改状态的函数mport React, { useState } from 'react'const App = () => { const [count, setCount] = useState(0) return ( <div style={{ textAlign.

原创 React 基础 Hook

Hook作用：为函数组件提供状态、生命周期等原本 class 组件中才有的功能，可以理解为通过 Hook 为函数式组件钩入了 class 组件的特性

原创 React基础 setState 有推荐语法

setState 更新数据的特点一般情况下，通过 setState() 方法来更新数据，表现是异步的 也就是说当执行 setState 这一行的时候，React 出于性能考虑，并不会马上进行调用来修改state 而是把这个以及后续的对象放到一个更新队列里面进行合并的操作，稍后才会从队列当中把合并后的数据取出进行setState 的操作 也就是多次调用setState(),只会触发一次重新渲染常规// 初始state = { count: 1 }// 更新this.setState.

原创 React基础 生命周期

生命周期l:一个事物从创建到消亡的整个过程，而组件的生命周期说的是组件从被创建到挂载到页面中运行，再到组件卸载的过程 生命周期钩子函数的作用：为开发人员在不同阶段组件提供了时机 只有类组件才能有生命周期React 生命周期挂载阶段挂载阶段常用的生命周期函数有3个 执行顺序是 constructor => render=> componentDidMount钩子函数 触发时机 作用 constructor 创建组件时，最先执行 1. 初始化 st.

原创 React基础 类的静态属性

通过类的static 语法简化 peops 检验和默认值的写法实例成员：通过实例才能能访问的成员（属性或者方法），叫做实例成员 静态成员：通过类或者构造函数本身才能访问的成员（一般是直接挂载到类上的或者通过static 关键字定义的）class Person { // 实例成员（通过实例能访问的成员，挂载到实例自身上的） name = 'zs', // 静态（通过构造函数或类才能访问到的成员） static age = 18 // 实例成员（通过实例能..

原创 React基础 组件传值

父传子父组件可以传递任意的类型import React, { Component } from 'react'import Child from './Child'export default class Parent extends Component { state = { salary: 11.46 } changeAge = () => { console.log(111) } render() { return ( <div&g.

原创 React基础 状态的修改和状态的不可变性

修改状态通过 setState 修改状态的写法语法：this.setState({要修改的部分数据}) 作用：修改state 并更新视图 来源：setState() 函数是通过继承来的 注意：setState() 的操作是合并，不会影响没有操作到的数据状态的不可变性不要直接修改数据，而是要产生一份新的数据，然后通过setState() 用新的数据覆盖原来的数据，这么做的其中一个重要原因就是为了性能优化受控表单组件能够使用受控组件的方式收集到表单中的数据受控不受控一般是.

原创 React基础 解决this指向问题

方法1：高阶函数：通过this 来直接调用 handleClick 并返回箭头函数柯里化：通过函数调用继续返回函数的形式，实现多次接收参数最后统一处理的函数编码形式class App extends React.Component { state = { count: 0, } handleClick() { // 这里的 this 指向是什么？那就看是谁调用的！ return () => {

原创 React基础 事件绑定

类组件中事件绑定class App extends React.Component { render() { return ( <button onClick={() => { console.log('Hello World') }} > click &

原创 React基础 组件的状态

有状态/无状态组件有状态组件：能定义 state 的组件 ， 类组件就是有状态的组件 无状态组件：不能定义 state 的组件，函数组件一般叫做无状态组件无状态组件的应用场景组件本身就不需要有状态，例如渲染一段静态的内容 组件本身就没有状态，有可能只需要从外部传入的状态就够了类组件状态第一种 ： 在 constructor 中通过 this.state={}继承的时候，子组件一旦有constructor，constructor 内部必须有super()constructor中定义

原创 React 基础

React 特点 声明式 只需要描述 UI（HTML）看起来是什么样子，就像写 HTML 一样简单，React 内部负责渲染 UI，并在数据变化时自动更新 UI。const jsx = ( <div className='app'> <h1>Hello World！</h1> <p>动态数据：{count}</p> </div>) 组件化 把复杂的页面拆分成一.

原创 权限管理---动态路由管理

权限管理的流程用户管理：账号的增删改查，为账号分配权限 角色管理：角色的增删改查，为角色分配权限数据 权限管理：需要进行权限管理的页面进行增删改查api主要是后端处理 前端：响应拦截统一处理路由路由分为两大模块 静态路由：登录页，主页，404等 不需要权限的页面 动态路由：需要权限管理的页面 默认为静态路由 在获取到用户信息后 用户信息中包括当前用户能访问的权限页面的数据 通过动态路由匹配出能访问的路由信息 通过addRoutes动态添加到路由上 坑点

原创 VUEX的基本使用

1：下载 npm i vuex2:导入 src/store/index.js import Vuex from 'vuex'3:注册 import Vue from 'vue' Vue.use(Vuex)4:实例化 const store =new Vuex.Store({ state:{ // 共享的数制 }, mutations:{ }， actio.

原创 proxy代理方法解决跨域问题

写在devServer里面proxy:{ 哪些接口需要代理:{ target:'真实接口地址'， pathRewrite:{ '^/代理接口'：'' } }}

原创 跨域浏览器

创建一个文件夹， C:\aaa 创建一个谷歌浏览器的快捷方式 在快捷方式点右键 =>属性=>目标，移动到最后，加入空格，粘贴 --disable-web-security --user-data-dir=C:\aaa 点击确定，打开后就是跨域浏览器 ...

原创 VUE动画 的基本使用

单元素动画动画条件：进入与离开的动作，比如v-if，v-show用transition包住动画标签xxx是定义的名字 name=“xxx”xxx-enter:进入前状态，进入是希望从什么状态变为正常状态 xxx-enter-active:进入动画过程中一直存在的class,常用于做动画的执行体，承载 transition all 0.5 xxx-leave-to：离开时的状态，离开时，希望从正常状态变到什么状态 xxx-leave-active：离开过程中一直存在的class，常用..

原创 SCSS 的基础使用

混入语法继承可以使用@if和@else 判断条件语句

原创 mockjs ajax请求拦截器

mockjs是用来在后端接口没写好的时候来进行数据模拟使用步骤：下载 mock yarn add mockjs 导入import Mock from ‘mockjs’ 使用 Mock.mock(需要拦截url地址,{ 产生的随机数 }) 引入 js

原创 生产环境和开发环境

开发环境： development在跟目录创建一个文件.env.development 在文件中设置相应环境的变量 接口基地址：VUE_APP_开头 VUE_APP_URL=“开发环境接口基地址” 生产环境： production在根目录中创建一个文件.env.production 在文件中设置相应环境变量 接口基地址:VUE_APP_开头 VUE_APP_URL=“开发环境接口基地址” 使用：process.env.VUE_AP...

原创 vue 组件的进阶

动态组件多个组件使用同一个挂载点，并动态进行切换，这就是动态组件：is 可以切换挂载的组件将导入的多个组件一起导入<component :is="comName"></component><template> <div> <button @click="comName = 'UserName'">账号密码填写</button> <button @click="comNam.