- 博客(51)
- 收藏
- 关注
RSS订阅原创 一个很恶心的现实：忠诚与卖力敌不过公司利润下滑！
职场是残酷的，但也是一个锻炼和成长的熔炉。面对“公司盈利减少，员工变眼中钉”的现实，抱怨和消极等待无济于事。我们能做的，是深刻理解其背后的商业逻辑，并主动调整自己的心态和策略。持续提升个人价值、打造不可替代的核心竞争力、积极学习新技能、建立良好的人际网络、以及做好个人职业和财务规划，这些才是应对职场不确定性的最佳“护城河”。职场中的“恶心”现实——忠诚与努力敌不过利润下滑，揭示了企业以财务为核心的本质。但通过技能升级、量化贡献和个人品牌，你能从“眼中钉”变“核心资产”。
2026-01-14 19:22:50
688
原创 【高并发架构】从 0 到亿，从单机部署到 K8s 编排：高并发架构的 8 级演进之路
本文系统梳理了互联网系统架构从单机到亿级并发的8级演进路径。初始阶段采用单机架构满足小流量需求；随着用户增长，逐步演进为应用数据分离、服务集群、读写分离等架构；进而通过冷热分离、垂直分库解决数据瓶颈；微服务架构应对系统复杂度；最终容器编排实现云原生自动化运维。每次演进都针对特定阶段的性能、扩展性和运维痛点，体现了"垂直拆分→水平扩展"和"人工→自动化"两大核心逻辑。架构设计应匹配业务发展阶段，避免过度设计，持续演进才是关键。
2026-01-14 10:53:55
1035
1
原创 【MySQL数据库】彻底搞懂 MySQL 表的约束：约束、主键、外键等核心概念一网打尽
MySQL 表的约束是保障数据完整性的核心机制，不同约束有着不同的作用和应用场景：空属性和默认值保障域完整性，主键和唯一键保障实体完整性，外键保障参照完整性，列描述和 zerofill 则分别用于提升表结构可读性和数值显示规范性。在实际开发中，合理使用约束可以有效避免脏数据、无效数据的产生，减少业务逻辑中的数据校验代码，同时提升数据查询和关联操作的效率。希望通过本文的讲解，你能彻底搞懂 MySQL 表约束的核心概念和实操方法，在后续的数据库设计和开发中灵活运用各类约束，打造高效、可靠的数据库结构。
2026-01-13 17:12:18
995
原创 【MySQL数据库】被问了 1000 次的 MySQL 索引，我把它写成带目录的「全景长文」了
本文全面解析MySQL索引的核心知识，从基础概念到底层原理，再到实践应用与常见误区。文章详细介绍了索引的定义、作用及常见类型（B+树、哈希、全文等），深入剖析B+树作为MySQL首选索引的优势。同时提供索引创建、删除的实操指南，强调高效索引设计原则（如最左前缀匹配）和索引失效场景（如函数操作、前缀通配符等）。最后针对面试高频问题给出专业解析，帮助开发者系统掌握索引知识，平衡查询效率与写操作性能。无论是新手学习还是老手查漏补缺，都能从中获益。
2026-01-13 16:45:57
647
原创 深入理解 Flex 布局中的 order 属性：掌控元素排序的秘密武器
Flex布局中的order属性是一个强大工具，可改变元素视觉顺序而不影响HTML结构。它通过整数值控制排列，值越小越靠前，默认值为0。order适用于响应式布局调整、动态交互排序等场景，但需注意它仅改变视觉顺序，不影响屏幕阅读器的读取顺序。使用时应避免过度依赖，保持HTML语义与视觉表现的平衡。order是现代布局中灵活调整元素顺序的高效解决方案。
2025-11-11 19:45:50
649
原创 深入理解 flex-shrink：CSS 弹性布局中的 “收缩” 智慧
摘要：flex-shrink是Flexbox中控制元素收缩的关键属性，默认值为1。它根据元素的基础尺寸和flex-shrink值计算收缩比例，数值越大收缩越多。常见用法包括防止元素收缩(flex-shrink:0)、优先保护重要内容，以及与flex-grow配合使用。需注意min-width限制和默认值影响，避免与width:100%冲突。掌握flex-shrink的计算逻辑能实现更精确的弹性布局，配合flex-grow完成"扩张"与"收缩"的完整布局方案。
2025-11-06 15:11:54
547
原创 手把手搭建 Nuxt2 + Webpack 4 前端项目模板：从初始化到生产环境
本文详细介绍了如何基于Nuxt2和Webpack4构建生产级前端项目模板。主要内容包括：1. 技术选型分析，说明Nuxt2的SSR/SSG优势和Webpack4的零配置特性；2. 从环境准备到项目初始化的完整流程，包括推荐配置选项和目录结构解析；3. 核心配置详解，涵盖Axios代理、Webpack优化、路由权限控制等关键环节；4. 业务功能扩展方案，如动态组件渲染、Vuex状态管理和PWA支持；5. 性能优化技巧，包括首屏加载、资源加载和渲染性能优化；6. 两种生产部署方案（SSG静态部署和SSR动态部署
2025-08-25 18:12:41
1111
原创 常用的折叠展开过渡动画效果css
本文介绍了如何使用HTML、CSS和JavaScript实现平滑的折叠展开动画效果。通过CSS的transition属性控制max-height和padding变化，结合JavaScript切换类名来触发动画。关键点包括：使用max-height而非height实现灵活的高度变化，同步箭头旋转增强交互反馈，设置0.5秒过渡时间保证流畅性。该方案能有效管理页面空间，支持进一步优化如动态计算高度、添加淡入淡出等效果，提升用户体验和内容可访问性。
2025-07-18 17:54:29
874
原创 vue3使用七牛云上传文件
本文介绍了Vue3集成七牛云文件上传的完整解决方案。主要内容包括：1) 环境配置步骤，包括安装七牛云SDK和获取必要配置信息；2) 详细代码实现，涵盖文件选择、上传进度显示、结果预览等完整功能；3) 关键配置说明和安全注意事项；4) 常见问题解决方法。该方案实现了前端文件上传的核心功能，同时强调了安全规范，建议通过服务端生成上传凭证以避免暴露敏感信息。文章提供了完整的Vue组件代码和样式，可直接用于项目开发。
2025-05-24 17:43:00
951
原创 在 Ant Design Vue 中实现滚动页面时保持下拉菜单展开
通过合理配置、自定义 CSS 或动态事件控制，可以有效实现 Ant Design Vue 下拉菜单在滚动时的保持展开。开发者可根据具体场景选择最适合的方案。如果遇到复杂情况，建议结合多种方法以达到最佳效果。
2025-03-29 11:36:58
851
原创 2024 前端技术指南：从趋势到实战，构建你的知识地图
前端的 “寒冬” 或许存在，但技术的春天永远属于持续进化的开发者。无论是拥抱 AI 工具，还是深耕框架原理，关键在于构建属于自己的 “技术护城河”。保持对前沿的敏感度，沉淀核心竞争力，才能在行业变革中立于不败之地。未来已来，让我们一起做技术浪潮中的 “冲浪者”。
2025-03-17 11:52:09
411
原创 实现大屏的自适应缩放原理
媒体查询允许你根据不同的屏幕尺寸和设备特性应用不同的 CSS 样式。通过定义多个媒体查询规则，可以为不同的屏幕尺寸提供不同的布局和样式。这种方法的核心是通过比较当前视口尺寸和大屏原始设计尺寸，计算出合适的缩放比例，然后使用 CSS 的。（视口宽度和高度中较大值的百分比）。使用视口单位可以让元素根据视口的大小自动调整尺寸。视口单位是相对于浏览器视口尺寸的单位，常见的有。（视口宽度和高度中较小值的百分比）和。属性对大屏内容进行整体缩放。（视口宽度的百分比）、（视口高度的百分比）、
2025-03-06 15:19:24
737
原创 uniapp下拉选择组件
要解决第一和第二个问题，我们的自定义组件需要使用插槽，插槽用来放我们的初始显示组件，来灵活适配各种组件。以上代码都可以直接拷贝使用，无其他关联项，vue2、vue3、小程序、h5、APP都可用。2、初始显示的组件不能定死，可以是button，可以是view，或者是input，要灵活。3、dataList：传入的数据列表，列表为对象，多选时对象需要指定唯一标识。，但是不支持input组件，所以我们自己来实现一个。
2024-12-25 11:11:44
3779
原创 vue-baidu-map基本使用
是一个基于 Vue.js 的百度地图组件库，它封装了百度地图的 JavaScript API，使得在 Vue 项目中使用百度地图功能更加便捷。下面是如何在 Vue 项目中安装和使用。
2024-11-28 14:13:08
524
1
原创 10分钟学会TS
文章主要介绍了 TypeScript 这一编程语言，它是 JavaScript 的超集，增加了类型注解和编译时类型检查等特性。对比了与 JavaScript 的区别，阐述了优缺点、使用场景、安装过程、特性及面试题相关内容，包括类型系统、编译执行、功能扩展等方面的差异，还涉及数组、元组、枚举、函数、接口、泛型等特性。
2024-11-05 10:41:06
1094
原创 uni-app 获取 android 手机 IMEI码
if (e.granted.length > 0) { // 权限被允许 // 调用依赖获取定位权限的代码 console.log('Granted!
2024-10-25 10:46:11
3857
2
原创 git基本使用：git分支的操作命令
Git 的多分支管理是指在同一个仓库中创建和管理多个分支，每个分支可以独立开发，互不干扰。分支是 Git 中的一种强大功能，允许开发人员同时在多个不同的功能、修复或实验上工作，而不会影响主分支或其他分支。通过多分支管理，团队可以并行处理多个任务，例如开发新功能、修复 bug 或进行代码重构，而不必担心代码冲突或影响主分支的稳定性。在进行多个并行作业时，通常会用到分支。
2024-10-17 11:24:51
1261
原创 Vue项目中使用ECharts
在 Vue 组件中，你可以直接导入 ECharts 并使用它。这样，你就可以在 Vue 项目中使用 ECharts 来创建各种图表了。如果需要更复杂的功能或遇到任何问题，随时可以提问！插件，这将使在 Vue 中使用 ECharts 更加便捷。然后，在你的 Vue 组件中使用它。
2024-10-14 15:39:16
470
原创 el-input 限制输入框只能输入数字和小数以及表单常用的校验规则
oninput =“value=value.replace(/[^0-9.]/g,‘’)” //只能输入数字和小数。oninput =“value=value.replace(/[^\d]/g,‘’)” //只能输入数字。13.密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）10.多个8位数字格式(yyyyMMdd)并以逗号隔开。11.数字加英文，不包含特殊字符。12.前两位是数字后一位是英文。2.是否手机号码或者固话。3. 是否身份证号码。
2024-10-08 15:36:59
5618
原创 uniapp，跳转tabbar页面，并刷新页面
本文详细介绍了在UniApp中实现TabBar页面跳转并刷新的完整方案。核心是通过uni.switchTab跳转，在目标页面的onShow生命周期中实现刷新逻辑。文章提供了三种实现方式：自动刷新、精准控制刷新和强制重启页面，并给出了具体代码示例。同时指出了常见错误用法和推荐实践，如必须使用switchTab跳转、刷新逻辑应放在onShow中、及时清空刷新标记等。该方案适用于需要TabBar页面跳转后自动刷新的场景，帮助开发者解决这一高频需求。
2024-09-26 15:14:56
986
原创 uniapp 提示框(showToast、showModal、showLoading)
uniapp 提示框(showToast、showModal、showLoading)
2024-09-25 17:42:22
2945
原创 uniapp 实现不同用户展示不同的tabbar(底部导航栏)
本文介绍了在uniapp开发中实现动态tabbar的解决方案。通过自定义tabbar组件，根据不同用户身份显示不同的底部导航栏。具体步骤包括：1）基础配置pages.json；2）创建自定义tabbar组件；3）在main.js注册全局组件；4）在页面中引入并隐藏原生tabbar；5）实现登录页面身份验证及跳转逻辑。针对角色切换时出现的图标闪烁问题，提出了通过计算属性动态调整selectedIndex的解决方案。文章提供了完整的代码示例，为uniapp开发者实现动态tabbar提供了实用参考。
2024-09-23 15:23:16
3368
11
原创 uniapp手机号密码加密登陆
本文介绍了在uniapp中使用CryptoJS实现登录时手机号和密码加密的方法。通过示例代码展示了如何安装CryptoJS库，并使用AES加密算法对敏感数据进行加密处理。文章详细说明了密钥和初始化向量的设置、加密过程的具体实现，以及如何将加密后的数据传输到服务器。该方法能有效提升登录信息的安全性，建议在实际应用中将密钥和向量严格保密，并与服务器端保持一致。
2024-09-14 15:12:56
1011
原创 uniapp实现年月日时分秒选择器
一个前端日期时间选择器的Vue组件实现代码。该组件支持多级选择器，可精确到秒，包含年份(1900-2100)、月份、日期、小时、分钟和秒的选择功能，并实时格式化显示所选时间。代码结构完整，包含模板、脚本和样式三部分
2024-09-12 17:28:19
791
原创 uniapp微信小程序：轻松获取用户头像和昵称
简介：本文将详细介绍在uniapp微信小程序中如何获取用户的头像和昵称，提供清晰易懂的步骤和实例，帮助开发者快速实现用户信息的获取。在开发uniapp微信时，获取用户的头像和昵称是常见的需求。这些信息对于个性化推荐、用户认证和社交分享等功能至关重要。本文将介绍如何在uniapp微信小程序中轻松获取用户的头像和昵称。首先，确保你的uniapp项目已经正确配置，并且已经获得了微信小程序的授权。在微信小程序中，用户信息的获取需要通过微信授权来实现。因此，在开始之前，请确保你的小程序已经完成了微信登录授权。
2024-09-10 14:11:25
2680
2
原创 NPM权限问题
环境的时候遇到一个npm权限不足问题，具体报。如果加上sudo仍然不生效就要对npm。复制的时候注意一下路径！因此记录一下解决方法。
2024-09-09 11:12:55
1017
原创 npm全局安装、切换淘宝镜像
文章介绍了如何通过设置npm的配置来使用国内的镜像源，如淘宝和npmmirror，以加快依赖安装的速度。这包括使用`npmconfigset`命令切换镜像源，安装并使用nrm工具来管理和切换不同的镜像源，以及使用cnpm进行快速安装。此外，还列举了一些常用包的镜像地址，以进一步优化下载速度。
2024-09-09 11:11:24
1432
原创 VUE解决Error: error:0308010C:digital envelope routines::unsupported的四种解决方案
VUE报错主要是因为 nodeJs V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制，nodeJs v17 之前版本没影响，但 V17 和之后版本会出现这个错误。报错：Error: error:0308010C:digital envelope routines::unsupported。笔者本人是采用第四种方案解决的，大家可以试试，希望可以帮到大家。方案3:卸载当前版本，安装合适的版本(node.js)方案2：打开IDEA 终端，直接输入（问题解决）
2024-05-09 09:41:47
3270
1
原创 vscode 前端常用插件推荐
一、 vscode 简介1、vscode是微软开发的的一款代码编辑器，就如官网上说的一样，vscode重新定义（redefined）了代码编辑器。2、当前市面上常用的轻型代码编辑器主要是：sublime，notepad++，editplus，atom这几种。3、比起notepad++、editplus，vscode集成了许多IDE才具有的功能，比起它们更像一个代码编辑器；4、比起sublime，vscode颜值更高，安装配置插件更为方便；
2023-08-22 16:29:10
442
2
原创 简单搭建一个基于 VitePress 的网站
下载完成之后，安装vscode，vscode安装完成之后，在打开vscdoe的请况下再安装以下插件，点击install即可： markdown插件：https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one markdown预览插件：https://marketplace.visualstudio.com/items?下载地址：https://code.visualstudio.com/版本号大于 6 即可。
2023-08-09 12:27:21
354
1
原创 Mac中如何使用vsode愉快地运行C、C++程序
开发，便萌生了使用插件来运行C/C++程序的想法，也就有了这篇文章。如果你只是简单的跑跑C/C++程序，可以考虑第一种方案。玩玩，结果小30G的空间占用直接劝退。（3）命令行进入cTest路径下，输入。因为使用场景的不同，为大家提供了。（2）查看目录结构，发现多了一个。文件：编译后的可执行文件。中输入以下代码并保存。
2023-07-26 18:10:36
441
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人