- 博客(202)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 uniapp 总结篇 （小程序）
做了很长时间的小程序了，在此做一个完整的项目总结，希望可以帮助到正在学习、开发的小伙伴。此篇文章并不涉及一些原理，更重要的是帮助大家实现功能、流程。uniapp还是很强大的可以开发小程序、h5、pc、app。...
2022-07-23 17:41:52
24128
8
原创 JavaScript深拷贝和浅拷贝 及 JSON.parse(JSON.stringify()) 的缺陷
一、理解拷贝拷贝就像我们平常cv一些文件、代码 复制了一份新的就叫拷贝。换成js代码就变成了基本数据类型和引用数据类型的拷贝。在JavaScript中我们定义的简单数据类型会存到栈(stack)内存中，包括引用类型的指针，而这个指针指向的地方是在堆(heap)内存中。也通常理解为，简单数据类型存在栈中，引用数据类型存在堆中二、基本数据类型拷贝基本数据类型没什么好说的，通过一个变量赋值给一个变量就已经拷贝完成了 let a = 1 let b = .
2021-08-08 22:37:17
4918
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
36190
7
原创 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
12082
26
原创 让css设置的更具有合理性
平常写css时，除了遵循一些 顺序、简化、命名上的规范，让css具有合理性也是重要的一环。最近的需求场景：国际化翻译，从中文转换英文的转换结果，大部分的长度也会增加1.5～3倍，复杂的单词可能会增加的更多，也就导致了出现换行、文字覆盖/溢出的场景。
2025-01-01 20:47:13
1106
原创 抛开echarts手动实现迷你趋势图
在表格尾列增加趋势信息, 使用echarts的成本虽然很低很轻松的可以实现，由于表格中会有很多条数据，可能会造成卡顿是划不来的， 并且仅仅一条线而。一、简版趋势图 代码解释：通过一组数据加工成 坐标点, x的间距为10, y为当前每个数据
2024-10-24 19:30:00
846
原创 代码的坏味道——滥用控制语句
很多场景都需要循环去加工或处理一些数据，使用循环是必不可免的，使用es6可以减少结构的嵌套，并且支持链式调用。else会增加块级区域，虽然一时影响不大，但未必后续添加嵌套逻辑。可以使用卫语句取代。过多的switch会出现大量重复的结构，可以采用对象映射、函数映射、策略模式等。不管是if、for、switch、回调等，都应该避免出现多级嵌套。
2024-07-14 20:23:54
340
原创 代码的坏味道——长参数
如果参数很多，那么第一就要考虑，这些参数是否存在关联？若存在是否可以归为一组？静态的变量尽量直接使用，避免产生多余的参数。避免父传子的参数过多。
2024-07-07 14:25:23
345
原创 代码的坏味道——长函数
每个语言的设计不太一样，每个人对长函数的理解也不同，所以说没有一个规范的限制，可以给自己设定一个限制，前端应尽量保持一个函数。遇到简单的if的语句时应当换成三元表达式，遇到if|else逻辑相似时应该抽离。不要把多个逻辑的事情写到一个函数中，每个函数只做一件事情。当遇到新的需求迭代，避免不了影响之前的函数内的逻辑处理。
2024-07-07 12:10:05
406
原创 代码的坏味道——重复代码
前言：遇到类似的功能，更好的做法是封装。重复代码：一般情况下，遇见重复的功能、逻辑，采用复制代码、粘贴这也是最简单的方式了，但这就是坏味道的开始。而存在的问题原因就是copy了多次，容易遗漏出未修改的地方，每次迭代还会增加繁琐性。
2024-06-30 01:30:11
282
原创 代码的坏味道——精准命名
前言：写好高质量的代码就应该从小事做起。一个好的变量名更应该从语义知道这个变量是在干什么事情。命名：这是我们定义变量、方法必不可少做的一件事情，可是你真的去用行动对每一个变量做到精准命名了吗？嗯没错，确实没有，如果想把这个事情做好，其实是非常耗时间和经历的。但是如果前期去用心定义一个变量，是比你之后（重构/迭代）代码省很多的时间。
2024-06-29 15:13:56
346
原创 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
2702
2
原创 宝塔部署node后使用pm2管理上传文件路径失效问题
在本地或者以宝塔终端的形式允许 上传后是没问题的，直接默认对multer直接写入路径就可以了但是使用了pm2时 一般会在启动的文件当中作为图片的路径，这时候要修改路径例如我的路径是以www文件进行启动的，这时候上传后 只会在bin目录下创建一个public/avataruploads文件，这时候因为路径发生了改变图片也不会正常显示如果想要回到server/public下就需要导入path模块，以当前的路径开始 拼接好后面的路径
2023-09-23 10:47:17
430
原创 node和前端项目宝塔部署
首先需要一台服务器购买渠道：阿里云、腾讯云、百度云、华为云一、以阿里云为例 购买esc可临时购买测试服务器二、安装宝塔复制公网ip地址 通过Xshell 进行账号密码的连接，把命令输入到 Xshell 或其他工具中 等待安装 安装后会出现 一个宝塔的地址和账号密码 可进行访问连接后访问宝塔官网 宝塔面板下载，免费全能的服务器运维软件找到自己购买时的系统进行安装
2023-08-24 21:57:50
1282
原创 nodejs登录生成token并验证
开发者向 API 提供商注册应用程序，并获得一个 API 令牌，以便在应用程序中进行身份验证和授权，以访问和使用 API 提供的功能和数据。身份验证：在身份验证过程中，用户提供凭据（如用户名和密码），服务器验证凭据的有效性后会颁发一个身份验证令牌给用户。这个令牌可以是一个长期有效的持久令牌，也可以是一个短期有效的临时令牌，用于后续的请求中证明用户的身份。它可以是一个字符串、数字或其他形式的数据。验证后会把数据返回出来，就可以当时生成token传过去的数据，有了数据那么我们就可以自行获取用户信息。
2023-08-09 16:13:04
3590
原创 MongoDB数据库操作及操作命令
一、基础概念Mongodb 是一个基于分布式文件存储的数据库，官方地址 https://www.mongodb.com/数据库的主要作用就是用来管理数据，能够达到增删改查的作用，语法也和JavaScript相似。在使用数据库之前要了解三个概念（1）数据库：是一个数据仓库,例如一个数据库下有很多个集合（也可以理解成多个表）（2）集合：表，在JavaScript的提现形式 可以理解为 数组[ { id:2 ，name:ultraman } ]（3）文档：就可以理解成一条数据了
2023-08-08 20:28:53
2033
原创 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
547
原创 uniapp常用开发技巧
想打包成h5又想编译成小程序，想在h5中做一个公众号的分享，但是这些jssdk的参数在小程序又不需要获取，这时候就可以用条件编译 只在h5平台执行某段代码。这是一个很常见的场景，在页面的底部固定住按钮方便用户操作，在安卓中是正常显示的，因为ios底部有一个菜单的横线 就会遮住。，如果需要添加则需要单独进行代码配置，配置也很简单 只需要写一个对应的生命周期（和data同级）就可以。默认 不填写参数也可以使用分享功能，只不过都是按默认的参数执行的。在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
2023-07-24 00:18:40
405
原创 cas单点登录 前端步骤流程
CAS（Central Authentication Service）是一个开源的单点登录协议和实现，它提供了一种统一的方法来管理和验证用户身份，使用户只需通过一次登录即可访问多个应用程序。1. 判断当前用户是否登录，如果没登录要跳转到登录服务器的ip上 并携带之前的地址 例如 192.168.1.110?以Vue为例，只需要在路由守卫中判断无token 跳转到登录页的流程替换掉跳转即可。3.用在url中的ticket去请求token，返回用户标识信息 完成单点登录。
2023-06-18 16:09:08
1267
原创 Vue3 Hooks函数使用及封装思想
专业解释：Vue 3中的Hooks函数是一种用于在组件中共享可复用逻辑的方式。大白话：将单独功能的js代码抽离出来， 加工成公共函数，从而达到逻辑复用。对Vue社区调研，了解了许多使用Vue的开发者对于更好的组件逻辑组织方式的期望。对React Hooks和其他前端框架的解决方案进行了学习和借鉴。有了composition API 意味着我们就可以自定义封装hooks，最终的目的都是进行复用，在Vue2中复用的方式大部分都是采取的mixin，但相比hooks,hooks更清楚复用的功能来源及功能。
2023-06-17 21:15:31
13712
7
原创 微信开发者工具安装sass
1. 在vscode中安装Easy Sass插件2.在微信开发者工具中 找到扩展 ----- 从已解包的扩展文件夹安装。3.找到easy sass 插件进到settings 配置中。之后新建.scss文件就可以了，注意不要后缀写成.sass。
2023-05-23 08:33:02
547
原创 uniapp app 实现qq登录、微信登录
uniapp qq登录流程：uniapp 微信登录流程：这些都可以请运维同学帮我们申请，前端最主要的还是拿到qq、微信的appid之后就可以在 hbuilder中的manifest.json中配置 appid。
2023-05-15 20:00:00
2249
原创 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
3016
2
原创 Vue3 Element-plus el-menu无限级菜单组件封装
对于element中提供给我们的el-menu组件最多可以实现三层嵌套，如果多一层数据只能自己通过变量去加一层，如果加了两层、三层这种往往是行不通的，所以只能进行封装
2023-04-14 19:34:19
5101
3
原创 为什么要推荐使用pnpm
pnpm代表什么？pnpm代表 performant（高性能的）npmpnpm的优点快速：pnpm 比其他包管理器快 2 倍高效：node_modules 中的文件为复制或链接自特定的内容寻址存储库支持 monorepos：pnpm 内置支持单仓多包严格：pnpm 默认创建了一个非平铺的 node_modules，因此代码无法访问任意包
2023-03-17 20:00:00
1590
原创 微信小程序项目转uniapp
使用 miniprogram-to-uniapp 工具进行转换，安装转换原生小程序 (可以先把node_modules先删掉 转换好后 在npm i 否则一些包会转换不成功,注意不支持vant运行完成后会在源目录上产生一个 项目_uni的项目例如转换完成后可能会出现一些语法上的变动导致报错。
2023-03-11 20:30:00
960
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
1077
原创 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
625
原创 前端表格导出excel文件（粘贴即用）
前端表格导出excel文件 1.下载file-saver 和script-loader 2.新建js文件 3.使用
2023-02-22 20:00:00
328
原创 微信小程序阻止页面返回（包滑动、自动返回键）
这个场景还是挺有意思的，比如某多多，只要你点左上角的返回 好家伙，满满又花不了的优惠券就来了，让你拥有一种消费最划算的感觉。如果你的场景比较简单，只是对左上角的返回进行监听，只需要关闭自带的导航栏，手写导航栏或用ui库的写好的导航栏就好了。然后给写好的导航栏的返回按钮添加一个返回的事件做自己想要实现的场景就好了。如果你的场景比较复杂，手机都会有自带的滑动返回，例如ios的滑动返回，安卓的滑动返回和back返回键，就需要用到page-container，他的效果类似于弹窗的形式存在着。
2023-02-20 20:45:48
12868
原创 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
1384
原创 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
1324
原创 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
2143
原创 vue中的render函数、h（）函数、函数式组件
官网：用于编程式地创建组件虚拟 DOM 树的函数。在我们使用webpack脚手架创建项目时，都能在main.js中看到一个render函数对于render函数 es6中写成了箭头函数实际上createElement只是形参用h代表了，h()是的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是，但当你需要多次使用渲染函数时，一个简短的名字会更省力。
2023-02-06 21:10:05
8157
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
1705
原创 vue data为什么不是一个函数
按道理来说 组件之间的数据是不相互影响的 但是由于改成一个对象，他们的数据都指向同一个地址，所以多个组件之间用的都是同一个data，而使用data返回出一个对象，每次都是一个新的对象，所以不会产生影响。这时候vue就会告诉我们 ：“data”选项应该是一个在组件定义中返回每个实例值的函数。为了找到原因 我们首先把data修改成一个对象。修改之后我们把这个组件当成子组件来看，我们通过父组件进行引用两次。在vue2中 data的定义形式 是通过一个函数返回出一个对象。也就是说我们必须写成一个函数返回的形式。
2023-02-03 20:00:00
214
原创 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
303
原创 js 判断一个对象是否是空对象
先来校验是不是一个对象 数组的数据类型也是对象 所以避开数组。1.Object.keysObject.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。2. Object.getOwnPropertyNames方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 值作为名称的属性）组成的数组。3.JSON.stringify()
2023-02-01 20:00:00
153
原创 vue2 数据响应式Object.defineProperty
我们通常可以对进行输入框进行数据的监听，只需要用到了input 事件或 change事件，就可以实时监听到数据的改变，但是如果只是一个单独的数据呢？怎么去做监听，watch吗？？哈哈。所以 vue响应式就用到了中的 get 和 set 方法 ，如果对方法不了解可访问蓝色文字。简单来说 只要一访问就会触发get，设置就会触发set。基本语法：Object.defineProperty(对象,键,{})
2023-01-31 20:15:00
868
原创 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
5201
4
dev-tools-3.0.zip
2021-07-30
vscode 出现信任问题 有大佬懂吗
2021-06-11
TA创建的收藏夹 TA关注的收藏夹
TA关注的人