- 博客(74)
- 收藏
- 关注
RSS订阅原创 文件下载的几种方式
如果你的项目中已经使用了Axios，那么使用Axios进行文件下载可以保持代码的一致性。如果你的项目中使用了Axios进行HTTP请求，可以结合Blob对象来实现文件下载。：Axios提供了丰富的配置选项，可以轻松地处理不同的下载需求。：Axios的错误处理机制可以简化下载失败时的处理流程。：同样无法控制下载进度，也无法提供下载进度反馈。：无法控制下载进度，也无法提供下载进度反馈。：可以提供详细的下载进度反馈，提升用户体验。：需要依赖Axios库，增加了项目的依赖。的情况，比如从API获取文件流。
2024-12-04 11:16:06
501
原创 vue-router.js?v=f28405c9:44 [Vue Router warn]: Unexpected error when starting the router:
问题分析到这， 再去看后端返回的菜单数据，和本地的菜单数据比较，确实是后端数据有误，导致匹配不上。再分析一下代码，原来在这个地方出现无限循环。无限循环，导致浏览器窗口不停转圈圈，页面崩溃。后端返回的菜单和本地的菜单做匹配，没有匹配上，所以动态路由生成失败。首先：没有找到动态路由，所以，不停得生成动态路由。没有找到动态路由，分析动态路由逻辑。最后，改了后台接口数据，问题解决。那么，无限循环的原因又是什么？
2024-11-21 15:16:06
763
1
原创 浏览器中实现可视化的四种方式
前言：可视化的理解：可视化是将数据组织成易于为人所理解和认知的结构，然后用图形的方式呈现出来的理论、方法和技术。实现可视化的四种方式：1、html+css一些简单的图表，可以用html和css 实现。优点：简化开发，不需要额外引入相关的库，节省资源，提高网页打开的速度。缺点：1、html和css 主要为网页布局而创造，虽然能实现简单的可视化图表，但是绘制的方式并不是很简单。很难看出数据与图形的对应关系。一旦图表或者数据发生改动，需要开啊重新计算，维护起来很麻烦。2、html和css
2022-04-30 23:45:39
1560
原创 echarts 小技巧积累
1、极坐标系柱状图调整 图形的位置,可通过设置polar属性的center参数来设置option = { angleAxis: { max: 2, startAngle: 30, splitLine: { show: false } }, radiusAxis: { type: 'category', data: ['v', 'w', 'x', 'y', 'z'], z: 10 }, polar: { ce
2022-03-24 17:06:34
1415
原创 前端xss 漏洞
xss 漏洞简介：跨站脚本攻击（Cross-site scripting，XSS）是一种安全漏洞，攻击者可以利用这种漏洞在网站上注入恶意的客户端代码。当被攻击者登陆网站时就会自动运行这些恶意代码，从而，攻击者可以突破网站的访问权限，冒充受害者。产生xss攻击的场景：1、数据从一个不可靠的链接进入到一个web应用程序；2、没有过滤掉恶意代码的动态内容呗发送给web 用户。xss攻击可以分为3类，存储型（持久型）、反射型（非持久型）、DOM型。存储型XSS注入型脚本永久存储在目标服务器上
2022-03-15 18:11:00
5581
原创 js 的深拷贝与浅拷贝
1、前端基础知识，js 数据类型2、深拷贝与浅拷贝的区别深拷贝:主要是将另一个对象的属性值拷贝过来之后，另一个对象的属性值并不受到影响，因为此时它自己在堆中开辟了自己的内存区域，不受外界干扰。浅拷贝:主要拷贝的是对象的引用值，当改变对象的值，另一个对象的值也会发生变化。...
2022-03-11 18:32:38
1137
原创 angular自定义指令
1、什么是指令？官方文档的解释：指令是为 Angular 应用程序中的元素添加额外行为的类。使用 Angular 的内置指令，你可以管理表单、列表、样式以及要让用户看到的任何内容。2、指令的分类1）组件—— 带有模板的指令。这种指令类型是最常见的指令类型。2）属性型指令—— 更改元素、组件或其他指令的外观或行为的指令。3）结构型指令—— 通过添加和删除 DOM 元素来更改 DOM 布局的指令。内置属性指令：内置指令只会使用公开 API。它们不会访问任何无法被其它指令访问的私有 ...
2022-02-27 13:38:48
1435
1
原创 滚动条样式、input样式等常见控件默认样式调整
1、滚动条样式浏览器自带的滚动条样式有些丑，尤其是火狐浏览器，巨丑，覆盖方法如下：::-webkit-scrollbar-button, ::-webkit-scrollbar-corner {display: none}::-webkit-scrollbar {width: 4px;height: 4px;background-color: rgba(0,0,0,0.6);}::-webkit-scrollbar-thumb {border: 4px soli
2022-01-13 15:24:01
1425
原创 display:none； visibility:hidden； opacity:0 区别
display:none1、DOM结构：浏览器不会渲染display为none的元素，不占据空间；2、事件监听：无法进行DOM事件监听；3、性能：动态改变DOM结构，会引起重排，性能较差；4、继承：不会被子元素继承，因为子元素不会被渲染；5、transition:不支持display。visibility:hidden1、DOM结构：元素被隐藏，还存在文档流中，占据一定的空间；2、事件监听：无法进行DOM事件监听3、性能：动态改变此属性会引起重绘，性能友好；4、继承：
2022-01-11 22:27:18
1181
原创 北漂四年，奔三前端打工人的2021年终总结
时间扑面而来，我们终将释怀，一路走来，岁月带走了纯真，时光苍老了容颜，阅历成熟了心智，沉淀下来的是一份淡泊的心境
2022-01-05 12:13:41
3252
原创 总结一些常用的工具函数
1、输入一个值，返回其数据类型function type(para) { return Object.prototype.toString.call(para)}2、数组去重(1) 简单类型function unique1(arr){ // [1,2,3,3,4] return [...new Set(arr)]}function unique3(arr) { var result = []; arr.forEach(ele => {
2021-12-14 10:36:42
988
原创 angular踩坑——数据发生改变，视图未更新
大多数情况下，页面的视图会随着数据的改变而改变，少数情况下，数据变了，而视图不更新。左侧的视图，右侧数据，数据改变时，视图未更新。。。。具体原因呢，可能是angular 脏检查没有检测到数据更新吧。。。解决方案：引入 ChangeDetectorRef,使视图强刷。1、import { Component, OnInit, Input, ChangeDetectorRef} from '@angular/core';2、3、...
2021-11-21 17:20:07
5753
3
原创 css伪类伪元素小结
区分伪元素在CSS3之前就已经存在，只是没有伪元素的说法，都是归纳为伪类，所有很多人分不清楚伪类和伪元素。比如常用的:before和:after，它们是伪类还是伪元素？其实在CSS3之前被称为伪类，直到CSS3才正式区分出来叫伪元素那如何区分伪元素和伪类，记住两点：1. 伪类表示被选择元素的某种状态，例如:hover2. 伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是"假元素"，只存在于css中，所以叫"伪"的元素，例如:before和:after核心区别在于
2021-11-06 23:10:51
262
原创 总结几种关于跨域的解决方案
1、跨域是什么？跨域问题其实就是浏览器的同源策略所导致的。所谓同源策略，只有当protocol（协议）、domain（域名）、port（端口）三者一致，才是同源。2、解决方案；1）
2021-11-03 00:17:40
242
原创 echarts 小技巧——绘制进度条
这里写自定义目录标题一、饼状图绘制进度条新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入一、饼状图绘制进度条思路：两个主要参数：1、当前进度 2、总进度在这里插入代码片新的改变我们对Markdown编辑器进行了
2021-09-14 13:24:28
4624
原创 使用多个icon 字体图标库样式冲突问题
场景：项目中使用的UI样式库中包含一套icon 字体图标库，自定义一套字体图标库，在应用的时候，出现冲突，导致一方字体图标库无法显示或者显示不正常，原因：字体命名冲突，样式命名冲突，导致字体图标显示不出来。解决方案：修改其中一个文件的命名：由于两个地方的iconfont.css文件中的字体命名都是"iconfont"，而且样式命名也是相同的，导致问题的出现。解决办法：既然明确了问题的原因，只要修改其中一个文件的命名就好了，如下图。...
2021-08-15 08:30:27
1795
原创 实战中icon 的使用
系统中的小图标，设计提供的格式大多数是png 格式。存在如下缺点：比如一个编辑按钮，它有一般场景，鼠标hover 、禁用得几种状态，如果是png 格式的，同一个图标就得好几个。如果实现主题变更，有得需要好几个。。。缺点一堆，简言之，就是它的可编辑性太差，多个png 还会导致前端包太大。这么多缺点，icon 可以完美解决解决方案：1、设计师提供图标的时候，要求提供svg 格式https://icomoon.io/app/#/select这个地址，可以将svg 格式的小图标转为icon
2021-08-14 23:37:49
382
原创 angular7中使用jsonViewer
场景：后端返回的数据是一个json串，要求页面上的展示结果，跟咱们平时在json 在线解析时候看到的格式是一样的。解决方案：angular 中使用jsonviewer 插件步骤：1、下载json viewer插件，https://www.npmjs.com/package/@gofynd/angular-json-viewer2、angular 模块中引入import { NgxJsonViewerModule } from ‘ngx-json-viewer’;2、页面中引用<ngx
2021-07-31 23:24:07
956
原创 angular工程中导入外部js
实战中，需要在angular 工程中导入外部js文件。常用的有两种导入方式。方式一：全局导入：1、先把下载好的js 文件放入指定位置2、然后在Angular.json中引入相关js文件3、在所需的组件里单独引入方式二：利用Script.js 进行局部引用1、先把下载好的js 文件放入指定位置2、在所需的组件里单独引入...
2021-07-30 22:04:51
3166
原创 angular中的input防抖使用
一周复盘。学而时习之。。。复习一下节流与防抖，关于二者的概念，网上各种说辞。防抖：在高频触发回调函数时，防抖操作使回调函数在一定时间间隔内，再次触发会清空定时器，并重新计时；计时结束后输出一次结果。核心在于，在短时间内大量触发同一事件时，只会执行一次回调函数。避免把一次事件误认为多次。场景：在表单校验的时候，不加防抖，依次输入name，就会分成n，na，nam,name四次发出请求；而添加防抖，设置好时间，可以实现完整输入name才发出校验请求节流：在高频触发回调函数时，节流操作使回调函数在每隔一
2021-03-20 23:09:32
1711
1
原创 如何利用cookie获取当前用户
使用场景：用户登录后台管理系统之后，后台管理系统不知道用户的信息。某些业务需求，比如要获取用户信息，做响应的权限管理等等。如果是vue 工程，后台做一个接口，返回数据就是当前用户的一些信息，前端把这些数据存在vuex里面。随用随取，超级方便。。。但是如果后台没有这样一个接口，也不是vue 工程，此时，cookie 是一个渠道。打开控制台，找到任意一个请求，点击cookie,可以看到类似下面的一个表格，name,vue 等等，可以获取很多信息。如果想获取用户信息。思路：先取到所有的cookie值.
2021-03-16 08:34:54
2637
原创 前端set、map浅析
最近复习了一下es6,总结一下，set、map、weakSet、weakMapset 是类数组，里面的成员是唯一的weakSet类似set ,成员只能是对象，且没有遍历操作，不引用后会被自动回收。map 类似对象，key 值不限于字符串，成员值唯一。weakmap 类似Map,但只接收对象为键名（null 除外），没有遍历操作，不引用后会被自动回收。SetSet 类似数组，成员值都是唯一的创建var set = new Set();set.add('a', 'b');set.size
2021-02-28 23:13:28
1016
原创 前端常用小工具总结
1、验证邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2、 验证手机号export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}3、验证座机export const isPhone = (s) => {
2021-02-21 16:22:57
208
原创 drag使用总结
1、html5基础用法：设置属性：draggable=true，属性规定元素是否可拖动。<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br /><p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>2、angular 项目
2021-01-08 09:25:30
1245
原创 angular开发踩坑之路之组件之间数据通信
有些问题虽然很常见，很基础，好记性不如烂笔头～～～1、angular 数据之间的通信常见的通讯关系图如下：（1）父组件到子组件：方法一：在父组件上设置子组件的属性，子通过@Input() 接收父组件绑定信息：<app-child [childTitle]="可设置子组件标题"></app-child>子组件接收消息import { Component, OnInit, Input } from '@angular/core';@Input() childTitl
2020-10-14 09:55:09
194
原创 angular7项目运行时报错Data path “.builders[‘app-shell‘]“should have required property ‘class‘‘
自己手动搭建了一个基于angualr7的项目，执行ng s命令时，控制台出现如下错误信息：goole 了一下，查到原来是@ angular-devkit与@ angular / cli版本不兼容，因此，例如，只需安装较旧的版本即可：npm install @angular-devkit/[email protected] @angular-devkit/[email protected]...
2020-09-05 08:15:04
1203
原创 js获取用户选中文本内容
需求：获取用户选择的文本的内容 <p> 选择一段文字，点击按钮按钮 </p> <button id="button">点我啊</button> <script> var oBtn = document.getElementById("button"); oBtn.onclick = function () { var userSelection, text; if (window.get
2020-08-21 18:22:20
1786
原创 angular项目打包时控制台出现JavaScript heap out of memory
angular项目在执行npm run build的时候，控制台报如下错误：出现这种错误的原因：JavaScript heap out of memory字面意思就是JavaScript堆内存不足，这里说的javascript 其实就是Node,而Node是基于V8引擎，在一般的后端开发语言中，在基本的内存使用上没有什么限制。阅读相关资料得知，在Node中，在Node中通过JavaScript使用内存只能使用部分内存（64为系统 下约为1.4GB，32位系统下约为0.7GB），这就是编译项目的时候出现
2020-08-16 08:37:07
1136
原创 mac系统node安装指定版本
1.打开终端，输入 node-v,查看当前版本2.输入命令：npm install -g n3.再输入需要的版本号，命令n v10.16.0OK，安装完毕，输入node -v 查看版本号
2020-08-05 09:11:08
4409
原创 js数组使用小结
在日常的开发中，涉及到很多跟数组相关的操作，总结一下1、数组的基本概念数组是一组数据的集合，其表现形式就是内存中的一段连续的内存地址，数组名称就是连续内存地址的首地址。2.创建一个数组 // 字面量方式:这个方法也是我们最常用的， let a = [1，2，3] // [1，2，3]; // 构造器: // 实际上 new Array === Array,加不加new 一点影响都没有。 let a = Array(); // [] let a
2020-07-27 10:33:41
257
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人