页面outlet react token
动态给div赋值高，使页面高度100%
import { ref, onMounted, onUnmounted, computed, nextTick } from 'vue' const boxRef = ref() const searchBoxRef = ref() const tableBoxHeight = ref(0) co ......
从安全、开发、产品三个角度反对用refresh_token续期access_token的观点
说明： access_token： 服务端与客户端通信，有时服务端需要知道客户端的身份，就会用到access_token来用于验证身份。 refresh_token： 但为了保证安全token会设置过期时间，如果直接过期，相当于用户或调用端正在使用产品，突然间就退出登录了，这种产品体验很差，于是有了 ......
vue3--h5页面中判断在支付宝环境还是微信环境
支付宝： navigator.userAgent.indexOf('AliApp') > -1 环境变量： navigator.userAgent "Mozilla/5.0......AlipayDefined(nt:WIFI,ws:320|504|2.0) AliApp(AP/9.6.0.0000 ......
React 之使用 antd 实现全局 loading
使用 antd 的 Spin 实现 Loading 代码如下： fullLoading.tsx import ReactDOM from "react-dom/client"; import { Spin } from "antd"; // 全局加载 loading // 当前请求的个数 // 当同 ......
react问题集
视图层报错 分析原因：当渲染子组件AuthMenuAdd时，导致Com组件无法更新。并没有明确的具体原因。经排查： 如何让子组件在父组件加载完或一定条件下才开始加载？ （1）类组件可以用 shouldComponentUpdate ； （2）函数组件可以通过useEffect监听redux（使用us ......
vue3 + xlsx 实现 excel 导入web页面解析成json数据
vue3 + xlsx 实现 excel 导入web页面并解析成json数据 fileIipt 动态创建的标签，一定要用户点击事件触发，不然文件选择框的弹出会被拦截，无法弹出。意思就是下面这段关键代码要用一个事件区触发执行，不能主动执行（比如：vue的钩子） import * as XLSX fro ......
uniapp返回上一个页面
在 UniApp 中返回上一个页面，你可以使用 uni.navigateBack() 方法来实现。 uni.navigateBack() 方法用于导航返回上一页，你可以传递一个可选的参数来指定返回的步数。如果不传递参数，则默认返回上一页。 下面是一个示例代码，演示如何在 UniApp 中返回上一个页 ......
React Antd Table 数据渲染按钮触发onClick事件解决办法
react在渲染时会触发table里面的rander函数下的onClick方法 我的onClick是触发Modal 弹窗 且close后还是会一直触发Modal弹窗 初始代码如下 { title: '操作', key: 'operation', fixed: 'right', width: 100, ......
React项目中报错：Parsing error: The keyword 'import' is reservedeslint
记得更改完配置后，要重启编辑器（如：VSCode）!!! 记得更改完配置后，要重启编辑器（如：VSCode）!!! 记得更改完配置后，要重启编辑器（如：VSCode）!!! 这个错误通常发生在你尝试在一个不支持 ES6 模块语法的环境中使用 import 关键字。 ESLint 默认使用的是 ES5 ......
页面保活实现思路
1. 页面保活应用场景 列表页面跳转到详情页面，要保留列表页面分页后的页码，搜索到的数据，搜索键值，高亮状态，甚至是页面上其他表单的内容等。 2. 页面保活实现思路 2.1 不跳转 用抽屉或模态框编辑详情，不离开列表页，最佳 2.2 vue单页面 可以使用 <KeepAlive> 组件缓存页面。配合 ......
uniapp开发——未登录登录失效页面登录后页面回调的处理
刚开始默认沿用了前边小程序的做法，即在单击事件或者onHide函数中缓存标识，onShow中读取标识，对必要的业务逻辑进行重新请求。具体代码如下： 微信小程序登录后页面回调的处理方案： 1.缓存回调刷新标识： 单击事件中设置： methods:{ onSubmit(){ this.setData({ ......
鸿蒙开发之初页面UIAbility
UIAbility 类似于一个整体的应用声明入口， 比如小程序的app.js ， 比如安卓端的activity 正常页面开发 使用的是一个UIAbility即可， 然后在一个UIAbility 里面 通过路由的形式进行跳转 关于路由 导入 import router from '@ohos.rout ......
CSRF_TOKEN跨站请求伪造
1 跨站请求伪造2 代码演示 3 django解决了csrf攻击，中间件：django.middleware.csrf.CsrfViewMiddleware 4 后期中间件不能注释，每次发送post请求，都需要携带csrf_token随机字符串 -form表单提交 -在form表单中 {% csrf ......
Vue项目 移动端禁止页面放大缩小
Vue项目 移动端禁止页面放大缩小（在安卓上可以实现禁止放大缩小，但是ios就不行） // index.html 中添加 meta 标签 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-sca ......
React Hooks的使用规范和最佳实践
React Hooks自从推出以来，彻底改变了React组件的编写方式。它们提供了一种在函数组件中使用state和其他React特性的能力，从而使得函数组件更加强大和灵活。本文将深入探讨useEffect、useMemo、useCallback和useState这四种常用Hooks的特点、优缺点，以 ......
PDF文件打开时，总是定位到某个特定页面
PDF文件正常打开时，会默认显示第一页，或者默认显示上次关闭时停留的页面。 但是某个PDF特别奇怪，打开它时，总是显示在某个特定页面。 当我把这个页移动到开头时，打开文档就定位到开头； 当我把这个页移动到结尾时，打开文档就定位到结尾； 当我把它移动到第3页，打开文档就定位到第3页。 但是我查看文档事 ......
vue详情页面可以打开多个
main.vue文件 <keep-alive :include="cachedViews"> <router-view :key="key" /> </keep-alive> computed: { key () { return this.$route.fullPath//this.$route. ......
React中在非组件中获取到路由信息
1. 安装history包：yarn add history 2. 创建 utils/history.js文件 3. 在app.js中使用我们新建的路由并配置history参数 4. 通过响应拦截器处理 token 失效，如果发现是401调回到登录页 代码实现 utils/history // ht ......
微信小程序开发设计之页面原型设计
// pages/myAddr/myAddr.js const app = getApp(); Page({ /** * 页面的初始数据 */ data: { addrs:[ { addr: "广东省 广州市 白云区 什么街道", name: "用户填写", phone: "1881111111", ......
100道React高频题整理(附答案背诵版)
1、简述React有什么特点？ React是一个用于构建用户界面的JavaScript库，由Facebook开发并维护。React有以下几个主要特点： 声明式设计： React采用声明式设计，让代码更易于理解，且方便调试。你只需描述出你希望程序的最终状态，React会自动确保用户界面与你描述的状态保 ......
统一封装token过期提示（防抖、节流）
场景是token有过期时间，token过期后操作需要弹窗提示token过期，然后返回登录页。 方案： token过期会返回特定code，接口请求统一拦截，如下代码是弹窗框逻辑。 function loginTimeOutMessageBox() { MessageBox({ title: i18n. ......
页面缓存
页面缓存根据需求分为以下3类 类小程序：根据用户的跳转方法来决定如何操作页面缓存堆栈 历史记录：根据用户访问的历史记录缓存一定数量的页面，超过限定数量时采用新进先出 面包屑：根据面包屑结构，缓存当前页面的祖先页面 类小程序 需要解决的问题 实现以下常用跳转方法 navigateTo 保留当前页面，跳 ......
react native 中使用 Expo Haptics 实现长按按钮获得震动反馈效果
一、背景： 项目中有长按按钮开始录音功能，需要在长按开始时添加一次震动反馈以提高用户体验。由于项目使用expo开发，所以找到了 Expo Haptics 库。 二、使用过程： 1. 安装： npx expo install expo-haptics 2. 引入并使用： import * as Hap ......
做一个wiki页面是体验HTML语义的好方法
HTML语义：如何运用语义类标签来呈现Wiki网页 在上一篇文章中，我花了大量的篇幅和你解释了正确使用语义类标签的好处和一些场景。那么，哪些场景适合用到语义类标签呢，又如何运用语义类标签呢？ 不知道你还记不记得在大学时代，你被导师逼着改毕业论文格式的情景，如果你回想一下，你在论文中使用的那些格式，你 ......
第二章：SpringMVC的配置文件（web.xml）及访问页面
一、开发环境 二、创建maven工程 三、默认方式配置web.xml 四、扩展方式配置web.xml 五、创建控制器 六、配置springMVC配置文件 七、访问首页 八、访问指定页面 九、总结 ......
让你 React 组件水平暴增的 5 个技巧
让你 React 组件水平暴增的 5 个技巧 神说要有光 关注他 你经常看 TA 的内容 最近看了一些 Ant Design 的组件源码，学到一些很实用的技巧，这篇文章来分享一下。 首先，我们用 create-react-app 创建个 React 项目（选择 typescript 模版）： ......
React 精简代码指南（译）
React 精简代码指南（译） 大家的林语冰 bilibili@人猫神话 | 公众号@人猫神话 关注他 你经常看 TA 的内容 展开目录 大家好，这里是大家的林语冰。本期《前端翻译计划》共享的是使用最佳实践和已验证技术增强您的 React 开发。 免责声明本文属于是语冰的直男翻译了属于是， ......
【Azure App Service】当App Service中使用系统标识无法获取Access Token时
问题描述 App Serive上的应用配置了系统标识(System Identity)，通过系统标识获取到访问Key Vault资源的Access Token。但这次确遇见了无法获取到正常的Access Token。 验证问题 1：查看App Service的门户中是否启用了系统标识 2：进入App ......
React拖拽插件：react-beautiful-dnd
本篇文章主要介绍react-beautiful-dnd，它是基于react的拖拽插件 接下来会从以下几个方面来介绍react-beautiful-dnd 安装使用 API介绍 Example 1. 安装使用 首先我们需要安装react-beautiful-dnd # yarn yarn add re ......
Reducer的理解--React状态管理Reducer
这篇博客主要从以下几个方面来介绍我对Reducer的理解 什么是 Reducer 函数 useState 重构成 useReducer 使用Reducer的业务场景 1. 什么是 Reducer 函数 对于组件过于分散的事件处理程序，可以将组件的所有状态更新整合到一个外部函数中，这个函数被称为 re ......