自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

余浩的博客

are you ok ?

  • 博客(85)
  • 资源 (2)
  • 收藏
  • 关注

原创 【JS】前端常见加密算法MD5、AES、RSA介绍,Vue3中使用jsencrypt使用rsa加密示例

哈希散列算法、对称加密算法和非对称加密算法。vue3中使用

2022-09-30 15:48:09 249

原创 【Vue3】 vite获取.env文件中配置的环境变量

// 根据当前工作目录中的 `mode` 加载 .env 文件// 第二个参数:process.cwd()表示返回运行当前脚本的工作目录的路径(current work directory)// 设置第三个参数为 '' 来加载所有环境变量,而不管是否有 `VITE_` 前缀。const env = loadEnv(mode.mode, process.cwd(), '');

2022-09-19 11:07:04 81

原创 【JS】js正则匹配字符串是否为指定的某几个字符结尾

在做省市区级联选择的时候遇到,有的情况需要点击非最底层但是又要求可以选中,就需要 前端来增加判断。这里可以使用正则来判断label的值是否以某个字符结尾

2022-09-16 14:21:30 114

原创 【vue】vue3中状态管理Pinia(Vuex5)使用快速上手

Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了名字Pinia。关于vuex的介绍可以查看我之前的文章。

2022-09-14 11:41:54 194

原创 【Vue3】vue3中组合式Api的setup写法快速入门上手起步

使用setup语法糖和setup函数对比,使用语法糖的代码整洁了好多,不会有那么多的对象嵌套。也不用做什么额外的return,代码也简化了不少。

2022-08-15 16:42:25 182

原创 【JS】javascript判断数据类型的四种方法:Object.prototype.toString.call()、typeof、instanceof、constructor

1. 使用Object.prototype.toString.call() ---推荐方法2. 使用typeof3. 使用instanceof4. 使用constructor

2022-07-30 15:35:35 214

原创 【JS】js给对象动态添加、设置、删除属性名和属性值

但是当我们遇到需要给对象动态添加属性和属性值时,点获取法好像就不方便了,尤其是我们不知道属性名的时候更麻烦。简短的回答是“有特别的顺序”整数属性会被进行排序,其他属性则按照创建的顺序显示。计算属性的含义很简单[fruit]含义是属性名应该从fruit变量中获取。注意如果我们遍历一个对象,我们获取属性的顺序是和属性添加时的顺序相同吗?当创建一个对象时,我们可以在对象字面量中使用方括号。js中访问对象属性一共有两种方法点获取法和方括号获取法。最常用的对象属性获取方法是点获取法。...

2022-07-30 14:51:39 3024

原创 【Node.js】使用 nvm 管理不同版本的 node 与 npm(nvm-windows的安装与使用)

nvm:nodejs 版本管理工具,也就是说:一个 nvm 可以管理很多 node 版本和 npm 版本。也可以额外配置全局npm与cnpm。

2022-07-23 22:46:09 272

原创 【Node】服务端口被占用Error: listen EADDRINUSE: address already in use :::9000-如何关闭node启动的端口

记录一次node项目启动时遇到的问题koa2启动项目后,使用ctrl+c中止代码运行,但是再次运行时发信啊端口被占用。解决的思路就是把9000端口运行的程序给杀死。再次运行程序就不会显示端口占用了。如果说必须要强制终止执行,添加。,此处pid为11588。...

2022-07-23 21:03:47 154

原创 【Angular】在angular2的app.component.html中使用 *ngIf 更改路由出口router-outlet

如果使用*ngIf有条件地禁用和启用router-outlet。当一个router-outlet会被注册,无论你做什么,下一个router-outlet都不会响应router的变化。此时应该使用具名的路由出口,或者只使用一个路由出口。

2022-07-01 09:50:15 33

原创 前端token知识梳理:token如何存储?token过期如何处理?如何无感刷新token?

弄两个token,一个负责鉴权得token:access_token,一个负责刷新得token:refresh_token,每次请求的时候都带上这两个token,后端拦截器判断,先判断鉴权access_token是否有效和过期,如果有效的话,就允许访问。如果过期了,就判断刷新refresh_token是否有效,如果有效,就返回指定状态码,然后让前端根据这个状态码去吊用刷新token接口。如果刷新token失效了,就提示需要重新登录!...

2022-06-28 16:21:04 2550 2

原创 【axios】封装axios

Axios是一个基于 promise的 HTTP`库,可以用在浏览器和node.js中。(本文围绕XHR)axios提供两个http请求适配器,XHR和HTTP。XHR的核心是浏览器端的XMLHttpRequest对象;HTTP的核心是node的http.request方法。

2022-06-27 16:12:15 223

原创 【CSS】css的background属性用法详解,background常用缩写形式

//指定背景颜色 //设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景;//设置背景图像的位置//设置背景图像的大小 //指定背景图像的铺排方式//设置背景图像显示的原点[background-position相对定位的原点];//设置背景图像向外剪裁的区域;//指定背景图像是滚动还是固定; 默认滚动;...

2022-06-24 16:50:59 1474

原创 vue/js操作dom全屏切换,全屏打开dom.requestFullscreen();

if (dom.requestFullscreen) { dom.requestFullscreen(); } else if (dom.webkitRequestFullScreen) { dom.webkitRequestFullScreen(); } else if (dom.mozRequestFullScreen) { dom.mozRequestFullScreen(); } else { dom

2022-06-23 16:16:11 127

原创 【Angular】angular去除输入的空格,Angular自定义属性指令-禁止input框输入空格-以及删除复制内容中的空格(附有其他解决办法)

禁止输入空格,即当用户按下空格键时便阻止输入,但是如果只是这样,那么用户仍然可能使用粘贴的方式输入空格,所以这里同时在keyup事件中将所有空格替换了。

2022-06-23 16:09:02 215

原创 字符串时间排序,对时间格式字符串进行排序

字符串时间排序,对时间格式字符串进行排序

2022-06-10 15:37:53 111

原创 canvas绘画折线段

canvas绘画折线段,canvas快速简单划线画线

2022-06-08 15:50:46 27

原创 【CSS】网页如何快速适应大屏显示,快速自适应,旧版网站改造

使用CSS与结合,放大整个屏幕@media:不同分辨率修改样式zoom属性设置或检索对象的缩放比例,通俗的理解我们在body标签添加一个class标签,在使用媒体查询的方式去修改zoom的值,这样就达到了不同分辨率下不用再去针对性的修改样式其他兼容问题给zoom样式加了个判断浏览器,是谷歌就生效,不是就不生效.然后也给火狐适配了一下.将中间的框用个div包起来 然后将中间使用transform:scale()进行缩小,缩小到原来的0.8,然后左右距离边边各10%.代码如下:另外的自适应htt

2022-06-02 09:27:13 149

原创 【TS】在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型

一、什么是接口在 TypeScript 中,我们使用接口Interfaces来定义对象的类型。可以用来约束一个对象,函数,以及类的结构和类型。在面向对象语言中,接口Interfaces是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类classes去实现implement。TypeScript 中的接口是一个非常灵活的概念除了可用于对类的一部分行为进行抽象以外,也常用于对对象的形状(Shape)进行描述。二、定义接口2.1 默认定义接口一般首字母大写interface Pe

2022-05-27 16:08:31 649

原创 【Vue】Vue中的管道、过滤器的使用(Vue中filter函数)

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化(将数据转化为我们想要的格式)。过滤器可以用在两个地方:双花括号插值v-bind 表达式 (从 2.1.0+ 开始支持)过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号|指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId">&

2022-05-27 15:28:45 1449

原创 【Vue】Vue中获取当前点击元素的父元素、子元素、兄弟元素。如何隐藏指定元素的父级元素?

Vue如何获取当前点击元素?获取父元素、子元素、兄弟元素呢?如何隐藏指定元素的父级元素?通过绑定点击事件:例如:<button class="delete-btn" @click="delete($event, roomItem)">删除</button>/** * @description: 删除指定的房间 */ delete(event:any, roomItem:any) { let currentTarget = event.currentTarge

2022-05-23 17:11:36 826

原创 【uni-app】uni-app快速入门(含源码)

uni-APP 快速入门前言介绍一、背景二、基础UniAPP 快速入门学习一、UniAPP 介绍(1)什么是 UniAPP ?(2)为什么要选择 UniAPP ?(3)UniAPP 功能框架(4)UniAPP 开发环境搭建二、UniAPP 初始化相关配置(1)工程目录结构(2)应用配置 manifest.json(3)编译配置 vue.config.js(4)全局配置 page.json(5)全局样式 uni.scss(6)主组件 App.vue(7)入口文件 main.js(8)UniAPP 开发规范及资

2022-05-21 13:47:03 1174 2

原创 【JS】正则表达式:提取字符串中第一个由小括号包裹的数字

【JS】正则表达式:提取字符串中第一个由小括号包裹的数字/** * @description: 提取字符串中第一个由小括号包裹的数字 * @param str 传入带括号的字符串 */ regStrToNum(str:string){ let result = str.match(/\((.+)\)/g); if (result){ let num = +result[0].slice(1, result[0].length-1); ret

2022-05-18 16:40:28 278

原创 【Vue】vue2.6插槽slot使用详解(更新v-slot用法总结)

vue2.6插槽slot使用详解(更新v-slot用法总结)0、 插槽简介1、匿名插槽(默认插槽default)2、具名插槽(name)2.1 对 v-slot:todo 做操作:3、作用域插槽3.2 解构插槽Prop3.3 独占默认插槽(当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用)总结todo-list实例在 2.6.0 中,具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot指令)。它取代了slot和 slot-scope这两个目前已被废弃但未被移除且仍在文档

2022-05-16 17:03:41 787

原创 【JS】归纳总结现代javascript对象的引用和复制(浅拷贝与深拷贝)

在 JavaScript 中有 8 种基本的数据类型(注:7 种基本数据类型也称为原始类型 和 1 种引用类型)1. `number` 用于任何类型的数字:整数或浮点数,在 `±(2^53-1)` 范围内的整数。2. `bigint` 用于任意长度的整数。3. `string` 用于字符串:一个字符串可以包含 0 个或多个字符,所以没有单独的单字符类型。4. `boolean` 用于 `true` 和 `false`。5. `null` 用于未知的值 —— 只有一个 `null` 值的独立类型。

2022-05-14 17:56:23 309 1

原创 【JS】记录几个常用的javascript小技巧

1. 有时可以使用数组替换switch2. 或运算寻找第一个真值3. 与运算寻找第一个假值4. 两个非运算 !! 将某个值转化为布尔类型5. 空值合并运算符 '??'

2022-05-13 10:48:29 146

原创 【CSS】css 获取从第n个元素开始,之后的所有元素 :nth-of-type(n)与:nth-child(n)

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素html代码:<div id="box"> <div>111</div> <div>222</div> <div>333</div> <div>444</div></div>css代码:获取box中,除了第一个之外的其他的div#box div:nth-o

2022-05-03 10:54:41 1933

原创 【Vue】前端状态管理之Vuex全解析

Vuex状态管理全解析:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

2022-04-19 21:43:28 502 1

原创 【CSS】css快速更改某个字体图标,使用content插入字符

遇到一个小问题:使用的是组件库,但是这个组件没有提供更改图标的接口,需要更改这个特定的图标,但是最好不更改dom解决办法由于系统已经使用了这个组件库,那么就有了他的图标内容,可以先到组件库官网找到需要更改的图标,在官网界面打开控制台,获取需要的图标字符获取图标字符之后,可以使用相同的方式替换伪元素。可以看到我把下面向下的图标名的内容换成了向上的箭头。 ::ng-deep .ui-panelmenu-icon.pi-chevron-down::before { content: "\e.

2022-04-01 09:26:21 453

原创 【Vue】vue中的静态资源处理---vue项目中路径使用的@和~的区别

vue中的静态资源处理:vue项目中路径使用的@和~的区别?在我们的项目结构里,有两个静态文件的路径,分别是:`src/assets` 和 `static/`。那这两个到底有什么区别呢?

2022-03-24 09:48:37 1644 1

原创 proxy代理-如何配置 vue.config.js 解决跨域(生产中)?

proxy代理的原理是什么proxy代理-如何配置 vue.config.js 解决跨域(生产中)?

2022-03-19 17:41:34 3531

原创 前端页面自适应大小,动态rem

由于rem是相对页面根元素`html`的大小,所以可以通过`动态改变根元素的大小`来全局改变页面元素的大小,从而达到自适应不同分辨屏幕的效果。动态改变根元素的代码如下:

2022-03-19 17:00:19 619

原创 【ES6】es6箭头函数的this指向

对于普通函数来说,内部的`this`指向函数运行时所在的对象,但是这一点对箭头函数不成立。箭头函数没有自己的`this`对象,内部的`this`就是定义时上层作用域中的`this`。也就是说,箭头函数内部的`this`指向是固定的,相比之下,普通函数的this指向是可变的。**总之,箭头函数根本没有自己的`this`,导致内部的`this`就是它所在的外层父级函数代码块的`this`。正是因为它没有`this`,所以也就不能用作构造函数。**

2022-03-19 16:42:41 524

原创 Openlayers 快速上手教程

通过上面例子可以看出 Openlayers 使用很简单,首先定义一个 Map,这是 Openlayers 的核心,它是一个容器,所有动作、设置等都在 Map 中展开。下面对上面 demo所简要说明:1. 将 Map 容器与 HTML 元素(这里是 DIV 元素 `map-id`)做绑定,Map 提供有 `target` 属性来绑定;2. 将图层 Layer 添加到 Map 中,这里是一个瓦面图层 `ol.layer.Tile`;3. 图层是一个包装盒,需要给图层添加具体的数据源:`new ol.s

2022-03-12 14:26:44 11363 2

原创 【vscode】vscode下载速度慢,国内下载vscode速度慢问题解决

vscode下载速度慢,国内下载vscode速度慢问题解决。

2022-03-08 09:24:34 183

原创 【优化】前端性能优化---计算首屏加载时间和首屏加载速度慢怎么解决?

SPA单页面应用:计算首屏加载时间和首屏加载速度慢怎么解决? 首屏加载时间,指的是浏览器从相应用户输入网址,到首屏内容渲染完成的时间,此时整个网页不一定全部渲染完成,但需要展示当前视窗需要的内容。 计算首屏加载时间公式: times = (performance.timing.domComplete - performance.timing.navigationStart) / 1000

2022-03-06 16:28:34 1155

原创 【Vue】vue2.6使用TS之vue-class-component与vue-property-decorator使用详解

(1)vue-class-component 是官方出品; vue-property-decorator 是社区出品;(2)vue-class-component 提供了Vue、Component等;(3)vue-property-decorator深度依赖了vue-class-component,拓展出了更多操作符:@Prop、@Emit、@Inject、@Model、@Provide、@Watch;

2022-03-06 15:11:05 1612 4

原创 【前端】常见英文缩写汇总、解析(持续更新...)

常见英文缩写汇总(持续更新...)1. Aasync3. CcamelCaseCLI8. HHMR11. K14. Nnpm16. PpropsProxy19.SSFCSPASSOT20. Rrefs21. S22. Ttsc23. WWDS1. Aasyncasync表示asynchronous异步的3. CcamelCasecamelCase骆驼拼写法,“骆驼拼写法”又分为两种:第一个词的首字母小写,后面每个词的首字母大写,叫做“小骆驼拼写法”(lowerCamelCase);第一个词的首字

2022-03-03 15:28:19 159

原创 【ES6】es6数组中对象去重,数组对象去重方法总结---filter()与reduce()实践

es6数组中对象去重,数组对象去重方法总结---filter()与reduce()实践。利用reduce()方法的累积器作用,在对由对象组成的数组进行遍历时,通过对象```hasObj```来标记数组中每个元素id是否出现过。如果出现过,那么遍历到的当前元素则不会放入到累积器中,如果没有出现,则添加到累积器中,这样保证了最后返回值中每个数据id的唯一性。

2022-03-02 22:04:49 6218 2

原创 【ES6】es6常用小技巧汇总 (持续更新中...)

es6常用小技巧汇总 (持续更新中...)

2022-02-27 11:19:27 838

Coderwhy新Vue3与Typescript课程资源_ppt_文档_源码

2021=2022年,Coderwhy新Vue3与Typescript课程资源_ppt_文档_源码

2021-12-30

rubyinstaller-devkit-2.7.3-1-x64.exe

ruby最新稳定版安装包。可提供sass环境。

2021-05-15

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除