- 博客(23)
- 收藏
- 关注
RSS订阅原创 React - sass配置
输入easysass找到插件设置 - 点击edit in setting.json，通过代码来修改配置。最后把false,formats里的extension都改为空就可以啦！
2024-05-10 15:32:50
435
原创 避雷篇：React-router路由懒加载和antd-Layout布局的冲突
遇到一个问题，就是使用antd框架写个后台，路由懒加载(React.lazy)与antd的Menu菜单Layout布局产生冲突，每次页面重新加载，初次访问路由，都会使导航栏布局重新渲染，Layout层级不使懒加载引入就正常了。路由处使用React.lazy懒加载引入，犹豫懒加载按需引入，在点击菜单导航时，初次访问新路由会导致菜单栏触发渲染。
2024-03-18 17:09:03
427
原创 服务端请求头允许携带Token，将服务端响应给客户端的Token暴露
【代码】服务请求头允许携带cookie，将服务端响应给客户端的X-Token暴露。
2024-03-15 16:07:32
275
1
原创 Node.js - npm，包管理器、模块管理器指令，设置淘宝镜像
-save-dev安装包信息将加入到devDependencies（开发环境）中，开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作用；--save安装包信息将加入到dependencies（生产环境）中，生产阶段的依赖，也就是项目运行时的依赖，就是程序上线后仍然需要依赖；例如：npm i webpack -g，就是全局安装webpack，在操作系统的任何一个目录下都可以使用webpack所提供的指令。--global安装包信息是指把模块安装到操作系统上，（1）查看当前使用的镜像地址。
2024-03-08 15:19:25
274
1
原创 数据传递，状态共享，React Hook - useContext
（该方法只推荐小型应用或小场景，大型应用场景推荐使用Redux进行状态管理，使用起来更方便，详情可见子组件的顶层组件(需要共享数据子组件的的最上层父组件)
2024-02-28 14:13:34
321
原创 前端一些常用功能和方法的封装(函数封装、接口封装、路由守卫...等)
身份验证和授权是现在应用程序中不可或缺的部分。它确保只有授权用户才能访问受保护的资源。在客户端中，我们通常使用JWT（JSON Web Tokens）来进行身份验证授权。有些业务中需要记录客户端用户点击记录及进程，方便进行分析数据，优化产品，这时候可以进行打点（记录时间由客户端生成，也可服务端，看具体业务场景）。（1）写验证函数，导出(自己写的不算严谨，实际可根据业务需求更改)这个在以前文章说写过，详情也可至。这样方便分析用户群体操作动向。这个在以前文章说写过，详情可至。
2024-02-28 11:28:32
716
1
原创 解决异步回调的利器，Promise，字如其意
Promise是JavaScript中解决异步编程的方案，提高了异步代码的可读性，用于处理异步回调地狱问题。promise本质上是一个包装了异步操作的对象，能让我们在面对异步操作的时候让代码写起来更清晰、优雅。
2024-02-22 16:20:09
736
1
原创 Taro - 一个开放式跨端开发框架，一套代码，多端适配
taro是干嘛的？taro是干嘛的？先来看官方简介，是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发小程序 / H5 / RN 等应用。现如今市面上端的形态多种多样，Web、React Native、微信小程序等各种端大行其道。当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
2023-12-21 16:25:30
527
原创 使用Nginx反向代理，将React项目打包后部署到服务器的二级子目录
，不管#字符后边的路径如何变化，请求的都是#字符之前的地址，可以理解为请求的资源路径一直都是“/”，相当于/#/后边请求的路径都是虚拟路径，而不是服务器的真实路径。但是，如果服务器有多个项目的话，我们就需要将代码部署到服务器根目录里边的子目录了，而放到子目录的话，想让页面顺利访问到文件，和我们使用的路由方式也有关系。我们上线一个项目的时候如果服务器上只有这一个项目的话可以直接将打包后的代码部署到服务器指定的根目录，然后直接上线看就可以看到，不用配置其他项。，路径中会携带一个#字符，请求的链接为“
2023-11-30 16:09:06
1869
原创 图片懒加载之React + Intersection Observer API - 交叉观察器实现懒加载
判断元素是否进入视口从而来实现懒加载，因为用到了scroll的监听事件，因此频繁触发、调用可能会造成性能问题。创建一个IntersectionObserver.observe对象，当其监听到目标元素的可见部分（的比例）超过了一个或多个阈值（threshold）时，会执行指定的回调函数。被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；，因为判断元素是否可见的本质就是看目标元素是否与根元素或视口产生了交叉。对象被创建时，其被配置为监听根中一段给定比例的可见区域。
2023-11-29 14:51:05
771
1
原创 Redux最佳使用方式之Redux-Toolkit
接下来在最顶层组件引入刚刚导出的store，用Provider包裹并将store注入，以供全局使用，一般为src文件夹下的index.js文件，这里我个人将它放在了路由组件的下一层。在Section这个组件中获取到count的状态值然后展示在页面，在ReduxTest组件中改变count的状态，使用redux共分享状态。，使其使用起来更为简单便捷，简称为RTK，也是现官方推荐的编写redux逻辑的方法。然后配置store文件，也可以在该文件进行数据持久化等配置，然后导出。简易的、有想法的、强劲的、高效的。
2023-11-28 15:47:12
1832
2
原创 NodeJs写后端接口，连接数据库，响应客户端数据
若虚拟服务器上没有node的话，请先安装了node。写接口推荐使用express框架，因为它是目前最稳定，使用最广泛，并且是Node.js 官方推荐的唯一一个 Web 开发框架。express是一个基于。使用node.js写一个服务端的接口，然后连接数据库进行操作，最后响应给客户端。nodejs的优势就是写后端接口与写前端js有点类似，上手较为容易。1.文件中引入express,mysql,cors模块。然后进入文件夹，node + 文件名，启动！gameover，就是这么简单！内置核心http模块。
2023-11-27 18:29:11
548
1
原创 React编程式路由 （手写路由守卫）
手写路由，不再使用useRoutes这个hook。这样一个简单的路由守卫就完成了。记录一个简单的可编程式路由。
2023-11-25 17:24:19
135
原创 React将子组件的方法暴露给父组件，由父组件控制是否调用或停止倒计时按钮
之前遇到一个需求，子组件的倒计时按钮需要让父组件控制是否调用或停止，随即记录下。
2023-11-25 15:26:17
358
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人