- 博客(48)
- 收藏
- 关注
RSS订阅原创 开发环境解决Secure Cookie导致302重定向
设置Cookie过期策略（Session Cookie / Persistent Cookie）当Secure Cookie无法存储时，该流程会在步骤5持续循环，导致接口始终返回302。“Cookie被阻止，因为设置了Secure属性但未通过HTTPS传输”确认所有服务强制使用HTTPS（HSTS配置）再次请求/api/data (带Cookie)请求/api/data (无Cookie)启用CSRF Token双重验证机制。后端设置Secure Cookie。请求/login (提交凭证)
2025-03-30 13:38:40
956
原创 JavaScript对象属性描述符
使用或方法可以定义或修改对象的属性描述符。writable: false, // 不可写enumerable: true, // 可枚举configurable: false // 不可配置});// 输出: Alice// 无效，因为 writable 为 false// 输出: Alice属性描述符为 JavaScript 对象属性提供了精细的控制能力，适用于多种场景，如保护属性不被修改、隐藏属性、创建计算属性等。
2025-02-24 22:44:46
335
原创 vue2和vue3响应式的区别
Vue 2使用，无法监听属性的添加和删除，也无法直接监听数组的变化，需要通过Vue.set和重写数组方法来实现。Vue 3使用Proxy，可以监听所有操作（包括属性的添加、删除和数组的变化），性能更好，代码更简洁。Proxy是 Vue 3 响应式系统的核心，它使得 Vue 3 的响应式系统更加灵活和强大。
2025-02-24 20:43:01
867
原创 vue3响应式数据原理
Vue 3 的响应式系统基于Proxy和Reflect，相比 Vue 2 的，具有更好的性能和更强大的功能。通过effect函数追踪依赖，Dep类管理依赖，Proxy拦截操作，Vue 3 实现了一个高效且灵活的响应式系统。简化版的 Vue 3 的核心原理。
2025-02-24 20:37:24
517
原创 vue2响应式数据原理
Vue 2 的响应式系统通过实现数据的监听，虽然功能强大，但也存在一些局限性（如无法直接监听数组的变化）。通过重写数组方法和封装依赖收集逻辑，Vue 2 实现了完整的响应式系统。
2025-02-24 20:35:28
377
原创 通用节流函数
特性防抖（Debounce）节流（Throttle）定义在指定时间内，只有最后一次触发才会执行函数。在指定时间内，函数最多执行一次。适用场景输入框搜索、窗口调整大小等需要等待的操作。滚动事件、鼠标移动等需要控制频率的操作。执行次数在触发事件停止后执行一次。在触发事件期间，按固定间隔执行多次。节流函数通过限制函数的调用频率，能够有效减少不必要的计算和资源消耗，特别适用于需要频繁触发但不需要每次响应的场景，比如滚动事件、窗口调整大小等。
2025-02-15 12:08:22
309
原创 防抖函数（this透传、参数传递）
防抖函数通过限制函数的执行频率，能够有效减少不必要的计算和资源消耗，从而提升性能和用户体验。防抖函数通过限制函数的执行频率，能够有效减少不必要的计算和资源消耗，从而提升性能和用户体验。
2025-02-15 12:04:52
972
原创 scss模块化
scss编译时模块化：能够获取和使用导入scss的函数和变量，存在以下问题。在导入多个scss时，会存在变量污染。与sccc运行时模块化容易混淆。
2025-02-09 15:33:33
374
原创 js常用操作符
扩展运算符/剩余参数：用于解构数组或对象，或者作为函数参数列表中的剩余参数。：创建一个用户定义的对象类型的实例，或特殊对象类型的实例。逗号运算符：可以在一条语句中执行多个表达式。的结果选择执行两个表达式中的一个。用于检查对象是否是某个构造函数的实例。返回一个字符串，指示操作数的类型。严格相等 (不会进行类型转换)松散相等 (会进行类型转换)：检查对象是否有指定的属性。对数字的二进制表示进行操作。
2025-01-18 11:53:09
1042
原创 vite静态资源动态访问
场景：在工程化项目中，有用到动态路径的静态资源的时候（如图片等），可能会显示不出来，而正常静态路径就可以显示。public目录，将静态资源目录移出src，如移至public中，资源资源会原封不动打包，会失去文件指纹。项目运行的环境打包后的，打包后的静态资源还有带有文件指纹（脚手架工具生成）静态import，该方法导入的是文件打包之后的路径，缺点需要单独引入。URL对象，js原生对象，在vite中还可以产生一个url地址对象。动态import，缺点打包后会多出每个静态资源的导出“js”文件。
2025-01-05 15:07:36
237
原创 vue3-watchEffect异步依赖收集
当 b 更新时 a 并不会更新，因为watchEffect的依赖收集在该案例中停止于await asyncFn()，也就是只会收集同步代码的依赖，await 之后的异步代码的依赖并不会收集到。
2025-01-05 12:45:28
498
原创 vue3 ui组件子组件封装v-model绑定props modelValue
失败原因：在子组件中直接通过v-model绑定modelValue，打破单向数据流，导致“update:modelValue”无法正常工作。官方地址：https://cn.vuejs.org/api/sfc-script-setup.html#definemodel。场景：父组件使用子组件通过v-model绑定收集属性值，子组件中的元素，又通过v-mode绑定父组件传递的props属性。v-model：在vue3中，是属于“:modelValue”和“update:modelValue”组合的语法糖。
2025-01-04 11:09:09
932
原创 webpack 打包配置
处理html、css、js、vue、jsx、图片等文件、压缩处理好的文件、分割压缩好的文件、路由懒加载、开启缓存和热更新、开启多线程打包
2024-06-27 10:11:01
1323
原创 vue-cli 项目打包优化-基础篇
根目录下新建【.env.development】【.env.production】【.env.test】，生产、开发、测试环境。参考文档：https://cli.vuejs.org/zh/guide/mode-and-env.html。参考视频地址：https://www.bilibili.com/video/BV1wt421p7yM。参考配置：https://cli.vuejs.org/zh/config。，根据与 后端 或 运维 沟通修改。根据不同环境做相应的配置。
2024-06-27 09:52:10
571
原创 前端奇淫巧技
参考视频地址：https://www.bilibili.com/video/BV1ey421q7Py。 JS诞生的时代，进行简单的表单验证，设计之初，JS做相对简单的任务； 主要原因：多线程环境下DOM元素进行操作可能导致复杂的线程调度问题。 HTML5的时候，开启了多线程的大门，注意事项：创建全局变量可能导致命名冲突。浏览器自动匹配、提升安全性、代码简洁。上的一个属性，在PC端和H5端存在。不会引入多余的dom结构。省去声明第三个变量的方法。未测试，可通过后端解决。
2024-06-27 09:09:02
494
原创 VScode代码片段自动转图标
在VScode编辑器中，编辑html、vue等文件时，特定代码片段（'token/xxx'等）自动转图标显示，按住“ctrl+鼠标左键”还可跳转“https://icones.js.org/collections”，个人感觉干扰代码编写，强迫症受不了
2024-05-16 09:52:04
860
原创 vue2 和 vue3 区别
参考链接：https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html。参考链接：https://v3.cn.vuejs.org/api/computed-watch-api.html#watcheffect。API参考链接：https://staging-cn.vuejs.org/api/#onmounted。参考网址： https://github.com/vuejs/rfcs/pull/271。
2024-04-12 17:31:35
704
1
原创 TypeScript
基本定义num = 18# 简写形式，声明和赋值同时进行可以简写，默认第一次的类型#声明类型，但是不会赋值# js项目动态类型易出bug的地方，参数没有类型限制# 参数类型限制，返回值类型限制# 限制变量在两个值之间选择，以此类推# 限制变量的类型，只能在两个类型之间选择，以此类推# any 表示任意类型，声明不指定默认为any，可以赋值给其他已定义类型的变量let sty# unknown 表示未知的类型，不可以赋值给其他已定义类型的变量，推荐使用unknown代替any。
2024-04-12 17:04:39
1361
1
原创 Vue3-PC端项目上线 Electerm + Nginx
填写购买服务器主机的地址、账号、密码（其他信息非必填，根据实际情况填写），保存并连接，输入服务器密码。在服务器根目录下的【root】下新建【www】文件夹，将打包完的【dist】文件复制过去。连接成功后，在左上角，选择【sftp】，左右分别本地和服务器。在服务器配置nginx代理，在左上角，选择【ssh】 项目build打包完毕，生成dist文件夹。下载安装好electerm。
2024-04-11 16:36:26
281
1
原创 关于uni-admin项目左边缺少【系统管理】等菜单
在uni-admin项目下，uniCloud文件夹下，database文件夹右键【初始化云数据库】即可。
2024-04-07 23:26:15
356
原创 前端uniapp打包自定义插件
在uniapp中打包自定义插件通常涉及几个步骤，包括创建插件代码、配置插件信息、在项目中引入插件，以及最终的打包发布。以下是一个简单的示例，展示如何创建一个简单的自定义uniapp插件，并打包以供他人使用。根据你的具体需求，插件可能包含更复杂的逻辑、多个组件或API，但基本的步骤和流程是类似的。在这个package.json文件中，我们声明了这是一个uniapp插件，并指定了我们的自定义组件的路径。在package.json中正确配置插件的信息，以便其他人能够理解和使用你的插件。
2024-04-07 14:02:47
556
原创 前端开发笔记2（Js、Css）
element-ui的走马灯组件<el-carousel>在动态绑定后端返回的数据渲染时，会出现初始页空白，需要点击才会出现图片，可以添加 v-if 解决。这些标签都有助于更好地描述和组织网页的结构和内容，提高语义化，并且对于可访问性和SEO也非常有益。使用合适的标签可以使代码更具可读性和可维护性。如：接收后端数据，通过【&&】递进判断，就不会因为读取【undefined】的属性而报错。表示从第二个【li】开始到最后的【li】，忽略第一个【li】在匹配的元素内容后插入生成的内容，新CSS 规范中，使用。
2024-04-06 23:31:06
851
1
原创 横向滑块查看大图省流
在uniapp的手机端中，纵向列表点击缩略图查看原图时，原图通常以满屏显示，并且可以通过左右滑动来切换上一张和下一张图片。【includes】函数判断【readImgs】数组中是否含有当前图片位置，不存在就不显示，就不用先加载图片。加载全部原图会占用大量的带宽以及浪费用户流量。应该获取当前图片以及前后两张图片。注：vue3写法，未调试。
2024-04-06 23:26:16
279
1
原创 uniCloud 云开发笔记
在JS中，特殊的字符串字面量，通知JS引擎以“严格模式”执行代码。避免一些常见的错误和不安全的实践。建议在云函数的代码中使用来启用严格模式。
2024-04-06 23:20:31
1148
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人