前端扫盲
关注
分享
扫一扫
文章平均质量分 65
聚焦前端全链路成长，破解 “学用脱节”“原理模糊” 痛点。内容覆盖底层原理拆解、框架实战（附可复用代码）、性能优化、跨端 / 新技术探索，拒绝碎片化。无论你是刚入门的小白，还是想突破瓶颈的开发者，都能在这里把知识点转化为落地能力，同步行业新动态，从 “会编码” 成长为 “懂体验的前端工程师”。
王旭晨
全栈开发工程师 | 前端 & Java & MySQL
技术栈：
前端：JavaScript (Vue/React), HTML5, CSS3
后端：Java, Spring Boot, Spring Cloud
数据库：MySQL, SQL 优化，数据建模
专注于从 0 到 1 构建完整 Web 应用，热衷于分享全链路开发经验、架构设计思路与性能优化技巧。
博客内容：全栈项目实战、Java 并发编程、MySQL 索引优化、前后端联调最佳实践。
期待与各位开发者交流学习，共同成长！
私信可聊技术问题、项目合作，看到必回！
有问题咨询WHT010819
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
2024 前端技术指南：从趋势到实战，构建你的知识地图
前端的 “寒冬” 或许存在，但技术的春天永远属于持续进化的开发者。无论是拥抱 AI 工具，还是深耕框架原理，关键在于构建属于自己的 “技术护城河”。保持对前沿的敏感度，沉淀核心竞争力，才能在行业变革中立于不败之地。未来已来，让我们一起做技术浪潮中的 “冲浪者”。原创 2025-03-17 11:52:09 · 386 阅读 · 0 评论
-
连八股文都不懂还指望在前端混下去么
🔥 连八股文都不懂还指望在前端混下去么,前端八股文，前端面试题原创 2024-04-28 09:38:13 · 849 阅读 · 1 评论 -
Vue封装工具类以及使用
1.在vue项目中src/common/common.js/创建js文件 例：common.js。在任何一个vue文件里面的生命周期this.方法名就可以了，因为已经在main.js全局实例化了。2.在main.js 引用common->然后实例化。这里我们就封装好了示例公共方法,接着我们如何显示调用。3.common.js写一个示例。原创 2023-06-09 13:46:59 · 415 阅读 · 0 评论 -
Vue创建项目
在request目录下新建request.js(请求拦截),api.js(封装接口)npm install vue-router@4（这是vue3的路由）在router目录下新建index.js。在src目录下新建request。在src目录下新建router。3、下载api axios （调接口）4.这是request.js请求拦截。5、api.js(封装接口)6、main.js(引入)（这是vue2的路由）7、vue页面调用接口。原创 2023-06-09 13:37:52 · 186 阅读 · 0 评论 -
ES6新特性有哪些？
es6转载 2023-01-04 11:58:11 · 184 阅读 · 0 评论 -
Vue项目中使用ECharts
在 Vue 组件中，你可以直接导入 ECharts 并使用它。这样，你就可以在 Vue 项目中使用 ECharts 来创建各种图表了。如果需要更复杂的功能或遇到任何问题，随时可以提问！插件，这将使在 Vue 中使用 ECharts 更加便捷。然后，在你的 Vue 组件中使用它。原创 2024-10-14 15:39:16 · 460 阅读 · 0 评论 -
Echarts-多颜色渐变
Echarts-多颜色渐变。原创 2024-10-16 17:48:12 · 230 阅读 · 0 评论 -
在 Ant Design Vue 中实现滚动页面时保持下拉菜单展开
通过合理配置、自定义 CSS 或动态事件控制，可以有效实现 Ant Design Vue 下拉菜单在滚动时的保持展开。开发者可根据具体场景选择最适合的方案。如果遇到复杂情况，建议结合多种方法以达到最佳效果。原创 2025-03-29 11:36:58 · 830 阅读 · 0 评论 -
实现大屏的自适应缩放原理
媒体查询允许你根据不同的屏幕尺寸和设备特性应用不同的 CSS 样式。通过定义多个媒体查询规则，可以为不同的屏幕尺寸提供不同的布局和样式。这种方法的核心是通过比较当前视口尺寸和大屏原始设计尺寸，计算出合适的缩放比例，然后使用 CSS 的。（视口宽度和高度中较大值的百分比）。使用视口单位可以让元素根据视口的大小自动调整尺寸。视口单位是相对于浏览器视口尺寸的单位，常见的有。（视口宽度和高度中较小值的百分比）和。属性对大屏内容进行整体缩放。（视口宽度的百分比）、（视口高度的百分比）、原创 2025-03-06 15:19:24 · 711 阅读 · 0 评论 -
深入理解 Flex 布局中的 order 属性：掌控元素排序的秘密武器
Flex布局中的order属性是一个强大工具，可改变元素视觉顺序而不影响HTML结构。它通过整数值控制排列，值越小越靠前，默认值为0。order适用于响应式布局调整、动态交互排序等场景，但需注意它仅改变视觉顺序，不影响屏幕阅读器的读取顺序。使用时应避免过度依赖，保持HTML语义与视觉表现的平衡。order是现代布局中灵活调整元素顺序的高效解决方案。原创 2025-11-11 19:45:50 · 623 阅读 · 0 评论 -
vue-baidu-map基本使用
是一个基于 Vue.js 的百度地图组件库，它封装了百度地图的 JavaScript API，使得在 Vue 项目中使用百度地图功能更加便捷。下面是如何在 Vue 项目中安装和使用。原创 2024-11-28 14:13:08 · 514 阅读 · 1 评论 -
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 · 5472 阅读 · 0 评论 -
手把手搭建 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 · 1086 阅读 · 0 评论 -
uni-app 获取 android 手机 IMEI码
if (e.granted.length > 0) { // 权限被允许 // 调用依赖获取定位权限的代码 console.log('Granted!原创 2024-10-25 10:46:11 · 3705 阅读 · 1 评论 -
10分钟学会TS
文章主要介绍了 TypeScript 这一编程语言，它是 JavaScript 的超集，增加了类型注解和编译时类型检查等特性。对比了与 JavaScript 的区别，阐述了优缺点、使用场景、安装过程、特性及面试题相关内容，包括类型系统、编译执行、功能扩展等方面的差异，还涉及数组、元组、枚举、函数、接口、泛型等特性。原创 2024-11-05 10:41:06 · 1046 阅读 · 0 评论 -
常用的折叠展开过渡动画效果css
本文介绍了如何使用HTML、CSS和JavaScript实现平滑的折叠展开动画效果。通过CSS的transition属性控制max-height和padding变化，结合JavaScript切换类名来触发动画。关键点包括：使用max-height而非height实现灵活的高度变化，同步箭头旋转增强交互反馈，设置0.5秒过渡时间保证流畅性。该方案能有效管理页面空间，支持进一步优化如动态计算高度、添加淡入淡出等效果，提升用户体验和内容可访问性。原创 2025-07-18 17:54:29 · 804 阅读 · 0 评论 -
深入理解 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 · 521 阅读 · 0 评论 -
vue3使用七牛云上传文件
本文介绍了Vue3集成七牛云文件上传的完整解决方案。主要内容包括：1) 环境配置步骤，包括安装七牛云SDK和获取必要配置信息；2) 详细代码实现，涵盖文件选择、上传进度显示、结果预览等完整功能；3) 关键配置说明和安全注意事项；4) 常见问题解决方法。该方案实现了前端文件上传的核心功能，同时强调了安全规范，建议通过服务端生成上传凭证以避免暴露敏感信息。文章提供了完整的Vue组件代码和样式，可直接用于项目开发。原创 2025-05-24 17:43:00 · 914 阅读 · 0 评论 -
uniapp手机号密码加密登陆
本文介绍了在uniapp中使用CryptoJS实现登录时手机号和密码加密的方法。通过示例代码展示了如何安装CryptoJS库，并使用AES加密算法对敏感数据进行加密处理。文章详细说明了密钥和初始化向量的设置、加密过程的具体实现，以及如何将加密后的数据传输到服务器。该方法能有效提升登录信息的安全性，建议在实际应用中将密钥和向量严格保密，并与服务器端保持一致。原创 2024-09-14 15:12:56 · 983 阅读 · 0 评论 -
uniapp返回上一页携带参数并渲染页面
【代码】uniapp返回上一页携带参数并渲染页面。原创 2024-09-04 17:08:11 · 483 阅读 · 0 评论 -
uniapp底部按钮组
uni.showActionSheet再也不用自己傻傻的自己写样式了，复制直接用！原创 2024-09-25 17:47:56 · 387 阅读 · 0 评论 -
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 · 3346 阅读 · 10 评论 -
uniapp，跳转tabbar页面，并刷新页面
本文详细介绍了在UniApp中实现TabBar页面跳转并刷新的完整方案。核心是通过uni.switchTab跳转，在目标页面的onShow生命周期中实现刷新逻辑。文章提供了三种实现方式：自动刷新、精准控制刷新和强制重启页面，并给出了具体代码示例。同时指出了常见错误用法和推荐实践，如必须使用switchTab跳转、刷新逻辑应放在onShow中、及时清空刷新标记等。该方案适用于需要TabBar页面跳转后自动刷新的场景，帮助开发者解决这一高频需求。原创 2024-09-26 15:14:56 · 938 阅读 · 0 评论 -
配送时间选择器（uniapp）
【代码】配送时间选择器（uniapp）原创 2024-09-04 17:13:42 · 428 阅读 · 0 评论 -
uniapp微信小程序：轻松获取用户头像和昵称
简介：本文将详细介绍在uniapp微信小程序中如何获取用户的头像和昵称，提供清晰易懂的步骤和实例，帮助开发者快速实现用户信息的获取。在开发uniapp微信时，获取用户的头像和昵称是常见的需求。这些信息对于个性化推荐、用户认证和社交分享等功能至关重要。本文将介绍如何在uniapp微信小程序中轻松获取用户的头像和昵称。首先，确保你的uniapp项目已经正确配置，并且已经获得了微信小程序的授权。在微信小程序中，用户信息的获取需要通过微信授权来实现。因此，在开始之前，请确保你的小程序已经完成了微信登录授权。原创 2024-09-10 14:11:25 · 2535 阅读 · 2 评论 -
uniapp 提示框(showToast、showModal、showLoading)
uniapp 提示框(showToast、showModal、showLoading)原创 2024-09-25 17:42:22 · 2915 阅读 · 0 评论 -
怎么判断数组中存在不存在某个值
【代码】怎么判断数组中存在不存在某个值。原创 2023-08-21 11:08:40 · 248 阅读 · 1 评论 -
uniapp实现年月日时分秒选择器
一个前端日期时间选择器的Vue组件实现代码。该组件支持多级选择器，可精确到秒，包含年份(1900-2100)、月份、日期、小时、分钟和秒的选择功能，并实时格式化显示所选时间。代码结构完整，包含模板、脚本和样式三部分原创 2024-09-12 17:28:19 · 784 阅读 · 0 评论 -
微信小程序怎么实现界面水印印板
微信小程序实现界面水印印板（全）原创 2023-07-17 20:02:45 · 444 阅读 · 1 评论 -
基于uniapp H5页面调用微信授权获取code
【代码】基于uniapp H5页面调用微信授权获取code。原创 2024-04-25 16:03:08 · 2392 阅读 · 1 评论 -
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 · 3251 阅读 · 0 评论 -
vue点击按钮进行文件下载
在这个例子中，我们创建了一个按钮，并在包含下载文件的方法中创建了一个链接元素，并将其插入到DOM中。原创 2023-05-23 16:42:02 · 2896 阅读 · 0 评论 -
VUE常用的通信方式
vue组件传值方式：vue的组件传值分为三种方式：父传子、子传父、非父子（同级）组件传值。引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。原创 2023-05-17 15:30:00 · 237 阅读 · 2 评论 -
微信小程序是如何上传文件以及下载文件
微信小程序上传文件以及下载文件原创 2023-05-13 22:40:44 · 9866 阅读 · 4 评论 -
微信小程序模版消息提醒的方法以及要注意哪些事项
通过该API，小程序可以向用户申请授权，获取用户订阅消息的权限，然后向用户发送订阅消息。调用该 API 时，在第一次请求时，微信客户端会弹出授权窗口让用户确认是否授权订阅权限。在小程序中，不允许通过「授权提醒」类订阅消息发送广告、促销、抽奖等类似营销性质的订阅消息。如果发布此类订阅消息，小程序将会被封禁发布订阅消息的功能。3、如果用户授权订阅消息的权限，可以向用户发送订阅消息。需要注意的是，订阅消息模板需要在小程序后台进行配置和审核。是微信小程序中用于向用户请求订阅消息的 API。原创 2023-06-16 03:00:00 · 2091 阅读 · 1 评论 -
uniapp和微信小程序跳转问题
小程序免不了有很多跳转的功能，但是跳转了多个页面后也会有一些问题，今天遇到个页面保存多个后，不会再跳转页面的问题；首先；原创 2023-05-06 17:34:32 · 1327 阅读 · 1 评论 -
微信小程序之间是如何跳转的，并携带参数
2、在目标小程序中，接收参数并进行处理。在目标小程序中，可以使用wx.getLaunchOptionsSync API获取原始启动参数，并从中获取传递过来的参数。要实现小程序之间的跳转，需要使用小程序的跳转 API。1、在原小程序中，使用。API 跳转到目标小程序。原创 2023-06-15 15:48:42 · 6029 阅读 · 1 评论 -
如何计算时间差
如何计算时间差。原创 2023-07-07 16:44:24 · 350 阅读 · 1 评论 -
uniapp下拉选择组件
要解决第一和第二个问题，我们的自定义组件需要使用插槽，插槽用来放我们的初始显示组件，来灵活适配各种组件。以上代码都可以直接拷贝使用，无其他关联项，vue2、vue3、小程序、h5、APP都可用。2、初始显示的组件不能定死，可以是button，可以是view，或者是input，要灵活。3、dataList：传入的数据列表，列表为对象，多选时对象需要指定唯一标识。，但是不支持input组件，所以我们自己来实现一个。原创 2024-12-25 11:11:44 · 3738 阅读 · 0 评论