![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
javafanwk
专注微服务架构,熟悉react、大数据、云计算,喜欢看java编程思想,设计模式,算法等书,希望通过我的努力减少代码量,提高java的标准化,提高程序的稳定度,认真搞技术,一直在路上,希望大家共同前行,进步。。。
展开
-
webpack的常用配置
webpack 中文文档webpack.dev/* 1.该文件是webpack的配置文件,所有webpack的任务、用到的loader、plugins都要配置在这里 2.该文件要符合CJS模块化规范*///引入Node中一个内置的path模块,专门用于解决路径问题const {resolve} = require('path');//引入html-webpack-plugin,用于加工html文件const HtmlWebpackPlugin = require('html-w.原创 2022-02-07 19:15:34 · 3528 阅读 · 0 评论 -
ES6特性 -- Promise特性
一、什么是Promise1.概念从语法上来说: Promise是一个构造函数 从功能上来说: promise对象用来封装一个异步操作并可以获取其结果2.Promise的状态改变1. pending变为fulfilled2. pending变为rejected说明: 只有这2种, 且一个promise对象只能改变一次 无论变为成功还是失败, 都会有一个结果数据 成功的结果数据一般称为vlaue, 失败的结果数据一般称为reason二、为什么使用Pro...原创 2022-01-31 17:49:42 · 260 阅读 · 0 评论 -
ES6的常用特性
一、let关键字let关键字用来声明变量,使用let声明的变量有几个特点:不允许重复声明 块儿级作用域 不存在变量提升二、const关键字const 关键字用来声明常量,const声明有以下特点声明一定要赋初始值 不允许重复声明 值不允许修改 块儿级作用域声明对象类型使用const,非对象类型声明选择let三、变量的解构赋值ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。//数组的解构赋值const arr = ['张学友', '刘原创 2022-01-30 11:37:06 · 782 阅读 · 0 评论 -
React Hooks -- 自定义Hooks函数
自定义Hooks函数偏向于功能,而组件偏向于界面和业务逻辑。采用use开头,这样才能区分出什么是组件,什么是自定义函数。import React, { useState ,useEffect ,useCallback } from 'react';function useWinSize(){ const [ size , setSize] = useState({ width:document.documentElement.clientWidth,原创 2022-01-29 22:47:46 · 642 阅读 · 0 评论 -
React Hooks -- 实现Redux
useContext:可访问全局状态,避免一层层的传递状态。这符合Redux其中的一项规则,就是状态全局化,并能统一管理。useReducer:通过action的传递,更新复杂逻辑的状态,主要是可以实现类似Redux中的Reducer部分,实现业务逻辑的可行性。import React, { useContext, createContext,useReducer} from 'react';function ShowArea(){ const {color} = use.原创 2022-01-29 21:54:16 · 879 阅读 · 0 评论 -
React Hooks -- useReducer
以下是Redux中的Reducer有两个参数一个参数是状态,一个参数是如何控制状态。function countReducer(state, action) { switch(action.type) { case 'add': return state + 1; case 'sub': return state - 1; default: return st.原创 2022-01-29 21:37:26 · 324 阅读 · 0 评论 -
React Hooks -- useContext父子组件传值
Context的作用就是对它所包含的组件树提供全局共享数据的一种技术。通过createContext创建通过useContext使用import React, { useState , createContext , useContext } from 'react';//===关键代码const CountContext = createContext()function App(){ const [ count , setCount ] = useState(0);原创 2022-01-29 21:29:07 · 1104 阅读 · 1 评论 -
React Hooks -- useEffect代替常用生命周期函数
原始生命周期函数componentDidMountcomponentDidUpdatecomponentWillUnmount采用原始的方式把计数器的Demo增加两个生命周期函数componentDidMount和componentDidUpdate。分别在组件第一次渲染后在浏览器控制台打印出计数器结果和在每次计数器状态发生变化后打印出结果。代码如下:import React, { Component } from 'react';class Example3 extends原创 2022-01-29 18:28:06 · 1253 阅读 · 0 评论 -
React路由 react-router
一、基础概念什么是react-router?react的一个插件库。专门用来实现一个SPA应用。基于react的项目基本都会用到此库。npm install --save react-router-dom官方文档:https://reacttraining.com/react-router/web/guides/quick-start什么是SPA?单页Web应用(single page web application,SPA)。整个应用只有一个完整的页面。点击.原创 2022-01-27 15:38:41 · 387 阅读 · 0 评论 -
React应用--基于React脚手架
使用前需要安装 node.js官网:下载 | Node.js 中文网安装 yarn npm install --global yarn官网:安装 | Yarn 中文文档使用create-react-app创建react应用react脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置(语法检查、jsx编译、devServer…) 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架...原创 2022-01-26 09:48:05 · 119 阅读 · 0 评论 -
React 组件的生命周期
官方文档:生命周期API1.组件从创建到死亡它会经历一些特定的阶段。2.React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。3.我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/需求:定义组件实现以下功能让指定的文本做显示 / 隐藏的渐变动画 从完全可见,到彻底消失,耗时2S 点击“不活了”按钮从界面中卸载组件.原创 2022-01-25 11:04:57 · 418 阅读 · 0 评论 -
React-受控组件和非受控组件
受控组件官网简述:原文链接在 HTML 中,表单元素(如<input>、 <textarea> 和 <select>)通常自己维护 state,并根据用户输入进行更新。而在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。我们可以把两者结合起来,使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 Re原创 2022-01-25 10:19:39 · 456 阅读 · 0 评论 -
react 组件间互相传值 --Simple TODO List
问题一:数据保存在哪个组件内?看数据是哪个组件需要(给它),还是某些组件需要(给共同的父组件)问题二:需要在子组件中改变父组件的状态子组件不能直接改变父组件的状态 状态在哪个组件,更新状态的行为就应该定义在哪个组件解决:父组件定义函数,传递给子组件;子组件调用组件话编写功能的流程<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g原创 2022-01-24 21:06:40 · 78 阅读 · 0 评论 -
react 组件间互相传值
在父组件中定义一个函数,该函数用于处理传递过来得值(比如用于修改父组件中state得数据) 在子组件调用部分通过属性绑定得形式绑定该函数(在子组件中就可以通过this.props.属性名就可以拿到该函数) 在子组件中绑定触发传值得事件比如点击事件,在事件处理函数中通过this.props.属性名()调用父组件中定义得方法 就可以在父组件中拿到传递过来得值进行使用<!DOCTYPE html><html lang="en"><head> <met原创 2022-01-24 19:53:37 · 221 阅读 · 0 评论 -
React 组件三大核心属性 state、props、refs
官网英文官网: https://reactjs.org/中文官网: https://react.docschina.org/介绍描述用于动态构建用户界面的 JavaScript 库(只关注于视图)由Facebook开源React的特点声明式编码 组件化编码 React Native 编写原生应用 高效(优秀的Diffing算法)React高效的原因使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。DOM Diffing算法, 最小化页面重绘。相原创 2022-01-24 19:20:57 · 602 阅读 · 0 评论 -
springboot 与前端交互 已拦截跨源请求
一、springboot 与前端交互 已拦截跨源请求火狐报错:谷歌报错:具体症状: 确定前端没问题解决方式RestController@RequestMapping("/infoUsers")@CacheConfig(cacheNames = "infoUsers")//就是一个注解的事 @CrossOriginpublic class InfoUserController { @...原创 2018-03-10 11:48:34 · 4951 阅读 · 0 评论 -
关于省,市,区三级联动 思考
目的:分析三级联动,五级联动的实现思路关于省,市,区的三级联动后台的实现有两种方式:1:分n次请求各自取出 省 市 区 的数据;优点:传到前台的数据少。缺点:会导致数据的延迟加载,出现的情况是 省 有数据了,市和区一级还没有数据,导致用户的体验不好;这种方式只有省一级的数据可以提前加载好,市和区一级的数据只用等到选中后才开始请求;2:一次请求获得所有的数据,并且组装成相依的数据结构到前端;优点:前...原创 2018-05-09 15:42:32 · 1169 阅读 · 2 评论 -
React 基础(二)
Ant Design of React常用的一些组件Table,Modal,Pagination,Input,Button,Radio,Select,messageTable参数说明类型默认值bordered是否展示外边框和列边框booleanfalsecolumns表格列的配置描述,具体项见下表ColumnProps[]-components覆盖默认的 table 元素object-dataSo...原创 2018-05-03 16:17:26 · 1976 阅读 · 0 评论 -
React 基础(四)
ES6 了解的相关知识 箭头表达式、model(import、export)、let(替代var)、const(定义常量)、class(定义组件)、数组、map一、letES6 提出了两个新的声明变量的命令:let和const。其中,let完全可以取代var,因为两者语义相同,而且let没有副作用。'use strict';if (true) { let x = 'hello';}...原创 2018-05-03 17:14:58 · 132 阅读 · 0 评论 -
React 前端开发规范(执行版)
一、命名规范1.变量命名方法:小驼峰式命名法,首字母小写。studentInfo、userInfo命名建议:使用英文单词组合,语义清晰忌:var a=0;var nihao=true;注明:无法用英文诠释的单词可使用首拼,例:var hkb={};//户口本2.常量命名方法:全部大写,下划线分隔命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词例:var MAX_COUNT=10...原创 2018-05-07 11:04:01 · 5667 阅读 · 0 评论 -
前端OPTIONS请求
背景今天在项目调试中,需要在拦截器里获取前端请求头里的token,结果死活获取不到。debug了半天发现前端一共发送了两次请求,真正的请求的第二次。OPTIONS请求OPTIONS请求方法的主要用途有两个:1、获取服务器支持的HTTP请求方法;也是黑客经常使用的方法。2、用来检查服务器的性能。例如:AJAX进行跨域请求时的预检,需要向另外一个域名的资源发送一个HTTP OPTIONS请求头,用以判...原创 2018-06-13 10:36:34 · 7238 阅读 · 0 评论 -
前后端分离之session问题
背景目前正在开发的项目是前后端分离的项目,前端是react,后端springboot开发的微服务,在调试登录的时候发现,登录成功后把所需的信息都放到session中并存到redis里,但当用户从session中取信息的时候发现始终取不到,每次跨域请求时ajax发送的都是新的sessionid,导致无法获取信息。解决思路通过度娘查询发现必须在前后端配置一些东西,后端需在登录拦截器里增加一些响应头信息...原创 2018-06-15 10:28:30 · 44569 阅读 · 7 评论 -
Cookie
Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie。内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短暂的。硬盘Cookie保存在硬盘里,有一个过期时间,除非... Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie。内存Cookie由...原创 2018-05-30 15:23:33 · 600 阅读 · 0 评论 -
管理系统 bootstrap Demo 传输用的Json
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n原创 2018-03-09 20:45:45 · 1772 阅读 · 0 评论