- 博客(52)
- 收藏
- 关注
RSS订阅原创 前端跨域解决方案（10）：document.domain
同源策略要求两个页面的完全一致，否则视为跨域。例如：主域名site.com与子域名a.site.com因域名不同，属于跨域；与因端口不同，属于跨域。允许将子域的域名设置为共同的主域名（如site.com），使浏览器认为不同子域 “同源”。核心逻辑如下：主页面a.site.com设置；iframe 页面b.site.com也设置；浏览器基于共同的主域名，允许两者之间的跨域资源访问。（修改（修改/etc/hosts仅解决域名跨域，。与即使设置，仍因端口不同无法跨域。若主页面为https。
2025-06-27 16:50:33
780
原创 前端跨域解决方案（9）：location.hash
是 URL 中的锚点（如#section：在 A 域名页面中，可通过 iframe 加载 B 域名页面，并修改其；：修改 hash 不会触发页面刷新，也不会将数据发送到服务器。这使得 location.hash 成为跨域通信的一种轻量级方式：通过 iframe 加载跨域页面，利用location.hash 传递数据。location.hash 跨域的核心流程如下：的页面；跨域 iframe 修改父页面的将数据存入hash；主页面监听hashchange事件：获取跨域数据。
2025-06-25 16:49:38
409
原创 前端跨域解决方案（8）：window.name
window.name 跨域方案兼容性佳，能支持所有主流浏览器，且相比 URL 参数可传递更多数据，纯前端实现无需服务器配置；不过其流程较为复杂，需借助 iframe 中转，数据传输为一次性且无法实时通信，安全性也较低，需确保 iframe 来源可信，适合用于报表页面数据加载、跨域文件预览等一次性、大数据量的跨域数据传递场景。这使得 window.name 成为跨域通信的一种特殊方式：通过 iframe 加载跨域页面，利用window.name 传递数据。1 window.name 核心。
2025-06-24 14:30:11
327
原创 前端跨域解决方案（7）：Node中间件
在前端开发中，我们常遇到：前端运行在，后端 API 在，跨域导致请求失败。：需后端开发配合，增加沟通成本；生产环境与开发环境配置不一致。：修改配置后需重启服务，打断开发流程；配置文件管理复杂。Node 中间件代理（如）可在前端开发服务器中直接配置跨域代理，无需修改 Nginx，适合开发阶段使用。：前端独立配置，无需等待后端调整：修改代理规则后无需重启服务器：开发环境专用配置，不影响生产部署：可拦截、修改请求 / 响应内容。
2025-06-23 14:43:12
538
原创 前端跨域解决方案（6）：Nginx
实际使用时，建议养成定期备份配置文件的习惯，修改配置后通过。除了直接配置 CORS 响应头，还可以通过 Nginx 反向代理来解决跨域问题，这种方法可将跨域请求转为同域请求，规避浏览器同源策略，此方法在微服务架构中尤为常见。通过 Nginx 处理跨域问题，既能发挥其高并发处理优势，又能简化前后端架构设计，是现代 Web 开发中不可或缺的基础技术方案。若项目采用微服务架构，或需要集中处理请求转发、负载均衡及缓存策略，反向代理方案更为高效 —— 它通过将跨域请求转换为同域请求，从根本上规避浏览器同源策略限制。
2025-06-20 15:28:11
551
原创 前端跨域解决方案（5）：websocket
WebSocket 是一种基于 TCP 协议的全双工通信协议，在浏览器与服务器间建立持久连接，实现实时数据交互。
2025-06-19 15:24:33
393
原创 前端跨域解决方案（4）：postMessage
postMessage是现代浏览器提供的跨域通信标准API，支持不同源窗口（如iframe、弹出窗口等）间的安全数据交换。
2025-06-18 17:46:05
845
原创 前端跨域解决方案（2）：JSONP
JSONP利用<script>标签的跨域特性实现数据获取，通过动态插入脚本并指定回调函数来绕过同源策略限制。以百度搜索建议为例，前端监听输入事件，动态请求接口并处理返回的JSONP数据（如callback({data})），渲染搜索结果。JSONP兼容性好但仅支持GET请求，且存在安全风险（如恶意脚本注入），适用于非敏感数据的跨域场景（如天气API）。复杂场景推荐使用CORS方案。
2025-06-16 15:21:30
401
原创 前端跨域解决方案（1）：什么是跨域？
摘要：URL由协议、认证信息、域名、端口、路径、查询参数和锚点组成，用于定位互联网资源。跨域是因浏览器同源策略引发的安全限制，要求访问资源必须协议、域名、端口相同。常见跨域场景包括前后端分离开发中的端口差异、调用第三方API的域名不同，以及iframe嵌套时的跨域操作限制。理解跨域机制有助于选择合适解决方案，确保开发便利性与用户数据安全。
2025-06-13 17:24:04
1133
原创 Vue3.5 企业级管理系统实战（二十二）：动态菜单
本文介绍了如何实现基于用户角色的动态菜单显示功能。首先修改Sidebar组件，使其获取动态生成的菜单数据，使用ElementUI菜单组件展示，并处理Logo显示和折叠状态。其次调整SidebarItem组件，实现菜单项的递归渲染，支持单个子菜单直接展示和多个子菜单以分组形式展示，同时处理路径解析和图标显示。这些修改使系统可以根据用户权限动态生成导航菜单，提升了系统的安全性和灵活性。
2025-06-03 16:15:29
306
原创 Vue3.5 企业级管理系统实战（二十一）：菜单权限
本篇介绍通过token验证用户身份，根据角色权限过滤菜单项，最终生成用户专属的左侧菜单树，实现前端路由的细粒度权限控制。
2025-06-01 17:10:21
477
原创 Vue3.5 企业级管理系统实战（二十）：角色菜单
本篇聚焦于角色菜单权限分配功能的实现，围绕“给角色赋予菜单权限”这一核心场景，从接口设计、组件封装到页面集成展开完整技术方案的阐述。
2025-05-23 16:01:03
441
原创 Vue3.5 企业级管理系统实战（十九）：菜单管理
篇幅原因，本节先探讨菜单管理页面增删改查相关功能，角色菜单，菜单权限，动态菜单等内容放在后面。
2025-05-19 15:00:39
358
原创 Vue3.5 企业级管理系统实战（十八）：用户管理
本文详细介绍了用户管理功能的实现，包括接口定义、Store管理以及用户界面的开发。首先，在src/api/user.ts中定义了用户相关的CRUD接口，如登录、获取用户列表、添加、删除和编辑用户等，使用Apifox进行模拟。接着，在src/stores/user.ts中实现了用户Store，管理用户状态和操作，如登录、登出、获取用户列表、添加、删除和编辑用户等。最后，在src/views/system/user/index.vue中实现了用户管理页面，包括用户列表展示、分页、查询、添加、编辑和删除用户等功能
2025-05-09 18:05:51
459
原创 Vue3.5 企业级管理系统实战（十七）：角色管理
本篇主要探讨角色管理功能，其中菜单权限这里先不实现，后续在菜单管理中再进行实现。接口部分依然是使用 Apifox mock 的。
2025-05-06 20:06:14
456
原创 Vue3.5 企业级管理系统实战（十六）：登录登出及鉴权
在实现登录之前，需要说明几点。首次登录系统，需要有一个 super_adimin 角色，角色名是限制死的，默认具备全部菜单路由权限。另外，还需要创建用户，用户信息包括用户名、密码、邮箱、手机号、是否启用，用户关联的角色等。角色和用户都可以通过写接口去添加，或者直接在数据库 Roles 和 Users 表中添加（这里只说明前端实现流程，接口数据库需自己准备模拟，本文我是通过ApiFox mock 的接口，username：1234，password：1234，演示图中会使用）。
2025-04-23 11:10:28
779
原创 Vue3.5 企业级管理系统实战（十五）：其他全局设置项
在设置面板中，除了主题颜色的选择设置，还可以添加其他全局配置选项，如 tagsView 导航栏，Logo 的显示隐藏配置等。
2025-04-16 16:52:20
458
原创 Vue3.5 企业级管理系统实战（十四）：动态主题切换
自定义组件要使用主题切换，需要在组件中进行添加，示例如下：示例1：<template>:class="{}":style="{theme : ''}"-- 省略其他代码 --></div>//从应用的路由配置文件中导入了所有的路由定义//...省略其他代码...//...省略其他代码...</script>//...省略其他代码...</style>示例2：<template><div><el-menurouter/>
2025-04-12 20:03:57
874
原创 Vue3.5 企业级管理系统实战（十三）：TagsView标签栏导航
本篇探讨标签栏导航 TagsView 组件的开发，TagsView 组件滚动及固定的处理、组件缓存、右键菜单功能、重定向实现等。
2025-04-03 16:54:08
588
原创 Vue3.5 企业级管理系统实战（十一）：全屏切换组件
本篇主要探讨如何在导航栏（Navbar）中添加全屏切换按钮，并借助功能强大的screenfull插件，丝滑实现全屏切换功能，为用户打造更为便捷、流畅的交互体验。
2025-03-28 17:03:38
486
原创 Vue3.5 企业级管理系统实战（八）：Sidebar组件开发 2
本篇通过 Pinia 实现侧边栏（Sidebar）的展开收起功能，并通过 Pinia 实现展开状态的持久化。
2025-03-06 17:28:23
662
原创 Vue3.5 企业级管理系统实战（七）：Sidebar组件开发 1
本文讲 Sidebar 组件里 el-menu 配置。包括设置样式变量，解决类型导入问题等。
2025-02-19 18:01:22
363
原创 Vue3.5 企业级管理系统实战（六）：Vue3中defineProps用法
本文介绍 Vue3 中defineProps，它是组件通信的重要函数，基本用法有运行时与基于类型声明两种。其支持多种类型，验证方式多样。Vue3.5 引入新特性，如响应式 Props 解构、新默认值写法，简化开发。通过电商示例展示其应用，提升开发效率与代码质量。
2025-02-11 17:50:52
1706
1
原创 Vue3.5 企业级管理系统实战（五）：图标组件
图标组件是前端开发中常用的元素，常见开发方式有三种：字体图标、SVG图标和图片图标。：把图标当字体处理，每个图标对应字体字符。可通过设置字体属性控制显示，如 Font Awesome 库，引入 CSS 文件后即可使用。优点是易改大小、颜色且不失真，文件小加载快；缺点是只能单色，更新需重新生成字体文件。：基于 XML 语法，可无损缩放、支持丰富效果。可内联 SVG 代码到 HTML，也能在前端框架封装成组件。优点是支持多色、无损缩放、可做动画交互；缺点是代码量大、旧版浏览器可能有兼容问题。
2025-02-07 18:08:51
1322
1
原创 Vue3.5 企业级管理系统实战（四）：组件及API自动导入配置
本文介绍如何在Vue 3项目中通过unplugin-vue-components和unplugin-auto-import插件实现Element Plus按需导入，优化性能。涵盖配置步骤，注重服务型组件导入，提高开发效率，减小应用体积。
2025-02-04 18:01:06
1082
原创 Vue3.5 企业级管理系统实战（二）：Router、Pinia 及 Element-Plus 集成
通过 pnpm 安装 Vue Router。
2025-01-12 17:12:04
964
3
原创 Vue3.5 企业级管理系统实战（一）：项目初始搭建与配置
本章旨在掌握使用 Vite 构建 Vue 3.5 项目框架的核心技能。通过整合 ESLint 9、Prettier 等现代化工具，打造流畅且质量上乘的开发流程。了解如何利用 Vue Router 实现路由控制，Pinia 进行状态维护，以及通过 Element Plus 提升用户界面的构建效率。此外，还将探讨如何运用 Sass 和 Unocss 精细化样式管理，以及如何集成 Iconify 图标库以实现灵活的图标导入。最终，学习高效组件管理的技巧，为项目开发提供有力支撑。
2025-01-08 21:41:09
1083
2
原创 微前端框架调研
平时我们写项目的时候，都是用单页应用，用组件去拼接项目，随着我们的功能越来越复杂，我们会发现，项目中的组件越来越多，有时项目上线后，我们只想公开组件的某个部分，在更改组件后，会出现一个问题，我们需要把整个个项目重新打包，打包时间会比较长（可能修改了一个组件，打包却需要5-10分钟）。另外，组件的维护也非常不方便（可能有成千上百个组件）。除此之外，一个项目可能有多个团队去开发（比如按模块去划分，交给不同的团队去开发），这样可以面临人员众多，不好管理，团队技术栈不统一的问题。
2024-09-23 17:51:35
1095
原创 在使用Elment-UI的Vue项目中使用iconfont上的第三方图标
在使用Element-UI的Vue项目中，Element-UI自带的图标数量比较少，往往不能满足项目需要，这时候需要引入第三方图标，比如常用的。
2023-11-27 18:16:07
638
原创 vue项目通过Electron生成桌面应用
vue项目通过Electron生成桌面应用一、安装1. 把electron的官方demo下载下来2. 安装cnpm3. npm start 启动electron4. 修改vue项目5. 打包vue项目，将打包出来的dist文件夹复制到electron项目的根目录下6. electron文件夹中，删除根目录下index.html文件7. electron文件夹中，修改main.js，修改打包文件路径为vue项目的index.html8. electron中，安装打包需要的依赖electron-packager
2021-12-23 15:14:51
1814
原创 Vue3.0快速入门
一、安装1. cdn<script src="https://unpkg.com/vue@next"></script>2. npm$npm install vue@next3. vue-cli 需要升级到Vue CLI v4.5 yarn global add @vue/cli@next # OR npm install -g @vue/cli@next 4. vite使用 vite 体验更快速#npm$ npm init vite-app <
2021-09-09 17:08:06
6441
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人