- 博客(227)
- 收藏
- 关注
RSS订阅原创 前端最新一面
7. vue3 vite webpack作用。9. html标签语义化 data-属性。10.前端权限系统怎么做 加路由怎么绑定。5. 图片懒加载监听整个图片 监听器。4. ref,reactive区别。打印结果：1,3,4,6,5,2。6. flex:1 用在哪个属性。
2023-09-05 11:25:41
635
原创 前端高频面试题 Day01
●computed计算属性:依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值。.●watch侦听器:更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。运用场景:●当需要进行数值计算，并且依赖于其它数据时，应该使用computed, 因为可以利用computed的缓存特性，避免每次获取值时都要重新计算。
2023-08-29 18:32:11
891
4
原创 Mock.js的使用
Mock.js是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求，返回设定好的数据。本文介绍了Mock.js的基础用法，包括随机生成用户信息、随机生成用户信息数组、Mock.js API的常用方法、生成数据模板和模拟接口请求。Mock.js是一个非常实用的数据模拟和接口测试工具，能够大大提高前端开发效率。小伙伴快去试试看吧~
2023-08-29 18:06:40
463
原创 git rebase和merge区别
merge和rebase标题上的两个命令：merge和rebase都是用来合并分支的。这里不解释rebase命令，以及两个命令的原理，详细解释参考这里。下面的内容主要说的是两者在实际操作中的区别。分支就是便于多人在同一项目中的协作开发。比方说：每个人开发不同的功能，在各自的分支开发过程中互不影响，完成后都提交到develop分支。极大的提高了开发的效率。合并的时候，有可能会产生冲突。冲突的产生是因为在合并的时候，不同分支修改了相同的位置。
2023-08-29 17:47:16
943
原创 js对url进行编码解码（三种方式）
它用于对URL的组成部分进行个别编码，除了常见的符号以外，对其他一些在网址中有特殊含义的符号";编码后，它输出符号的utf-8形式，并且在每个字节前加上%，，然后用十六进制的转义序列（形式为%xx）对生成的 1 字节、2 字节或 4 字节的字符进行编码。它的具体规则是，除了ASCII字母、数字、标点符号"@ * _ + - . /"以外，对其他所有字符进行编码。: @ & = + $ , #”，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码。
2023-08-29 17:38:09
2982
原创 虚拟列表的实现
在传统的列表渲染中，如果列表数据过多，一次性渲染所有数据将耗费大量的时间和内存。当我们上下滚动时，性能低的浏览器或电脑都会感觉到非常的卡，这对用户的体验时是致命的。于是我们会想到懒加载，当资源到达可视窗口内时，继续向服务器发送请求获取接下来的资源，不过当获取的资源越来越多时，此时浏览器不断重绘与重排，这样的开销也是要考虑的当数量多到一定程度时，页面也会出现卡顿。此时我们会想到虚拟列表，虚拟列表只渲染当前可见的部分数据，随着滚动条的滚动，只渲染当前可见的列表项，从而大大减少了渲染时间。
2023-08-29 16:47:40
111
原创 JavaScript：反转数组的四种方法
在上面的代码中，我们使用Math.floor向下舍入( i < Math.floor(arr.length/2) ) i < Math.floor(arr.length/2)给定数组的一半元素。reverseArray1函数将一个数组( arr )作为参数，并通过向后循环遍历给定的数组，以相反的顺序创建一个相同元素的新数组( newArr )( let i = arr.length - 1;数组的最后一个元素将是循环的起点(arr.length — 1) ，它将一直运行直到到达数组的起点(i ≥ 0)
2023-08-29 16:27:05
2427
原创 Vuex页面刷新数据丢失的问题
Vuex只是在内存保存状态，刷新之后就会丢失，如果要持久化就要存起来。localStorage就很适合,提交mutation的时候同时存入localStorage,store中把值取出作为state的初始值即可。这里有两个问题，不是所有状态都需要持久化；如果需要保存的状态很多，编写的代码就不够优雅，每个提交的地方都要单独做保存处理。这里就可以利用vuex提供的subscribe方法做一个统一的处理。甚至可以封装一个vuex插件以便复用。
2023-08-29 16:15:51
888
原创 js跨域的解决方案
指的是浏览器不能执行其他网站的脚本，简单来说是浏览器同源政策的限制，浏览器针对于ajax的限制。同源政策两个页面拥有相同的 协议，端口，域名 就是同源，如果有一个不相同就是不同源。同源政策产生的目的保护用户信息安全，防止一些网站盗取用户信息。常见跨域场景在这里插入图片描述。
2023-08-29 16:05:00
698
原创 git clone与git pull区别
git clone是远程操作的第一步，通常是从远程主机克隆一个版本库，eg:$ git clone ## 该命令会在本地主机生成一个目录，与远程主机的版本库同名，如果要是制定不同的目录名，可以将目录名作为git clone 命令的第二个参数。比如，在git clone 的时候，所有本地分之默认与远程主机的同名分之，建立追踪关系，也就是，本地的master分之自动“追踪”origin/master分之。git pull 作用是，取回远程主机某个分支的更新，再与本地的指定分支合并。
2023-08-29 15:45:52
756
原创 AI的蓬勃发展，程序员的末日？
● AI是人工智能(Artificial Intelligence)的缩写,是比人类更强大的算法与软硬件系统,能模拟出人类智力相关的某些行为与功能。
2023-08-04 18:30:59
226
3
原创 解决 vue 多层级路由 缓存失效 解决基于 keep-alive 的多级路由缓存问题 vue keep-alive 缓存失效 vue-element-admin多层级路由 缓存失效
解决 vue 多层级路由 缓存失效 解决基于 keep-alive 的多级路由缓存问题 vue keep-alive 缓存失效 vue-element-admin多层级路由 缓存失效
2023-03-22 14:23:55
2067
1
原创 react store 刷新页面丢失
在react中可以使用redux-persist包，将store保存在浏览器的sessionStorage或者localStorage中。使用浏览器内部存储的方式进行存储在cookie，localStorage，sessionStorage 使用的时候直接获取就好。1.redux-persist可以让你的数据从state分离出来，保存到浏览器缓存中，以便实现数据的持久化存储。在我们使用项目的时候会用到redux来进行缓存机制，但是刷新页面之后store 就丢失或者重置。
2023-02-20 10:02:50
1482
原创 React 刷新404问题
因为前端路由更容易确定问题，更方便分析，而且对于react-router更熟悉，所以首先去查询react-router路由库相关配置信息，发现文档中提到了使用browserHistory时，会创建真实的URL，处理初始/请求没有问题，但是对于跳转路由后，刷新页面或者直接访问该URL时，会发现无法正确相应，更多信息查看参考文档，文档中也提供了几种服务器配置解决方式。
2023-02-20 10:00:41
281
原创 react中Suspense，EventEmitter的使用
3.在需要传递数据的组件事件中，使用 NoticeEmitter.emit(‘事件名’，传递的数据1，…在react中如果有不同的组件需要有事件传递的话，就可以用到这个EventEmitter，EventEmitter依赖于events.2、在外面使用Suspense标签，并在fallback中声明LazyComponent加载完成前做的事，即可优化整个页面的交互。1、LazyComponent是通过懒加载加载的组件，所以渲染页面的时候可能会有延迟，但使用了Suspense之后，可优化交互。
2022-09-13 22:57:20
543
原创 算法题--给定一个只包括 ‘(‘，‘)‘，‘{‘，‘}‘，‘[‘，‘]‘ 的字符串 s ，判断字符串是否有效
给定一个只包括 ‘(’，‘)’，‘{’，‘}’，‘[’，‘]’ 的字符串 s ，判断字符串是否有效。s 仅由括号 ‘()[]{}’ 组成。左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。
2022-07-22 09:56:24
1152
原创 适合初学者练手的vue小项目（附github源码）
vue慢慢的成为了前端最受欢迎的框架之一，在很多项目之中开发都能用得到，如今也已经发展到3.0了，可能是因为这个框架可以提高工作效率，因此受到大家的追捧，在之前的文章里面也说过，2019年，大前端学习小程序和vue是必备技能。如果在平时的工作里，有些公司用不到这两项技能，那你也要在业余的时间里面，找一些教程和练手的vue小项目。以下是今年的一些可以练笔的项目，这些源码稍微学习其中的几个，基础能力都能够有所进步。1:Vue2.0入门项目https://github.com/SD-Gaming/Vue2.
2021-04-15 16:25:48
8356
1
原创 华为2021-4-7笔试 第一题
题目：第一行输入N, 0<N<=100000 第一行输入N，0<N<=100000接下来是N行代表每个小朋友希望和谁分到一组，如"John Jack", 代表 接下来是N行代表每个小朋友希望和谁分到一组，如“John Jack”，代表John希望和Jack分到-组，两个名字之间以空格分割，名字本身不存在空 约翰希望和杰克分到-组，两个名字之间以空格分割，名字本身不存在空格。示例：输入6Jack TomAlice JohnJessica LeonieTom Alice
2021-04-08 10:44:06
554
2
原创 手写HashMap，实现put，get以及扩容
面试遇到package com.MyHashMap;import java.util.Objects;public class MyHashMap<K,V> { public Node<K,V>[] table; private static final int DEFAULT_INITAIL_CAPACITY = 1<<4; //负载因子 private static final float DEFAULT_LOAD_FEC
2021-03-24 15:22:57
253
原创 Java面试2021
下面为拼多多、饿了么、蚂蚁金服、哈啰出行、携程、饿了么、2345、百度等公司给我留下较深印象的一些java面试题1. Private修饰的方法可以通过反射访问，那么private的意义是什么答：1.java的private修饰符并不是为了绝对安全性设计的，而是对用户常规使用java的一种约束。2.从外部对对象进行常规调用时，能够看到清晰的类结构。2. Java类初始化顺序答：基类静态代码块，基类静态成员字段（并列优先级，按照代码中出线的先后顺序执行，且只有第一次加载时执行）-》派生类静态代码块，派生
2021-01-28 12:37:10
545
原创 报错 - npm ERR! [email protected] install: `node install.js`
刚克隆下来的代码在安装安装包时报了 npm ERR! [email protected] install: node install.js 这个错误，下面我来说一下解决方法1、报错情况：2.解决办法：（1）运行编译以下npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver如果上面的不行的话，就运行：（1）npm install --ignore-scripts
2020-12-18 14:33:04
1555
原创 JDK1.8 ArrayList默认长度及扩容分析
我们都知道jdk1.6的时候，ArrayList默认长度为10但是jdk1.8之后，发生了变化1.首先看默认构造方法 /** * Constructs an empty list with an initial capacity of ten. */ public ArrayList() { this.elementData = DEFAU...
2020-03-27 17:12:48
1779
2
原创 windows安装Mycat并测试
1、下载系统安装包选择相应的版本进行下载，地址：http://dl.mycat.io/ 。Mycat数据库分库分表中间件介绍 http://www.mycat.io/2、安装安装mycat前需要保证系统已安装过jdk和mysql，将下载好的mycat安装包解压到某个目录下，然后进入mycat解压目录下的bin目录（打开cmd控制台确保是以管理员身份运行），执行安装命令：D:\develop...
2020-03-15 11:46:34
385
原创 VUE整合富文本编辑器Tinymce
一、Tinymce可视化编辑器参考https://panjiachen.gitee.io/vue-element-admin/#/components/tinymcehttps://panjiachen.gitee.io/vue-element-admin/#/example/create 二、组件初始化Tinymce是一个传统javascript插件，默认不能用于Vue.js因此需要做...
2020-02-18 15:48:26
3353
4
原创 poi操作excel
一、Excel导入导出的应用场景1、数据导入：减轻录入工作量2、数据导出：统计信息归档3、数据传输：异构系统之间数据传输二、POI简介（Apache POI）1、什么是POIApache POI是Apache软件基金会的开放源码函式库，POI提供API给Java程序对Microsoft Office格式档案读和写的功能。HSSF － 提供读写Microsoft Excel格式档案...
2020-02-14 15:58:59
1122
1
原创 mp实现条件查询
一、wapper介绍Wrapper ： 条件构造抽象类，最顶端父类AbstractWrapper ： 用于查询条件封装，生成 sql 的 where 条件 QueryWrapper ： Entity 对象封装操作类，不是用lambda语法 UpdateWrapper ： Update 条件封装，用于Entity对象更新操作AbstractLambdaWrapper ：...
2020-02-05 16:34:44
6655
1
原创 mp实现逻辑删除
1.数据库中添加字段deleted2.实体类中添加字段//逻辑删除 @TableField(fill = FieldFill.INSERT) @TableLogic private Integer deleted;3.配置默认值2种方式1.类中配置package com.example.test.mpdemo.handler;import com.bao...
2020-02-04 12:51:30
2499
1
原创 mp实现乐观锁
一.乐观锁乐观锁解决丢失更新的问题那么我们如何实现乐观锁呢，一般来说有以下2种方式：1.使用数据版本（Version）记录机制实现，这是乐观锁最常用的一种实现方式。何谓数据版本？即为数据增加一个版本标识，一般是通过为数据库表增加一个数字类型的 “version” 字段来实现。当读取数据时，将version字段的值一同读出，数据每更新一次，对此version值加一。当我们提交更新的时候，判断数...
2020-02-02 13:12:54
1404
原创 mybatis-plus CRUD接口和实现自动填充功能
一.简介MyBatis-Plus（简称 MP）是一个 MyBatis 的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。二.特性无侵入：只做增强不做改变，引入它不会对现有工程产生影响，如丝般顺滑•损耗小：启动即会自动注入基本 CURD，性能基本无损耗，直接面向对象操作•强大的 CRUD 操作：内置通用 Mapper、通用 Service，仅仅通过少量配置...
2020-02-02 12:13:14
1747
原创 分布式系统唯一ID生成方案汇总
系统唯一ID是我们在设计一个系统的时候常常会遇见的问题，也常常为这个问题而纠结。生成ID的方法有很多，适应不同的场景、需求以及性能要求。所以有些比较复杂的系统会有多个ID生成的策略。下面就介绍一些常见的ID生成策略。1. 数据库自增长序列或字段最常见的方式。利用数据库，全数据库唯一。优点：1）简单，代码方便，性能可以接受。2）数字ID天然排序，对分页或者需要排序的结果很有帮助。缺点：...
2020-01-29 16:12:35
144
原创 springboot简单的整合dubbo
1.创建分模块springboot先创建一个springboot的空项目然后删除无关文件2.创建分模块provider 和 consumer至此，我们的分模块项目已经基本创建完成各个模块之间的依赖关系接下来说下各个模块之间的依赖关系consumer --> providerconsumer 和 provier 又同时依赖于父pom【dubbo】ok理清依赖关系开始配置我们的...
2020-01-05 17:20:04
154
原创 error: RPC failed； curl 56 OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054解决方法
git下载出错：$ git clone https://git.ffmpeg.org/ffmpeg.git ffmpegCloning into 'ffmpeg'...remote: Counting objects: 570040, done.remote: Compressing objects: 100% (118805/118805), done.error: RPC faile...
2019-12-13 14:07:29
1559
原创 单点登录技术方案
分布式系统要实现单点登录，通常将认证系统独立抽取出来，并且将用户身份信息存储在单独的存储介质，比如:MySQL,Redis，考虑性能要求，通常存储在Redis中,如下图:单点登录的特点是:1.认证系统为独立的系统2.各个子系统通过HTTP或者其他协议与认证系统通信，完成用户认证3.用户身份信息存储在redis集群java中有很多用户认证的框架可以实现单点登录:1.Apache Sh...
2019-12-09 23:29:49
658
原创 JWT
用户在用户微服务中登录，如何又访问其他的微服务而不需要登录了？这里需要在用户微服务里将用户信息加密生成token。在网关中配置能检验令牌.并且，在网关中需要进行权限校验我们可以采取JWT的方式来实现鉴权校验一.什么是JWTJSON Web Token（JWT）是一个非常轻巧的规范,这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。JWT总结：JWT是用于微服务之间传递...
2019-12-09 14:58:11
140
原创 微服务网关
1. 微服务网关概述 不同的微服务一般会有不同的网络地址，而外部客户端可能需要调用多个服务的接口才能完成一个业务需求，如果让客户端直接与各个微服务通信，会有以下的问题：就比如常见的电商系统当客户去掉用多个微服务时存在很多问题，比如：客户端会多次请求不同的微服务，增加了客户端的复杂性存在跨域请求，在一定场景下处理相对复杂认证复杂，每个服务都需要独立认证难以重构，随着项目的迭代，...
2019-12-08 19:12:19
355
原创 canal安装
canal可以用来监控数据库数据的变化，从而获得新增数据，或者修改数据canal是阿里巴巴存在跨机房同步的业务需求提出的阿里系公司开始逐步的尝试基于数据库的日志解析，获取增量变更进行同步，由此衍生出增量订阅&消费的业务1.Canal工作原理2.Canal容器的安装下载镜像：docker pull docker.io/canal/canal-server容器安装：doc...
2019-12-05 19:22:33
232
原创 nginx的2种限流方式
nginx提供2种限流的方式：一是控制速率二是控制并发连接数控制速率控制速率的方式之一采用漏桶算法（1）漏桶算法实现控制速率限流漏桶算法的思路很简单，水(请求)先进入到漏桶里，漏桶以一定的速度出水（接口有响应速率）,当水流入速度过大会直接溢出(访问频率超过接口响应速率),然后就拒绝请求，可以看出漏桶算法能强行限制数据的传输速率，示意图如下：限流是解决雪崩的有效手段之一(2)n...
2019-12-05 14:43:30
1254
1
原创 解决“在连接linux远程服务器上的mysql数据库时，报“Access denied for user 'root'@'ip地址'”问题”
今天在用Navicat连接Linux数据库时报错：Access denied for user 'root'@'ip地址原因：没有设置权限解决办法：1.mysql -u -root -p 输入密码2.mysql>grant all privileges on . to ‘root’@’%’ identified by ‘root’ with grant option;3.my...
2019-12-02 10:07:27
494
原创 跨域问题
1.跨域：浏览器对于JavaScript的同源策略的限制一下情况都属于跨域：跨域原因说明实例域名不同www.jd.com与www.taobao.com域名相同，端口不同www.jd.com：8080与www.jd.com:8081二级域名不同item.jd.com与miaosha.jd.com协议不一样http与https如果域名和端口都相同...
2019-11-21 19:03:05
172
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人