- 博客(249)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 如何防止XSS攻击绕过Bearer Token？
措施作用✅ Token 存 HttpOnly CookieJS 无法读取，彻底阻断 XSS 窃取✅ 短期 Access Token + 内存存储减少泄露窗口✅ 严格 CSP 策略阻止恶意脚本执行✅ 输出编码 + 安全编码习惯从源头杜绝 XSS✅ 敏感操作二次验证纵深防御🔐终极建议不要把 Bearer Token 存在 localStorage/sessionStorage！优先采用。
2025-12-01 17:09:33
706
原创 API 使用 Bearer Token 为什么可天然防 CSRF
Bearer Token 能天然防御 CSRF，是因为它不依赖浏览器自动携带机制，而是由前端主动、显式地附加到请求中。攻击者无法在跨站请求中注入有效的 Token，因此无法伪造用户身份操作。这正是现代无状态 API（如 RESTful API）普遍采用 Token 认证而非传统 Cookie + Session 的重要安全优势之一。
2025-12-01 17:07:41
521
原创 XSS攻击和CSRF攻击的区别, 完整示例攻击和防御介绍
XSS 是一种注入型攻击，攻击者通过在网页中注入恶意脚本（通常是 JavaScript），当其他用户浏览该页面时，脚本会在其浏览器中执行，从而窃取 Cookie、会话令牌、重定向到钓鱼网站等。CSRF 攻击利用用户已登录的身份，在用户不知情的情况下，诱使其浏览器向目标网站发送恶意请求（如转账、改密码）。浏览器自动携带 Cookie。特性XSSCSRF攻击目标用户（窃取信息、控制浏览器）应用（以用户身份执行操作）是否需要用户交互通常需要（访问含恶意脚本页面）通常需要（访问恶意页面）
2025-12-01 17:06:29
867
原创 CSS中position和display 用法和区别对比
position：适用于需要精确控制元素位置的场景，尤其是动态交互（如滚动吸附、固定定位）。通过是否脱离文档流和参考对象的不同，实现灵活的定位逻辑[5][6display：用于定义元素的布局角色，例如将行内元素强制转为块级以便于设置宽高，或使用 flex/grid 构建复杂排列。其核心在于改变元素的默认布局行为[2][3。
2025-11-18 11:59:08
403
原创 创建Vue2和Vue3项目区别对比和对应示例演示
Vue3 在性能、开发体验和可维护性方面都有显著提升，是现代 Vue 开发的推荐选择。· 现有 Vue2 大型项目可逐步迁移，Vue3 提供兼容性构建。Vue2 与 Vue3 项目创建对比及示例演示。Vue2 入口文件 (main.js)Vue3 入口文件 (main.js)Vue3 项目结构 (Vite)· 新项目建议直接使用 Vue3。方式二：使用 Vite（推荐）方式一：使用 Vue CLI。方式一：使用 Vue CLI。方式二：直接引入 CDN。方式三：直接引入 CDN。
2025-11-12 22:13:22
469
原创 vite创建vue2项目
请注意，尽管这种方法可行，但由于 Vite 本身是为 Vue 3 设计的，某些功能可能无法完全正常工作或需要额外配置。使用 Vite 创建一个 Vue 2 项目并不是一个直接支持的操作，因为 Vite 官方仅支持 Vue 3。不过，你仍然可以通过一些额外的配置来使用 Vite 构建 Vue 2 项目。例如，Vue 3 的 Composition API 不能在 Vue 2 中使用，所以你需要使用 Vue 2 的 Options API。由于我们需要使用 Vue 2，因此需要安装一些额外的依赖。
2025-11-12 21:57:33
341
原创 Bootstrap和BootstrapVue功能对比和使用示例对比
它提供了真正的 Vue 组件，让你能够充分利用 Vue 的数据绑定、响应式状态管理和事件处理机制。这种方式使得代码更模块化、更易维护，尤其适合复杂的单页面应用（SPA），并且它摒弃了对 jQuery 的依赖，让项目更现代、轻量。组件是纯粹的 Vue 组件，支持 Vue 的指令、数据绑定和事件处理。一个将 Bootstrap 的样式和组件与 Vue.js 组件化开发方式相结合的UI组件库。· Bootstrap 的核心优势在于其庞大的预定义样式类，让你通过编写 HTML 就能快速搭建出风格一致的页面。
2025-11-12 07:05:41
808
原创 Vue项目集成bootstrap步骤及动态静态修改属性样式完整示例
至此，你已具备在 Vue 项目中使用 Bootstrap 的完整能力，包括全局引入、按需自定义、静态与动态 class/style 控制。Vue + Bootstrap 完整集成与样式控制示例。二、静态与动态样式控制示例。
2025-11-11 20:07:45
468
原创 bootstrap完整使用方式和示例总结
同时，Bootstrap 的某些组件（如下拉菜单）依赖于 Popper（已包含在 bootstrap.bundle.min.js 中），并且其插件需要 jQuery（Bootstrap 5 已不依赖 jQuery，但早期版本需要）。· 间距 (Spacing)：使用 m-* (外边距) 和 p-* (内边距)，如 mt-3 (上外边距)、pb-2 (下内边距)。Bootstrap 的网格系统是布局的核心，它将屏幕分成12 列，通过行 (row) 和列 (col) 来创建布局。
2025-11-11 18:59:23
814
原创 bootstrap, element-ui, ant Design 分别适用什么场景以及对应组合的js框架或者库， 如 jquery, vue,react 等
以下是 Bootstrap、Element-UI 和 Ant Design 的适用场景及对应的 JavaScript 框架或库搭配：适用场景搭配的 JS 框架/库适用场景搭配的 JS 框架/库适用场景搭配的 JS 框架/库
2025-11-05 08:33:15
592
原创 Vue 中 ＜keep-alive＞ 功能介绍，使用场景，完整使用示例演示
缓存组件实例：“”是 Vue 提供的一个内置抽象组件，用于缓存不活动的组件实例，而不是销毁它们。它自身不渲染任何 DOM 元素，但能保留被包裹组件的状态（包括数据、DOM 状态等），避免重复渲染导致的组件状态丢失[1][5性能优化：通过减少组件的创建和销毁开销来提高应用性能。在频繁切换组件的场景下，使用 “” 可以避免每次都重新加载和初始化组件，从而提升用户体验[1][6灵活的控制方式：提供了includeexclude和max属性来进行更精细的缓存控制。include。
2025-10-29 18:28:24
904
原创 在Vue项目中平滑地引入HTML文件
这是 Vue 推荐的开发方式，适用于大多数项目，尤其是中大型项目。它将 HTML 模板、JavaScript 逻辑和 CSS 样式封装在一个文件中，便于管理和维护代码。：当 HTML 内容存储在单独的文件中，需要在运行时动态加载并显示时可以使用此方法。例如，根据用户的操作或页面状态按需加载不同的 HTML 片段。：适用于需要将静态或动态获取到的 HTML 字符串直接渲染到页面上的情况。：适合于构建灵活的、可复用的组件，允许父组件向子组件传递 HTML 内容，实现内容的分发和定制化。
2025-10-29 17:56:49
922
原创 Vuex 中 mapGetters, mapState 功能介绍，使用场景，使用示例
mapState作用：将 Vuex store 中的 state（状态）映射为组件的计算属性。这样可以直接在组件中通过this访问这些状态，而无需每次都编写。目的：简化代码，提高可读性和可维护性，减少重复性的代码书写。mapGetters作用：将 Vuex store 中的 getters（获取派生状态的方法）映射为组件的计算属性。使得在组件中能够方便地使用这些经过加工处理后的数据。目的：同样是为了简化对 getters 的访问和使用，让代码更加清晰简洁。
2025-10-27 18:23:16
537
原创 vuex的getter使用
state: {todos: [ /* ...待办事项列表 */ ],userInfo: { name: '张三', age: 20 }},getters: {// 单个参数 (默认接收 state)},// 多参数 + 箭头函数简写${state : {todos : [ /* ...待办事项列表 */ ] , userInfo : {name : '张三' , age : 20 } } , getters : {
2025-10-27 18:21:19
603
原创 router-view 和 router-link 跳转加载是刷新本页面还是局部，示例区别对比
在Vue.js应用中，和是两个核心组件，用于实现单页面应用（SPA）内的路由跳转与视图渲染。
2025-10-24 11:55:48
300
原创 如何用router-view实现嵌套路由，完整使用示例
要素作用示例值path路由匹配路径'user''profile'component匹配成功时加载的组件UserLayoutchildren定义子路由子路由的渲染容器放在父组件模板中生成路由链接通过这种方式，你可以构建出清晰的多级路由结构，适用于后台管理系统、电商详情页等复杂场景。
2025-10-23 20:51:47
498
原创 Vue项目页面间，页面中跳转及刷新规划，何时使用router-view,router-link,iframe,slots ，使用场景，及对应场景的完整使用示例
在Vue项目中，页面间的跳转、刷新以及组件的使用规划对于构建高效且用户体验良好的应用至关重要。以下是关于何时使用iframe和slots的详细指导，包括它们的使用场景和完整示例。
2025-10-23 20:28:12
452
原创 vue 项目中 components、views、layout 各个目录规划，组件、页面、布局如何实现合理搭配，实现嵌套及跳转合理，使用完整说明
在Vue项目中，合理规划componentsviews和layout目录结构是构建可维护性高、扩展性强应用的关键。
2025-10-22 17:20:36
928
原创 vue 中 file-saver 功能介绍，使用场景，使用示例
核心作用：“file-saver”是一个轻量级的 JavaScript 库，专门用于在浏览器中保存文件。它提供了简单易用的 API，能帮助开发者轻松实现将数据以文件的形式下载到用户的计算机上的操作，无需后端服务器的参与。支持的文件类型多样：可以使用该库将数据保存为常见的多种文件格式，如文本文件（.txt）、CSV 文件（.csv）、JSON 文件（.json）、Excel 文件（.xlsx）、图片等。基于 Blob 对象工作：通常需要先创建一个包含数据的 Blob 对象，然后使用其提供的saveAs。
2025-10-21 19:34:27
433
原创 vue 中 clipboard 功能介绍，使用场景，完整使用示例
在Vue中，实现剪贴板（clipboard）功能通常借助第三方库来完成，如或等。这些库提供了简单易用的API，允许开发者将文本内容快速复制到用户的剪贴板中，从而提升用户体验。跨浏览器兼容性：支持大多数现代浏览器，无需依赖Flash或其他臃肿的框架。简洁配置：不需要复杂的步骤来配置和使用，大大降低了开发的复杂度。事件回调：提供成功和错误的事件回调函数，方便对复制操作进行反馈和错误处理。灵活集成：可以作为插件全局注册，也可以在单个组件内局部引入和使用。
2025-10-21 16:25:01
371
原创 vue 中 directive 作用，使用场景和使用示例
/ 注册一个全局指令 `v-focus`el.focus();// 当元素被插入到DOM后自动获取焦点});// 在组件中使用该指令<template><input v-focus placeholder="请输入内容...">在这个例子中，我们定义了一个名为v-focus的指令，它会在元素被插入到DOM后自动调用focus()方法，使输入框获得焦点。
2025-10-21 14:57:30
490
原创 moment.js 和 date-fns 功能介绍，使用场景介绍，对应功能点使用示例
综上所述，moment.js功能全面但相对较重，适合复杂且对兼容性要求高的项目；date-fns则以轻量级、模块化和函数式编程为特点，更适合现代前端框架和追求性能优化的场景。在选择时，可根据项目的具体需求来决定使用哪个库。
2025-10-21 13:54:58
511
原创 js 处理数组、对象、等特殊类型操作汇总
JavaScript 提供了丰富的内置方法和技巧来处理数组、对象及其他特殊类型（如nullundefined、日期等）。
2025-10-21 11:50:57
1212
原创 CSS3 全部功能点介绍，使用场景，对应功能点完整使用示例
综上所述，CSS3提供了丰富的功能和特性，极大地拓展了网页设计和交互的可能性。通过合理运用这些功能，开发者可以创建出更加美观、响应迅速且具有良好用户体验的网站和应用程序。
2025-10-21 10:09:55
346
原创 HTML5 功能介绍，使用场景，对应功能点完整使用示例
语义化标签：引入了如<header><footer><nav><article>等具有明确语义的标签，使文档结构更清晰，便于搜索引擎解析和开发者维护[5多媒体支持：内置<video>和<audio>标签，无需依赖第三方插件（如Flash）即可播放音视频内容[4][5图形绘制：提供<canvas>元素用于动态绘制图形，支持2D和3D绘图；以及SVG用于矢量图形展示[5本地存储：引入和，允许在客户端存储大量数据，减少与服务器的交互[5离线应用：通过和Manifest支持离线访问Web应用[5表单增强。
2025-10-20 15:53:10
1366
1
原创 Sortablejs 功能介绍，使用场景，使用完整示例
Sortable.js 是一个现代、轻量级、无依赖的原生 JavaScript 拖拽排序库，压缩后仅约 30 KB，支持现代浏览器和触摸设备，兼容 Vue、React 等主流框架。它允许用户轻松实现列表、表格、网格等元素的拖拽排序，并提供丰富的配置选项和事件回调。
2025-10-18 23:10:27
529
原创 Quill 富文本编辑器 功能介绍，使用场景说明，使用示例演示
文本格式化基础样式：支持加粗、斜体、下划线、删除线等常见的文字效果，可改变字体颜色、背景色，调整字体大小。段落排版：能设置段落的对齐方式（左对齐、居中对齐、右对齐），添加有序或无序列表，方便组织内容结构。标题级别：提供多级标题设置，用于区分不同层次的内容。元素插入链接与图片：允许插入超链接，指向网页或其他资源；也能插入图片、视频等多媒体元素，丰富页面展示形式。代码块：适合插入编程代码片段，并且可以结合语法高亮工具，使代码更易读。引用与表格。
2025-10-16 18:36:09
1244
原创 svg 文件格式，使用方式及使用场景，使用示例
定义：SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，由W3C提出并维护。它通过路径、线条、颜色和文本等元素来描述图像内容，而不是像JPEG或PNG那样基于像素点构成[2][4特点：无损缩放，文件体积小，可读可改，支持动画与交互，易于版本控制与协作[2。
2025-10-16 11:12:34
1156
原创 nprogress 功能介绍和使用示例演示
轻量级进度条组件nprogress是一个轻量级的进度条库，主要用于在页面加载或路由切换时显示一个进度条，提升用户体验[1][2][4它通过在页面顶部创建一个div并使用fixed定位来实现进度条的效果[1多场景适用：适用于页面加载、Ajax请求、文件上传/下载、表单提交等多种异步操作场景，为用户提供明确的进度反馈[5][6丰富的配置选项：用户可以通过配置选项自定义进度条的外观和行为，如最小百分比、动画速度、是否显示加载图标等[2][4自动增量模拟真实加载。
2025-10-15 17:26:50
415
原创 vue.config.js 文件功能介绍，使用说明，对应完整示例演示
以下是是 Vue CLI 项目的，用于定制化项目构建流程。💡：所有配置最终会合并到的内部规则中，优先级高于默认值。
2025-10-15 15:21:19
540
原创 UI 工程师和UE工程师 区别对比
总的来说，UI工程师是“产品的美容师”，专注视觉表现与前端实现；UE工程师是“体验架构师”，侧重用户行为与底层逻辑优化。选择时需结合兴趣偏好（艺术vs技术）、职业规划（前端开发vs引擎开发）以及行业趋势（如元宇宙对UE的需求增长）。UI工程师与UE工程师虽同属数字化产品设计领域，但二者在核心定位、工作内容、技术要求及职业发展方向上存在显著差异。
2025-10-10 15:58:11
934
原创 java 开发常用框架的高级注解使用汇总及对应demo演示
综上所述，Java开发常用框架提供了丰富的高级注解，涵盖Spring核心、MVC、MyBatis-Plus等多个方面。通过运用这些注解，可以显著提升开发效率、简化代码、增强可维护性，并充分利用框架的特性来实现各种功能需求。
2025-10-09 21:42:50
373
原创 spring 框架中常用注解汇总，及对应作用介绍、使用示例demo演示
综上所述，Spring 框架提供了丰富的注解来简化企业级 Java 开发。通过合理利用这些注解，可以提高代码的可读性和可维护性，同时减少样板代码的数量。
2025-10-09 16:14:21
351
原创 js-cookie 功能介绍和使用示例演示
简化 Cookie 操作：提供简洁直观的 API，如和，让设置、获取和删除 Cookie 变得轻松便捷[1][3][4跨浏览器兼容性：支持所有现代浏览器以及旧版浏览器（如 Internet Explorer 6+），确保广泛的设备支持[1][2][4轻量级：压缩后的文件大小极小，对页面加载性能影响甚微，适合各类项目使用[1][2][4模块化支持：支持 CommonJS、AMD 以及 ES6 模块导入方式，便于在不同项目中灵活集成[1][2][4遵循 RFC 6265 标准。
2025-09-29 14:36:39
456
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人