- 博客(73)
- 收藏
- 关注
原创 <script>应用的几个知识点
标签位置在过去,所有 script 元素都被放在页面 head 标签内,这种做法主要目的是 css 与 javaScript 放在一起代码看上去比较整洁,但是有一个问题就是把 javaScript 放在 head 里面意味着必须把所有 javaScript 代码都下载、解析和解释完成后,才开始渲染页面,从而导致打开页面可能会产生白屏问题,解决方法就是将所有 javaScript 引用放在 body 元素中的内容后面,例子如下。<html> <head> <titl
2021-05-26 01:49:14
200
转载 BFC是什么?
BFC简介BFC全称Block Formatting Context,名为“块级格式化上下文”。BFC它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,Block Formatting Context提供了一个环境,HTML在这个环境中按照一定的规则进行布局。简单来说就是,BFC是一个完全独立的空间(布局环境),让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢,BFC可以看做是一个CSS元素属性。怎样触发BFCoverflow: hiddend
2021-04-13 23:19:24
221
原创 create-react-app 添加typescript与ant design实现按需加载
首先创建初始项目npx create-react-app test-demo添加typescript注意create-react-app引入typescript不需要自己手动创建tsconfig.json等配置文件,安装引入即可,引入之后将test-demo项目src路径下的.js后缀文件改为.tsxnpm install --save typescript @types/node @types/react @types/react-dom @types/jest引入ant design
2021-01-26 10:18:49
563
2
原创 React Hooks简单总结
hooks基础教程地址https://www.bilibili.com/video/BV1y4411Q7yH?p=1react hooksreact hooks必须在react 16.8及其以上版本才能生效useStateconst [count, setCount] = useState(0); // 数组解构// 等同于const _useState = useState(0);const count = _userState[0];const setCount = _user
2021-01-12 21:57:39
193
原创 ECMAScript 6.0 知识点汇总(二)
迭代器Iterator// Iterrator 是一种新的遍历机制,它有两个核心// 1.迭代器是一个接口,能快捷的访问数据,通过Symbol.iterator来创建迭代器。// 2.迭代器是用于遍历数据结构的指针(数据库的游标)。// 迭代器的使用let items = ['one', 'two', 'three'];// 创建迭代器let ite = items[Symbol.iterator]();console.log(ite.next()); // {value: "one",
2020-08-18 18:58:30
107
原创 ECMAScript 6.0 知识点汇总(一)
简介ECMAScript 6.0(一下简称ES6)是Javascript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得Javascript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。ES6既是一个历史名词,也是一个泛指,含义5.1版以后的Javascript的下一代标准,涵盖了ES2015、ES2016、ES2017等等,而ES2015则是正式名称,特指该年发布的正式版本的语言标准。babel介绍被称为下一代的Javascript编译器。可以将es6的代码转换成
2020-08-16 16:54:11
254
原创 axios知识点简单汇总
特征1.从浏览器中创建XMLHttpRequests。2.从node.js创建http请求。3.支持Promise API。4.拦截请求和响应。5.转换请求数据和响应数据。6.取消请求。7.自动转换JSON数据。并发请求methods: { sendAjax() { // 请求1 get // 请求2 post this.$axios.defaults.baseUrl = 'http://127.0.0.1:8888';
2020-08-16 16:53:05
222
原创 Vue Router
路由的实现1.传统开发方式url改变后,立刻发生请求响应整个页面,有可能资源过多,传统开发会让页面出现白屏2.SPA单页面应用(Single Page Application),锚点值改变后不会立刻发送请求,而是在某个合适的时机,发起ajax请求在对页面进行局部渲染,优点是页面不立刻跳转用户体验好。<html> <body> <a href="#/login">登录页面</a> <a href="#/re
2020-07-23 13:18:12
127
原创 通过Tab切换效果的例子解决vue中数组更新后视图不刷新问题
故事背景开发中我们比如做Tab页切换效果,思路是首先声明一个数组Arr,每个Tab标签对应一个数组下标存着Tab选中的状态,arr[true, false, false, false, false],然后去根据Tab选中的下标去更改数组Arr的值为true,但是问题出现了,为什么我触发了更新数组方法而视图没有改变呢(PS:VUE中)。以下代码做了错误还原以及解决方法Object.assign({}, this.XXX, arr)或者用数组的push方法也可以解决这个问题,为什么会发生这个呢,没仔细研究,感
2020-07-17 13:58:53
1003
1
原创 Vue知识总结
指令看文档,没啥好写的。组件与父组件传值方式父>子1.先给父组件中绑定自定义的属性。2.在子组件中使用props接收父组件传递的数据。3.可以在子组件中任意使用。子>父1.在父组件绑定自定义事件2.在子组件中触发原生的事件,在函数中使用$emit触发自定义的childHandler具名插槽标签详细讲解看这个文章,https://www.cnblogs.com/tomatoto/p/9633631.html过滤器过滤器的作用:为页面中数据进行添油加醋。有两
2020-07-16 01:23:59
120
原创 ES5 实现获取本周、上周、本月、上月、本季度的时间处理工具类
简介在日常工作日我们前端有时候会配合后端小伙伴做统计操作,可能会需要获取一些特殊日期时间,所以经过整合出一个工具类分享给大家,喜欢的给个star,给个小小的鼓励哈!工具类 dateFormatUtil.js // 当前日期 let now = new Date(); // 今天本周的第几天 let nowDayOfWeek = now.getDay(); // 当前日 let nowDay = now.getDate(); // 当前月 let nowMonth
2020-06-09 11:15:23
731
原创 javascript高级程序设计-第八章
注没有一节一节写的很详细,就总结一些常用的,给自己或者也一起在学习的朋友一起过过眼瘾,一起理理,喜欢的朋友可以点赞关注哦。BOM简介ECMAScript 是 JavaScript 的核心,但如果要在 Web 中使用 JavaScript,那么 BOM(浏览器对象模型)则无疑才是真正的核心。BOM 提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。多年来,缺少事实上的规范...
2020-04-26 14:52:09
205
1
原创 javascript高级程序设计-第七章
注没有一节一节写的很详细,就总结一些常用的,给自己或者也一起在学习的朋友一起过过眼瘾,一起理理,喜欢的朋友可以点赞关注哦。递归递归函数是在一个函数通过名字调用自身的情况下构成的,如下所示。function factorial(num){ if (num <= 1){ return 1; } else { return num * factorial(num-1...
2020-03-31 13:40:14
178
原创 javascript高级程序设计-第六章
注没有一节一节写的很详细,就总结一些常用的,给自己或者也一起在学习的朋友一起过过眼瘾,一起理理,喜欢的朋友可以点赞关注哦。面向对象的程序设计“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来讲,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。正因为这样(以及其他将要讨论的原因),我们可以把 ECMAScript 的对象想象...
2020-02-26 19:55:34
176
原创 javascript高级程序设计-第五章(续)
注没有一节一节写的很详细,就总结一些常用的,给自己或者也一起在学习的朋友一起过过眼瘾,一起理理,喜欢的朋友可以点赞关注哦。Array类型重排序方法数组中已经存在两个可以直接用来重排序的方法:reverse()和 sort()。reverse()方法会反转数组项的顺序。var values = [1, 2, 3, 4, 5]; values.reverse(); consol...
2020-02-25 16:32:01
126
原创 javascript高级程序设计-第五章
注没有一节一节写的很详细,就总结一些常用的,给自己或者也一起在学习的朋友一起过过眼瘾,一起理理,喜欢的朋友可以点赞关注哦。引用类型引用类型的值(对象)是引用类型的一个实例。在 ECMAScript 中,引用类型是一种数据结构,用于将数据和功能组织在一起。它也常被称为类,但这种称呼并不妥当。尽管 ECMAScript从技术上讲是一门面向对象的语言,但它不具备传统的面向对象语言所支持的类和...
2020-02-23 23:34:14
154
1
原创 javascript高级程序设计-第四章
注没有一节一节写的很详细,就总结一些常用的,给自己或者也一起在学习的朋友一起过过眼瘾,一起理理,喜欢的朋友可以点赞关注哦。基本类型和引用类型的值ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值。基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象。引用类型的值是保存在内存中的对象。与其他语言不同,JavaScript 不允许直接访问内存中...
2020-02-22 23:18:39
371
原创 javascript高级程序设计-第三章
注没有一节一节写的很详细,就总结一些常用的,给自己或者也一起在学习的朋友一起过过眼瘾,一起理理,喜欢的朋友可以点赞关注哦。严格模式为什么使用JavaScript严格模式在严格模式启用后,JavaScript引擎会对脚本进行更严格的评估。通常不会触发显式异常的Sloppy代码现在会导致代码在使用之前被抛出异常。所谓严格模式就是是ECMAScript 5中的一项新功能,它允许将程序或函数...
2020-02-22 21:21:35
145
原创 javascript高级程序设计-第二章
注没有一节一节写的很详细,就总结一些常用的,给自己或者也一起在学习的朋友一起过过眼瘾,一起理理,喜欢的朋友可以点赞关注哦。script标签位置一般情况下页面加载会有延迟,如果script里面js文件比较大可能会出现网页刚加载时的空白情况,所以为了避免这种问题,通常我们会把script标签放在body元素中,这里面试中有时候会问道,属于比较基础的问题。示例代码<!DOCTYP...
2020-02-21 23:06:03
134
原创 React基础学习(看心情学习更新)
几个基本概念介绍Library(库):小而巧的库,只提供了特定的API;优点就是船小好调头,可以很方便的从一个库切换到另一个库;但是代码基本上不需要改变。Framework(框架):大而全的是框架;框架提供了一整套的解决方案;所以,如果在项目中间,想切换到另外的框架是比较困难的。前端三大主流框架Angular.js:出来较早的前端框架,学习曲线比较陡,NG1学起来麻烦,NG2~NG5...
2020-02-21 22:33:53
149
原创 javascript计算现职年数
没啥好分享的,简单的小工具写一下,方便以后使用// startDate、startDate,时间格式'2019-10-1'export function MonthsBetw(startDate, endDate) { // 现职年数 startDate = startDate.split('-'); endDate = endDate.split('-'); let ye...
2020-01-14 15:22:13
307
原创 React 打包下载图片,使用 jszip 压缩插件 和 file-saver 插件
1.需要使用 jszip 压缩插件 和 file-saver 插件npm install jszip --savenpm install file-saver --save2.示例代码import React from 'react';import {Form} from 'antd';import JSZip from 'jszip';import saveAs from 'f...
2019-12-25 13:30:00
2418
3
原创 Chrome等浏览器下出现net::ERR_BLOCKED_BY_CLIENT的解决办法
解决办法:你的地址啊图片什么的,被当成广告拦截插件拦截了,只需要关闭广告过滤的插件即可。
2019-09-18 18:08:56
925
3
原创 MySQL中使用utf8mb4而不是utf-8
介绍“utf8”只支持每个字符最多三个字节,而真正的 UTF-8 是每个字符最多四个字节。详述MySQL 的“utf8mb4”是真正的“UTF-8”。MySQL 的“utf8”是一种“专属的编码”,它能够编码的 Unicode 字符并不多。...
2019-08-18 15:34:20
140
原创 SpringBoot与JWT整合,史上最全最好用的基础案例
前言这里是案例源码 springboot_jwt,喜欢的同学可以给一个star呢!哈哈哈!首先你得引入Maven依赖(第一步)<dependency> <groupId>com.auth0</groupId> <artifactId>java-jwt</artifactId> <version>...
2019-08-06 00:41:59
1557
4
原创 SpringBoot 与 Shiro 的整合
Spring boot 与 Shiro的整合Shiro核心APISubject:用户主体(把操作交给SecurityManager)SecurityManager:安全管理器(关联Realm)Realm:shrio连接数据的桥梁github地址(基础的springboot与shiro的整合demo,不喜勿喷,欢迎star,后续更新springboot+shiro+jwt实现前后端分离...
2019-08-04 19:19:30
268
原创 CSS3的Flex布局
什么是Flex布局flex布局在移动端自适应用的比较多,意为“弹性布局”,任何一个容器都可以设置flex布局,使用flex布局以后,子元素的float、clear和vertical-align属性将失效。.box{ display: flex;}行内元素使用.box{ display: inline-flex;}Webkit内核的浏览器,需要加上-webkit前...
2019-07-09 16:07:52
87
原创 React 使用 Video.js 加载 HLS视频流
加载依赖npm install --save video.js封装组件说明: 这里sources可以传入多个视频源,type可以自己指定根据播放流来进行选择。因为需求我是一个一个视频单独加载出来的。VideoPlayer.jsimport React from 'react';import videojs from 'video.js';import './myVideo...
2019-07-04 13:12:04
7445
原创 React-loadable 编译时出现import报语法错误(Module build failed: SyntaxError: Unexpected token (7:18))
报错配置信息package.json{ "name": "react-xipiker-v1", "version": "1.0.0", "description": "react-xipiker-v1", "main": "index.js", "scripts": { "build": "webpack --config ./build/webpack.d...
2019-07-01 14:40:54
4124
原创 React运行浏览器报错[A <Router> may have only one child element]
错误信息Uncaught Invariant Violation: A <Router> may have only one child element at invariant (http://localhost:8111/bundle.js:1071:15) at Router.componentWillMount (http://localhost:8111/b...
2019-06-28 16:29:33
1303
8
原创 React npm run build报错[Module build failed: SyntaxError: Unexpected token (6:4)]
错误信息ERROR in ./src/index.jsModule build failed: SyntaxError: Unexpected token (6:4)已有配置信息package.json{ "name": "react-xipiker-v1", "version": "1.0.0", "description": "react-xipiker-v1",...
2019-06-28 14:11:25
5851
原创 react脚手架构建运行时报错问题
具体操作sudo npm install -g create-react-appmkdir react-first-democd react-first-democreate-react-app react-clicd react-clinpm install (依赖安装完以后执行npm start)npm start错误$ react-scripts startThere...
2019-06-27 15:49:16
3739
原创 SQL调优
利用基准测试和性能分析来模拟和发现系统瓶颈很重要。基准测试 - 用 ab 等工具模拟高负载情况。性能分析 - 通过启用如慢查询日志等工具来辅助追踪性能问题。基准测试和性能分析可能会指引你到以下优化方案。改进模式1、为了实现快速访问,MySQL 在磁盘上用连续的块存储数据。2、使用 CHAR 类型存储固定长度的字段,不要用 VARCHAR。CHAR 在快速、随机访问时效率很高。如果...
2019-06-27 10:23:39
107
原创 SpringBoot Security基础使用
创建SpringBootSecuritypom.xml<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schem...
2019-03-23 16:55:05
112
原创 构建高可用的Config Server
本案例源码获得地址SpringCloudDemoConfig-ServerPOM引入spring-cloud-starter-eureka<dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-ne...
2019-03-20 15:26:38
133
原创 Config Server从本地读取配置文件
本案例源码获得地址SpringCloudDemo创建Config-Serverpom.xml<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-insta...
2019-03-20 14:54:56
2578
2
原创 在Zuul上配置熔断器与在Zuul中使用过滤器
本案例源码获得地址SpringCloudDemo在Zuul上配置熔断器ZuulFallbackProvider.javapublic interface ZuulFallbackProvider { String getRoute(); ClientHttpResponse fallbackResponse(String var1, Throwable var2);}...
2019-03-20 14:25:39
443
原创 在Feign上使用Hystrix熔断器
本案例源码获得地址SpringCloudDemo创建Eureka-Feign-Clientpom.xml<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema...
2019-03-19 22:09:57
550
原创 在RestTemplate和Ribbon上使用Hystrix熔断器
本案例源码获得地址SpringCloudDemo创建Eureka-Ribbon-Clientpom.xml<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchem...
2019-03-19 22:02:29
425
原创 声明式调用Feign
本案例源码获得地址SpringCloudDemo创建Eureka-Feign-Clientpom.xml<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema...
2019-03-19 16:20:48
108
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人