- 博客(97)
- 收藏
- 关注
RSS订阅
原创 【Three.js】创建CAD标注线
CAD标注线在工程和制造领域中被广泛用于标记零部件、装配体和机械系统的尺寸、距离、角度等信息。它们帮助工程师和设计师更好地理解设计要求，并确保制造的准确性。在三维场景中添加标注线使得设计更加直观。人们可以在一个真实的三维环境中看到物体的形状、大小和相互关系，相比于传统的二维图纸，更容易理解和把握设计意图。下面是一个简单的效果图：要创建上图所示的标注线，我们可以把标注线拆分成三个部分：箭头线、箭头两端的线段 、文本信息。
2023-12-04 08:00:00
1208
1
原创 【Three.js】使用精灵图Sprite创建面朝相机的文本标注
在Three.js中精灵Sprite是一个总是面朝摄像机的平面，它通常和纹理贴图结合使用，贴图可以是一张图片，也可以是我们使用canvas绘制出来的任何东西。所以我们可以先使用canvas绘制文字，然后将它作为纹理贴图贴到精灵平面上，就可以创建面朝相机的文本标注了。
2024-03-19 14:41:17
685
原创 【Three.js】Layers图层的使用
Layers 对象为Object3D对象分配了1-32个图层，编号为0-31。在内部实现上，每个图层对象被存储为一个bit mask，默认所有 Object3D 对象都存储在第 0 个图层上。图层对象可以用于控制对象的显示，和相机处于同一个图层的物体才可以被显示出来。每个继承自 Object3D 的对象都有一个 Object3D.layers 对象。Mesh、Camera、Group等都继承自基类 Object3D，所以它们都有一个 layers 属性。
2024-01-30 18:00:33
495
原创 【Three.js】轨道控制器（OrbitControls）的使用
轨道控制器可以使得相机围绕目标进行轨道运动。轨道控制器功能不可以通过three模块来直接访问，需要从 example/jsm 子目录下导入。
2024-01-26 17:25:58
2031
2
原创 【Vue3】状态管理工具——pinia的使用
pinia相当于vue2中的vuex，pinia也是vue.js状态管理库。使用storeToRefs可以将store中的数据转换成ref对象。注意：pinia中的storeToRefs只会对数据本身转换，而vue中的toRef会转换store中的数据。我们通过解构拿到的数据不是响应式的，所以需要使用storeToRefs将它们变成响应式的。
2024-01-25 18:22:39
425
原创 【Three.js】画布自适应大小与全屏
在Three.js中，要使画布能够自适应窗口大小的变化，需要在窗口大小变化时更新相关的渲染器、摄像机等参数。①②更新摄像机的宽高比，以确保画面不会变形。③通过更新摄像机的投影矩阵，确保透视投影的正确显示。④更新渲染器的大小，使其与新的窗口大小相匹配。⑤设置渲染器的像素比，以适应高分辨率屏幕，提高渲染效果。
2024-01-25 14:20:01
619
原创 【Three.js】创建一个三维场景
Three.js是一个用于创建WebGL渲染的JavaScript库。WebGL（Web Graphics Library）是一种用于在Web浏览器中进行硬件加速的图形渲染的JavaScript API。它允许开发者利用计算机的GPU（图形处理单元）来执行图形渲染，从而实现高性能的3D图形和图形效果。它本身是一个相对底层的API，需要处理许多繁琐的任务，如着色器编写、缓冲区管理等。Three.js封装了底层的WebGL功能，用于简化和抽象WebGL的使用。
2024-01-24 08:00:00
479
1
原创 【Vue3】计算属性computed和监听属性watch
监听ref或者reactive定义的对象类型数据中的某个属性时，如果该属性值不是对象类型，需要写成函数的形式，如果是对象类型，可以直接写，也可以写成函数的形式。监视ref定义的对象类型数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视。② watch要明确指出监视的数据，watchEffect不用明确指定监视的数据，用到哪些属性，就监视哪些属性。它需要返回一个值，返回的值就是该计算属性的值。① 都能监听响应式数据的变化，不同的是监听数据变化的方式不同。定义的对象中的属性，
2024-01-23 14:16:43
1495
原创 【Vue3】组件通信
父传子：props、v-model、$refs、默认插槽、具名插槽子传父：props、自定义事件、v-model、$parent、作用域插槽祖传孙、孙传祖：$arrts、provide、inject兄弟组件、任意组件之间传值：mitt、pinia
2024-01-12 16:53:56
911
原创 使用Echarts图表时，页面切换后并且改变页面窗口大小，再切回原来页面Echarts图表显示有问题
可以看到，即使我们已经调用了resize方法，但是在进入页面的时候并没有去调用，所以Echarts图表不会自动恢复原来的样子，这时候我们再改变一下当前页面窗口大小，图表又可以再次调用resize方法，然后恢复原来的大小。所以这时候只需要我们手动调用一下resize方法就可以了。同时，我们还可以使用Vue Router提供的组件内守卫 beforeRouterEnter 来手动触发echarts的resize事件，它会在进入组件路由时触发。什么时候去手动调用resize方法呢？
2023-07-21 16:13:28
944
原创 Vue项目运行报错Error: error:0308010C:digital envelope routines::unsupported
在使用Node.js 18.16.0版本运行Vue项目时，报错 error:0308010C:digital envelope routines::unsupported。这是因为在Node 18版本中，默认使用了OpenSSL 3.0及以上版本，这个版本和之前的版本有所区别，它添加了一些新的特性，但同时也移除了一些旧的特性，从而导致一些依赖老版本的代码无法正常运行。所以，在一些使用了Old Crypto API或者其他与OpenSSL相关的有所不同的API的应用程序中，可能会出现奇怪的问题，
2023-05-07 16:15:07
746
原创 将Egg项目部署到阿里云服务器
1、连接阿里云服务器，上传文件2、在阿里云服务器上安装Nodejs3、下载项目依赖4、安装egg-scripts 模块5、启动项目6、阿里云服务器开启7001端口
2023-05-03 15:35:57
1399
原创 解决模态框中的地图打开后中心点偏向左上角的问题
出现这个问题的原因是地图初始化是在mounted生命周期进行的，也就是说模态框还没有被打开就加载好地图了，而此时模态框的宽高是0，因此地图的中心点就会出现在左上角。
2023-02-01 10:08:54
334
5
原创 【vue】实现滚动条滚动到底部时发送请求获取数据
当后端给我们一个分页获取数据的接口时，我们前端可以通过设置分页按钮来获取到所有的数据，也可以通过判断滚动条位置，当滚动条滚动到底部时就发送请求获取下一页的数据，这样我们就可以不设置分页按钮也能获取到所有的数据。
2023-01-19 17:17:28
1951
原创 nodejs事件驱动——模拟事件
事件注册可以使用on、addListener、once方法，它们都有两个参数，第一个参数表示事件名，第二个参数表示事件处理程序，我们可以给事件处理程序传递参数。可以看出EventEmitter是一个类，或者说是一个构造函数。都是围绕惯⽤的异步事件驱动架构构建的，在该架构中，某些类型的对象(nodejs中的事件驱动是利用触发器中的API来进行完成的，EventEmitter就是一个触发器。注册事件，事件被调用一次就会被销毁。使用on方法可以注册一个事件多次。事件解绑可以使用off、
2022-10-31 19:42:08
674
3
原创 NodeJS异常处理和内置模块介绍
NodeJS在2009年诞⽣，NodeJS 是⼀个开源与跨平台的 JavaScript 运⾏环境， 也叫Node.js或者Node。所谓“运⾏环境”有两层意思：⾸先，JavaScript语⾔通过Node在服务器运⾏，在这个意义上，Node有点像 JavaScript虚拟机；其次，Node提供⼤量⼯具库，使得 JavaScript语⾔与操作系统互动(⽐如读写⽂ 件、新建⼦进程)，在这个意义上，Node⼜是 JavaScript的⼯具库。
2022-10-22 16:28:34
1406
原创 webpack打包工具的基本使用
由于我们在出口 (output) 中设置了 clear:true ，因此每次我们改动了代码重新打包项目的时候，都会把dist文件夹清理掉重新生成一个新的打包文件，我们的html文件也会被清理掉，因此每次打包都需要我们重新建一个html文件，而使用HtmlWebpackPlugin插件就不再需要我们每次在打包后重新建一个html文件，因为这个插件会帮我们自动生成一个html文件。简单来说，webpack就是用来将项目模块化文件打包生成普通脚本文件，然后再引入到html文件中。
2022-10-07 23:55:14
1591
2
原创 两分钟快速上手less
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。全局安装less局部安装less查看less版本lessc -v将.less文件转成.css文件vscode中安装一个插件：Easy LESS，此插件可以自动将.less文件转成.css文件。
2022-10-06 16:55:33
678
10
原创 axios介绍以及对axios进行二次封装
axios和ajax的区别？ajax特点:1、ajax是异步的XML和JavaScript2、可以运行浏览器 不可以运行在node 3、发送给后台数据需要手动转换，请求头需要手动设置 4、后端响应的数据需要自己转换成js对象格式 axios特点:1、axios是基于promise的http库 2、可以调用promise的api 3、axios默认发送就是get请求，发送数据默认格式为json 4、axios请求头的数据格式会自动转换
2022-10-05 22:58:12
12909
3
原创 【Vuex】vue状态机详解
使用了mapState方法之后，我们在插值语法直接使用{{msg}}、{{sum}}即可，不需要写成：{{$store.state.msg}}、{{$store.state.sum}}，同理mapGetters方法也一样。假设A组件想要拿B组件里面的数据，那就把A组件和B组件的数据放到Vuex中，A组件想要获取B组件数据从vuex中拿，B组件想要获取A组件的数据也从Vuex拿。方法提交该方法给Mutation来执行，Mutation执行完后，将处理完的数据给State，然后State重新渲染数据到页面。
2022-10-02 11:04:04
2172
5
原创 【vue-router】动态路由、嵌套路由、守卫以及编程式导航
例如 : 有一个user组件，对于所有id不同的用户，都要使用这个组件来渲染，那么可以在vue-router的路由路径中使用动态路径参数来达到这个效果。使用$router.push()跳转到指定路由，会向history栈添加一个新的记录，当用户点击浏览器回退按钮的时候，可以回到跳转前的url。使用name与params结合的方式传递的参数时，参数是携带在$route中的，且传递的参数是一次性的，刷新页面数据会丢失。可以看到，当我们更改动态路径参数时，页面没有发生跳转，仍然是当前页面。
2022-10-01 09:01:38
3415
4
原创 【vue-router】Vue路由从创建到使用
路由可以看成加载组件的另一种方式，使用路由来实现组件之间的跳转。vue-router是vue的一个插件，用来提供路由功能。通过路由的改变可以动态加载组件，达到开发单页面程序的目的。第一步：使用CDN引入vue-router插件 第二步：定义组件 第三步：创建路由对象数组 第四步：创建路由器实例对象 第五步：将路由器对象注入到vue实例中 第六步：使用路由
2022-09-29 20:30:56
1305
原创 Vue2和Vue3的区别——实例创建、响应式数据代理、v-for和v-if优先级、生命周期
组合式API将Vue2中需要在data、methods、computed、created等选项中实现的功能合并到了一起，所以使用组合式API不需要在不同的选项做不同得操作。Vue2创建应用使用new Vue()构造函数，而Vue3通过 creatApp 函数创建一个新的应用实例，并且实例和模板绑定需要使用mount方法。vue3数据模型会经过一个proxy对象代理，vue2数据模型使用es5的Object.defineproperty()实现代理。在vue2中：v-for 优先级比 v-if 优先级高。
2022-09-28 20:53:31
1953
2
原创 Vue插件(Plugin)、动态组件(component)和混入(mixin)介绍
默认情况下，当组件在切换的时候都会重新创建组件，但是有些时候我们希望组件实例能够被在它们第一次被创建的时候缓存下来。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。在混入时，methods会合并成为一个对象，如果对象的键名发生冲突，则保留组件对象的键值对。不建议使用全局注册混入对象，一旦使用全局混入，它将会影响以后创建的每一个vue实例。同名的钩子函数会被合并为一个数组，依次都会被调用，但是混入对象的钩子函数先被调用。数据对象在混入时，会进行合并，发生冲突时，保留组件的数据。
2022-09-28 18:49:11
3261
3
原创 Vue基础之插槽、自定义指令、render函数、过滤器
Vue中多有的指令都以 v- 来调用。但是，有时候Vue提供给我们的指令并不能满足我们的需求，这个时候 我们就需要自定义指令。指令允许我们对普通 DOM 元素进行底层操作。在Vue实例或组件中添加选项directivesbind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
2022-09-27 19:22:27
1390
3
原创 Vue组件之间如何进行通信？
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。组件注册的时候需要为该组件指定各种参数。因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
2022-09-26 19:00:30
586
4
原创 Vue计算属性computed和监听属性watch的区别
我们希望一个变量是经过某种计算然后输出而不是直接输出的时候可以使用到计算属性，计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。而每次调用函数都会导致函数的重新执行。计算属性就是拿着Vue实例已有的属性计算或处理完后返回的一个全新的所以计算属性是一个属性，我们可以在插值语法中直接使用。
2022-09-24 07:30:00
2689
6
原创 Vue基础之事件机制、事件修饰符以及双向数据绑定
滚动事件的默认行为 (即滚动行为) 将会立即触发 ，一般与scroll连用，能够提升移动端的性能 （因为每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。Vue提供了更好的方式：事件处理函数只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，通过事件修饰符来完成这些细节。它会根据控件类型自动选取正确的方法来更新元素。Vue使用 v-on 指令监听DOM 事件，并在触发时运行一些 JavaScript 代码， 还可以接收一个需要调用的方法名称，我们可以在方法中通过。
2022-09-23 20:43:39
585
1
原创 Vue基础之模板语法介绍
Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。用来做单页面应用，页面跳转用的vue插件路由来实现跳转。vue官网已经更新到了vue3，但是我们还是先从vue2开始。我们使用vue之前需要先引入vue框架，直接去官网中复制script标签：学习->教程->安装：
2022-09-23 17:16:19
1213
5
原创 一文带你读懂Vue生命周期
（也就是说，如果有template选项，就以template为模板进行解析，如果我们还手动写了一个render函数，就以render创建的html元素为模板进行解析）vue生命周期（又称生命周期回调函数、生命周期函数、生命周期钩子），指的是vue在关键时刻帮我们调用一些特殊名称的函数。实例初始化之前，完成一些事件和默认生命周期，此时还不可以访问data中的数据和methods中的方法。实例数据变化触发的生命周期，此时数据已经是最新的，并且视图重新渲染完毕。实例销毁之前，此时仍然可以访问到Vue实例。
2022-09-23 11:18:45
535
2
原创 TypeScript类和多态、抽象类、访问修饰符
父类类型的引用指向子类对象，通过该引用可以访问到父类的特性(属性、方法)，但是无法访问子类得特性；如果子类对父类的特性进行重写，通过该引用调用的重写特性依旧为子类特性。 一般情况下，抽象类无法创建对象，抽象类中可以存在抽象方法（也可以不存在抽象方法），抽象方法指的是没有方法体的方法。抽象类中可以存在抽象方法和非抽象方法，一个类中具有抽象方法，那么该类一定是抽象类 。重写：如果子类方法与父类一致，子类会对父类的方法进行重写；表示共有的，可以在当前类、子类、其他类进行访问。1、子类必须实现抽象类中的方法。
2022-09-21 19:40:53
744
8
原创 Typescript基本语法介绍
Typescript是Javascript超集，是JavaScript+强类型。javascript 是弱类型语言，无法进行类型校验；而Typescript解决了这个问题，它可以对类型进行校验。跨平台：TypeScript 编译器可以安装在任何操作系统上，包括 Windows、macOS 和 Linux。ES6 特性：TypeScript 包含 ECMAScript 2015 (ES6) 的大部分特性，例如箭头函数。面向对象的语言：TypeScript 提供所有标准的 OOP 功能，如类、接口和模块。
2022-09-20 20:27:37
1400
2
原创 ES6异步编程解决方案——async、Generator、Promise
上述代码有三个状态，一个yield就是一个状态，一个yield就是一个代码运行节点，执行一次迭代器的next方法，到第一个yield，再执行一次，到下一个yield。yield后面是每一种状态的描述。返回值：Promise实例，当p1、p2状态都为fulfilled时候，该实例的状态才为fulfilled，此时p1，p2的返回值组成一个数组，传递给该实例的回调函数；简单来说，async是一个函数，是一个异步编程解决方案，内部封装了generator函数，是一个语法糖，内部自带执行器，与await配合使用；
2022-09-19 19:59:23
1011
9
原创 ES6——Set和Map集合介绍
遍历set.keys()得到set的key值，遍历set.values()得到set的value值，遍历set.entries()得到key和value值组成的数组。遍历map.keys()得到map的key值，遍历map.values()得到map的value值，遍历map.entries()得到key和value值组成的数组。forEach接收一个回调函数作为参数，回调函数有三个参数，分别表示key值，value值以及set集合本身，返回值为undefined。不设置参数，创建一个空的set集合。
2022-09-18 10:29:17
1555
5
原创 ES6迭代器详细介绍
迭代器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。Iterator 的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。Iterator接口就是对象里面的一个属性，这个属性叫做Symbol.iterator。而原生具备 I
2022-09-17 19:24:30
1838
3
原创 JavaScript的关键字var、let、const三者的区别
1、var声明的变量存在变量声明提升，而let和const声明的变量不存在变量声明提升var声明的变量存在变量声明提升，因此在声明之前访问该变量不会报错，而使用let和const会报错：2、var声明的变量可以重复声明，而let和const声明的变量不可以重复声明var重复声明不报错，而let和const重复声明会报错：3、var声明的变量不存在局部作用域（块级作用域），而let和const声明的变量存在块级作用域var声明的变量不存在块级作用域，因此在外部可以访问到{}里面声明的变量，但是le
2022-09-15 20:49:03
522
2
原创 Symbol基本数据类型
ES6引入的一种新的原始数据类型Symbol，表示独一无二的值。Symbol函数可以接受参数，表示对于这个唯一值的描述，属于基本数据类型，Symbol()函数会返回symbol类型的值。
2022-09-15 19:11:52
1091
2
原创 ES6类和继承
2、constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。constructor里面定义的属性属于实例的私有属性。3、定义在类体的方法称为实例方法，其实是存在于Person.prototype中，可供所有的实例调用。比如上述的sayName方法就属于公共方法，可供所有实例使用。定义在类体的属性：如果是引用数据类型，就属于实例的私有属性，比如上述的test；如果是
2022-09-15 17:12:33
772
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人