vue2中trhee.js加载模型展示天空盒子

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/13b9193d6738428791fc1ff112e03627.png
加载模型的时候需要把模型放在public文件下面
创建场景

this.scene = new THREE.Scene()

创建相机

  this.camera = new THREE.PerspectiveCamera(45,this.viewNode.clientWidth / this.viewNode.clientHeight,1,9999999)

调整相机位置

this.camera.position.set(600, 800, 1000)this.camera.lookAt(0, 0, 0)

创建渲染器

this.renderer = new THREE.WebGLRenderer({ antialias: true,alpha: true })this.renderer.setSize(this.viewNode.clientWidth, this.viewNode.clientHeight)this.renderer.setPixelRatio(window.devicePixelRatio)this.renderer.shadowMap.enabled = true // 启用阴影this.viewNode.appendChild(this.renderer.domElement)

添加轨道控制器

   // 添加轨道控制器this.controls = new OrbitControls(this.camera, this.renderer.domElement)this.controls.enableDamping = truethis.controls.dampingFactor = 0.05this.controls.maxPolarAngle = Math.PI * 0.45this.controls.minPolarAngle = Math.PI * 0.1this.controls.minDistance = 5this.controls.maxDistance = 30this.controls.enableRotate = false // 禁止相机旋转this.controls.enableZoom = false // 禁止相机缩放this.controls.enablePan = false // 禁止相机平移this.initLights()this.initWater()this.initSky()this.loadGLTFModel()},

天空盒子

initSky() {this.sky = new Sky()this.sky.name='sky'this.sky.scale.setScalar(999999) // 调整天空盒子的大小this.scene.add(this.sky)const skyUniforms = this.sky.material.uniformsskyUniforms['turbidity'].value = 10skyUniforms['rayleigh'].value = 2skyUniforms['mieCoefficient'].value = 0.005skyUniforms['mieDirectionalG'].value = 0.8const parameters = {elevation: 2,azimuth: 180}const pmremGenerator = new THREE.PMREMGenerator(this.renderer)const phi = THREE.MathUtils.degToRad(90 - parameters.elevation)const theta = THREE.MathUtils.degToRad(parameters.azimuth)const sun = new THREE.Vector3()sun.setFromSphericalCoords(1, phi, theta)this.sky.material.uniforms['sunPosition'].value.copy(sun)},

添加模型的点击事件

onMouseClick(event) {const mouse = new THREE.Vector2()mouse.x = (event.clientX / this.viewNode.clientWidth) * 2 - 1mouse.y = -(event.clientY / this.viewNode.clientHeight) * 2 + 1const raycaster = new THREE.Raycaster()raycaster.setFromCamera(mouse, this.camera)console.log(';点击了模型上的某一个点点击了模型上的某一个点点击了模型上的某一个点');const intersects = raycaster.intersectObjects(this.scene.children, true)if (intersects.length > 0) {console.log(';点击了模型上的某一个点点击了模型上的某一个点点击了模型上的某一个点');const baifenDom = document.querySelector('.baifen')const intersect = intersects[0]console.log(intersect,'intersect-*-*-*--*');// if (intersect.object.type === this.model) {if (intersect.object.type === "Mesh" && intersect.object.parent.type === "Group") {console.log(this.icondom,'icon-*-*-*--*');console.log(this.divdom,'divdivdiv-*-*-*--*');//  // 清除上一次点击的所有操作this.icondom&&this.scene.remove(this.icondom);this.divdom&&baifenDom.removeChild(this.divdom)// 创建icon图标const iconGeometry = new THREE.SphereGeometry(0.5, 60, 60);const iconMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });this.icondom = new THREE.Mesh(iconGeometry, iconMaterial);this.icondom.position.set(intersect.point.x, intersect.point.y, intersect.point.z);this.scene.add(this.icondom);console.log( intersect,'baifenDombaifenDom');this.divdom = document.createElement('div')this.divdom.style.position = 'absolute'this.divdom.style.width = '200px'this.divdom.style.height = '200px'this.divdom.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'this.divdom.style.color = 'white'this.divdom.style.padding = '10px'this.divdom.style.borderRadius = '5px'this.divdom.style.zIndex = '1000'this.divdom.style.top = `${event.clientY}px`this.divdom.style.left = `${event.clientX}px`this.divdom.innerHTML = `点击了模型上的某一个点,位置为: (${intersect.point.x}, ${intersect.point.y}, ${intersect.point.z})`baifenDom.appendChild(this.divdom)// 调整相机位置以拉近模型// this.camera.position.set(intersect.point.x, intersect.point.y, intersect.point.z + 10); // 将相机位置设置为点击点的位置，并在z轴上偏移10单位以拉近模型// this.camera.lookAt(intersect.point); // 让相机看向点击点}}},

完整代码

<template><div class="contente"><div class="baifen"><div class="app-wrap" ref="view"></div></div></div>
</template><script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { Water } from 'three/examples/jsm/objects/Water.js'
import { Sky } from 'three/examples/jsm/objects/Sky.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// 导入glb模型
// const gltfModel = './models/dapeng2.glb' // 改为使用公共路径export default {name: 'MineTd',data() {return {viewNode: null,animationId: null,scene: null,camera: null,renderer: null,controls: null,water: null,sky: null,model: null,mixer: null, // 用于动画混合器moveForward: false,moveBackward: false,moveLeft: false,moveRight: false,moveSpeed: 0.05, // 相机移动速度icondom: null,divdom: null,}},mounted() {this.$nextTick(() => {this.initScene()this.animate()})window.addEventListener('resize', this.onWindowResize)document.addEventListener('keydown', this.onKeyDown)document.addEventListener('keyup', this.onKeyUp)this.$refs.view.addEventListener('click', this.onMouseClick)},methods: {initScene() {this.viewNode = this.$refs.view// 创建场景this.scene = new THREE.Scene()// 创建相机this.camera = new THREE.PerspectiveCamera(45,this.viewNode.clientWidth / this.viewNode.clientHeight,1,9999999)// // 调整相机位置this.camera.position.set(600, 800, 1000)this.camera.lookAt(0, 0, 0)// 创建渲染器this.renderer = new THREE.WebGLRenderer({ antialias: true,alpha: true })this.renderer.setSize(this.viewNode.clientWidth, this.viewNode.clientHeight)this.renderer.setPixelRatio(window.devicePixelRatio)this.renderer.shadowMap.enabled = true // 启用阴影this.viewNode.appendChild(this.renderer.domElement)// 添加轨道控制器this.controls = new OrbitControls(this.camera, this.renderer.domElement)this.controls.enableDamping = truethis.controls.dampingFactor = 0.05this.controls.maxPolarAngle = Math.PI * 0.45this.controls.minPolarAngle = Math.PI * 0.1this.controls.minDistance = 5this.controls.maxDistance = 30this.controls.enableRotate = false // 禁止相机旋转this.controls.enableZoom = false // 禁止相机缩放this.controls.enablePan = false // 禁止相机平移this.initLights()this.initWater()this.initSky()this.loadGLTFModel()},initLights() {// 环境光const ambientLight = new THREE.AmbientLight(0xffffff, 0.6)this.scene.add(ambientLight)// 平行光const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8)directionalLight.position.set(10, 10, 10)directionalLight.castShadow = true // 启用阴影投射this.scene.add(directionalLight)},initWater() {const waterGeometry = new THREE.PlaneGeometry(100, 100)this.water = new Water(waterGeometry, {textureWidth: 512,textureHeight: 512,waterNormals: new THREE.TextureLoader().load('https://threejs.org/examples/textures/waternormals.jpg',texture => {texture.wrapS = texture.wrapT = THREE.RepeatWrapping}),alpha: 1.0,waterColor: 0x001e0f,distortionScale: 3.7,fog: this.scene.fog !== undefined,depth: 10,flowDirection: new THREE.Vector2(1, 0.1),scale: 4.0})this.water.rotation.x = -Math.PI / 2this.water.receiveShadow = true // 接收阴影this.water.name = 'water' // 设置namethis.scene.add(this.water)},initSky() {this.sky = new Sky()this.sky.name='sky'this.sky.scale.setScalar(999999) // 调整天空盒子的大小this.scene.add(this.sky)const skyUniforms = this.sky.material.uniformsskyUniforms['turbidity'].value = 10skyUniforms['rayleigh'].value = 2skyUniforms['mieCoefficient'].value = 0.005skyUniforms['mieDirectionalG'].value = 0.8const parameters = {elevation: 2,azimuth: 180}const pmremGenerator = new THREE.PMREMGenerator(this.renderer)const phi = THREE.MathUtils.degToRad(90 - parameters.elevation)const theta = THREE.MathUtils.degToRad(parameters.azimuth)const sun = new THREE.Vector3()sun.setFromSphericalCoords(1, phi, theta)this.sky.material.uniforms['sunPosition'].value.copy(sun)},loadGLTFModel() {const loader = new GLTFLoader()const loadingManager = new THREE.LoadingManager()// 加载管理器loadingManager.onProgress = (url, loaded, total) => {const progress = (loaded / total * 100).toFixed(2)console.log(`加载进度: ${progress}%`)}// 加载GLB模型loader.load("/models/dapeng2.gltf", // 修改为.glb文件(gltf) => {this.model = gltf.scenethis.model.name = 'dapeng'// 遍历模型网格启用阴影this.model.traverse((node) => {if (node.isMesh) {node.castShadow = truenode.receiveShadow = true}})// 调整模型位置和大小this.model.position.set(0, 1, 0) // 将模型位置调整到相机的正下方this.model.scale.set(0.2, 0.2, 0.2)// 将模型添加到场景this.scene.add(this.model)// 处理动画if (gltf.animations && gltf.animations.length) {this.mixer = new THREE.AnimationMixer(this.model)gltf.animations.forEach((clip) => {const action = this.mixer.clipAction(clip)action.play()})}const bbox = new THREE.Box3().setFromObject(this.model);
const center = bbox.getCenter(new THREE.Vector3());
// this.camera.position.set(center.x+1000, center.y+1000, center.z+600);
// this.camera.lookAt(scene.position); // 让相机看向场景中心},(xhr) => {console.log(`模型加载中: ${(xhr.loaded / xhr.total * 100)}%`)},(error) => {console.error('模型加载失败:', error)this.$message.error('模型加载失败,请检查模型文件是否存在')})},animate() {this.animationId = requestAnimationFrame(this.animate)// 更新水面动画if (this.water) {this.water.material.uniforms['time'].value += 1.0 / 60.0}// 更新模型动画if (this.mixer) {this.mixer.update(0.016) // 假设60fps}this.controls.update()this.renderer.render(this.scene, this.camera)// 根据键盘输入移动相机if (this.moveForward) {this.camera.position.z -= this.moveSpeed}if (this.moveBackward) {this.camera.position.z += this.moveSpeed}if (this.moveLeft) {this.camera.position.x -= this.moveSpeed}if (this.moveRight) {this.camera.position.x += this.moveSpeed}},onMouseClick(event) {const mouse = new THREE.Vector2()mouse.x = (event.clientX / this.viewNode.clientWidth) * 2 - 1mouse.y = -(event.clientY / this.viewNode.clientHeight) * 2 + 1const raycaster = new THREE.Raycaster()raycaster.setFromCamera(mouse, this.camera)console.log(';点击了模型上的某一个点点击了模型上的某一个点点击了模型上的某一个点');const intersects = raycaster.intersectObjects(this.scene.children, true)if (intersects.length > 0) {console.log(';点击了模型上的某一个点点击了模型上的某一个点点击了模型上的某一个点');const baifenDom = document.querySelector('.baifen')const intersect = intersects[0]console.log(intersect,'intersect-*-*-*--*');// if (intersect.object.type === this.model) {if (intersect.object.type === "Mesh" && intersect.object.parent.type === "Group") {console.log(this.icondom,'icon-*-*-*--*');console.log(this.divdom,'divdivdiv-*-*-*--*');//  // 清除上一次点击的所有操作this.icondom&&this.scene.remove(this.icondom);this.divdom&&baifenDom.removeChild(this.divdom)// 创建icon图标const iconGeometry = new THREE.SphereGeometry(0.5, 60, 60);const iconMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });this.icondom = new THREE.Mesh(iconGeometry, iconMaterial);this.icondom.position.set(intersect.point.x, intersect.point.y, intersect.point.z);this.scene.add(this.icondom);console.log( intersect,'baifenDombaifenDom');this.divdom = document.createElement('div')this.divdom.style.position = 'absolute'this.divdom.style.width = '200px'this.divdom.style.height = '200px'this.divdom.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'this.divdom.style.color = 'white'this.divdom.style.padding = '10px'this.divdom.style.borderRadius = '5px'this.divdom.style.zIndex = '1000'this.divdom.style.top = `${event.clientY}px`this.divdom.style.left = `${event.clientX}px`this.divdom.innerHTML = `点击了模型上的某一个点,位置为: (${intersect.point.x}, ${intersect.point.y}, ${intersect.point.z})`baifenDom.appendChild(this.divdom)// 调整相机位置以拉近模型// this.camera.position.set(intersect.point.x, intersect.point.y, intersect.point.z + 10); // 将相机位置设置为点击点的位置，并在z轴上偏移10单位以拉近模型// this.camera.lookAt(intersect.point); // 让相机看向点击点}}},onKeyDown(event) {switch (event.key) {case 'w':this.moveForward = truebreakcase 's':this.moveBackward = truebreakcase 'a':this.moveLeft = truebreakcase 'd':this.moveRight = truebreak}},onKeyUp(event) {switch (event.key) {case 'w':this.moveForward = falsebreakcase 's':this.moveBackward = falsebreakcase 'a':this.moveLeft = falsebreakcase 'd':this.moveRight = falsebreak}},onWindowResize() {if (this.viewNode) {this.camera.aspect = this.viewNode.clientWidth / this.viewNode.clientHeightthis.camera.updateProjectionMatrix()this.renderer.setSize(this.viewNode.clientWidth, this.viewNode.clientHeight)}}},beforeDestroy() {window.removeEventListener('resize', this.onWindowResize)document.removeEventListener('keydown', this.onKeyDown)document.removeEventListener('keyup', this.onKeyUp)if (this.animationId) {cancelAnimationFrame(this.animationId)}if (this.scene) {this.scene.clear()}if (this.renderer) {this.renderer.dispose()this.renderer.forceContextLoss()this.renderer.content = null}if (this.mixer) {this.mixer.stopAllAction()}}
}
</script><style lang="scss" scoped>
.contente {width: 100%;height: 100%;position: relative;.baifen {background: #fff;height: 100%;position: relative;.app-wrap {width: 100%;height: 100%;position: relative;overflow: hidden;}}
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/67045.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

汽车免拆诊断案例 | 2007 款日产天籁车起步加速时偶尔抖动

汽车免拆诊断案例 | 2007 款日产天籁车起步加速时偶尔抖动

故障现象　 一辆2007款日产天籁车&#xff0c;搭载VQ23发动机&#xff08;气缸编号如图1所示&#xff0c;点火顺序为1-2-3-4-5-6&#xff09;&#xff0c;累计行驶里程约为21万km。车主反映&#xff0c;该车起步加速时偶尔抖动&#xff0c;且行驶中加速无力。 图1　VQ23发动机…
阅读更多...
对神经网络基础的理解

对神经网络基础的理解

目录 一、《python神经网络编程》 二、一些粗浅的认识 1&#xff09; 神经网络也是一种拟合 2&#xff09;神经网络不是真的大脑 3&#xff09;网络构建需要反复迭代 三、数字图像识别的实现思路 1&#xff09;建立一个神经网络类 2&#xff09;权重更新的具体实现 3&am…
阅读更多...
新项目传到git步骤

新项目传到git步骤

1.首先创建远程仓库,创建一个空白项目,即可生成一个克隆URL,可以是http也可以是SSH,copy下这个地址 2.找到项目的本机目录,进入根目录,打开git bash here命令行 3.初始化: git init 4.关联远程地址: git remote add origin "远程仓库的URL" 5.查看关联 git re…
阅读更多...
PAT甲级-1024 Palindromic Number

PAT甲级-1024 Palindromic Number

题目 题目大意 一个非回文数&#xff0c;加上它的翻转数所得的和&#xff0c;进行k次&#xff0c;有可能会得到一个回文数。给出一个数n&#xff0c;限制相加次数为k次&#xff0c;如果小于k次就得到回文数&#xff0c;那么输出该回文数和相加的次数&#xff1b;如果进行k次还…
阅读更多...
appium自动化环境搭建

appium自动化环境搭建

一、appium介绍 appium介绍 appium是一个开源工具、支持跨平台、用于自动化ios、安卓手机和windows桌面平台上面的原生、移动web和混合应用&#xff0c;支持多种编程语言(python&#xff0c;java&#xff0c;Ruby&#xff0c;Javascript、PHP等) 原生应用和混合应用&#xf…
阅读更多...
C#高级：常用的扩展方法大全

C#高级：常用的扩展方法大全

1.String public static class StringExtensions {/// <summary>/// 字符串转List&#xff08;中逗 英逗分隔&#xff09;/// </summary>public static List<string> SplitCommaToList(this string data){if (string.IsNullOrEmpty(data)){return new List&…
阅读更多...
【Numpy核心编程攻略：Python数据处理、分析详解与科学计算】1.1 从零搭建NumPy环境：安装指南与初体验

【Numpy核心编程攻略：Python数据处理、分析详解与科学计算】1.1 从零搭建NumPy环境：安装指南与初体验

1. 从零搭建NumPy环境&#xff1a;安装指南与初体验 NumPy核心能力图解&#xff08;架构图&#xff09; NumPy 是 Python 中用于科学计算的核心库&#xff0c;它提供了高效的多维数组对象以及用于处理这些数组的各种操作。NumPy 的核心能力可以概括为以下几个方面&#xff1a…
阅读更多...
【SpringBoot教程】Spring Boot + MySQL + HikariCP 连接池整合教程

【SpringBoot教程】Spring Boot + MySQL + HikariCP 连接池整合教程

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 在前面一篇文章中毛毛张介绍了SpringBoot中数据源与数据库连接池相关概念&#xff0c;今天毛毛张要分享的是关于SpringBoot整合HicariCP连接池相关知识点以及底层源码…
阅读更多...
Java进阶（一）

Java进阶（一）

目录 一.Java注解 什么是注解&#xff1f; 内置注解 元注解 二.对象克隆 什么是对象克隆? 为什么用到对象克隆 三.浅克隆深克隆 一.Java注解 什么是注解&#xff1f; java中注解(Annotation)又称java标注&#xff0c;是一种特殊的注释。 可以添加在包&#xff0c;类&…
阅读更多...
【PyCharm】将包含多个参数的 shell 脚本配置到执行文件来调试 Python 程序

【PyCharm】将包含多个参数的 shell 脚本配置到执行文件来调试 Python 程序

要配置 PyCharm 以使用包含多个参数的 shell 脚本&#xff08;如 run.sh&#xff09;来调试 Python 程序&#xff0c;您可以按照以下步骤操作&#xff1a; 创建一个新的运行/调试配置&#xff1a; 在 PyCharm 中&#xff0c;点击“运行”菜单旁边的齿轮图标&#xff0c;选择“…
阅读更多...
即梦（Dreamina）技术浅析（二）：后端AI服务

即梦（Dreamina）技术浅析（二）：后端AI服务

1. 文本处理（Text Processing） 1.1 功能概述 文本处理模块的主要任务是将用户输入的文字提示词转换为机器可以理解的向量表示。这一过程包括分词、词嵌入和语义编码，旨在捕捉文本的语义信息，为后续的图像和视频生成提供准确的指导。 1.2 关键技术 1.分词（Tokenization…
阅读更多...
蓝桥杯之c++入门（一）【第一个c++程序】

蓝桥杯之c++入门（一）【第一个c++程序】

目录 前言一、第⼀个C程序1.1 基础程序1.2 main函数1.3 字符串1.4 头文件1.5 cin 和 cout 初识1.6 名字空间1.7 注释 二、四道简单习题&#xff08;点击跳转链接&#xff09;练习1&#xff1a;Hello,World!练习2&#xff1a;打印飞机练习3&#xff1a;第⼆个整数练习4&#xff…
阅读更多...
【C++初阶】第11课—vector

【C++初阶】第11课—vector

文章目录 1. 认识vector2. vector的遍历3. vector的构造4. vector常用的接口5. vector的容量6. vector的元素访问7. vector的修改8. vector<vector\<int\>>的使用9. vector的使用10. 模拟实现vector11. 迭代器失效11.1 insert插入数据内部迭代器失效11.2 insert插入…
阅读更多...
【AIGC学习笔记】扣子平台——精选有趣应用，探索无限可能

【AIGC学习笔记】扣子平台——精选有趣应用，探索无限可能

背景介绍&#xff1a; 由于近期业务发展的需求&#xff0c;我开始接触并深入了解了扣子平台的相关知识&#xff0c;并且通过官方教程自学了简易PE工作流搭建的技巧。恰逢周会需要准备与工作相关的分享主题&#xff0c;而我作为一个扣子平台的初学者&#xff0c;也想探索一下这…
阅读更多...
mysql 学习6 DML语句，对数据库中的表进行 增 删 改 操作

mysql 学习6 DML语句，对数据库中的表进行 增 删 改 操作

添加数据 我们对 testdatabase 数据中 的 qqemp 这张表进行 增加数据&#xff0c;在这张表 下 打开 命令行 query console 在 软件中就是打开命令行的意思 可以先执行 desc qqemp; 查看一下当前表的结构。 插入一条数据 到qqemp 表&#xff0c;插入时要每个字段都有值 insert…
阅读更多...
Java Web-Request与Response

Java Web-Request与Response

在 Java Web 开发中&#xff0c;Request 和 Response 是两个非常重要的对象&#xff0c;用于在客户端和服务器之间进行请求和响应的处理&#xff0c;以下是详细介绍&#xff1a; Request&#xff08;请求对象&#xff09; Request继承体系 在 Java Web 开发中&#xff0c;通…
阅读更多...
李沐vscode配置+github管理+FFmpeg视频搬运+百度API添加翻译字幕

李沐vscode配置+github管理+FFmpeg视频搬运+百度API添加翻译字幕

终端输入nvidia-smi查看cuda版本 我的是12.5&#xff0c;在网上没有找到12.5的torch&#xff0c;就安装12.1的。torch&#xff0c;torchvision&#xff0c;torchaudio版本以及python版本要对应 参考&#xff1a;https://blog.csdn.net/FengHanI/article/details/135116114 创…
阅读更多...
论文阅读(十六)：利用线性链条件随机场模型检测阵列比较基因组杂交数据的拷贝数变异

论文阅读(十六)：利用线性链条件随机场模型检测阵列比较基因组杂交数据的拷贝数变异

1.论文链接&#xff1a;Detection of Copy Number Variations from Array Comparative Genomic Hybridization Data Using Linear-chain Conditional Random Field Models 摘要&#xff1a; 拷贝数变异&#xff08;CNV&#xff09;约占人类基因组的12%。除了CNVs在癌症发展中的…
阅读更多...
Alibaba Spring Cloud 十三 Nacos，Gateway，Nginx 部署架构与负载均衡方案

Alibaba Spring Cloud 十三 Nacos，Gateway，Nginx 部署架构与负载均衡方案

在微服务体系中&#xff0c;Nacos 主要承担“服务注册与发现、配置中心”的职能&#xff0c;Gateway&#xff08;如 Spring Cloud Gateway&#xff09;通常负责“路由转发、过滤、安全鉴权、灰度流量控制”等功能&#xff0c;而 Nginx 则常被用作“边缘反向代理”或“统一流量入…
阅读更多...
Next.js 实战 (十)：中间件的魅力，打造更快更安全的应用

Next.js 实战 (十)：中间件的魅力，打造更快更安全的应用

什么是中间件&#xff1f; 在 Next.js 中&#xff0c;中间件&#xff08;Middleware&#xff09;是一种用于处理每个传入请求的功能。它允许你在请求到达页面之前对其进行修改或响应。 通过中间件&#xff0c;你可以实现诸如日志记录、身份验证、重定向、CORS配置、压缩等任务…
阅读更多...
最新文章

Copyright @ 2022~2023