- 博客(94)
- 收藏
- 关注
RSS订阅原创 面试成功的原因
1. 能力比面试官还强的，也有可能被刷掉有时候你面试会失败，不一定是你不好，而有可能是你和面试官性格不合，磁场不一致聊不到一块，所以没面试上，还有一种可能就是你比面试你的人更优秀，人不愿意招比自己更优秀的人，除非是老板招聘你，不然面试官会觉得你很危险，把自己给比下去了。所以面试过程中，不需要过度紧张，不小心犯低级错误或者口误，并无伤大雅，毕竟有时候太优秀也是会吓退人的，所以面试的时候要保持一颗平常心去面对，若真的面试问到不懂的问题，也可以说不懂，不必太在意。2. 运气和时机都很重要，但又是你无法把控面
2021-02-19 13:50:52
1974
3
原创 自己写一个含有周、月、年模式的日历组件
写这样一个组件的初衷项目用的是antd的组件，一开始用antd上面的日历组件本来没什么问题，感觉挺好用的，可是某一天需求人员说要求日历只展示一周或半个月，然后我就懵逼了，antd上面的日历组件根本就没有周模式的，只有月和年模式，再说，感觉根本没必要啊，但是用户强烈要求有这个功能，没办法，只能自己写一个了。...
2021-01-13 10:30:58
1320
9
原创 对antd表格中虚拟列表的整合和封装
由于用户反馈页面过于卡顿，考虑到后台总是返回大量的数据，于是表格性能对页面流畅的影响还是挺大的，由于本身能力有限，然后发现antd表格中有一个虚拟列表功能，但是发现功能只能纯粹展示大量的数据而没有其它的交互，而且我开发的项目用的react还是15.x版本的，没办法，只能自己去看看能不能改造一下。目前整合了项目常用的分页和可伸缩列两个功能，本来还想整合固定列以及可选择，但是还没有成功。。。virtualTable.js：import React from 'react';import './virtu
2020-09-02 16:19:40
3530
2
原创 webAPI节点查找
一、找对象document.getElementById(id)（根据id获取元素元素：返回一个元素）；document.getElementsByTagName(tagName)（根据标签名获取元素伪数组:返回一个数组对象，也就是伪数组）；document.getElementsByClassName(className)（根据类名获取元素：返回一个伪数组）;document.getE...
2020-06-04 15:25:47
352
原创 解决antd select支持既能输入不存在的选项又能进行下拉框选择
最近有这样一个需求：在antd select中既能手动输入不存在的内容又能选择下拉框的选项。我当时一想，这个简单啊，于是就开干思路是这样的，给select框中添加onChange事件以解决进行下拉框选择的问题，然后添加onSearch事件来解决手动输入不存在的内容的问题：<Select allowClear showSearch placeholder="请选择" o...
2020-01-08 10:54:22
13057
3
原创 解决antd的select下拉框因为数据量太大造成卡顿的问题
相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。当然这不是我想去优化它的动力，主要是公司业务人员和后端的同事也无法忍受，于是我只能屈从于他们的淫威。。。。想要优化肯定要知道为什么会卡，初步判断就是数据量过大导致渲染option组件的时间过长导致卡...
2019-12-25 18:01:04
22061
3
原创 解决antd表格分页后依然加载慢的问题
antd的表格也用了不少次了，但是有时候数据量也比较大（几千条），所以加载会非常的慢（慢到无法忍受），但是后端的兄弟也比较懒，直接一股脑把数据扔给我，而我只能自己来分页而且还要加快加载速度，于是我就想到了antd里面的Pagination组件但是用过后发现分页是分页了，大师加载速度依然不快，还是需要优化，所以我觉的之所以会这样可能是因为虽然分页了，但是所有的数据依然渲染了，只是其它页没有展示出...
2019-12-17 10:17:16
3360
2
原创 前端兼容IE的下载文件方法
上个星期碰到了在IE浏览器上无法下载文件但是在谷歌上面却可以的问题，下面是我的代码：function fetchPost(url, data, fileName) { fetch(url, { method: 'POST', body: data, }) .then(response => { if (response.ok)...
2019-11-29 14:51:23
1517
原创 对antd中的表格筛选进行改造
import React from 'react';import './App.css';import { Table, Input, Button, Icon, Checkbox, Row, Col } from 'antd';import Highlighter from 'react-highlight-words';const CheckboxGroup = Checkbox.Gr...
2019-11-28 23:47:47
3038
原创 antd中如何将表格的所有数据一次性全选
今天后端的兄弟给我提了一个需求（我们的需求都是后端提的，而不是产品经理。。。），表格数据是分页的，不管在哪一页点击全选，都要选中所有的数据，而不仅仅只是当前页的数据，大家都知道，ant design中表格如果分页的话点击全选只能选中当前页的数据，如果仅仅只是这样那还好办，关键是数据中有很多数据是不可选中的，有时候一整页都不可选中，如下图这样：禁用功能的代码官网上面有详细的说明，就是通过rowS...
2019-10-28 16:26:22
7973
7
原创 运行Ant Desgin的时候反馈：Sorry, we need js to run correctly!
Sorry, we need js to run correctly!翻译成中文的话就是“抱歉，我们需要js才能正常运行！”的意思然后看了一下config.js的配置文件，发现是未开启反向代理，开启反向代理后项目就可以正常启动了：proxy: { '/api': { target: 'http://172.16.238.53:10034', // 目标服务器 c...
2019-10-24 17:55:06
8864
原创 用Ant Design Pro框架写的项目在ie浏览器中打不开
今天前端同事和我说项目在ie浏览器中有问题打不开，我试了一下果然不行。问题就是下图这样的：由于我都是用谷歌浏览器开发项目的，所以这个问题没有第一时间发现。然后问公司大佬，但是大佬没有碰到过类似的问题，然后又在网上查资料但是还是没事没有解决问题。于是只能一个一个的去排除，最后发现有两个js文件有问题，然后对这两个文件排除最后发现是文件引入了项目不存在的东西：import { throwStat...
2019-10-24 17:38:17
1979
2
原创 后端导出时前端如何处理
前段时间在写导出功能，通过后端导出，但是前端要怎么写才能完成这个导出功能呢，上网查了一下，发现还是有不少方法的，最后选择了其中一个比较简单可行的方法，那就是通过创建form表单然后配置相关的参数，最后提交表单，这种方式是同步的，相对简单，当然也有异步方式，但是要复杂一些。下面是我的导出功能代码部分：let formElement = document.createElement('form')...
2019-10-23 14:34:07
921
原创 HTTP常见状态码以及所代表的意义
HTTP 状态码被分成了五大类100~199——信息性状态码100 Continue 说明收到了请求的初始部分，请客户端继续。101 Switching Protocols 说明服务器正在根据客户端的指定，将协议切换成Update首部所列的协议200~299——成功状态码客户端发起请求时，这些请求通常都是成功的。200 OK 请求没问题。实体的主体部分 包含了请求的资源201 Cre...
2019-09-02 14:46:16
637
转载 自定义组件中 v-model的注意点
首先它是2.2.0+ 新增一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突：现在在这个组件上使用 v-model 的时候：...
2019-09-02 10:08:05
179
原创 在react脚手架（create-react-app）中如何配置反向代理
进入create-react-app官网就能看到大概的配置第一步：安装 http-proxy-middleware npm或者是yarn都可以第二步：创建 src/setupProxy.js 文件，也就是在src目录下创建setupProxy.js文件。第三步：在 创建的setupProxy.js文件中引入http-proxy-middleware，然后配置反向代理就可以了代码示例：...
2019-08-11 11:32:56
2198
3
原创 React中axios 优化和环境变量的配置
在使用 axios 发送请求的时候，接口地址每次都要写 http://localhost:8080这样类似的url ，太繁琐。那么我们要如何解决呢？通过 axios 配置，统一处理 baseURL，baseURL: ‘http://localhost:8080/’import axios from 'axios'const request= axios.create({ baseURL:...
2019-08-03 18:15:33
3298
原创 在React脚手架中百度地图API的简单web使用
首先进入百度地图官网：进入web开发的javaScript API:：进图开发指南的Hello World示例：然后就能看到API的简单使用了使用步骤：首先要有百度账号申请ak，点我申请就可以了走2、 3、4步第5步：引用百度地图API文件，在public的index.html文件中加入script标签，将第一步申请到的ak账号放进去走第6 、7步第八步：设置中心点坐...
2019-08-03 16:33:04
560
原创 对Promise的内部简单封装实现
自定义Promise构造函数： function MyAsyncPromise() { this.status = 'pending' // 状态 this.msg = 'none' // 保存resolve或者reject的实参 this.statusSave = [] // 存放then方法中的函数参数 const self = this ...
2019-07-28 17:36:30
324
原创 js中的内置对象
内置对象： 不用我们自己创建，js帮我们提供好的一些对象这些对象是为了方便我们开发使用的。Math对象：一个属性 Math.PI: 3.1415xxxxMath的方法：求最大值和最小值 // 参数： 无数个数字， 返回值：最大的那个数 var result = Math.max(1, -2, 3, 100, 9); console.log(result); // ...
2019-07-25 18:24:01
181
原创 js中的函数
函数的基本概念函数也是js中的一种复杂类型函数可以封装一段重复的代码， 只需要声明一次， 可以重复的调用。声明与调用：function 函数名() { 函数体 }函数名();函数的参数形参：在函数声明的时候，定义的参数，作用：占位置，没有具体的值实参：在函数调用的时候传递的参数，作用：把实参的值赋值给形参。函数的返回值如果希望函数内部能够返回一些值被外部使用。需要使用retur...
2019-07-25 16:45:56
134
原创 js中的数组以及冒泡排序
数组是什么东西？数组是一个有序的集合。 数组的作用：存储多个数据创建的数组两种方式：字面量的方式 // 字面量：也叫直接量，指的是直接从字面上就能看出来类型的量 var arr = ['张三', '李四', '王五', '赵六', '田七', '王八'];创建数组第二种方式： 构造函数的方式 var arr = new Array(1, 3, 5); console...
2019-07-25 16:21:50
825
原创 js中的类型转换
typeof查看变量类型var num = 3console.log(typeof num) // number转换成数字类型 var str = '123abc'; // 1. 转换成数字类型 Number(字符串) 结果就是数字类型 // 如果字符串不是一个合法的数字 , Number转换成数字的结果是NaN (not a number) str = Numb...
2019-07-25 15:52:11
104
原创 js中的运算符
什么是JavaScript？js是运行在浏览器端的脚本语言，现在的JavaScript，包含三部分ECMAScript:语法规范BOM: 用于操作浏览器的一些apiDOM: 用于操作网页中元素的api注释：不会被浏览器解析的代码，注释是给程序员看单行注释，特点：只能注释本行 快捷键 ctrl + /多行注释,可以注释多行内容 shift + alt + A输出语句//...
2019-07-25 15:35:22
167
原创 js中的数据类型
一、基本数据类型number、string、boolean、undefined、null、以及es6新出的Symbol代码执行也是占用的内存对于基本数据类型也就是简单类型来说，变量存储的直接就是值本身。 所以把简单类型叫做值类型。字符串类型：在js中，字符串必须使用 ‘’ 或者 ""包裹起来，推荐 使用 单引号 ‘’ var str = '张三'; console.log(s...
2019-07-25 13:10:16
108
原创 在Vue-cli脚手架中如何配置反向代理
步骤1 在 Vue-cli 生成的项目根目录中创建一个 vue.config.js（与 package.json 同级）2 在配置文件中添加以下代码 (详情请看官网)：module.exports = { // 选项... // devServer 实际上就是 webpack-dev-server 这个包 devServer: { // proxy 设置代理的配置项...
2019-07-22 16:00:50
1896
原创 React路由基础
1. React路由介绍现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系使用Reac...
2019-07-19 19:25:29
144
原创 React原理解密
1. setState() 的说明1.1 更新数据setState() 是异步更新数据的注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState()可以多次调用 setState() ，只会触发一次重新渲染this.state = { count: 1 }this.setState({ count: this.state.count + 1})co...
2019-07-19 18:10:20
933
原创 React组件的生命周期以及高阶组件
1 组件的生命周期1.1 组件的生命周期概述意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数。钩子函数的作用：为开发人员在不同阶段操作组件提供了时机。只有 类组件 才有生命周期。1.2 生命周期的三个...
2019-07-16 14:46:52
591
1
原创 React中的组件通讯
1. 组件通讯介绍组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。2. 组件的 props组件是封闭的，要接收外部数据应该通过 props 来实现props...
2019-07-16 14:07:11
97
原创 React组件基础
1. React 组件介绍组件是 React 的一等公民，使用 React 就是在用组件组件表示页面中的部分功能组合多个组件实现完整的页面功能特点：可复用、独立、可组合2. React 组件的两种创建方式使用函数创建组件使用类创建组件2.1 使用函数创建组件函数组件：使用 JS 的函数（或箭头函数）创建的组件约定1：函数名称必须以大写字母开头约定2：函数组件必须有返...
2019-07-16 12:55:51
164
原创 react中JSX的基本使用
1. JSX 的基本使用1.1 createElement() 的问题繁琐不简洁。不直观，无法一眼看出所描述的结构。不优雅，用户体验不爽。例如：React.createElement( 'div', {className: 'shopping-list'}, React.createElement('h1', null, 'Shopping List'), React...
2019-07-16 10:24:39
2233
原创 React的基本使用以及脚手架的安装
1. React 概述1.1 什么是 ReactReact 是一个用于构建用户界面的 JavaScript 库。用户界面：HTML页面（前端）React 主要用来写HTML页面，或构建Web应用如果从 MVC 的角度来看，React 仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了完整的 M 和 C 的功能。React 起源于 Facebook 的内部项目，后又用来架设 In...
2019-07-14 00:12:15
246
原创 vue中如何封装过滤器filter
在vue-cli脚手架里面的src文件下面创建一个filter文件夹，里面再创建一个index.js文件然后在index里面写入过滤器方法index.js：function filterOne(n) { return n + 10;}function filterTwo(n, m) { return n + m + 5;}export { filterOne, fil...
2019-07-04 21:45:23
877
原创 Promise和async以及await的简单使用
Promsie：Promise 是ES6中新出来的API1. 使用：如果一个工具，说自己支持Promise，那么我们就知道，他的回调函数是用.then来写的就可以了2. 我们自己给别人提供Promise的工具：Promise，其实是对于回调函数的另一种写法，可以帮助我们避免 回调地狱那么什么是回调地狱呢？：1. 代码结构不清晰，可阅读性极差2. 代码执行的顺序不清晰...
2019-07-01 17:47:12
223
原创 git中的.gitignore忽略文件
git中的忽略文件：场景：在开发项目的时候，我们有的文件，或者有的文件夹，不需要用git进行管理的，但是又在当前项目下面，我们想让git忽略掉这些文件.gitignorenode_modulesindex.css这个文件中有node_modules和index.css,那么就会忽略node_modules和index.css两个文件这个文件，一般都是在项目刚开始创建的时...
2019-06-28 22:39:29
506
原创 git操作远程仓库的语法
什么是远程仓库？远程仓库就是用来共享代码的，例如gitHub、码云等远程仓库实际开发当中的情况:1. 公司使用的是 github、码云等这样的 在互联网上的远程仓库2. 公司使用的是 公司 自己搭建的 服务器github:github和git有啥关系？github中的代码只能通过git来管理！git操作远程仓库的命令:1. 从远程仓库去获取代码:g...
2019-06-28 22:27:28
395
原创 git的基本使用
首先下载和安装好git用Git来做什么？将代码进行版本保存，每实现一个功能，可以保存一次，这样的话，会在git中形成一个版本库如果以后我们想要回退到代码的某个版本的时候，我们可以使用git，将对应版本的代码从版本库中获取出来！git可以非常方便的实现多人协作开发。使用：git使用前要进行配置：这个命令一个电脑只需要执行一次！设置自己的用户名和邮箱)git conf...
2019-06-25 20:43:44
137
原创 es6中的模块化语法import和export
如何引入模块：import如何把模块中的内容提供给别人使用：export1、export 可以直接导出变量、函数、对象：module1.js：export let num = 100export let func = function(){ console.log(111)}export function sayHllo(){ console.log('he...
2019-06-25 20:25:46
735
原创 webpack的配置及使用
webpack是模块化的打包工具注意： 代码一定要模块化的，webpack才可以工作，因为webpack是通过模块化的代码，进行依赖查找的！作用：将项目里面的所有的用到的资源进行整合打包，减少最终生成的资源数量，优化网页性能如果是创建vue项目，直接用vue-cli脚手架就好了，好用又方便，没必要自己去配置webpack，太麻烦。安装：1. 本地安装（推荐）可以吧webpa...
2019-06-25 19:59:48
281
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人