- 博客(14)
- 收藏
- 关注
RSS订阅原创 react路由跳转及动态路由:（声明式导航）
一、React路由的跳转:（声明式导航）跟vue的 router-veiw 一样 ，替换a标签：好处是可以实现高亮React路由跳转用，<Navlink to={ 你要跳转的页面}>import React, { Component } from 'react' //引入react核心import {NavLink} from 'react-router-dom' //从路由配置中引入Navlinkimport './index.css'//引入设置好的css样式（高亮效果样式）
2020-08-04 06:51:17
1110
原创 react中的withRouter高阶组件
withRouter高阶组件：（实现编程式导航，js代码调转）出现原因：1、默认情况下必须是经过Route路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.push(’/detail’)跳转到对应路由的页面作用：高阶组件中的withRouter, 作用是将一个没有被Route路由包裹的组件，包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的p
2020-08-03 20:46:18
1040
1
原创 react配置代理跨域
React代理配置跨域：相关网站： https://create-react-app.dev/docs/proxying-api-requests-in-development/官网需要下载： npm install http-proxy-middleware --save在下载官方React脚手架的时候，已经有了这个，只不过不是最新版本的代理配置，如果按照官网的来就下载。流程都一样注：配置完后需要重新启动脚手架，才能生效老版本的配置流程：1、在src下新建setupProxy.js 名字必需是
2020-08-03 20:44:08
353
原创 react后台管理配置路由及侧边栏：
react后台管理系统路由配置：大概需求：假设：dashboard文件放的是整个页面，分为导航，和侧边栏，中间内容栏；导航和侧边每个路由都需要，将相关的路由页面都放到中间内容共栏就可以。1、分为两部分大文件、login登入页面，/ 转到到dashboard，这样分的好处是，不用跳转到一个页面就判断有没有登入。这里进行统一判断，如果没有登入 ，其他以/ 开头的页面都会跳转到login中。一旦登入后就跳转到dashboard页面中，这个页面有导航栏，和侧边栏，这两个是公用内容，哪里都用的上。下面部分就
2020-08-03 20:38:19
4481
1
原创 react组件之间的传值方法：
react组件之间传值的方法一、子组件通信父组件（toduls案例）需求：点击子组件的时候，根据当前下标删除父组件对应的内容子通信父：函数todels案例：import React, { Component } from 'react'class List extends Component{ //1、子组件render(){console.log(this.props.mylist)let mylist = this.props.mylist //4、拿到父组件传递过来的值return
2020-08-03 20:05:34
1097
原创 react图片懒加载和路由懒加载的使用
一、路由懒加载实现代码分割，让组件按需加载，优化项目性能。1、路由文档里面有详细介绍：https://reactrouter.com/web/guides/code-splitting安装：npm install @loadable/component -S使用语法:安装好后引入组件的时候就这样引入就可以了const Home = loadable(() =>import ( ‘/home’))2、如果遇到eslint报错就安装这个插件（自己搭建脚手架不需要）：1、安装：npm in
2020-08-03 19:47:08
585
原创 React生命周期大全：
react生命周期分三个阶段：1、初始化阶段（挂载）a、componentWillMount （）: —— 用的较少，组件挂载到DOM前调用，且只会被调用一次，它代表的过程是组件已经经历了constructor（）和state状态初始化数据后，但是还未渲染DOMb、render （）:—— render函数会插入jsx生成的dom结构，react会生成一份虚拟DOM树，在每一次组件更新时，在此reacrt会通过其diff算法比较新旧的DOM树，比较后，重新渲染真实DOM。c、componentDid
2020-08-03 19:39:41
293
原创 Vue代理配置
代理配置跨域：跨域处理三种方法：1、jsonp2、sors3、代理跨域只存在浏览器中方案一自己做一个nodejs的中间层代理：1、当前页面地址2、nodejs中间层3、目标地址4、目标地址的某个接口地址方案二配置vue脚手架的配置文件vue 脚手架创建项目，在本地开发时启动（npm run serve）就是通过node实现的，所以通过vue配置代理是后端请求后端数据，而不是通过浏览器，这样就不会跨域。使用：1、vue有个配置文件叫vue.config.js，这里可以做很多配置
2020-08-03 12:10:24
401
原创 Axios的封装及使用
一、axios请求数据：最常用的请求工具优点：1、它是基于Promise封装的，用起来非常方便，解决回调地狱问题。2、它在客户端，node.js服务器都可以进行使用使用：1、安装：npm install axios -S2、进行axios封装，在src下新建utils文件夹，新建fetch.js文件（名字随便）然后写代码请求拦截器响应拦截器// 1、引入 axiosimport axios from 'axios'// 2、创建一个 axios 的实例对象let baseURL
2020-08-03 11:47:52
2033
原创 git安装及使用
一、git安装：1、去git官网下载2、检测：打开命令行，输入git --version3、首次安装需要配置一些全局项a、检测全局配置打开命令行，输入 git config --listb、配置全局用户名打开命令行输入 git config --global user.name "你的名字"名字：随便，英文就行c、配置全局邮箱：打开命令输入 git config --global user.email "你的邮箱"邮箱：要是一个真实的邮箱，这个邮箱经常用d、配置项的作用，上传代码
2020-08-03 09:47:13
430
原创 一、webpack配置
九、集成eslint代码检测工具：1、安装：npm install eslint-loader --save-devnpm install eslint --save-dev2、配置webpack.conifg.js注：代码检测必需在babel编译成es5之前检测，所以加上nforce: "pre"这行代码 config.module.rules.push({ test: /\.js$/, exclude: /node_modules/, use: ['eslint-
2020-08-03 09:20:12
269
原创 rem移动端布局
rem移动端布局：1、rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。2、什么是dpr?dpr是屏幕像素密码比计算：dpr=液晶屏幕px尺寸 / 物理尺寸（量多少就是多少）常用的dpr有：dpr = 2，dpr=3window.devicePixelRatio这个api可以获取到当前屏幕的dpr3、区分css单位：px:绝对尺寸 em:em：相对于字体单位来设置的，就是当前元素（父元素）的font-size，如果
2020-07-01 20:04:28
147
原创 Cookie-Session擦出的火花
Cookie-Session擦出的火花cookie-session的整个运作过程，利用这个方法来做身份登入验证操作**Session的作用：**记录一系列状态**Session原理：**HTTP是一种没有状态的协议，当你访问同一个网站的购物车时，它也就不知道是谁访问，读取不出来信息，所以必须有某种机制来识别具体的用户，这个机制就是Session。**完整流程：**客户端用户名跟密码请求登入...
2020-03-16 12:09:51
78
原创 闭包，就是这么简单
闭包函数：函数内部的函数，就是函数内部再次声明一个函数就叫做闭包。##闭包生成的三个必要条件：1、 在函数a内部直接或者间接返回一个函数b2、 B函数内部使用着a函数的私有变量（私有数据）3、 A函数外部有一个变量接收函数b代码示例如下：例二、每次外部函数执行的时候，外部函数的地址不同，都会创建一个新的地址##闭包的特点及优缺点：1、延长变量的生命周期优点：因为执行空间不会...
2020-02-23 23:15:42
95
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人