weixin_42588966的博客

原创 React动态加载模块react-loadable

为什么要动态加载进入项目后会加载bundle.js，就是所有页面都打包到这里，第一次加载页面就把所有的页面都加载好了。你进入的是首页，但是它把登录页，详情页。。。全部都加载出来了。好处是：当你再进入其他页面的时候速度非常快坏处是：当你的项目很大的时候，进第一进入时加载时间可能会很长动态加载后它不会把所有的页面都打包在一起，第一次进入的时候也不会直接加载所有页面。当你进入登录页面的...

原创 常用样式

1. 清除浮动清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题给父元素加上overflow: hidden;缺点：1.超出父元素的都被截掉了，会和absolute冲突2.会和margin: 0 auto; 冲突额外标签法在最后一个浮动标签后，新加一个标签，给其设置clear：both；缺点：添加了多余的标签使用after伪元素清除浮动（推荐）clearfi...

原创 简书项目总结

1. 插件和脚手架脚手架： create-react-app插件reduxreact-reduximmutableredux-immutableaxiosredux-thunkstyled-components2. 目录3. 调试工具和reduc-thunksrc/store/index.jsimport { createStore, compose, applyM...

原创 返回顶部效果JS实现

window.scrollTo(0, 0)

原创 工具网站

http://tools.bugscaner.com/torrentandmagnet/

原创 react插件react-transiton-group的CSSTransition包裹的元素无法添加任何类名

正确用法<CSSTransition in={this.state.focused} timeout={500} classNames="slide"> <NavSearch className={this.state.focused ? 'focused' : ''} onFocus={this.handleFocus} onBlur={this....

原创 styled-components的使用

新旧api对比原来的injectGlobal在4.x.x以后的版本被废除了，新版使用createGlobalStyle，用法上也和老版的不一样定义style.jsimport { createGlobalStyle } from 'styled-components';export const GlobalStyle = createGlobalStyle` body { ...

原创 redux-saga入门

作用管理异步代码，把所有的异步代码都放入一个文件中去（mySaga.js）对比redux-thunksaga更复杂，它提供了更丰富的api（put，takeEvery…）thunk更简单，它只是让你的action支持func类型原理action被dispatch后原本只有store能收到，然后store传给reducer，最后在reducer中处理。配置了redux-saga后，你的...

原创 redux-thunk中间件管理异步代码

原理（1）redux-thunk是redux的中间件，不是react的（2）中间：是指action和store中间，它们的中间是dispatch，所以中间件是对dispatch的封装（3）dispatch的作用原本是拿到对象类型的action后直接传给store，如果拿到的是函数类型的action直接报错（4）redux-thunk让dispatch支持函数类型的aciton，当遇到函数类...

转载 charles配置map local失效

参考：charles配置map local失效

原创 React Ant Design

1. 上传组件（1）一般来说上传插件的回调函数是上传成功才触发，只触发一次（2）但是Ant Design的上传组件从点击上传但是还没有上传成功就开始触发change回调函数，所以点击一次上传他会触发3次（3）所以对于ant Design上传插件你需要手动去判断何时上传成功（4）当它返回的数组中的最后一个图片对象存在reponse属性的时候，表示上传成功（5）当编辑（数据回填然后修改）的时...

原创 react编辑页面表单数据回填

场景点击某个商品的编辑按钮的时候， 进入编辑页面，父组件需要根据商品ID去异步回去商品详情，拿到后放入自己的state，然后传给子组件，子组件拿到数据后，放入自己的state，然后通过value属性来展示默认值。componentWillReceiveProps当子组件接受到父组件传过来的参数的时候会触发，除了第一次子组件mounted的时候不执行，每次父组件重新渲染，即使传给子组件的pro...

转载 React16 - 为什么你不需要 getDerivedStateFromProps

前言:在 React 16.3 中, 新的生命周期函数被引入了, 即静态方法 getDerivedStateFromProps.componentWillReceiveProps, componentWillMount, componentWillUpdate 这三个生命周期函数都被添加了 UNSAFE_ 不安全标记. React 提示我们不应该继续使用这些生命周期函数.getDerived...

原创 《React电商后台管理系统》总结

1.网址后台完整功能浏览网址：http://adminv2.happymmall.com/借口查询地址：https://gitee.com/imooccode/happymmallwiki/wikis/Home项目地址: React电商后台管理系统2.功能模块用户模块：登陆 退出 用户列表商品模块：商品列表 商品详情 添加和修改商品品类模块：品类列表 添加品类 修改品类订单模块...

原创 分层架构

项目分层架构：逻辑层，服务层，工具层逻辑层代码（user-list.jsx）：import React, { Component } from 'react';import Util from 'util/mm.jsx';import User from 'service/server-user.jsx';const...

原创 mac终端输入路径自动补全功能

用惯了windows命令行工具的按Tab自动补全路径功能后,在mac terminal上敲命令很不习惯。其实mac terminal也有这个功能。在命令行输入nano .inputrc进入.inputrc的编辑界面，输入如下语句：set completion-ignore-case on set show-all-if-ambiguous on TAB: menu-completeC...

原创 Mac系统找不到.git目录

显示隐藏文件：1、打开一个Terminal终端窗口，输入：defaults write com.apple.finder AppleShowAllFiles TRUE2、 重启Finder，在Terminal终端窗口，输入：killall Finder恢复隐藏设置：1、同样打开Terminal终端窗口，输入：defaults write com.apple.finder Appl...

原创 react错误

1.Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled意思就是： 你把一个input组件从非受控变成了受控组件， 这是react不允许的当你数据没...

转载 react无法使用this.push.history.push()来跳转

https://www.cnblogs.com/luowenshuai/p/9526341.html

原创 端口被占用

https://blog.csdn.net/liwenfei123/article/details/80199601?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&utm_source=distribute.pc_relevant.none-task-blog-BlogComm...

原创 谷歌浏览器调试如何阻止跳转

原创 React项目手动搭建webpack开发环境

(一个配置好的react空项目, react+ react-router)链接：https://pan.baidu.com/s/1laPolA6BH6Isvga4r7-cQA提取码：k0qb1. 配置webpackyarn add weback@3.10.0 --dev它打包出来的是一个js文件2. 配置htmlyarn add html-webpack-plugin@2.30....

原创 react图片上传组件向前兼容

1. 资源(1) 源组件: React-FileUpload(2) 兼容后的组件:链接：https://pan.baidu.com/s/1CioevvXr7aqYlr3zpP8GuQ提取码：1wbf(3) 项目: React电商后台管理系统2. 描述最近在写项目的时候, 用到了文件上传组件, 于是就去github上面找了一个, React-FileUpload但是使用的时候报错, ...

原创 React二级分类选择器

1. 结构0(根品类) 一级品类1 二级品类1001 二级品类1002 二级品类1003 二级品类1004 一级品类2 二级品类2001 二级品类2002 二级品类2003 二级品类20042. 逻辑(1) 页面一加载就去获取一级品类(2) 当你没有选择一级品类的时候，二级品类不可见（隐藏）(3) 当你选择了一级品类，就去立马获取和显示这个一级品类对...

原创 react分页组件rc-pagination再封装

1. 再封装组件的好处拿 rc-pagiantion组件来举例:import RcPagination from 'rc-pagination';import 'rc-pagination/assets/index.css';<RcPagination hideOnSinglePage showQuickJumper />(1) 减少重复代码: 封装前每次你使用这个插...

原创 React封装一个通用的列表组件

1. 两种传数据的方式(1) 传数据: 首选, 因为代码少呀, 使用的时候只需要传入一个数组, 通过 this.props(2) 传入jsx: 这种方式更加灵活但是重复代码更多, 通过 this.props.children传入jsx的话也可以通过props来传, 因为props可以接受一个组件或者jsx变量2. 结合这个列表来选择数据传入方式:(1) thead: 表头的就是为...

原创 react-router-dom的Switch匹配顺序

从上到下匹配, 一旦匹配到了, 就不往下匹配了错误页面的配置, 就是上面都无法匹配到, 就匹配错误页面<Route component={ ErrorPage } />class App extends React.Component { render () { let LayoutRouter = ( <Layout> <Switch&g...

原创 Nginx虚拟主机配置

注意: 建议使用的时候把注释全部去掉adminv2.jianliwu.com.conf(页面和端口)server { listen 80; server_name adminv2.jianliwu.com; access_log /etc/nginx/logs/access.log combined; index index.html index.jsp index.php; # 如果...

原创 shell脚本自动发布react项目

说明:(1) /product/front/ 打包后的代码就放这里(2) /developer/git-repository/ 远程仓库拉去的代码放这里(3) 我的项目名称是: mmall这些都需要根据你的实际情况去修改, 而且这个脚本文件需要放入你的服务器(4) 发布命令: ./mmal-deploy.sh mmall , 第1个参数是你的项目名称#mmall-deploy.sh...

原创 记录react项目的上线和发布

1. 总体流程1.1 增加上线需要的适配代码(1) 静态资源需要单独的静态域名, 例如: s.xxx.com, 所以需要在代码里增加对环境的判断(2) 开发人员提交pull request请求(3) 管理员审核,通过后合并到master分支上1.2 生产环境配置(1) 安装NodeJs: 作为一些工具的依赖环境(2) 安装Yarn : 用来在线上安装依赖包(3) 安装Git: 安装...

原创 阿里云服务器无法访问

1. 原因阿里云默认是没有开启外网http访问的, 默认它的80端口没有开放, 需要自己去配置2. 解决方法1、阿里云服务器实例-选择“更多”-“网络和安全组”-选择“安全组配置”。2、点击“配置规则”-“添加安全规则”-http(80)授权对象0.0.0.0/0。(同理如果想要使用https也需添加规则)...

原创 react常用工具函数

class MUtill { // 1.发送AJAX请求(带路由保护, 每次发请求都去验证有没有登录状态,需要接口里面有对应的字段才行) request (param) { return new Promise((resolve, reject) => { $.ajax({ type : param.type || 'get', url : param...

原创 react封装一个带有路由保护功能的request函数

class MUtill { // 1.发送AJAX请求 request (param) { return new Promise((resolve, reject) => { $.ajax({ type : param.type || 'get', url : param.url || '', dataType : param.data...

原创 react富文本数据回填

1. 问题描述如果直接显示接口传过来的内容<div className="col-md-10"> { this.state.detail }</div>结果如下图: (显然不是我们想要的)2. 解决方法<div className="col-md-10"> <div dangerouslySetInnerHTML={{ __html: ...

原创 react子组件获取父组件传过来的值

<CategorySelector categoryId={ this.state.categoryId } parentCategoryId={ this.state.parentCategoryId } onCategoryChange={(categoryId, parentCategoryId) => this.onCategoryChange(categoryI...

原创 浏览器突然无法访问网页

1. 现象电脑连接的是无线网, 玩着玩着突然网页就打不开了,但是电脑上面除了浏览器其他的软件正常运行,例如: 微信, 而且此时手机的浏览器正常使用2. 扩展这里涉及到一个问题:用户输入一个网站然后按回车发生了什么?1.解析url: 协议, 域名, 端口, 路径, 资源, 参数2. DNS解析: 把域名解析成对应的IP3. 资源请求: 拿到IP和端口就能找到目标服务器, 然后带着各种参...

原创 富文本编辑器simditor

依赖了jQuery, 而且它有自己的样式, 别忘记引入报错:Simditor.connect is not a function这是因为版本问题, 也和jQuery有关降低simditor版本就行了我的react项目里面:simditor@2.3.6jQuery@3.4.1...

原创 React Developer Tools不生效

DevTools failed to parse SourceMap进入谷歌浏览器开发者工具DevTool的设置页面。框起来的两个选项不要打钩具体原因参考: 解决Failed to parse SourceMap: http:xxx 问题...

原创 node-sass报错

（1）每次尝试重新安装node-sass的时候你都需要把原来的node-sass卸载掉，否则你想要覆盖安装的时候他不会去重新下载node-sass它会直接从缓存中拿。（2）node-sass需要python2.x的环境，如果没有就去安装一个。具体如何安装，请参考我的《Python安装与卸载流程》（3）当报错gyp ERR! build error解决办法：主要是windows平台缺少编...

原创 Python安装与卸载流程

1. 相关资源（python@3.8.2 exe）链接：https://pan.baidu.com/s/1Kb9ZqGV-nVfZDsP9oW039Q提取码：s51o（python@2.7.17 msi）链接：https://pan.baidu.com/s/1eNRQl3joI2xNmrfsidShxA提取码：wyq62. python安装流程到官网下载对应的包，然后默认安装就行了...