- 博客(14)
- 收藏
- 关注
原创 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关注的人