XIPIKER-CSDN博客

原创＜script＞应用的几个知识点

标签位置在过去，所有 script 元素都被放在页面 head 标签内，这种做法主要目的是 css 与 javaScript 放在一起代码看上去比较整洁，但是有一个问题就是把 javaScript 放在 head 里面意味着必须把所有 javaScript 代码都下载、解析和解释完成后，才开始渲染页面，从而导致打开页面可能会产生白屏问题，解决方法就是将所有 javaScript 引用放在 body 元素中的内容后面，例子如下。<html> <head> <titl

2021-05-26 01:49:14 184

转载 BFC是什么？

BFC简介BFC全称Block Formatting Context，名为“块级格式化上下文”。BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性。怎样触发BFCoverflow: hiddend

2021-04-13 23:19:24 209

原创 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 541 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 171

原创 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 98

原创 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 245

原创 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 214

原创 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 115

原创通过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 979 1

原创 Vue知识总结

指令看文档，没啥好写的。组件与父组件传值方式父>子1.先给父组件中绑定自定义的属性。2.在子组件中使用props接收父组件传递的数据。3.可以在子组件中任意使用。子>父1.在父组件绑定自定义事件2.在子组件中触发原生的事件，在函数中使用$emit触发自定义的childHandler具名插槽标签详细讲解看这个文章，https://www.cnblogs.com/tomatoto/p/9633631.html过滤器过滤器的作用：为页面中数据进行添油加醋。有两

2020-07-16 01:23:59 112

原创 ES5 实现获取本周、上周、本月、上月、本季度的时间处理工具类

简介在日常工作日我们前端有时候会配合后端小伙伴做统计操作，可能会需要获取一些特殊日期时间，所以经过整合出一个工具类分享给大家，喜欢的给个star，给个小小的鼓励哈!工具类 dateFormatUtil.js // 当前日期 let now = new Date(); // 今天本周的第几天 let nowDayOfWeek = now.getDay(); // 当前日 let nowDay = now.getDate(); // 当前月 let nowMonth

2020-06-09 11:15:23 708

原创 javascript高级程序设计-第八章

注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。BOM简介ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么 BOM（浏览器对象模型）则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。多年来，缺少事实上的规范...

2020-04-26 14:52:09 189 1

原创 javascript高级程序设计-第七章

注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。递归递归函数是在一个函数通过名字调用自身的情况下构成的，如下所示。function factorial(num){ if (num <= 1){ return 1; } else { return num * factorial(num-1...

2020-03-31 13:40:14 162

原创 javascript高级程序设计-第六章

注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。面向对象的程序设计“无序属性的集合，其属性可以包含基本值、对象或者函数。”严格来讲，这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。正因为这样（以及其他将要讨论的原因），我们可以把 ECMAScript 的对象想象...

2020-02-26 19:55:34 159

原创 javascript高级程序设计-第五章(续)

注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。Array类型重排序方法数组中已经存在两个可以直接用来重排序的方法：reverse()和 sort()。reverse()方法会反转数组项的顺序。var values = [1, 2, 3, 4, 5]; values.reverse(); consol...

2020-02-25 16:32:01 121

原创 javascript高级程序设计-第五章

注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。引用类型引用类型的值（对象）是引用类型的一个实例。在 ECMAScript 中，引用类型是一种数据结构，用于将数据和功能组织在一起。它也常被称为类，但这种称呼并不妥当。尽管 ECMAScript从技术上讲是一门面向对象的语言，但它不具备传统的面向对象语言所支持的类和...

2020-02-23 23:34:14 128 1

原创 javascript高级程序设计-第四章

注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。基本类型和引用类型的值ECMAScript 变量可能包含两种不同数据类型的值：基本类型值和引用类型值。基本类型值指的是简单的数据段，而引用类型值指那些可能由多个值构成的对象。引用类型的值是保存在内存中的对象。与其他语言不同，JavaScript 不允许直接访问内存中...

2020-02-22 23:18:39 349

原创 javascript高级程序设计-第三章

注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。严格模式为什么使用JavaScript严格模式在严格模式启用后，JavaScript引擎会对脚本进行更严格的评估。通常不会触发显式异常的Sloppy代码现在会导致代码在使用之前被抛出异常。所谓严格模式就是是ECMAScript 5中的一项新功能，它允许将程序或函数...

2020-02-22 21:21:35 128

原创 javascript高级程序设计-第二章

注没有一节一节写的很详细，就总结一些常用的，给自己或者也一起在学习的朋友一起过过眼瘾，一起理理，喜欢的朋友可以点赞关注哦。script标签位置一般情况下页面加载会有延迟，如果script里面js文件比较大可能会出现网页刚加载时的空白情况，所以为了避免这种问题，通常我们会把script标签放在body元素中，这里面试中有时候会问道，属于比较基础的问题。示例代码<!DOCTYP...

2020-02-21 23:06:03 127

原创 React基础学习(看心情学习更新)

几个基本概念介绍Library（库）:小而巧的库，只提供了特定的API；优点就是船小好调头，可以很方便的从一个库切换到另一个库；但是代码基本上不需要改变。Framework（框架）:大而全的是框架；框架提供了一整套的解决方案；所以，如果在项目中间，想切换到另外的框架是比较困难的。前端三大主流框架Angular.js:出来较早的前端框架，学习曲线比较陡，NG1学起来麻烦，NG2~NG5...

2020-02-21 22:33:53 142

原创 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 296

原创 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 2403 3

原创 Chrome等浏览器下出现net::ERR_BLOCKED_BY_CLIENT的解决办法

解决办法：你的地址啊图片什么的，被当成广告拦截插件拦截了，只需要关闭广告过滤的插件即可。

2019-09-18 18:08:56 893 3

原创 MySQL中使用utf8mb4而不是utf-8

介绍“utf8”只支持每个字符最多三个字节，而真正的 UTF-8 是每个字符最多四个字节。详述MySQL 的“utf8mb4”是真正的“UTF-8”。MySQL 的“utf8”是一种“专属的编码”，它能够编码的 Unicode 字符并不多。...

2019-08-18 15:34:20 123

原创 SpringBoot与JWT整合，史上最全最好用的基础案例

前言这里是案例源码 springboot_jwt，喜欢的同学可以给一个star呢！哈哈哈!首先你得引入Maven依赖(第一步)<dependency> <groupId>com.auth0</groupId> <artifactId>java-jwt</artifactId> <version&gt...

2019-08-06 00:41:59 1506 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 258

原创 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 78

原创 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 7406

原创 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 4076

原创 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 1281 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 5795

原创 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 3702

原创 SQL调优

利用基准测试和性能分析来模拟和发现系统瓶颈很重要。基准测试 - 用 ab 等工具模拟高负载情况。性能分析 - 通过启用如慢查询日志等工具来辅助追踪性能问题。基准测试和性能分析可能会指引你到以下优化方案。改进模式1、为了实现快速访问，MySQL 在磁盘上用连续的块存储数据。2、使用 CHAR 类型存储固定长度的字段，不要用 VARCHAR。CHAR 在快速、随机访问时效率很高。如果...

2019-06-27 10:23:39 98

原创 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 96

原创构建高可用的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 122

原创 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 2534 2

原创在Zuul上配置熔断器与在Zuul中使用过滤器

本案例源码获得地址SpringCloudDemo在Zuul上配置熔断器ZuulFallbackProvider.javapublic interface ZuulFallbackProvider { String getRoute(); ClientHttpResponse fallbackResponse(String var1, Throwable var2);}...

2019-03-20 14:25:39 422

原创在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 541

原创在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 416

原创声明式调用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 97

空空如也

空空如也