- 博客(42)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 前端跨域以及解决方案
跨域指的是浏览器出于安全考虑，实施了同源策略。它限制了从一个源加载的文档或脚本如何与另一个源的资源进行交互。同源策略规定：如果两个 URL 的协议（Protocol）、域名（Host）、端口（Port）完全一致，则这两个 URL 是同源的。只要其中任何一项不一致，就是跨域（或称不同源）。浏览器会对这种跨域的请求或交互进行限制。| 当前页面URL | 请求的URL | 是否同源 | 原因 |是| 协议、域名、端口完全相同 |否协议不同（HTTPS vs HTTP） |否域名。
2025-09-12 16:08:31
526
原创 WebSocket连接状态监控与自动重连实现
下面我将实现一个具有连接状态监控和自动重连功能的WebSocket聊天室界面。功能说明这个实现包含以下核心功能：连接状态监控：自动重连机制：心跳检测：连接统计：用户控制：这个实现提供了健壮的WebSocket连接管理，适合在生产环境中使用。
2025-09-12 16:07:06
1033
原创 前端WebSocket实时通信实现
本文介绍了如何使用WebSocket在项目中实现实时通信功能。通过创建一个简单的聊天室界面，演示了WebSocket的核心实现：建立连接、发送接收消息、状态显示和错误处理。文章包含完整的HTML代码示例，采用现代化UI设计，实现了连接状态指示、消息收发界面和输入控制等功能。代码中使用了公共WebSocket测试服务器(wss://echo.websocket.org)进行演示，展示了前端如何初始化WebSocket连接、处理连接状态变化以及收发消息的基本流程。
2025-09-12 16:06:06
1317
原创 从零开始搭建一个新的项目，需要配置哪些东西
现代前端项目搭建流程可分为四个关键阶段： 技术选型：选择包管理工具（推荐pnpm）、框架（React/Vue+TS）、构建工具（Vite/Webpack）； 工程化配置：集成ESLint+Prettier规范代码，配置Git Hooks实现提交检查，选择路由/状态管理方案； 开发优化：管理环境变量，封装HTTP请求，实施代码分割和打包分析； 质量保障：规划测试方案（Jest单元测试+Cypress端到端测试），采用Storybook编写组件文档，准备CI/CD自动化部署流程。该流程注重开发效率、代码质量和项
2025-09-12 15:50:10
1013
原创 前端自定义指令 v-permission 的实现逻辑
v-permission指令的核心逻辑是在元素挂载/更新时校验用户权限，不满足则移除元素。实现步骤：1) 维护权限列表和校验函数；2) 定义指令，在mounted/updated钩子中调用校验；3) 全局注册指令；4) 组件中使用指令控制元素显隐。优化点包括：响应式权限更新、新旧值对比减少DOM操作、错误处理等。Vue2与Vue3实现原理相同，主要区别在于钩子函数名称。该指令通过动态权限校验实现细粒度的前端权限控制。
2025-09-12 15:46:58
687
原创 面试高频问题总结
本文总结了前端开发中的核心知识点，主要包括CSS、JavaScript和TypeScript的重要内容。 CSS部分： 介绍了三种实现不定宽高div水平垂直居中的方法 解释了CSS选择器的优先级规则 区分了重绘和回流的概念及影响 总结了flex布局的常用容器属性 JavaScript部分： 对比了箭头函数与普通函数的区别 分析了let/const/var的作用域差异 解释了深拷贝与浅拷贝的实现方式 详细说明了this关键字的指向规则 介绍了闭包的概念、优缺点及应用场景 阐述了原型和原型链的定义 TypeSc
2025-09-03 16:22:24
1067
原创 【qiankun】使用总结
主应用使用的技术栈：Angular 18 + Antd。微应用使用的技术栈：React 18 + Antd。新增 app.module.ts。
2024-08-28 16:34:54
528
原创 Angular 开发编码规约
以下是一个更加详细的Angular开发编码规约，涵盖了项目结构、命名约定、代码风格、组件与模板、服务与依赖注入、模块、路由、测试、文档与注释、版本控制等方面的详细指导。
2024-07-15 15:49:36
1402
原创 微信小程序下载、预览附件
官方api地址：https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html。官方api地址：https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html。
2023-09-15 15:48:44
944
原创 【小程序-拖拽组件】
原文地址：https://blog.youkuaiyun.com/weixin_41192489/article/details/129593275。原文地址：https://www.cnblogs.com/gxLog/p/15876286.html。
2023-09-12 10:02:14
407
原创 Git 详细使用教程
有一个远程的仓库用于存储代码，每个用户的本地会生成远程仓库的完整镜像，生成本地仓库，每个人通过将代码保存到本地仓库中，本地仓库会在有网络的的时候将数据同步到远程仓库中，远程仓库发生更新，会将数据同步到每个用户的本地仓库中，实现代码同步。如果版本号2的内容多于版本号1的内容，差异部分显示绿色，如果版本号2的内容小于版本号1的内容，差异部分显示红色。3.合并分支时，如果出现冲突，只能手动处理，再次提交，一般的作法，把自己的代码放到冲突代码的后面即可。比较仓库区版本的内容：git diff 版本号1 版本号2。
2023-02-22 10:58:11
211
原创 项目初始化遇到的问题
第二种方式：删除之前下载的node_modules。第三种方式：检查node的版本号是否正确。第一种方式： 采用 cnpm装包。
2022-11-22 15:25:38
186
原创 项目开发遇到的问题
问题的原因：在于mac系统开发和windows系统的换行符不同导致打包编译出错。同理，对于less文件和sass文件出现这样的问题，可仿制处理。解决方案：在控制台执行以下指令。
2022-08-04 17:50:30
236
原创 Jenkins安装教程【windows】
解锁jenkins。安装参考地址：https://blog.youkuaiyun.com/weixin_49026134/article/details/124026533。官方安装指引：https://www.jenkins.io/zh/doc/book/installing/选择本地JDK安装路径 >> 点击"Next" 直到安装完成 >> 点击“Finish”修改端口号 >> 点击"Test Port"，有个绿色勾出现 >> 点击"Next"点击“选择插件来安装”>>点击“建议”>>点击“安装”跳过插件的安装。.
2022-08-03 14:48:14
445
原创 认识Leaflet
官网地址：https://leafletjs.com/SlavaUkraini/examples/quick-start/创建token的地址：https://account.mapbox.com/access-tokens快速搭建一个leaflet地图的index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-eq
2022-04-12 15:35:52
341
1
原创 vue2.0组件边界情况处理
访问元素 & 组件访问根实例在每个 new Vue 实例的子组件中，其根实例可以通过 $root property 进行访问。例如，在这个根实例中：// Vue 根实例new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ... */ } }, methods: { baz: function () { /* ... */ } }})所有的子组件都可以将这个实例作为一个
2021-11-16 09:10:19
470
原创 vue2.0官方文档学习（介绍、Vue实例、模板语法、计算属性和监听器）
安装vue安装方式 // 使用script直接引入 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> // 使用npm安装 npm install vuevue3.0创建项目vue create hello-worldvue2.0创建一个项目npm install -g @vue/cli-init// `vue init` 的运行效果将会跟 `vue-cli
2021-11-14 21:53:08
12506
转载 小程序中的flex布局总结
基本概念在不固定高度信息的例子中，我们只需要在容器中设置以下两个属性即可实现内容不确定下的垂直居中。.container{ display: flex; flex-direction: column; justify-content: center;}flex不单是一个属性，它包含了一套新的属性集。属性集包括用于设置容器，和用于设置项目两部分。设置容器的属性有：display:flex;flex-direction:row（默认值） | row-reverse | co
2021-10-18 11:23:55
508
转载 yarn运行报错
参考原文地址出现了下图的问题：yarn : 无法加载文件首先 搜索powershell以 管理员的身份运行然后 输入set-ExecutionPolicy RemoteSigned执行策略 输入 Y最后可以查一下 输入get-ExecutionPolicyat the end关闭窗口即可重新回去运行yarn搞定！！！...
2021-09-29 12:32:37
1082
原创 React17.0.2官方文档在线学习-高级指引1(代码分割、Context、错误边界、Refs 转发、Fragments、高阶组件、与第三方库协同)
高级指引代码分割打包说明：大多数 React 应用都会使用 Webpack，Rollup 或 Browserify 这类的构建工具来打包文件。 打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个 “bundle”。 接着在页面上引入该 bundle，整个应用即可一次性加载。webpack的官方文档（需要开启代理）代码分割import()// 使用之前import { add } from './math';console.log(add(16, 26));// 使
2021-09-24 09:35:32
401
原创 React17.0.2官方文档在线学习-核心概念
核心概念JSX的使用介绍：JSX是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。特点在 JSX 中嵌入表达式。在标签中使用{}就可以使用变量和方法。JSX 也是一个表达式。也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX。J
2021-09-18 00:18:28
618
原创 redux-thunk、redux-saga和react-redux使用比较（区别）
redux-thunk实现思路redux-saga实现思路react-redux实现思路
2021-09-17 01:31:02
1457
原创 React-Redux 入门使用
React-Redux 的使用当前示例的git地址，分支：react-redux实现思路使用Provider标签设置store来源，在页面组件中使用connect方法连接当前组件，同时将store中的state派发到当前的props，设置自定义的方法，也派发到当前的props上。示例表达的意思是：如果使用react-redux，就需要在入口文件index.js中使用Provider标签设置store来源在页面组件中，使用connect连接当前页面和派发内容，定义两个变量 mapState
2021-09-17 01:26:25
117
原创 Redux-thunk和Redux-saga的入门级使用
Redux-thunk的使用实现思路在action中设置一个为函数的action，因为thunk中间件可以执行action函数。本示例的表达的意思：页面需要获取到接口中的data数据，调用getListDataAction函数。getListDataAction函数返回的参数不是一个对象，而是一个函数。这个action派发后，thunk中间件识别后，会执行该函数，在异步获取到数据后，会再派发type为GET_LIST_DATA的action。store会再次收到一个新的action，在这个a
2021-09-16 17:59:53
260
原创 angular使用antd组件实现一次添加多条数据
html模板add() 添加空对象reduce() 移除当前的item注意点： 由于餐厅名称和菜品类别使用的是标签动态渲染的下拉框，避免出现添加新的数据，之前的选择清空，select组件上不要设置id和name <div class="col-sm-12"> <div class="panel"> <div class="...
2019-09-04 16:32:05
540
原创 复杂数组去重，保留数组中对象的code的唯一
问题描述：dataList -> obj1 -> obj1.list中obj1.list[1].code和 dataList -> obj2 -> obj2.list中的obj2.list[2].code相等，那么对象2是不是不添加了数据 // 1.通过codeArr记录所有的code // 2. 不能直接删除重复的数据，采用临时（tempArr）保存...
2019-09-03 22:35:25
323
原创 获取指定位置天气的接口
获取上海的天气接口：https://free-api.heweather.com/s6/weather/now?location=%E4%B8%8A%E6%B5%B7&key=db5af96d28554f55922cd41c51efd4f3// 1. 设置let locationCity = "上海" $.get({ url: `https://free-api....
2019-09-02 15:01:33
1380
原创 npm删除node_modules的快捷方式
Ract/Angular/Vue项目中的node_modules手动删除时间太长用以下命令即可：1、npm install rimraf -g2、rimraf node_modules
2019-08-29 13:35:54
675
原创 在angular7中创建组件/自定义指令/管道
在angular7中创建组件/自定义指令/管道组件使用命令创建组件创建组件的命令：ng generate component 组件名生成的组件组成： 组件名.html 、组件名.ts、组件名.less、组件名.spec.ts在组件的控制器@Component({ selector: 'app-heroes', templateUrl: './heroes.component...
2019-07-25 19:29:50
351
原创 react基础学习
基础部分创建一个react的项目创建一个react的项目全局安装 react 指令 // 全局安装react （根据需要安装，不是必须的） npm i -g react // 或者 yarn -global react // 全局安装 react的脚手架 (创建react的应用，必须安装脚手架) npm i -g create-react-app // ...
2019-07-25 19:27:56
341
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人