- 博客(92)
- 收藏
- 关注
RSS订阅原创 实习手计（4）：月末碎碎念！
本周裁员了？前端竟然裁了俩，无情的公司本周好像也就改了这一个需求，不过这周开会又讲首页改成动画的了，下周就要改吧这周，依旧宅，不想出门，我饭搭子还去加班了呜呜，状态有点不对劲？下周该出去走走了......在吐槽这个租的房子，好贵的水电？！突然给我断电了.......浅浅总结一下这个月，菜鸟1.0进阶中，收获饭搭子，有个好师父.......期待下个月啊新的一天。
2024-07-22 02:42:51
176
原创 实习手计（3）：前端菜鸟碎碎念
第三周还Ok了，其实没有改多少东西，开开心心按时上下班，还有人唠嗑（奈斯，不敢想象没有人说话我会多郁闷）哦对了，这周发工资了哈哈哈，虽然只有一丢丢（不及师父的二十分之一，是真高啊），但还是开心的收获了一个固定饭搭子，夸夸她哈哈~人真的很好很活泼，就是我俩制定的计划总是，拖延，起不来。。我真发现我好宅。（可能一个人的时候吧）虽然但是，这周还一个人去西湖转了一圈哦~（还是在别人鼓励下终于出去转了一圈，反正那两天状态很差）才补的博客。。上周说的学习计划也没有落实。。
2024-07-22 02:41:44
374
原创 实习手记（2）：前端菜鸟的摸鱼与成长
反正前两天没什么活，在学习摸鱼了~自我感觉上班比上课快乐（可能只是刚开始，希望以后也这么觉得）第一次写完了感觉没什么问题，一定要多细心排查几遍（真的很重要每次都被@太丢人了）工作过程中收获到的知识点可以记在todo list挺方便（Q哥教的好）另一个实习生好像就是来做杂活的（很辛苦什么都要会一点，她经常加班），招实习生进来不就是干活嘛呜呜怎么可能让我天天摸鱼做好心理准备愉快的一周吧~期待下周运动会虽然没报名，带薪去还是快乐的（但实习生没有衣服区别对待，我社恐一个人好尴尬。。
2024-07-06 17:12:09
1176
3
原创 实习手记（1）：实习初体验
下面这一部分我是不会写在周报里面的哈哈哈，就是个人的一点小感受记录了第一次用mac，真的一点都不懂咋用的，好尴尬啊啊啊，电脑干干净净啥都没有。实习要用mac的小伙伴注意了！提前看一些基本操作！第一天第二天就配环境拉项目看项目，也还好。但是第三天就给了我两个小小的需求，我好心虚~。怕自己写不出来。果不其然，写的很不顺利，第三天就有点小郁闷了。还好带我的哪个哥人特别好一直在教我！提出表扬！第四天顺利写出来了，又开心了。。不过最后还吃到了一个哥哥的生日蛋糕（好吃 祝他生日快乐）！
2024-06-29 22:52:25
973
原创 6、组件通信详解（父子、兄弟、祖孙）
用法：（1） 先在父组件内部的子组件绑定自定义事件@xxx，即为 @send-toy="saveToy"，再定义自定义事件的回调saveToy（2）子组件声明事件，用definEmits(['send-toy'])（3）子组件绑定事件传递参数，@click="emit('send-toy',toy)"Father.vue<template><h3>父组件</h3><h4 v-show="toy">子给的玩具：{{ toy }}</h4>-- 给子组件Child绑定事件 --></div>
2024-06-09 19:24:05
1167
2
原创 5、js关于数组的常用方法（19种）
改变原数组的：push末尾添加数据pop末尾删除一个数据unshift头部添加数据shift 头部删除一个数据reverse翻转数组sort 排序splice截取数组不改变原数组的：concat合并join数组转字符串slice截取数组一部分indexOf左边检查lastIndexOf右边检查map映射数组forEach循环遍历filter过滤every判断是否都满足条件some判断有无满足条件find 获取第一个满足条件的数据reduce叠加。
2024-06-08 21:11:10
1100
原创 4、js数据类型，检测数据类型
当普通的number存储更大的数字时，会出现不精确的情况。用bigint存储更大的整数，确保数字的完整度和精确度。当需要定义的常量很多时，要考虑到常量唯一值的设定。当用symbol来定义常量，后面想要修改常量的值就会抛出错误。因为，symbol()类型定义的对象的key值不能通过object.keys()或者for in来枚举。适用：可以准确的判断复杂数据类型（array date ） ，不能检测基本数据类型会全部返回false。符号实例是唯一的不可变的。原理：判断在对象的原型链中是否能找到该类型的原型。
2024-06-08 18:00:14
465
原创 前端实现大文件分片并行上传、断点续传、秒传（完整解析）
简单理解：前端先将文件切割多份，在进行上传，由后端进行切片合并操作。秒传断点续传并行。
2024-06-04 17:05:25
1641
2
原创 3、flex弹性盒布局（flex:1?、水平垂直居中、三栏布局）
任何一个容器都可以指定为 Flex 布局。块元素，行内元素即可。div{span{注意，设为 Flex 布局以后，子元素的floatclear和属性将失效。
2024-06-02 17:14:20
1339
原创 2、浮动的用法特点，解决父元素高度塌陷解决
5、当浮动元素遇到了文字，浮动元素不会覆盖文字， 文字会环绕在浮动元素的周围，从而有文字环绕图片的效果。6、当元素设置浮动以后，会完全脱离文档流，元素脱离文档流后， 元素原来在文档流得特点，就都没有了，也就是说不再区分块，行内，行内块。1、一旦元素设置了浮动，元素就会脱离文档流，它原来在文档流得位置， 就会被它下面的元素挤上来。子元素都设置了浮动，父元素没有高度，导致父元素高度塌陷，无法自动的根据子元素撑开高度。2、如果浮动元素它上面的元素不浮动，则浮动元素无法上移。4、浮动元素不会超出它的父元素。
2024-06-02 15:09:49
545
原创 1.盒模型及其应用（溢出、外边距塌陷）
怪异盒模型又称IE盒子模型，怪异盒子模型的 width 或 height 等于 content + padding + border 的宽或高。设置的 width 和 height 决定了盒子的大小，设置 border 和 padding 只会压缩 content。小结：怪异盒子模型的宽高是定死的，设置 padding 或 border 不会影响页面布局。的大小，设置 padding 和 border 会把盒子撑大，margin 不会。样式设置：box-sizing: border-box;
2024-06-02 13:55:46
803
原创 HTML5+CSS3回顾总结
（1）get 方法的特点 使用 URL（统一资源定位符）传递参数：http://服务器地址?name1=value1&name2= value2，其中“?”符号表示要进行参数传递，“?”符号后面采用“name=value”的形式传 递，多个参数之间，用“&”符号连接。URL 传递的数据量有限，只能传递少量数据。而且使用 URL 传递参数并不安全，所有信息可在地址栏中看到，并且可以通过地址 栏随意传递其他数据。
2024-06-01 19:12:43
851
原创 牛客前端面试高频八股总结（2）（附文档）
浏览器的垃圾回收机制就是我们程序在工作的过程中或者执行之后，会产生一些用不到的内存变量，这些变量会一直占据这内存，所以这时候需要垃圾回收机制帮我清理这些用不到的变量，从而释放内存空间。垃圾回收机制最常见的有两种：1.标记清除算法。2：引用计数算法。（1）标记清除算法就是执行前将所有的变量打上标记，执行完成后未被打上标记的变量就会当做垃圾回收。浏览器会隔一段时间进行一次标记清除缺点：被释放的内存空间是不连续的，被之前一直占据内存的变量隔开，导致内存空间不连续，会。
2024-05-25 16:59:30
970
原创 牛客前端面试高频八股总结（1）（附文档）
1.html语义化要求使用具有语义的标签：header footer article aside section nav三点好处：（1）提高代码可读性，页面内容结构化，更清晰（2）无css时，时页面呈现出良好的结构（3）利于seo搜索，爬虫爬取有效信息2.盒模型边距边框填充实际内容 margin border padding contentW3c标准盒模型：默认，实际宽高包括padding和border box-sizing:content-box。
2024-05-24 15:36:30
873
原创 git二次上传文件夹、文件
报错：error the following untracked working tree files would be overwritten bt merge...git add -f 文件夹/文件名称 比如 git add -f node_modules。一、报错error:failed to push somes ref to.....把报错的（重复的文件删除）主要记录自己遇到的问题。
2024-05-23 18:31:39
412
原创 Vue3实战uu云盘（五）：文件分享功能
其它用户拿到链接之后，将分享链接输入到地址栏，但是，用户第一次输入的话，肯定没有验证过（会话中，没有此分享记录），因此，要跳转到分享验证页面，验证通过之后，该分享记录会存入此会话，当用户再一次进行此分享页面，就会从会话中检测到有此分享记录，此时就不需要再次验证了。
2024-05-18 19:52:16
799
原创 Vue3实战uu云盘（四）：使用空间+文件预览+文件分享+文件下载
如果responseType写的是blob的话，那么一定要调用res.data.arraybuffer()，这个调用返回结果是个Promise，把此Promise得到的结果给到new Uint8Array(promise的结果)也可以。首先，从 fileInfo.value.fileCover 中获取文件名或路径，并将其中的所有 "_." 替换为 "."。proxy.globalInfo.imageUrl 是 "https://example.com/images/"非视频文件类型文件 预览的url。
2024-05-18 16:03:40
1100
1
原创 Vue3实战uu云盘（三）：文件删除+文件移动+目录导航+上传优化/文件过滤/搜索
（因为文件移动到哪个文件夹，文件保存到哪个文件夹都要用到，所以封装一个全局组件）别忘记在Main.js中引入src/components/FolderSelect.vue（不全面，未添加导航）-- 移动/保存到哪个文件夹组件 -->-- 弹出的对话框组件Dialog -->-- 文件夹列表 -->-- 每一项文件夹 -->-- 每个文件夹的名字 -->
2024-05-13 19:14:06
409
原创 JS代码随想录（一）：数组
错解： （未使用二分法）正解：左闭右闭： 左闭右开：三、 移除元素（快慢指针法）正确：四、有序数组的平方（双指针法） 正解：五、长度最小的子数组 （滑动窗口）正解：六、螺旋矩阵正解： 七、总结
2024-05-11 21:32:09
1075
原创 vue3实战uu云盘（一）：创建项目+登录注册页面+构建框架页+上传头像/修改密码/退出登录
（需要前后端源码的可以评论或者私信），这一部分记录的不全面。（2）封装全局组件AvatarUpload（上传图片）（1）封装UpdatePassword.vue组件。（2）在Framework.vue引入，使用组件。（1）封装UpdateAvatar.vue组件。（3）Framework.vue中引入使用。（3）添加点击事件，点击事件回调。（2）main.js引入和配置。（4）main.js引入使用。（3）添加api接口。
2024-05-10 14:39:23
623
原创 echarts学习笔记：柱状图+雷达图+双环形图+地图可视化+数据传递关系图+关键词条图+数据总览图+AntV/G2/DataV
基于vite和tailwindcss创建项目,使用js。
2024-05-07 18:39:16
461
原创 vue3（5）：数据大屏+菜单权限+按钮权限
自定义指令// 获取对应的用户仓库// 全局自定义指令：实现按钮的权限// 代表使用这个全局指令的DOM|组件挂载完毕的时候会执行一次// 自定义指令右侧的数值：如果在用户信息buttons数组中没有// 从DOM树上干掉if (!},})在main.ts文件中引入自定义指令文件// 引入自定义指令文件此处以trademark作为例子，项目中其他按钮的权限都需要配置完结！后续还会复习项目总结一波！也会在做一个项目，有需要的可以关注！
2024-05-03 19:55:51
881
原创 Vue3（4）: 用户管理+角色管理+菜单管理+首页+暗黑模式/主题切换
（2）给抽屉的身体部分添加校验规则:rules="rules"（告诉表单数据数据收集:model="userParams"并给表单项添加prop）收集到新增的职位数据》表单校验》判断》再次获取全部已有数据》清空数据》清空错误提示》将对话框隐藏（记得更新返回的是当前页还是添加上一页）需要收集参数（当前用户id,收集到的职位id）》分配用户职位（判断，提示信息，获取更新完毕用户的信息，更新后留在当前页）携带职位的id，选中节点的id，半选的id》下发权限》判断》页面刷新window。
2024-05-02 20:26:22
1171
2
原创 Vue3项目（3）: 品牌管理+平台属性管理+SPU管理+SKU管理
/ 定义用户相关数据的ts类型// 用户登录接口携带参数的ts类型// 定义全部接口返回数据都拥有的ts类型// 定义登录接口返回数据类型// 定义获取用户信息返回的数据类型data: {// 统一管理项目用户相关的接口// 项目用户相关的请求地址enum API {// 暴露请求函数// 登录接口// 获取用户信息// 退出登录// 已有的品牌的ts数据类型id?: number// 包含全部品牌数据的ts类型// 获取的已有全部品牌的数据ts类型data: {
2024-04-30 21:50:40
736
原创 Vue3（2）:路由配置+登录模块+layout组件+路由鉴权
我们要做的，封装用户仓库数据ts类型的定义 ，因为之前在user.ts里面使用了很多未封装未声明类型的ts数据，写的也很长，所以需要封装一下。（1）定义小仓库数据state类型：src\store\modules\types\type.ts// 定义小仓库数据state类型（2）登录接口返回的数据类型：src\api\user\type.ts登录请求可能返回成功/失败的数据，因此类型需要dataType需要包括成功的数据token和失败的数据message，且是可选的，要加上"?token?
2024-04-24 20:27:21
1359
2
原创 vuedevtools图标不亮不能使用，显示vue.js not detected
链接: https://pan.baidu.com/s/1zKEgGxT5uAvofpD-T1Oa_w?pwd=72m5 提取码: 72m5。解决办法，在vite.config.ts添加如下代码。根本原因就是下载的vue开发者工具不对，没有编译。解压后拖拽此文件到chrome的拓展程序。下载我已经编译好的shellchrome。显示的错误不用管，这样就亮了。
2024-04-22 11:44:43
671
1
原创 Vue3（1）：项目初始化、项目配置、项目集成
/ 登录接口需要携带参数ts类型// 登录接口返回的数据类型// 定义服务器返回用户信息相关的数据类型data: user。
2024-04-19 11:55:28
1371
原创 （亲测有效）win7安装nodejs高版本（18.8.0）
现在学习vue3,vite,使用pnpm创建项目都需要高版本的nodejs了，win7最高只能安装13版本，好多已经不支持了。那么我们安装的16.4.0版本在写项目时基本都可以使用，当然此篇只是以安装16.4.0为例，可以替换成更高的18或者20版本，只是太高的话可能出现冲突，够用就好。希望对各位小伙伴有帮助。
2024-04-18 13:28:24
1768
原创 Vue3（六）：Vue3其他API、Vue3新组件Teleport、Vue2和3区别
通过使用 [shallowRef()]和[shallowReactive()来绕开深度响应。浅层式 `API` 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。就是当你只关心修改整体的时候就可以用这两个属性。
2024-04-17 15:56:51
804
原创 Vue3（五）：组件通信详解（九种方法）
自定义事件常用于：子 => 父- 事件名是特定的（click、dbdlick、change等等）- 事件对象`$event`: 是包含事件相关信息的对象（`pageX`、`pageY`、`target`、`keyCode`）- 事件名是任意名称- 事件对象`$event`: 是调用`emit`时所提供的数据，可以是任意类型！！！vue2中 @click是自定义事件，可以通过.native修饰符变为原生DOM事件。
2024-04-16 20:41:46
1485
原创 Vue3（四）：Pinia
Pinia是一个专门为Vue.js设计的状态管理库，它提供了一种简单和直观的方式来管理应用程序的状态。在使用Pinia时，可以轻松地创建定义状态的存储，然后将其与Vue组件绑定，使它们能够使用该状态。和上一个博客提到的Vuex相比，Pinia 更加简单易用，体积更小，同时具有更好的 TypeScript 支持和插件系统。在Vue.js的官网中，我们可以看到Pinia目前已经取代Vuex,成为Vue生态系统的一部分。
2024-04-15 22:11:12
835
原创 Vue3（三）：生命周期、路由、自定义hooks
hook本质是一个函数，用use开头，把setup函数中使用的Composition API进行了封装。可以更方便我们去复用处理数据的逻辑.有时候我们会写很多数据和方法，如果都写在Person.vue会很大很复杂也不好修改，所以我们可以在src下新建hooks文件夹 ，建立useDog.ts和useSum.ts，拆分Person.vue中的东西。
2024-04-14 14:31:17
1488
原创 Vue3（二）：报错调试，vue3响应式原理、computed和watch,ref,props,接口
setup`是`Vue3`中一个新的配置项，值是一个函数，它是 `Composition API`表演的舞台，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在`setup`中。- `setup`函数返回的对象中的内容，可直接在模板中使用。- `setup`中访问`this`是`undefined`。- `setup`函数会在`beforeCreate`之前调用，它是“领先”所有钩子执行的。直接写数据名即可，监视的是其`value`值的改变
2024-04-13 16:23:56
1141
原创 Vue3（一）：win7使用vue-cli创建vue3工程
因为我的是 win7系统，之前在学习vue2的时候，一直用的是vue-cli 2.9.6版本。Check the features needed for your project - 多选择上 TypeScript，特别注意点空格是选择，点回车是下一步。安装完成后再次查看自己的vue-cli版本（vue -V）我的升级之后是@vue/cli 5.0.8。npm install -g @vue/cli（重新安装最新版本的vue-cli）npm install -g vue-cli（卸载之前的vue-cli）
2024-04-11 15:55:52
1369
原创 element-ui的按需引入报错解决：MoudleBuildFailed，完整引入和按需引入
官网： Element - The world's most popular Vue UI frameworknpm i element-ui -S在 main.js 中写入以下内容：App.vue（3）效果：2.按需引入（1）下载;然后，将 .babelrc 修改为：此处疑问？？？？？出现MoudleBuildError报错，按照老师的修改es2015依然报错。 （我与张天宇老师的脚手架版本不一样，我的是较低版本的vue-cli，所以有.babelrc这个文件）接下
2024-04-10 19:44:18
586
原创 Vue2（十五）：replace属性、编程式路由导航、缓存路由组件、路由组件独有钩子、路由守卫、history与hash
1、作用：控制路由跳转时操作浏览器历史记录的模式2、浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push3、如何开启replace模式：News， 加一个replace即可理解：如果你用的是默认的push，你点击进入到下一个路由的时候可以返回到上一个路由。
2024-04-10 15:12:37
1666
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人