- 博客(78)
- 收藏
- 关注
RSS订阅原创 前端安全常见问题与防范措施
前端安全防护要点 本文系统介绍了前端开发中的主要安全威胁及应对策略： 资源安全：通过SRI校验CDN资源完整性，CSP限制资源加载来源 XSS防护：输入过滤/输出编码，禁用危险API，配合CSP和HttpOnly Cookie CSRF防御：采用Token验证、SameSite Cookie及Origin检查机制 环境隔离：使用iframe沙箱属性，通过X-Frame-Options防止点击劫持 传输安全：强制HSTS策略确保HTTPS连接，防范中间人攻击 综合方案：各安全措施需组合使用，定期进行安全扫描和
2025-08-21 15:14:50
1031
原创 Nginx学习记录
本文为前端开发者提供Nginx快速入门指南，涵盖核心功能与配置实践。主要内容包括：1）Nginx核心概念（静态资源部署、反向代理和负载均衡）；2）安装方法与常用命令；3）配置文件结构解析；4）具体配置示例，包括前端项目部署、API反向代理和负载均衡策略；5）调试优化技巧与常见问题排查。文章还简要介绍了HTTPS、HTTP2等高级功能扩展，帮助开发者快速掌握Nginx部署技能，提升项目部署效率和性能优化能力。
2025-08-21 14:53:04
423
原创 Vue 项目安全设置方案：XSS/CSRF 防护指南
Vue项目安全防护方案包含XSS和CSRF综合防御措施。前端采用DOMPurify净化HTML内容，自动转义用户输入，并设置严格的内容安全策略(CSP)。CSRF防护方面，通过Axios拦截器自动添加CSRF Token，在Vuex中实现Token存储与刷新机制。路由安全通过导航守卫进行权限校验，Vuex数据存储前进行深层净化处理。该方案强调前后端协同，实现了从数据输入到渲染的全流程安全防护。
2025-08-08 19:45:00
1232
原创 vue项目常见BUG和优化注意事项
本文总结了npm依赖冲突与Element UI常见问题的解决方案。对于npm依赖冲突，提供了四种解决方法：使用--legacy-peer-deps或--force选项、更新依赖版本、清除缓存重新安装。针对Element UI组件问题，重点介绍了Table组件优化（row-key属性使用）、下拉框在el-dialog中的显示问题、表单验证改进方案，并详细讲解了Upload组件实现多文件上传的完整方案，包括代码实现与后端接收示例。最后提及了使用element-size-sensor插件优化组件性能的方法。
2025-08-08 15:20:23
943
原创 Nginx 部署前端项目、负载均衡与反向代理
Nginx配置指南：涵盖前端项目部署、反向代理与负载均衡。静态资源部署通过server块配置根目录和日志路径；反向代理使用proxy_pass转发API请求，支持请求头改写和超时控制；负载均衡通过upstream定义多台后端服务器，支持轮询、权重和IP哈希策略。关键配置包括静态资源缓存、WebSocket代理、路径重写和超时设置，同时提供HTTPS、CORS和流量控制等实战技巧。适用于不同场景的Nginx服务器优化需求。
2025-08-08 14:16:16
498
原创 Webpack 5 高性能配置方案
Webpack 5 通用高性能配置方案 本文提供了一个优化的Webpack 5通用配置方案，支持多种前端框架和技术栈。主要特点包括： 多环境配置：区分开发和生产环境，分别优化构建策略 性能优化：包含代码分割、缓存策略、资源压缩等功能 模块支持：完整处理JS/JSX/TS、CSS模块、图片/SVG等资源 高级特性：集成多线程加载、Babel缓存、Tree-shaking等优化手段 插件丰富：包括HTML生成、资源清理、Gzip压缩、打包分析等工具 配置方案支持热更新、代码分割、按需加载等现代Web开发需求，同
2025-08-07 15:09:11
690
原创 Webpack核心概念全景指南：从入门到精通
Webpack作为现代前端开发的核心工具，能够有效解决模块化开发、资源优化和代码转换等关键问题。本文系统介绍了Webpack的核心概念、环境搭建、基础配置、Loader处理、Plugin应用和高级优化技巧。主要内容包括：Webpack的模块化打包本质，Node.js环境配置，多入口和开发服务器设置，各类资源Loader的对比与实现，核心插件（HtmlWebpackPlugin、MiniCssExtractPlugin等）的应用，以及HMR热更新和Source Map策略等高级特性。通过模块化示例和配置代码，
2025-08-07 14:33:22
801
原创 gitHub 中 git clone 报错 SSL certificate problem: unable to get local issuer certificate
github 复制的链接 报错 SSL certificate problem: unable to get local issuer certificate 教你如何解决
2024-03-15 17:25:30
1867
原创 状态管理工具 PInia 初步上手指南
Vuex 作为一个老牌 Vue 状态管理库，大家都很熟悉了。Pinia 是 Vue.js 团队成员专门为 Vue 开发的一个全新的状态管理库，并且已经被纳入官方 github，为什么有 Vuex 了还要再开发一个 Pinia？先来一张图，看下当时对于 Vuex5 的提案，就是下一代 Vuex5 应该是什么样子的。
2024-03-15 14:55:12
1689
原创 开发新闻：Vue 3.4，Nuxt 3.9和React Server组件分析
Vue更新了一个重写的模板解析器和一个重构的反应性系统，以及对React Server组件的分析2024年1月6日上午11：00通过Vue的创建者发布了版本，这是一个用于构建用户界面的JavaScript框架。你说这个版本包括“实质性的内部改进”，比如重写的模板解析器和重构的反应性系统。修改后的模板解析器对于所有大小的模板都快了两倍，You指出。“以前，Vue使用递归下降解析器，依赖于许多正则表达式和前瞻搜索，”你写道。的更新日志可以在GitHub上找到。
2024-03-12 10:16:03
1070
原创 2024年JavaScript前端框架维护者预测
2024年的前端会是什么样子？自从我们打破了我们的水晶球，The New Stack与Angular，Next.js，React和Solid的创建者和维护者讨论了他们2024年的计划。下面是前端开发人员在未来一年可以期待的概述。
2024-03-12 09:22:04
1548
原创 vue 使用 PrintJs 实现打印pdf效果
Print.js主要是为了帮助我们直接在应用程序中打印PDF文件，而无需离开界面，并且不使用嵌入。对于用户不需要打开或下载PDF文件的特殊情况，他们只需要打印它们。例如，当用户请求打印在服务器端生成的报告时，这种方法就很有用。这些报告将以PDF文件的形式发回。在打印这些文件之前不需要打开它们。Print.js提供了一种在我们的应用程序中打印这些文件的快速方法PDF文件必须从托管您的应用的同一域提供。Print.js使用iframe在打印之前加载文件，因此，它受到同源策略的限制。
2024-03-08 17:10:37
9298
原创 html 如何引入 百度地图
要在网页中创建和初始化一个地图，通常需要经过以下几个步骤：获取API密钥（Access key 百度地图开放平台自行注册获取）、加载API脚本、编写HTML、编写JS代码。
2024-03-08 14:50:51
2323
原创 全端二维码生成插件
经过测试，PC端浏览器可以下载，部分安卓自带或第三方浏览器可以下载，安卓微信浏览器不适用，移动端iOS所有浏览器均不适用，差异较大，还是推荐各位导出文件给图片组件显示，然后提示用户通过长按图片进行保存这种方式。uQRCode基于Canvas API封装了一套方法，建议开发者使用canvas生成，一键调用，非常方便。必须在导出临时文件路径以后成功后再执行保存。uni-app通用保存方式（H5除外）移步插件市场-----官方文档 -----
2024-02-28 17:46:43
703
原创 js-cookie 的使用
1、当数据较大时，可以利用localstorage，存数据时候写入一个时间，获取的时候再与当前时间进行比较。2、如果数据不超过cookie的限制大小，可以利用cookie比较方便，直接设置有效期即可。
2024-02-22 11:32:33
613
原创 npm install 报错npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR................
npm 证书过期 导致 npm install 报错 npm ERR! code CERT_HAS_EXPIREDnpm ERR! errno CERT_HAS_EXPIREDnpm ERR! request to https://registry.npm.taobao.org/vue-slick-carousel/download/vue-slick-carousel-1.0.6.tgz failed, reason: certificate has expirednpm ERR! A comp
2024-02-18 15:41:50
1245
原创 微信小程序自定义tabber
微信小程序是一种新型的应用程序，可以在微信内部直接运行，无需下载和安装，具有轻量、易开发、易传播等特点。作为一种新型的应用形态，微信小程序在近几年已经得到广泛应用和推广。然而，微信小程序的开发规范和限制也给开发者带来了很多挑战，其中之一就是原生tabbar的限制。默认情况下，微信小程序的底部导航栏（也称tabbar）是固定的，开发者无法更改其样式和布局，也无法实现更加个性化和独特的设计。为了解决这个问题，开发者可以选择自定义tabbar，从而实现更加灵活和自由的设计。
2023-11-30 15:07:46
1144
原创 elementui el-upload 上传文件
在使用element中的el-upload上传文件或者图片时，需要先把el-upload的自动上传改为手动上传:auto-upload=“false”然后el-upload内部会调用this.$refs.upload.submit();方法，从而实现多个文件上传。提示：以下是本篇文章正文内容，下面案例可供参考需要注意的是accept 设置了上传文件类型 可自己更换:limit=“1” 设置了上传最大个数为1。
2023-11-01 09:09:41
1105
原创 uniapp h5 MD5加密
2.然后，在需要使用 MD5 加密的地方，引入 CryptoJS 代码库：3.接下来，我们定义一个要加密的明文消息：4.然后，我们定义一个函数 md5Encrypt 来进行 MD5 加密：5.在这个函数中，我们使用 CryptoJS.MD5() 方法对消息进行加密，并通过 .toString() 方法将结果转换为字符串表示。最后，我们调用 md5Encrypt 函数并将明文消息传递给它：
2023-10-13 17:02:39
1677
原创 uniapp h5支付宝支付后端返回Form表单，前端如何处理
uniapp h5 支付宝支付，后端返回一串form表单，前端如何拿到支付串并且调用支付。
2023-08-02 17:54:19
6399
3
原创 用插件(vue-draggable)实现拖拽效果
在上面的代码中，我们使用 draggable 组件来包装需要拖拽的元素，通过 v-model 绑定数据源，通过 options 属性设置分组信息，然后在内部使用 v-for 遍历数据，并使用 key 属性来保证元素唯一性。接下来，你可以在你的项目中使用 vue-draggable 来实现更加复杂的拖拽效果。
2023-04-13 16:18:12
1797
空空如也
uniapp h5微信支付关闭原网页问题如何解决
2023-10-13
TA创建的收藏夹 TA关注的收藏夹
TA关注的人