- 博客(29)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 React开发环境安装教程
1.安装Node(Node安装会附带 npm的安装)网址：https://nodejs.org/zh-cn/下载完成后，双击“node-v（版本号）.msi”，开始安装Node.js然后就一直 Next到最后Finish就OK啦~至此Node.js已经安装完成，可以先进行下简单的测试安装是否成功了，后面还要进行环境配置；在键盘按下【win+R】键，输入c...
2020-04-21 16:33:03
506
原创 用React做一个后台管理系统(个人总结，更新中。。。)
目录1.环境搭建1.1 项目结构设计1.2 样式框架设计1.3 webpack规则配置1.4 页面入口设置1.5 跨域http-proxy-middleware+axios二次封装1.6 Eslint统一规则2.组件系统2.1 设计页面基本UI布局1.环境搭建1.1 项目结构设计重点是src下面的各个模块的定义assets 静态资源common 公用组件config 权限配置/全局变量配置/菜单配置/路由配置/各个环境的请求地址配置...
2021-03-09 17:35:10
1091
原创 (十二)学习笔记--路由封装 +懒加载
1.根据模块，建立路由目录2.路由配置信息设置routes/purchase.js// 采购模块import { authorityConfig } from '@/config/authority';const purchaseRoute = [ { component: 'module/purchase/contract/making', path: '/purContractMaking/:id', name: '采购合.
2020-09-14 11:16:30
390
原创 Antd表格单元格编辑代码保存
1//表格单元格编辑const EditableContext = React.createContext();const EditableRow = ({ index, ...props }) => { const [form] = Form.useForm(); return ( <Form form={form} component={false}> <EditableContext.Provider value={form}>..
2020-07-21 20:08:25
957
1
原创 (十一)学习笔记--redux-persist持久化数据存储+中间件封装
说明： 一般在react项目中，我们通过redux和react-redux来存储和管理数据，但是使用redux存储数据时，会有一个问题，如果用户刷新了页面，那么通过redux存储的全局数据就会被重置，比如登录状态等。 这个时候有没有解决办法呢？答案肯定是有的： 一般我们可以使用sessionStorage或者localStorage来达到数据存储的要求，但既然我们使用了redux来管理和存储全局数据，如果再使用sessionStorage或者localStorage来读写数据，.
2020-06-09 19:13:54
1651
原创 (十)学习笔记--react使用 http-proxy-middleware解决跨域问题+ajax二次封装
第一步 安装 http-proxy-middleware第二步 src下创建一个 setupProxy.js文件const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function (app) { // proxy第一个参数为要代理的路由 // 第二参数中target为代理后的请求网址，changeOrigin是否改变请求头，其他参数请看官网 app.
2020-06-09 14:52:59
869
原创 (九)学习笔记--提高开发效率的Lodash
Lodash篇1.深层查找属性值var ownerArr = [{ "owner": "Colin", "pets": [{"name": "dog1"}, {"name": "dog2"}] }, { "owner": "John", "pets": [{"name": "dog3"}, {"name": "dog4"}] }];var lodashMap = _.map(ownerArr, 'pets[0..
2020-05-26 19:43:30
298
原创 (八)学习笔记--解决react中history.push无效的问题
场景：一个组件中，含有ul展开数组的组件，在每一行中，都能点击相应的这一行，跳转到对应的页面。也就是说，组件套组件，子组件中this.props.history.push无法工作。提示没有push这个函数。因为这时的props中没有history这个属性。解决方法1. 使用 withRouterwithRouter高阶组件，提供了history让你使用~import React from "react";import {withRouter} from "react-r.
2020-05-26 10:36:50
4247
2
原创 (七)学习笔记--异步组件+withRouter使用
1.下载https://github.com/jamiebuilds/react-loadableyarn add react-loadable2.在所需异步组件的文件夹下创建loadable.js3.编写loadable.jsimport React from 'react'import Loadable from 'react-loadable';con...
2020-05-08 15:49:13
229
原创 (五)学习笔记--动态路由运用
1.Link写法:<Link key={index} to={'/detail/' + id}></Link>2.Route动态路由写法:<Route path='/detail/:id' exact component={Detail}></Route>3.跳转到相关页面后获取Id:this.props.matc...
2020-05-08 11:13:28
190
原创 (六)学习笔记--ajax+redux+redux-thunk
//actionCreators.jsimport * as actionTypes from './actionTypes'import axios from 'axios'const getListAction = (data) => ({ type: actionTypes.GET_LIST_ACTION, data})export const get...
2020-04-28 19:59:33
199
原创 (四)学习笔记--combineReducers实现React数据分仓管理
1.文件结构1)用actionTypes.js和actionCreators.js的好处在于:当dispatch的方法名写错,可快速定位在相应的文件!2)分仓库的创建避免了公共数据和方法全部堆积在总仓库,不便于后期维护2.分仓库各文件代码示例2.1 actionTypes.jsexport const MODIFY_HASH = 'menu/MODIFY_H...
2020-04-28 15:48:53
393
原创 （三）学习笔记-styled-components的使用
1.styled-components安装（样式不会全局，可在对应组件生效）yarn addstyled-components2.styled-components全局样式reset.css写法：import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalS...
2020-04-26 17:56:35
745
原创 React各种资源下载（基于Webpack4和最新的React脚手架）
1.Sass下载（Sass是css的扩展语言）sass基础用法请查看博客：http://www.ruanyifeng.com/blog/2012/06/sass.html最新版的react脚手架包含了sass配置和sass-loader，所以只需下载node-sass：npm install node-sass --save-dev2.React-router下载npm...
2020-04-22 15:08:41
569
原创 （一）学习笔记--页面加载过程+前端安全问题
1.URL解析URL结构：域名（查找服务器位置）就像一个大房子；端口号就如房间号；路径（定位资源位置）；参数（传递请求资源的特点）；哈希（前端页面锚点，用来标记页面位置）；...
2020-04-21 17:32:54
185
原创 css3复选框和单选框制作
效果如图HTML代码<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie...
2020-03-18 15:31:24
312
原创 移动端-操作事件封装
(function(){ window.requestAnimationFrame = window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame; window.cancelAnimationFrame = window.cancelAnimationFr...
2019-08-26 18:24:12
308
原创 PC端-全屏轮播图
HTML<div id="banner"> <div class="banner_wrapper"> <div class="banner_slide_wrapper"> <div class="banner_slide"> <a href="#"><img src="/images/index20...
2019-08-26 18:24:00
801
原创 PC端-自制弹框组件
<link rel="stylesheet" type="text/css" href="${ctx}/style/css/cyq-define.css" /><link rel="stylesheet" href="${ctx}/images/alertFonts/iconfont.css" /><script src="${ctx}/js/alert/ale...
2019-07-09 19:59:07
338
原创 PC端-拖动表格组件
CSS样式/* 表格组件样式 */.hide{display: none !important;}.scroll-table-box { position: relative; overflow: hidden;}.scroll-table-head { width: 100%; overflow: hidden; position: absolute; left: 0...
2019-05-08 14:51:41
346
原创 拖拽一个元素的框架
function down(e){ //获取元素的开始位置和鼠标点击的开始位置 left = $(elem).position().left; startX = e.clientX; function move(e){ var newLeft = 0; endX = e.clientX; ...
2019-04-30 11:36:37
167
原创 JQ的domReady+事件绑定+事情取消的JS写法
//这是前面封装过的domReady function domReady(fn){ if(document.addEventListener){ document.addEventListener('DOMContentLoaded',function(){ fn&&am...
2019-04-30 11:26:04
169
原创 加减乘除精确算法computer.js
define(function (global, factory) { //给String类型增加一个div方法。 String.prototype.div = function (arg){ return accDiv(this, arg); }; //给String类型增加一个mul方法。 String.prototype.mul = function (arg){...
2019-01-16 14:58:58
247
原创 移动端-表头固定的表格组件
UI原型HTML代码<!-- scroll-table-box开始 --><div class="scroll-table-box"> <div class="scroll-table-head"> <table class="tb1"> <thead
2019-01-04 15:27:11
558
原创 移动端-自定义滑屏菜单组件文档
UI原型如下HTML结构代码<div class="select-component"> <div class="mask" @click="openMenu"></div> <div class="scroll-side"> <div class=&
2019-01-04 11:34:08
310
转载 angularjs和vuejs的区别
Angular和 Vue 有许多相似之处，它们都有：1.使用 Virtual DOM2.提供了响应式（Reactive）和组件化（Composable）的视图组件。3.将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。 Angular 和 Vue 的区别：1.复杂性在 API 与设计两方面上 Vue.js 都比 Angular 1 简单得多，因此你可以快速地掌握它的全部特
2017-10-10 22:10:48
510
转载 JavaScript是如何实现继承的(六种方式)
1.原型链基本思想：利用原型让一个引用类型继承另外一个引用类型的属性和方法。构造函数，原型，实例之间的关系：每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。原型链实现继承例子：?12345678910111213141516
2017-10-10 21:32:26
245
转载 call和apply的用法（详细介绍）
二、call和apply的用法（详细介绍）js中call和apply都可以实现继承，唯一的一点参数不同，func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])。JS手册中对call的解释：复制代码 代码如下:call 方法 调用一个对象的一个方法，以另一个对象替换当
2017-10-10 21:12:02
448
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人