- 博客(32)
- 收藏
- 关注
RSS订阅原创 react拓展
一、setState更新状态的2种写法1）对象式的setStatesetState(stateChange, [callback])// 1、stateChange为状态改变对象（该对象可以体现出状态的更改）// 2、callback是可选的回调函数，它在状态更新完毕、界面也更新后（render调用后）才被调用2）函数式的setStatesetState(updater, [callback])this.setState(state => ({count: state.count +
2021-03-17 08:51:47
129
原创 redux
一、reducerreducer的本质是一个函数，接收：preState, action，返回加工后的状态reducer有两个作用：初始化状态，加工状态reducer被第一次调用时，是store自动触发的，传递的preState是undefined，传递的action是：{type: ‘@@REDUX/INIT_a.2.b.4’}在index.js中监测store中状态的改变，一旦发生改变重新渲染备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己
2021-03-16 23:35:17
122
原创 antd按需引入+自定义主题
1.安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader2.修改package.json"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject
2021-03-04 22:53:02
316
1
原创 react路由传参
路由传参的三种方式1、params参数// 1、路由链接（携带参数）<Link to='/demo/test/tom/18'>详情</Link>// 2、注册路由，声明接收<Route path='/demo/test/:name/:age' component={Test} />// 3、接收参数const {name, age} = this.props.match.params;...
2021-03-02 23:37:28
349
原创 react路由
一、路由的基本使用1、明确好界面中的导航区，展示区2、导航区的a标签改为Link标签<Link to='/xxx'>Demo</Link>3、展示区写Route标签进行路径的匹配<Route path='/xxx' component={Demo} />4、的最外侧包裹了一个或二、路由组件与一般组件1、写法不同： 一般组件：<Demo /> 路由组件：<Route path='/demo' component=
2021-02-28 14:10:09
112
原创 react脚手架配置代理总结
方法一在package.json中追加如下配置'proxy': 'http://localhost:5000'说明：优点：配置简单，前端请求资源时可以不加任何前缀。缺点：不能配置多个代理。工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000（优先匹配前端资源）方法二1、第一步：创建代理配置文件在src下创建配置文件：src/setupProxy.js2、编写setupProxy.js配置具体代理规则const proxy = require
2021-02-27 18:23:59
128
原创 fetch请求
1、特点fetch是原生函数，不再使用XmlHttpRequest对象提交ajax请求老版本浏览器可能不支持fetch请求是一种关注分离的思想2、发送网络请求-使用fetchfetch(`/api1/search/user2?q=${keyWord}`).then( response => { console.log('联系服务器成功了'); return response.json(); }, error => {
2021-02-27 17:58:17
216
原创 react组件之间传值
pubsub传值适用于任意组件间相互传值import PubSub from 'pubsub-js';export default class List extends Component { componentDidMount() { this.token = PubSub.subscribe('atguigu', (msg, data) => { console.log(data); }); } compone.
2021-02-27 16:53:54
97
原创 react-ref属性
1、最开始的写法-字符串写法class Demo extends React.Component { showData = () => { const {input1} = this.refs; alert(input1.value); } render() { return ( <div> <input ref="input1" onBlur={this
2021-02-21 14:50:21
122
1
原创 react-props属性校验
1、对标签属性进行类型，必要性的限制Person.propTypes = { name: PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number}2、指定默认标签属性值Person.defaultProps = { sex: '保密', age: 18}...
2021-02-20 22:19:29
214
原创 树形结构数据的处理
处理树形结构背景想要使data格式的数据，转化成treeData那种格式的。const data = [ { id: 2, pid: 0, path: '/course', title: '课程管理' }, { id: 3, pid: 2, path: 'operate', title: '课程操作' }, { id: 4
2021-02-07 07:48:07
980
原创 数组整理
数组整理1、push/unshift 追加返回值：执行了方法以后的数组长度arr.push(2,3,4);arr.unshift(1,2,3);// push底层实现Array.prototype.myPush = function() { for(var i = 0; i < arguments.length; i++) { this[this.length] = arguments[i]; } return this.length;}2
2020-12-11 13:20:36
173
2
原创 2020-12-07
今天的面试总结：1、rem具体用法？Css中的body中先全局声明font-size=62.5%，这里的%的算法和rem一样。因为100%=16px，1px=6.25%，所以10px=62.5%1rem=10px，12px=1.2rem2、如何解决异步？await怎么判断异步是否完成？1)回调函数2)Promise .then()3)Async + await (可与promise混用)3、Vue路由钩子函数详见4、路由拦截一般用来解决什么问题？Vue中有一个拦截方法，当我们发起请求
2020-12-07 23:58:16
85
原创 结合koa的服务端渲染
1、安装cnpm i koa-ejs -D2、使用democonst Koa = require('koa');const ejs = require('koa-ejs');const path = require('path');const server = new Koa();server.listen(8080);ejs(server,{ root:path.r...
2019-11-19 22:45:33
129
原创 koa服务端渲染
一、服务端渲染pug(jade) 侵入式ejs 非侵入式1、pug渲染//模板 1.pugdoctypehtml head meta(charset="utf-8") meta(name="site",content="test") title= title script. windo...
2019-11-19 22:34:15
483
原创 koa常用的中间件
koa-bodyparser 中间件可以把 POST 请求的参数解析到ctx.request.body//安装cnpm i koa-bodyparser --save//使用democonst Koa = require('koa')const bodyParser = require('koa-bodyparser')let app = new Koa()app.use(...
2019-11-19 16:44:53
264
原创 ajax的配置项
一、参数配置url：发送请求的地址type：请求方式（post/get），默认为getasync：同步异步的请求timeout：超时时间设置data：要求为object或string类型的参数cache：默认为true(当dataType为script时，默认为false)，设置为false将不会从浏览器缓存中加载请求信息dataType：预期服务器返回的数据类型，可用的类型如下：...
2019-11-19 11:19:00
2537
原创 node之 http、fs、url、querystring模块
1、接收浏览器的get数据 – url//url模块url.parse(req.url,true) => { pathname,query}//Get=>"/aaa/b?xx=xxx&xxx=xx"url.parse('xx')2、接收浏览器的post数据 – body 分几次let arr = [];req.on('data',buffer => {...
2019-11-07 22:34:39
163
原创 http状态码
1、状态码1xx：指示信息–表示请求已接收，继续处理2xx：成功–表示请求已被成功接收、理解、接受3xx：重定向–要完成请求必须进行更进一步的操作4xx：客户端错误–请求有语法错误或请求无法实现5xx：服务器端错误–服务器未能实现合法的请求2、常见状态码、状态描述、说明1、200：ok，客户端请求成功2、400：Bad Request，客户端请求有语法错误，不能被服务器所理解3、...
2019-11-07 21:55:38
119
原创 node基础
1、方便node调试程序的插件每次修改js文件需要重新执行才能生效，安装nodemon可以监视文件改动，自动重启npm i -g nodemon//运行的命令nodemon hello.js调试node程序：Debug-Start Debugging2、node之OS模块os模块提供了一些操作系统相关的使用方法const os = require('os');const ...
2019-10-25 00:39:20
199
原创 bootstrap-table-treegrid数据量较大时渲染太久了
一、最近在项目中遇到了一个问题，需求是这样的：1、实现一个树形表格2、表格中还有一列 启用/停用 的控制（此功能我用的是一个bootstrap-switch的开关来显示的）二、存在的问题是页面渲染的特别慢在实现的过程中首先表格的实现我用的是bootstrap-table，树形结构的展示用的是treegrid，最后发现有一个问题，就是当数据达到600条的时候，表格渲染的就会特别的慢，要等待很...
2019-10-23 16:48:51
5554
原创 vue中模拟后台服务器express
在vue.config.js文件下configureWebpack:{ devServer:{ before(app){ //模拟后台服务器express app.get("/api/login",function(req,res){ const {username,passwd} = req.query; ...
2019-10-19 22:54:47
290
原创 vue中data数据的响应式原理
1、vue数据的响应式，检测数据的改变const app = new KVue({ data:{ test:'I am test', foo:{ bar:"bar" } }});app.$data.test = "hello";app.$data.foo.bar = "oh my bar";clas...
2019-10-17 02:03:44
2173
原创 vue的路由钩子
1、全局守卫每次路由跳转 都会被触发，写在main.js文件router.beforeEach((to,from,next) => { //全局前置守卫，当一个导航触发时，全局前置守卫按照创建顺序调用 //数据校验时，非常有用 next()})router.beforeResolve((to,from,next) => { next()})router.afterE...
2019-10-16 21:26:13
164
原创 vue数据改变没有更新视图的问题
昨天跟着一个视频做了一个购物车的小案例，在做添加购物车的时候，发现每次添加相同的商品，数量确实增加了一个，但在页面上显示的数量却并没有变化，百思不得其解，在询问了下别人之后终于明白了，下面来记录一下。1、添加购物车的代码如下 注释掉的是我自己写的错误的代码，这种写法不会在页面上更新商品的数量addToCart(index) { let currentItem = this.cour...
2019-10-13 15:26:28
372
原创 内嵌iframe页面跳转的问题
刚刚遇到了一个问题，当用户登录超时时，页面应该跳转到登录页面，但我每次点击菜单的时候，有的时候就直接在内嵌的iframe里面直接跳转登录页面了，并没有在最外层进行跳转，经过一番的查询得出以下结论window.location.href //是本页面跳转parent.location.href //是上一层页面跳转top.location.href //是最外层的页面跳转...
2019-09-29 16:26:41
2417
原创 webpac的小插件和跨域问题
一、watch的用法watch:true, //实时监控代码的变化，代码发生变化时打包watchOptions:{ //监控的选项 poll:1000, //每秒 问我 1000次 aggregateTimeout:500, //防抖 ignored:/node_modules/ //不需要进行监控的文件 },二、webpack的小插件1、cleanW...
2019-09-28 16:13:55
129
原创 webpack配置sourcemap
1、js高级语法转低级语法，需安装cnpm install @babel/core @babel/preset-env babel-loader webpack-dev-server -Dmodule:{ rules:[ { test:/\.js$/, use:{ ...
2019-09-27 23:41:56
460
原创 webpack图片处理，文件分类和打包多页面应用
一、webpack的图片处理1、file-loader 默认会在内部生成一张图片到 build目录下，把生成的图片的名字返回回来。通过js创建图片对象生成图片import logo from './logo.JPG';let img = new Image();img.src = logo;document.body.appendChild(img);//1、先安装file-load...
2019-09-27 22:32:58
425
原创 webpack的样式处理
样式处理1、 配置loader模块，先安装npm install css-loader style-loader -D yarn add less-loader style-loader -D css-loader 是解析 @import 这种语法的style-loader 是把 css 插入到 head 标签中loader 的特点：希望单一多个loader需要 用数组表示 []，...
2019-09-23 23:41:48
162
1
原创 webpack的安装和基础配置
webpack的学习 - 第1天一、webpack的基础配置1、webpack 安装和基础配置安装本地的webpack,需要安装 webpack 和 webpack-cli -Dwebpack 可以进行0配置打包工具 -> 输出后的结果(js模块)打包（支持我们的js模块化）手动配置webpack默认配置文件的名字 webpack.config.js配置文件的文件...
2019-09-22 23:18:03
121
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人