自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

^_^

  • 博客(195)
  • 资源 (1)
  • 问答 (1)
  • 收藏
  • 关注

原创 uniapp 总结篇 (小程序)

做了很长时间的小程序了,在此做一个完整的项目总结,希望可以帮助到正在学习、开发的小伙伴。此篇文章并不涉及一些原理,更重要的是帮助大家实现功能、流程。uniapp还是很强大的可以开发小程序、h5、pc、app。...

2022-07-23 17:41:52 21023 8

原创 JavaScript深拷贝和浅拷贝 及 JSON.parse(JSON.stringify()) 的缺陷

一、理解拷贝拷贝就像我们平常cv一些文件、代码 复制了一份新的就叫拷贝。换成js代码就变成了基本数据类型和引用数据类型的拷贝。在JavaScript中我们定义的简单数据类型会存到栈(stack)内存中,包括引用类型的指针,而这个指针指向的地方是在堆(heap)内存中。也通常理解为,简单数据类型存在栈中,引用数据类型存在堆中二、基本数据类型拷贝基本数据类型没什么好说的,通过一个变量赋值给一个变量就已经拷贝完成了 let a = 1 let b = .

2021-08-08 22:37:17 4322 3

原创 vue3.0基本使用 详细说明!!!

一、vue3概述(1)为什么要学习vue3vue目前是前端框架中比较火热的,有了vue2为什么还要学习vue3呢,就像打游戏一样,为什么要升级呢,虽然公司大部分使用的还是vue2,还是有少部分公司使用vue3,提前了解使用vue3 也不是坏处(2)vue3的新变化1.性能提升,首次渲染更快,diff算法更快,内存占用更少,打包体积更小,2.更好的Typescript支持(在vue下写TS更方便了)3.提供新的写代码方式:Composition API (需要成本学习)(3

2021-07-14 00:31:52 28214 6

原创 JavaScript宏任务(macrotask)和 微任务(microtask) 执行顺序

一、JavaScript单线程JavaScript是单线程指的是同一时间只能干一件事情,只有前面的事情执行完,才能执行后面的事情。导致遇到耗时的任务时后面的代码无法执行。在此之前啊 我们必须了解同步和异步1. 同步任务(synchronous) console.log(123); console.log(456); for (let i = 1; i <= 5; i++) { console.log(i); }顾名思义 得到的一定是..

2021-06-14 23:03:44 11306 26

原创 vue2使用ts vue-class-component

目前,对于Vue3来说,TypeScript的支持已经相当成熟,但公司的老项目一直处于迭代和维护无法从v2重构成v3,并且重构的成本也是很大的一个问题,所以记录一下vue2如何去搭配TypeScript。二、vue-property-decoratorvue-property-decorator是一个 Vue.js 的装饰器库,它提供了一些装饰器来让你在 Vue 组件中定义属性、计算属性、方法、事件等。使用这些装饰器可以让 Vue 组件的代码更加清晰简洁,同时也提高了代码的可读性和可维护性。

2023-11-27 19:34:14 1470 2

原创 宝塔部署node后使用pm2管理上传文件路径失效问题

在本地或者以宝塔终端的形式允许 上传后是没问题的,直接默认对multer直接写入路径就可以了但是使用了pm2时 一般会在启动的文件当中作为图片的路径,这时候要修改路径例如我的路径是以www文件进行启动的,这时候上传后 只会在bin目录下创建一个public/avataruploads文件,这时候因为路径发生了改变图片也不会正常显示如果想要回到server/public下就需要导入path模块,以当前的路径开始 拼接好后面的路径

2023-09-23 10:47:17 340

原创 node和前端项目宝塔部署

首先需要一台服务器购买渠道:阿里云、腾讯云、百度云、华为云一、以阿里云为例 购买esc可临时购买测试服务器二、安装宝塔复制公网ip地址 通过Xshell 进行账号密码的连接​,把命令输入到 Xshell 或其他工具中 等待安装 安装后会出现 一个宝塔的地址和账号密码 可进行访问连接后访问宝塔官网 宝塔面板下载,免费全能的服务器运维软件找到自己购买时的系统进行安装​

2023-08-24 21:57:50 914

原创 nodejs登录生成token并验证

开发者向 API 提供商注册应用程序,并获得一个 API 令牌,以便在应用程序中进行身份验证和授权,以访问和使用 API 提供的功能和数据。身份验证:在身份验证过程中,用户提供凭据(如用户名和密码),服务器验证凭据的有效性后会颁发一个身份验证令牌给用户。这个令牌可以是一个长期有效的持久令牌,也可以是一个短期有效的临时令牌,用于后续的请求中证明用户的身份。它可以是一个字符串、数字或其他形式的数据。验证后会把数据返回出来,就可以当时生成token传过去的数据,有了数据那么我们就可以自行获取用户信息。

2023-08-09 16:13:04 2348

原创 MongoDB数据库操作及操作命令

一、基础概念Mongodb 是一个基于分布式文件存储的数据库,官方地址 https://www.mongodb.com/数据库的主要作用就是用来管理数据,能够达到增删改查的作用,语法也和JavaScript相似。在使用数据库之前要了解三个概念(1)数据库:是一个数据仓库,例如一个数据库下有很多个集合(也可以理解成多个表)(2)集合:表,在JavaScript的提现形式 可以理解为 数组[ { id:2 ,name:ultraman } ](3)文档:就可以理解成一条数据了

2023-08-08 20:28:53 1732

原创 node上传文件 + vue3 + elementPlus 组件封装

​一、node1.在node环境中安装multer(node.js中间件)包,用于处理multipart/for利用watch监听了数据的变化 拿到地址并不是带域名的(防止部署服务器时,图片丢失问题)所以更改后把配置后的域名给带上。upload.single('file') :中的file是前端传过来的file文件的键。public/avataruploads/ :上传后存放的路径地址。(node.js中间件)包,用于处理。2. 使用upload组件。

2023-08-07 11:21:55 403

原创 uniapp常用开发技巧

想打包成h5又想编译成小程序,想在h5中做一个公众号的分享,但是这些jssdk的参数在小程序又不需要获取,这时候就可以用条件编译 只在h5平台执行某段代码。这是一个很常见的场景,在页面的底部固定住按钮方便用户操作,在安卓中是正常显示的,因为ios底部有一个菜单的横线 就会遮住。,如果需要添加则需要单独进行代码配置,配置也很简单 只需要写一个对应的生命周期(和data同级)就可以。默认 不填写参数也可以使用分享功能,只不过都是按默认的参数执行的。在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。

2023-07-24 00:18:40 332

原创 cas单点登录 前端步骤流程

CAS(Central Authentication Service)是一个开源的单点登录协议和实现,它提供了一种统一的方法来管理和验证用户身份,使用户只需通过一次登录即可访问多个应用程序。1. 判断当前用户是否登录,如果没登录要跳转到登录服务器的ip上 并携带之前的地址 例如 192.168.1.110?以Vue为例,只需要在路由守卫中判断无token 跳转到登录页的流程替换掉跳转即可。3.用在url中的ticket去请求token,返回用户标识信息 完成单点登录。

2023-06-18 16:09:08 994

原创 Vue3 Hooks函数使用及封装思想

专业解释:Vue 3中的Hooks函数是一种用于在组件中共享可复用逻辑的方式。大白话:将单独功能的js代码抽离出来, 加工成公共函数,从而达到逻辑复用。对Vue社区调研,了解了许多使用Vue的开发者对于更好的组件逻辑组织方式的期望。对React Hooks和其他前端框架的解决方案进行了学习和借鉴。有了composition API 意味着我们就可以自定义封装hooks,最终的目的都是进行复用,在Vue2中复用的方式大部分都是采取的mixin,但相比hooks,hooks更清楚复用的功能来源及功能。

2023-06-17 21:15:31 7995 7

原创 微信开发者工具安装sass

1. 在vscode中安装Easy Sass插件2.在微信开发者工具中 找到扩展 ----- 从已解包的扩展文件夹安装。3.找到easy sass 插件进到settings 配置中。之后新建.scss文件就可以了,注意不要后缀写成.sass。

2023-05-23 08:33:02 416

原创 uniapp app 实现qq登录、微信登录

uniapp qq登录流程:uniapp 微信登录流程:这些都可以请运维同学帮我们申请,前端最主要的还是拿到qq、微信的appid之后就可以在 hbuilder中的manifest.json中配置 appid。

2023-05-15 20:00:00 1769

原创 Vite vue 使用cdn引入element-plus

使用cdn 引入 element-plus 一定也要用cdn 引入 vue、vue-demi 并且引入顺序不能出错,注意点① 如果不引入vue,就会提示createElementVnode找不到,原因是在element-plus这个源码中也在使用vue这个变量②如果不引入vue-demi,可以理解为vue和vue-demi 是互相引用的关系③注意使用vite-plugin-cdn-import插件 不能按需引入element、直接在main.ts中使用全局引入的方式,打包后会自动按照cdn引

2023-04-25 22:15:00 2668 2

原创 Vue3 Element-plus el-menu无限级菜单组件封装

对于element中提供给我们的el-menu组件最多可以实现三层嵌套,如果多一层数据只能自己通过变量去加一层,如果加了两层、三层这种往往是行不通的,所以只能进行封装

2023-04-14 19:34:19 3788 3

原创 为什么要推荐使用pnpm

pnpm代表什么?pnpm代表 performant(高性能的)npmpnpm的优点快速:pnpm 比其他包管理器快 2 倍高效:node_modules 中的文件为复制或链接自特定的内容寻址存储库支持 monorepos:pnpm 内置支持单仓多包严格:pnpm 默认创建了一个非平铺的 node_modules,因此代码无法访问任意包

2023-03-17 20:00:00 1363

原创 微信小程序项目转uniapp

使用 miniprogram-to-uniapp 工具进行转换,安装转换原生小程序 (可以先把node_modules先删掉 转换好后 在npm i 否则一些包会转换不成功,注意不支持vant运行完成后会在源目录上产生一个 项目_uni的项目例如转换完成后可能会出现一些语法上的变动导致报错。

2023-03-11 20:30:00 857 3

原创 vue微信浏览器安卓正常 ios config 报错 “errMsg“:“config:invalid问题

最近使用了wx-js-sdk,对接了一下微信环境下的功能,在使用wx.config中android 上可以config ok 的 但换到苹果上 报出invalid signature的错误。微信给的方法就是 使用hash /苦笑 ^_^ 微信也提到过不会存在这个问题,但是23年也遇见了 /苦笑 ^_^ 看了下github中的issue 提出问题在 2016年...2. ios访问只记录第一次的页面,跳转页面时页面不会改变(刷新及正常),android 正常。微信官网在之前版本也描述过。

2023-02-25 20:00:00 855

原创 js 解决 Array.fill()参数为对象指向同一个引用地址

最近写项目过程中总是想写出漂亮的代码,一行代码搞定绝不用两行,也是踩了fill这个坑。例如一个数组中想填充一些指定的数据。解决方案:使用map返回出不同的引用的地址注意:对象要用 小括号包裹 否则函数会以为是函数体,默认不写return 返回undefined。那么结果就会出现[1, 1, 1, 1, 1, 1, 1, 1, 1, 1] 十对应的1个。输出结果:[{a:1}, {a:1}, {a:1}, {a:1}, {a:1}]如果呢fill 这个方法接受的值是一个引用数据类型,那么他们会指向同一个地址。

2023-02-23 20:00:00 450

原创 前端表格导出excel文件(粘贴即用)

前端表格导出excel文件 1.下载file-saver 和script-loader 2.新建js文件 3.使用

2023-02-22 20:00:00 284

原创 微信小程序阻止页面返回(包滑动、自动返回键)

这个场景还是挺有意思的,比如某多多,只要你点左上角的返回 好家伙,满满又花不了的优惠券就来了,让你拥有一种消费最划算的感觉。如果你的场景比较简单,只是对左上角的返回进行监听,只需要关闭自带的导航栏,手写导航栏或用ui库的写好的导航栏就好了。然后给写好的导航栏的返回按钮添加一个返回的事件做自己想要实现的场景就好了。​如果你的场景比较复杂,手机都会有自带的滑动返回,例如ios的滑动返回,安卓的滑动返回和back返回键,就需要用到page-container,他的效果类似于弹窗的形式存在着。​

2023-02-20 20:45:48 9260

原创 webpack5 基础配置

在开发中,我们会使用 vue、react、less、scss等语法进行开发项目,但是浏览器只能识别 js、css,或者说在js中使用了es6中的import 导入 这时候也需要打包工具去转换成浏览器可以识别的语句。一、使用webpack1.初始化package.json npm init -y注意生成的package.json 中的name不要叫插件名称 否则下载不了。2.下载依赖npm i webpack webpack-cli -D

2023-02-16 20:00:00 1268

原创 vue2 diff算法及虚拟DOM

​概括:diff算法,虚拟DOM中采用的算法,把树形结构按照层级分解,只比较同级元素,不同层级的节点只有创建和删除操作。一、虚拟DOM(1) 什么是虚拟DOM?虚拟 DOM (Virtual DOM,简称 VDOM) 是一种编程概念,意为将目标所需的 UI 通过数据结构“虚拟”地表示出来,保存在内存中,然后将真实的 DOM 与之保持同步。这个概念是由React率先开拓,随后在许多不同的框架中都有不同的实现,当然也包括 Vue。虚拟DOM本质上就是用来描述真实DOM的JavaScript对象

2023-02-13 22:06:01 1215

原创 js中的Set和Map

首先,我们先要知道Set和Map是个什么数据类型。控制台打印。顾名思义,是一个构造函数,所以我们就可以使用new关键字来创建出Set和Map对象。​一、SetSet构造函数能让你创建Set对象,其可以存储任意类型的唯一值,无论是基本类型或者对象引用。const set1 = new Set([1, 2, 3, 4, 5]); //Set(5){1, 2, 3, 4, 5}​二、MapMap对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者基本类型)都可以作为一个键或一个值​

2023-02-07 20:00:00 2051

原创 vue中的render函数、h()函数、函数式组件

官网:用于编程式地创建组件虚拟 DOM 树的函数。在我们使用webpack脚手架创建项目时,都能在main.js中看到一个render函数对于render函数 es6中写成了箭头函数实际上createElement只是形参用h代表了,h()是的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是,但当你需要多次使用渲染函数时,一个简短的名字会更省力。

2023-02-06 21:10:05 6919 1

原创 vite+vue3+ts 项目初始化操作

create vue是vite +Vue项目的脚手架工具。必装:Vue Language Features (Volar) vue3语法支持TypeScript Vue Plugin (Volar) vue3项目ts支持Eslint 代码风格校验

2023-02-04 20:00:00 1497

原创 vue data为什么不是一个函数

按道理来说 组件之间的数据是不相互影响的 但是由于改成一个对象,他们的数据都指向同一个地址,所以多个组件之间用的都是同一个data,而使用data返回出一个对象,每次都是一个新的对象,所以不会产生影响。这时候vue就会告诉我们 :“data”选项应该是一个在组件定义中返回每个实例值的函数。为了找到原因 我们首先把data修改成一个对象。修改之后我们把这个组件当成子组件来看,我们通过父组件进行引用两次。在vue2中 data的定义形式 是通过一个函数返回出一个对象。也就是说我们必须写成一个函数返回的形式。

2023-02-03 20:00:00 173

原创 Promise.all、Promise.race、Promise.allSettled方法使用

在平常使用promise中最常用的就是.then和.catch 今天也来补充一下其他方法的使用。一、Promise.allPromise.all()参数可以传递一个数组,数组中记录所有的 promise 异步处理返回值是一个 Promise 的实例对象 then 方法可以获取到所有的 promise 异步处理的结果,一旦有某一个调用执行了 reject,则终止进入 catch因为代码中故意调用了两个错误地址 所以走入catch

2023-02-02 20:00:00 243

原创 js 判断一个对象是否是空对象

先来校验是不是一个对象 数组的数据类型也是对象 所以避开数组。1.Object.keysObject.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。2. Object.getOwnPropertyNames方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括 Symbol 值作为名称的属性)组成的数组。3.JSON.stringify()

2023-02-01 20:00:00 126

原创 vue2 数据响应式Object.defineProperty

我们通常可以对进行输入框进行数据的监听,只需要用到了input 事件或 change事件,就可以实时监听到数据的改变,但是如果只是一个单独的数据呢?怎么去做监听,watch吗??哈哈。所以 vue响应式就用到了中的 get 和 set 方法 ,如果对方法不了解可访问蓝色文字。简单来说 只要一访问就会触发get,设置就会触发set。基本语法:Object.defineProperty(对象,键,{})

2023-01-31 20:15:00 798

原创 v-if和v-for可以一起使用吗?哪个优先级比较高?有什么影响?

v-for和v-if是可以一起使用的,:当同时使用时,v-if比v-for优先级更高。我们并不推荐在一元素上同时使用这两个指令。在外新包装一层再在其上使用v-for可以解决这个问题 (这也更加明显易读):白话来说 先执行v-for 进行创建了多个dom元素,这时再去使用v-if 销毁了很多无用创建出来的的元素,非常浪费性能。总结:v-for和v-if可以同时使用,但不建议直接使用,如果想要使用有两种解决方案一、在判断条件中不对循环数据作为条件的时候可以加一层 templa

2023-01-30 20:00:00 3858 4

原创 JavaScript 发布订阅者模式和观察者模式及区别

发布订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到状态改变的通知。多方订阅,一方发布,订阅放会收到通知举例:教学楼中每个教室都有一个广播器,例如甲同学进入了A教室,甲同学可以理解为订阅,A教室有着A教室的订阅者,当校长只对A教室的广播进行播放时,只有A教室的所有学生可以受到广播信息。常见的发布订阅比如 Vue中js实现一个发布订阅我们发现每次进行订阅、通知都是在使用events中的 clientList, 并不会直接用$on 和 $emit 发生关系。

2023-01-29 20:00:00 832

原创 MVC和MVVM的区别

mvc:是一种代码架构设计模式,前端中的mvc最主要的作用就是将视图和数据模型进行分离。(1) 为什么需要 MVC?简单理解:也就是为什么需要将视图和数据模型进行分离通过上面代码我们会发现视图的操作和数据以及逻辑的处理全部混淆在一起了,当前代码量小,并不会发现太大的问题,但是项目大,代码量多的时候,对于代码的维护会相对复杂,分离后具有如下优势(2)如何设计MVC?mvc可以分为三个部分视图(View):用户界面。控制器(Controller):业务逻辑模型(Model):数据保存

2023-01-28 20:00:00 3330

原创 vite vue自动加载api(再也不用每个文件引入ref、reactive、vue-router)

可以解决 每次定义数据都需要引入响应式ref、reactive等其他api的烦恼 1.安装自动引入插件 2.vite.config.ts 配置自动引入插件 解决方法 可以去.eslintrc.cjs 文件中 把 no-undef关闭校验。如果 会报以下提示 她说告诉你 不知道ref是什么。这时候呢 就可以去使用 不再去引入ref。

2022-12-12 21:45:00 1278

原创 vue3 封装单选框组件

一、封装思想:在父组件定义数据 传入给子组件 并绑定 v-model 获取当前选中的值modelValue 可以接收到父组件 v-model 绑定的值父组件传递数据 并绑定v-model 拿到子组件选中的值

2022-12-08 20:14:08 899

原创 vue3发送验证码倒计时 (防止连点、封装复用)

在日常开发中可能 有很多场景都需要发送验证码 只是 接口一样 只是参数的type值不一样 例如 登录需要传login 注册需要传register 到时候只需要调用更换参数即可。(2)第二种方案. 让倒计时初始值为0 调用函数时在赋值为60 下次值大于0时同样不再执行,实现思路和第一种相似。当然 这只是没有做过优化的一个发送验证码,如果要考虑点击连续点击或者离开页面时销毁定时器 还要加一些功能。其中没有对手机号进行校验 若需要则自己可以写校验规则,也可以参考当前使用的其他组件库使用。

2022-11-30 20:05:46 4278 1

原创 vue axios封装及调用 (可复用)

主要对axios做了二次封装,添加了请求、响应拦截器,不用再去考虑是post请求的传参还是get请求的传参

2022-11-21 10:17:51 475

原创 Day.js 常用方法 以后再也不用new Date( )啦

文件大小只有2KB左右,下载、解析和执行的JavaScript更少,为代码留下更多的时间。而且更好的支持node、浏览器、小程序、ts 的各种环境。而且更好的支持node、浏览器、小程序、ts 的各种环境。我们利用手写的时间 去学习和研究一些其他的功能 岂不是乐乐而不为​本文列举了一些 工作中常用的方法作参考 你想了解更多可以去 Day.js官网

2022-11-18 17:52:58 2740

dev-tools-3.0.zip

作为vue框架官方调试工具,dev-tools提供了对于组件关系和数据状态方便的查看和调试功能,现在它也更新到了适配vue3的版本,项目使用最新的版本进行预览调试开发 1. 打开chrome -> 更多工具 -> 扩展程序 2. 把课程资源下的dev-tools中的shell-chrome拖入即可 注意:先把之前基于vue2的版本的禁止掉 当前的调试工具暂时不支持vuex的调试查看,需要我们额外进行log调试,vuex**内置**了一个logger模块,我们只需要引入并且注册为插件即可 + import { createLogger } from 'vuex' export default createStore({ modules: { user, cart, category }, plugins: [ + createLogger() ] }) 安装好这个log插件之后,我们每次触发action函数和mutation函数都可以在控制台打印出当前本地提交的记录详细信息,包括`名称` `参数` `修改前后的state数据` 调试工具调试的是什么 1. 为什么需要vuex, dev-tools工具呢? 因为需要时刻知道数据状态是如何变化的 2. dev-tools对于vuex调试的是什么或者说展示的是什么呢? state和mutation之间关系 :在哪个时刻调用了哪个mutation函数传递了什么参数把数据 从什么状态改成了什么状态

2021-07-30

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

TA关注的人

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