前端小白经验小结2023.10.31

这两个月被公司外派做项目，又回到公司做其他的项目，浅浅小结一下吧。以后要坚持写文章记录。

总结

• 在写vue3项目的时候，发现无论是基础数据类型还是对象类型都在用ref声明，我开始还在想不是还有reactive吗，后来搜索发现连尤大大都推荐默认使用ref声明，总结就是非必要不使用reactive。附上详情链接Vue3为什么推荐使用ref而不是reactive - 掘金 (juejin.cn)
• 在写项目的时候接触到了openLayers，openLayers是一个JS库，用于开发地图功能。我开发的时候地图就已经写好了，我只是在上面做一些新的功能。首先项目渲染的地图数据都是GeoJson格式，如图coordinates就是存地图数据点位的地方。让后端处理数据格式，返回给前端可以直接使用。做的新功能是双击地图可以进入到下一级，并和弹窗的数据联动展示。主要是地图的展示功能。比如从省到市，从市到县。地图的点击事件有单机和双击，我在原来别人的封装的方法里面把click变成dbclick就行了。但是点击到下一级地图时，整个地图就只能显示这个一个地方，比如中国点击河南，就只显示河南的地图，其他省的地图就不显示。双击时发送请求，把点击的地方code传给后端，返回这个code的地图数据再显示在地图上。这个其实还容易，有点难度的是返回功能。点击返回按钮就要返回上一层的地图。如果返回功能也发请求的话，地图下钻和返回都发送请求会造成请求被中断的情况，地图请求返回的数据量还是比较大的，不能频繁请求。就把下钻时的地图数据存储在数组里，点击返回按钮时就取回数据重新渲染。其中有个情况是用户多次下钻再多次返回。这时候存储地图数据的数组也要跟着用户的动作对数组进行增加和删除，保持数组的数量和当前地图所在的层级相对应，所以这个数组的长度并不是一直增加的。
• 在v3项目里面，兄弟组件直接互相传递信息和方法使用了插件mitt，传递信息时使用.emit方法传递，使用.on方法接收，使用完之后要使用.off方法清除掉，要不然会重复触发造成内存泄漏
• 在项目里发送请求的时候会把发送的params对象再用map对象再包一层，如{ map: JSON.stringify({ regionCode: 123 }) }，如果这样发送请求的话，请求头也要做一下设置，要不然浏览器识别不了。

3D模型预览展示

接到的需求是，在老项目的基础上，后台管理系统支持上传3d模型文件并在详情可以预览3d模型，门户端可以预览3d模型，都支持缩放旋转等鼠标操作。

因为这个功能是针对数字藏品做的，所以3d模型文件上传之后，在详情里的预览拿到后端返回的数据并不是模型文件的url而是数据流，防止别人窃取模型文件。像我这种小白直接先学three.js原生再写项目怕是到猴年马月，只能在网上找一些大佬们已经集成好的组件来使用。vue-3d-loader和vue-3d-model是比较简单易上手的，直接npm安装，引入组件就可以使用了，具体的可以直接搜索官方文档，下面是我遇到的一些不同之处和问题，下面简称loader和model，再附上两个组件的官方链接：

首页 | Vue 3d loader (king2088.github.io)

vue-3d-model - npm (npmjs.com)

• mdel相对于loader支持的3d模型文件格式没有那么多，比如model不支持gbl格式，但是loader支持。
• model对于不同的格式引入的组件也不相同，比如我的项目要支持obj和fbx两种格式，所以就要引入两种组件，<model-obj>和<model-fbx>。但是loader只需要引入一种组件<vue3dloader>就能兼容所有支持的格式。
• 两个组件对于一些设置，比如光源，相机位置的设置参数字段也有细微之处但大差不差。
• 如果是预览本地模型，引入的模型文件地址必须是public目录下的文件才可以，其他地方的文件组件是找不到的，控制台就会各种报错。如果是后端返回的url可以直接替换

文件上传功能是通过element组件的upload组件实现的，使用URL.createObjectURL()方法返回的是一个表示特定Blob对象的URL字符串。这个URL可以用于在Web页面中引用该Blob对象实现预览效果。如果后端返回的数据是数据流就需要把返回的Blob字符串转化为可用的url地址，如图：

 问题就出现了，我在使用loader组件时，本地使用是没报错的，但是把url换成后端数据流转化的url结果就报错了，控制台说setCrossOrigin为空，如图：

应该是运行js文件时报的错，组件里面的js文件都是经过压缩的我也改不了。困扰了很久。

后来我把组件换成了model竟然就成功了，喜极而泣。虽然model组件引入比较麻烦也不支持那么多格式，但目前就只能用这个组件了。一开始模型加载的时间不一致，我以为是模型的复杂问题，但是后来却也有模型大小的问题，模型越大越复杂model加载越慢。如果模型比较小但也复杂加载时间也没有那么长。

model加载的模型设置其他的选项：

设置自动旋转的字段是on-load和rotation：

 

 

 模型加载默认只有一个光源，如果相机移动到光源的对面就会发现模型的一面是暗的，可以在node_modules文件里面找到vue-3d-model的文件，如图：

设置里面的组件方法，再加上几个光源，具体的光源字段可以直接复制已有的，改一下xyz轴的数值即可。还可以设置光源颜色，光照强度，多试几个颜色你会发现新大陆。