*

前言当安装了较多模块后，node_modules目录下的文件会很多，直接删除整个目录会很慢，下面介绍些快速删除node_modules目录的方法。方法一：使用rimraf模块的命令在全局安装rimraf模块，然后通过其命令来快速删除node_modules目录：npm install rimraf -grimraf node_modules方法二：使用命令来删除目录Windows下使用rmdir命令首先在cmd窗口中进入到node_modules文件夹所在的路径，接着执行命令：rmdir

钩子函数：钩子函数：钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作。一段用以处理系统消息的程序。“钩子”就是在某个阶段给你一个做某些处理的机会。钩子函数： 1、是个函数，在系统消息触发时被系统调用 2、不是用户自己触发的钩子函数的名称是确定的，当系统消息触发，自动会调用。例如react的componentWillUpdate函数，用户只需要编写componentWillUpdate的函数体，当组件状态改变要更新时，系统就会调用componentWillUpdate。常见的钩子函

一、使用 BrowserRouter 的问题a. 问题: 刷新某个路由路径时, 会出现 404 的错误b. 原因: 项目根路径后的 path 路径会被当作后台路由路径, 去请求对应的后台路由,但没有c. 解决: 使用自定义中间件去读取返回 index 页面展现d. 注意: 前端路由的路径不要与后台路由路径相同(并且请求方式也相同)二、解决：实操0.前端/src/api/index.js未改动，仅做参考import ajax from './ajax'import jsonp from 'j

一、在同一个服务器上同一端口运行即：没有跨域问题的直接部署1.把上节打包好的文件，build目录内所有文件移到后端项目的public中(项目名：react-admin-server)2.然后把server中的静态文件配置改为：app.use(express.static('public')) //【1】修改静态文件位置public/*应用的启动模块1. 通过express启动服务器2. 通过mongoose连接数据库 说明: 只有当连接上数据库后才去启动服务器3. 使用中间件 */c

1）直接运行打包命令yarn run build或npm run build等待完成即可在项目目录看到build文件夹，表示成功。目录结构如下

一、hashRouter为什么要用hashrouter项目中控制路由跳转使用的是BrowserRouter在开发过程中使用是没有问题的，但是将页面上传至服务器之后，问题就来了：用户访问的资源不存在，页面是空白的。[原因]：在browserHistory 模式下，URL 是指向真实 URL 的资源路径，当通过真实 URL 访问网站的时候，由于路径是指向服务器的真实路径，但该路径下并没有相关资源，所以用户访问的资源不存在。经过排查是路径的问题，将BrowserRouter 改为 HashRouter

一、新建文件及文件夹建立文件夹src/pages/not-found在其下建立文件：E:.│ not-found.jsx│ not-found.less│└─images 404.png二、src/pages/admin/admin.jsximport React,{Component} from 'react'import {Redirect,Route,Switch} from 'react-router-dom' //引入路由组件// import me

一、简介及环境安装les135-1.常用数据可视化图表库1) echartsa. https://echarts.baidu.com/b. 百度开源, 如果要在 react 项目中使用, 需要下载 echarts-for-react2) G2a. https://antv.alipay.com/zh-cn/g2/3.x/index.htmlb. 阿里开源3) bizchartsa. https://bizcharts.net/products/bizChartsb. 基于 react

上接：https://blog.csdn.net/u010132177/article/details/105639035一、代码部分1.src/redux/actions.js附件redux简化：https://zhuanlan.zhihu.com/p/61863127

一、实战

一、redux-thunk基础作用：在 redux 中执行异步任务(ajax, 定时器)1）安装cnpm install --save redux-thunk2）使用：在redux/store.js中//redux最核心的管理对象: storeimport {createStore, applyMiddleware} from 'redux' //【0】引入applyMiddlewa...

1.问题redux 与 react 组件的代码耦合度太高编码不够简洁2. 解决方案：react-redux1. 理解一个 react 插件库专门用来简化 react 应用中使用 redux2. React-Redux 将所有组件分成两大类1) UI 组件a. 只负责 UI 的呈现，不带有任何业务逻辑b. 通过 props 接收数据(一般数据和函数)c. 不使用任何...

前端常用：https://docschina.org/1.1 学习文档英文文档: https://redux.js.org/中文文档: https://cn.redux.js.org/Github: https://github.com/reactjs/redux1.2. redux 是什么?redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库)...

1. Component存在的问题?父组件重新render(), 当前组件也会重新执行render(), 即使没有任何变化当前组件setState(), 重新执行render(), 即使state没有任何变化2. 解决Component存在的问题原因: 组件的componentShouldUpdate()默认返回true, 即使数据没有变化render()都会重新执行办法1: 重写...

1.role/index.jsx选择某个radio时选中不中，必须选择行才行https://3x.ant.design/components/table-cn/#rowSelection【1】选择某个radio时回调设置一下选中状态 <Table bordered /**边框 */ rowKey='_id' /**表格行 ...

一、基础页面1.请求数据数据 http://localhost:5000/manage/user/list{ "status": 0, "data": { "users": [ { "_id": "5e7d7953d4a98d1a1c1cf00a", "username":...

setState()的同步、异步、多次调用

一、用户管理

一、商品提交修改0.ajax请求src/ajax.jsimport axios from 'axios'import {message} from 'antd'/*能发送异步ajax请求的函数模块封装axios库函数的返回值是promise对象1. 优化1: 统一处理请求异常? 在外层包一个自己创建的promise对象 在请求出错时, 不reject(error),...

在这里插入代码片

《React后台管理系统实战：五》产品管理（三）商品列表页一、

零：准备工作0.1home.jsx

一、概述1.1目录结构及功能src/pages/admin/product/ add-update.jsx //添加及更新产品 detail.jsx //产品详情 home.jsx //产品默认页 index.jsx //产品路由页 index.less //产品样式二、路由搭建2.1 index.jsx为防止不能匹配到product/xxx，加上exact如果以上都不...

问题：点提交按钮后执行validateFields()验证成功，但不能执行if(!error){//验证成功}内内容分析及解决：问题产生原因是： 使用了自定义验证函数valiPrice，它的每个分支必须执行callback()函数，否则将无法正确执行【1】此处必须进行回调函数调用，否则【2】处将无法通过验证并执行//表单提交验证 submit=()=>{ t...

一、静态页面1. pages/category/index.jsximport React,{Component} from 'react'import { Button, Card, //引入卡片 Table, //引入表格 Icon, } from 'antd'; import LinkButton from '../../../component...

一、布局及排版1.布局src/pages/admin/header/index.jsximport React,{Component} from 'react'import './header.less'export default class Header extends Component{ render(){ return( <...

二

一、day01知识点1. 项目开发准备1). 描述项目2). 技术选型 3). API接口/接口文档/测试接口2. 启动项目开发1). 使用react脚手架创建项目2). 开发环境运行: npm start3). 生产环境打包运行: npm run build serve build3. git管理项目1). 创建远程仓库2). 创建本地仓库 a. 配置.gi...

什么是 NPMnpm之于Node，就像pip之于Python,gem之于Ruby,composer之于PHP。npm是Node官方提供的包管理工具，他已经成了Node包的标准发布平台，用于Node包的发布、传播、依赖控制。npm提供了命令行工具，使你可以方便地下载、安装、升级、删除包，也可以让你作为开发者发布并维护包。为什么要使用 NPMnpm是随同Node一起安装的包管理工具，能解决No...

一、自写一个方法(函数)，然后用按钮onClick触发它如果想要在react模板render()内执行一个自定方法（函数），就要这样写，在components目录下新建立一个【Demo.js】：import React from 'react';class Demo extends React.Component{ constructor(){ super(); ...

接：https://blog.csdn.net/u010132177/article/details/103346244用上节建好的my-app项目：my-app/ README.md node_modules/ package.json .gitignore public/ favicon.ico index.html manifest.json...

一、配置cnpm代替npm如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。我们建议在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack，本教程使用 webpack。国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:$ npm install...

一、Antd(Ant Design)的使用：引入全部Css样式1.1 antd官网：https://ant.design/docs/react/introduce-cn1.2 React中使用Antd1、在项目根目录安装antd【每个项目都安装一次】： npm install antd --save / yarn add antd / cnpm install...

一、路由模块化（用字典定义路由，然后循环出来）1.官方文档参考【官方文档】https://reacttraining.com/react-router/web/guides/quick-start【路由模块化实例】https://reacttraining.com/react-router/web/example/route-config2.路由模块化：实现代码其它代码参考：十七：htt...

一、概述实现功能：点首页，展示首页，同时在左侧有个首页的各个栏目导航；点用户，同首页；二、代码实现1. src/App.jsimport React from 'react';import './App.css';import { BrowserRouter as Router, Route,Link } from 'react-router-dom'; //引入路由模块impor...

一、React加载数据流程回顾先看上一节的产品详情代码：https://blog.csdn.net/u010132177/article/details/103184176【Pcontent.js】import React, { Component } from 'react';import axios from 'axios';import '../css/pcontent.css';...

一、功能从首页列表点进去，转到详情页列表、详情从Api获取Api列表：http://a.itying.com/api/productlist详情：http://a.itying.com/api/productcontent?id=5ac1a22011f48140d0002955二、知识点路由需要安装，并引用后才能用路由的使用api解析：axios ；安装并引用后才能用生命周...

创建实例用create-react-app时，需要执行指令：create-react-app my-app来创建一个新的React应用。由于某原因,在拉取各种资源时,往往会巨慢。解决方案是换源,虽然平常使用cnpm来代替npm,但也只是使用新的指令而已，而在寻求create-react-app的相关配置希望修改registry时失败了，最后发现create-react-app指令默认调用np...

概述新闻列表 —跳转—> 详情页 时，想把列表对应的id传到详情页里，可用到三种传值方法：1、动态路由传值2、get传值3、localstorage传值一、动态路由传值【App.js】主要路由配置都在此处。01所在import React from 'react';import './App.css';import { BrowserRouter as Router, R...

路由的定义及作用根组件根据客户端不同的请求网址显示时，要卸载上一个组件，再挂载下一个组件，如果手动操作话将是一个巨大麻烦。具体过程如下图：【根组件】 ↑【首页组件】 【新闻组件】 【商品组件】【react-router】可以让根组件动态的去挂载不同的其他组件。（根据用户访问的地址动态的加载不同的组件）一、路由使用步骤【官网文档入口】：https://github.com...