SpringBoot + React Ant Design 实现图片上传到Minio 中
1：效果图 上传回显： 上传预览： 预览-删除 2：前端代码 react 函数式组件 /** * @Author * @Date Created in 2024/04/11 15:20 * @DESCRIPTION: 主讲人信息 * @Version V1.0 */import React, {useEffect, useId, useState} from "react";import { Butto...
React Ant Design 简单实现如何选中图片
效果： 代码： 定义的初始值和方法 const [selected, setSelected] = useState(0); // 表示当前选中的图片索引 const handleClick = (index) => { if (selected === index) { setSelected(null); // 如果点击的是已选中的图片，则取消选中状态 } else { setSelected(inde...
结合 react-webcam、three.js 与 electron 实现桌面人脸动捕应用
系列文章目录 React 使用 three.js 加载 gltf 3D模型 | three.js 入门React + three.js 3D模型骨骼绑定React + three.js 3D模型面部表情控制React + three.js 实现人脸动捕与3D模型表情同步结合 react-webcam、three.js 与 electron 实现桌面人脸动捕应用 示例项目(github)：https://g...
Page Context 设计 | React.createContext 入门
前言 React 是一种流行的 JavaScript 库，用于构建用户界面。它提供了一种组件化的开发方式，使得前端开发变得更加简单和可维护。在 React 中，组件之间的数据传递是非常重要的，而 React 提供了多种方式来处理这种数据传递，其中包括 Context API。本文将重点介绍 React 中的 React.createContext 方法，这是使用 Context API 的第一步。 什么是...
vue3的ref和reactive
a = ref({}); const a = ref([]) 基本数据类型：响应式依靠的是object.defineProperty()的get和set。 对象类型：内部求助了vue3的一个新函数——reactive函数。 Reactive函数 <script setup> import { ref, reactive } from 'vue'; // 数据 let name = ref('张三'); le...
对React-Fiber的理解，它解决了什么问题？
React V15 在渲染时，会递归比对 VirtualDOM 树，找出需要变动的节点，然后同步更新它们， 一气呵成。这个过程期间， React 会占据浏览器资源，这会导致用户触发的事件得不到响应，并且会导致掉帧，导致用户感觉到卡顿。 为了给用户制造一种应用很快的“假象”，不能让一个任务长期霸占着资源。 可以将浏览器的渲染、布局、绘制、资源加载(例如 HTML 解析)、事件响应、脚本执行视作操作系统的“进程...
【React】路由鉴权
需求 未登录状态下，某些页面不可访问，白名单中的页面可以。未登录状态下，拦截通过修改url直接访问页面。判断是否有权访问某些页面。路由规则中每个页面都需要调用某个接口。 前提 使用的react-router-dom6 ，这里只是举例，具体细节根据项目调整。 路由表生成路由规则 import { Navigate, Outlet, RouteObject, useRoutes } from "react-r...
React + three.js 3D模型骨骼绑定
系列文章目录 React 使用 three.js 加载 gltf 3D模型 | three.js 入门React + three.js 3D模型骨骼绑定React + three.js 3D模型面部表情控制 项目代码(github)：https://github.com/couchette/simple-react-three-skeleton-demo 项目代码(gitcode)：https://git...
如何新建一个React前端项目？
要新建一个 React 前端项目，你可以按照以下步骤进行： 1、安装 Node.js 和 npm：确保你的电脑上已经安装了 Node.js，因为 React 项目依赖于 npm（Node Package Manager）。你可以在Node.js 官网下载适合你操作系统的安装包，并按照说明进行安装。 2、安装 Create React App：Create React App 是一个官方提供的用于快速搭建 ...
React 使用 three.js 加载 gltf 3D模型 | three.js 入门
系列文章 示例项目(gitcode)：https://gitcode.com/qq_41456316/simple-react-three-demo 文章目录 系列文章前言一、three.js是什么？二、使用 React 和 three.js 加载 glTF 3D 模型的步骤步骤 1：创建 React 应用步骤 2：安装 three.js步骤 3：准备 glTF 3D 模型文件步骤 4：创建组件加载 3D...