前端项目技术栈

Vue工程逻辑

1. Vue 工程逻辑
  • 组件化：Vue 应用通常由多个组件组成，每个组件负责一部分 UI 功能。
  • 响应式数据：使用 Vue 的响应式系统，如 data、computed、watchers 等，来管理和响应数据变化。
  • 事件处理：通过 v-on 指令处理用户交互和组件间通信。
  • 生命周期钩子：利用 Vue 组件的生命周期钩子进行初始化、更新和销毁操作。
2. API-Vue-Router
  • Vue Router：Vue Router 是 Vue 的官方路由管理器，用于构建单页面应用（SPA）。
  • 路由定义：在 router/index.js 文件中定义路由，将 URL 路径映射到组件。
  • 导航守卫：使用路由守卫（navigation guards）来控制页面访问权限和数据加载。
3. 后台接口接入
  • HTTP 客户端：使用 axios 或 fetch 等 HTTP 客户端库来发送请求和接收响应。
  • API 抽象：创建服务层（services）或工具函数（utils）来抽象 API 调用，使组件逻辑更清晰。
  • 数据管理：通过 Vuex 或 Pinia 等状态管理库来管理全局状态和共享数据。
4. Vue 视图开发
  • 模板语法：使用 Vue 的模板语法来声明式地绑定数据到 DOM。
  • 组件通信：通过 props、事件、插槽等方式在组件间传递数据和事件。
  • 条件渲染：使用 v-if、v-else、v-else-if 和 v-show 指令来控制元素的显示。
  • 列表渲染：使用 v-for 指令来渲染列表和循环数据。
5. Router 管理

  • 路由配置：在 Vue Router 中配置路由，包括路径、组件、重定向和别名。

  • 嵌套路由：设置嵌套路由来创建多级菜单和布局。

  • 路由懒加载：使用路由懒加载来分割代码，提高应用加载速度。

  • 路由元信息：利用路由元信息（meta fields）来传递额外的路由信息，如角色权限。

SVG

SVG 是一种开放标准，适用于创建图标、图表、插图、用户界面元素等。它们可以直接在 HTML 文档中作为 XML 代码嵌入，也可以作为 .svg 文件被引用。SVG 的这些特性使其成为现代网页设计中不可或缺的一部分。以下是 SVG 的一些主要特性：

  • 缩放不失真：SVG 图像是矢量的，这意味着它们可以在任何分辨率下放大或缩小而不会丢失清晰度。
  • 交互性：SVG 支持交互性，可以与 JavaScript 相结合，创建可交互的图形和动画。
  • 样式化：SVG 可以使用 CSS 进行样式化，也可以直接在 SVG 元素内使用 style 属性。
  • 脚本化：SVG 可以使用 JavaScript 进行脚本化，允许动态修改图形属性和响应用户事件。
  • 集成性：SVG 可以直接嵌入到 HTML 中，也可以作为图像文件被引用。
  • 动画：SVG 支持 SMIL（Synchronized Multimedia Integration Language），这是一种用于描述动画的 XML 基础语言。
  • 可访问性：SVG 元素可以像普通的 HTML 元素一样设置 title 和 desc 属性，提高可访问性。
  • 文件大小：对于复杂的图形，SVG 文件通常比位图图像文件（如 JPEG 或 PNG）要小。
  • 编辑和创作：SVG 文件是文本格式，可以使用任何文本编辑器创建和编辑。
  • 浏览器支持：现代浏览器普遍支持 SVG，包括 Chrome、Firefox、Safari、Edge 等。

ThreeJS

Three.js 是一个基于 WebGL 的 JavaScript 库，它提供了一个高级的 API，使得开发者能够更容易地构建和呈现复杂的 3D 场景。Three.js 抽象化了 WebGL 的复杂性，让开发者可以专注于创建视觉效果而不是底层图形渲染的细节。以下是 Three.js 的一些核心特性和组件：

  • 场景（Scene）：场景是 Three.js 中所有对象的容器，包括 3D 模型、灯光、摄像机等。
  • 摄像机（Camera）：Three.js 提供了多种摄像机类型，如透视摄像机（PerspectiveCamera）和正交摄像机（OrthographicCamera）
  • 网格（Geometry）：网格定义了 3D 模型的形状，由顶点（vertices）、面（faces）、线（lines）等组成。
  • 材质（Material）：材质定义了网格的表面属性，如颜色、纹理、透明度、反光等。
  • 纹理（Texture）：纹理是图像的 2D 表示，可以应用于材质，为 3D 模型添加细节和真实感。
  • 光照（Light）：包括点光源（PointLight）、聚光灯（SpotLight）、平行光（DirectionalLight）和环境光（AmbientLight）。
  • 动画（Animation）：Three.js 提供了动画系统，可以对对象的位置、旋转、缩放等属性进行关键帧动画。
  • 物理（Physics）：Three.js 通过一些扩展库（如 Ammo.js）支持物理模拟，如碰撞检测和刚体动力学。
  • 渲染器（Renderer）：Three.js 使用渲染器来绘制场景。除了 WebGL 渲染器，Three.js 还支持 CanvasRenderer 和 SVGRenderer。
  • 控制库（Controls）：Three.js 提供了多种控制库，如 OrbitControls 和 DeviceOrientationControls，用于实现用户交互。
  • 扩展和插件：Three.js 拥有一个活跃的社区，开发了许多扩展库和插件，用于添加额外的功能，如粒子系统、后期处理效果等。
  • 性能优化：Three.js 提供了一些工具和技术来优化性能，如 LOD（Level of Detail）、几何体合并、纹理压缩等。

Axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js 环境。它是一个流行的库，用于执行 HTTP 请求，如 GET、POST、DELETE 等，以与后端 API 进行通信。Axios 提供了易于使用的 API，可以简化数据的发送和接收过程。

以下是 Axios 的一些主要特性：

  • 从浏览器中创建 XMLHttpRequests：在前端开发中，Axios 允许你发送异步请求到服务器并处理响应。
  • 从 node.js 发出 http 请求：在服务器端，Axios 可以使用 node.js 的 http 和 https 模块。
  • 支持 Promise API：Axios 支持 ES6 Promises，这意味着你可以使用 .then() 和 .catch() 方法来处理成功的响应和捕获错误。
  • 转换请求和响应数据：Axios 允许你转换发送到服务器之前的数据，以及从服务器接收到的数据。
  • 客户端支持防御 XSRF：Axios 可以配置来保护你的应用程序免受跨站请求伪造（XSRF）攻击。
  • 自动转换 JSON 数据：Axios 会自动将 JSON 字符串转换为 JavaScript 对象，反之亦然。
  • 客户端支持防御 CSRF：Axios 支持在请求中添加 CSRF 令牌，以防止跨站请求伪造。
  • 并发请求：Axios 支持 axios.all() 和 axios.spread() 方法，可以同时发送多个请求并在所有请求都完成后执行操作。
  • 拦截请求和响应：你可以使用 Axios 拦截器来拦截并处理请求或响应，这在设置通用的请求头或响应处理时非常有用。
  • 取消请求：Axios 支持取消请求，这对于处理用户界面操作（如取消按钮）非常有用。
  • 支持防御重定向：Axios 允许你配置请求以防止不必要的重定向。
  • 支持防御超时：你可以为请求设置超时时间，如果服务器在指定时间内没有响应，请求将被自动取消。

HTTP 请求

HTTP（超文本传输协议）是一种用于分布式、协作式、超媒体信息系统的协议，它是万维网数据通信的基础。HTTP 请求是客户端（如浏览器）向服务器请求数据或要求服务器执行特定任务的调用。以下是几种常见的 HTTP 请求方法及其用途：

  • GET：
    • 用途：请求从服务器检索特定资源。
    • 特点：一般用于请求服务器发送数据。
    • 数据：通常将数据附加在 URL 之后，作为查询字符串参数传递。
    • 缓存：GET 请求可以被缓存。
    • 历史：浏览器会保留浏览历史记录。
    • 可读性：URL 中包含的参数可以在浏览器中看到，因此不安全。
  • POST：
    • 用途：向服务器提交数据进行处理，如提交表单或上传文件。
    • 特点：用于传输数据给服务器，不用于检索数据。
    • 数据：数据通常包含在请求体（body）中。
    • 缓存：POST 请求不会被缓存。
    • 历史：浏览器不会保留 POST 请求的历史记录。
    • 可读性：数据不会显示在 URL 中，因此比 GET 更安全。
  • PUT：
    • 用途：将指定资源的所有当前表示替换为请求负载。
    • 特点：用于上传文件或更新资源。
    • 数据：数据通常包含在请求体（body）中。
    • 缓存：PUT 请求可以被缓存。
    • 幂等性：多次执行相同的 PUT 请求应该具有相同的效果。
  • DELETE：
    • 用途：请求服务器删除指定的资源。
    • 特点：用于删除服务器上的资源。
    • 数据：通常不包含请求体，但可以包含。
    • 缓存：DELETE 请求可以被缓存。
    • 幂等性：多次执行相同的 DELETE 请求应该具有相同的效果。
  • HEAD：
    • 用途：请求获取与 GET 请求相同的响应，但没有响应体。
    • 特点：用于获取响应头信息。
    • 数据：不包含响应体，只包含响应头。
  • PATCH：
    • 用途：对资源进行部分修改。
    • 特点：用于更新部分资源，而不是整个资源。
    • 数据：数据通常包含在请求体中。
    • 幂等性：PATCH 请求不是幂等的，因为多次应用相同的 PATCH 可能会导致不同的结果。
  • OPTIONS：
    • 用途：描述目标资源的通信选项。
    • 特点：用于描述服务器支持的请求方法。
    • 数据：通常用于跨域资源共享（CORS）预检请求。
  • CONNECT：
    • 用途：将连接改为管道方式的代理服务器。
    • 特点：通常用于 SSL 加密服务器的连接。

ZTree

ZTree 是一个基于 jQuery 的树形结构插件，它提供了丰富的功能和灵活的配置选项，用于在网页上展示层次数据。ZTree 支持多种类型的数据源，包括 JSON 和 XML，并且可以轻松地与服务器端数据进行交互。以下是 ZTree 的一些主要特性：

  • 多种树节点：支持普通节点、选择节点、多选节点等。
  • 灵活的节点操作：可以轻松实现节点的展开、折叠、创建、删除、编辑等操作。
  • 节点选择和勾选：支持单选和多选，以及节点勾选功能。
  • 异步加载：支持从服务器异步加载数据，可以设置加载的 URL 和回调函数。
  • 数据过滤：可以根据条件过滤树节点，只显示符合条件的节点。
  • 自定义图标：可以为节点设置自定义图标，支持图片和 CSS 样式图标。
  • 节点编辑：支持节点的编辑功能，包括拖拽、重命名等。
  • 事件处理：提供了丰富的事件回调，如 onClick、onCheck、onAsyncSuccess 等。
  • 主题支持：支持多种主题，可以自定义树的外观样式。
  • 数据绑定：支持将树形结构与 JSON 或 XML 数据绑定，方便数据的更新和管理。
  • 节点排序：可以对节点进行排序，支持父子节点之间的排序。
  • 节点展开/折叠：支持设置节点的默认展开或折叠状态。
  • 节点拖拽：支持节点的拖拽功能，可以跨树或在同一棵树内移动节点。
  • 节点缓存：支持节点状态的缓存，包括展开、折叠和勾选状态。
  • 兼容性：兼容主流浏览器，包括 IE、Firefox、Chrome、Safari 等。

v-contextmenu

v-contextmenu是一个 Vue.js 组件，用于在 Vue 应用程序中轻松实现上下文菜单（右键菜单）。它提供了一个灵活且易于配置的解决方案，允许开发者为各种元素添加自定义的右键菜单。

主要特性：
  • 易于集成：作为一个 Vue 组件，它可以无缝集成到任何 Vue 项目中。
  • 自定义菜单项：支持完全自定义菜单项，包括文本、图标、子菜单等。
  • 事件处理：可以为菜单项绑定事件处理器，如点击事件。
  • 嵌套子菜单：支持创建嵌套的子菜单，以实现更复杂的菜单结构。
  • 样式定制：允许通过 CSS 定制菜单的样式，以符合应用程序的外观和感觉。
  • 性能优化：通过虚拟滚动等技术优化长列表的性能。
  • 键盘导航：支持键盘操作，提高无鼠标环境下的可用性。

Cookie 是一种存储在用户本地计算机上的小型数据片段，由网站创建并通过用户的 Web 浏览器保存。当用户首次访问网站时，Web 服务器可以发送一个或多个 cookie 到用户的浏览器。浏览器会将这些 cookie 保存在本地，并在随后的每次请求中自动发送回服务器，以便服务器识别用户并恢复会话状态。

特性和用途：
  • 会话状态管理：用于识别用户在应用程序中的会话，通常用于登录系统
  • 生命周期：可以设置为会话期间有效（浏览器关闭时消失）或特定过期时间
  • 追踪和分析：用于分析用户行为，帮助网站优化和提供定制的广告
  • 访问方式：通过 document.cookie 进行访问，也可以通过 HTTP 头部在客户端和服务器之间传递
  • 存储位置：Cookie 存储在用户的浏览器中
限制：
  • 大小限制：单个 cookie 的大小通常限制在 4KB 左右。
  • 数量限制：浏览器对每个域名下的 cookie 数量有限制，通常为 20 个左右。
  • 安全问题：如果不正确地使用，cookie 可能会引起安全问题，如会话劫持。

xlsx

xlsx是一个强大的 JavaScript 库，用于处理 Excel 文件，包括 XLSX 和 XLS 格式。它支持解析、修改和写入电子表格数据。xlsx 库可以在浏览器和 Node.js 环境中使用，为开发者提供了丰富的 API 来操作 Excel 文件。

主要特性：
  • 读写支持：能够读取和写入 XLSX 和 XLS 格式的文件。
  • 流式接口：支持流式读取和写入大型文件，无需将整个文件加载到内存中。
  • 样式和格式：可以读取和写入单元格样式和格式，包括字体、颜色、边框等。
  • 公式支持：能够解析和写入 Excel 公式。
  • 多工作表：支持操作多个工作表（sheets）。
  • 自定义功能：可以通过插件或自定义解析器/写入器来扩展功能。

webpack和vite对比

Webpack工作原理：

  1. 初始化：Webpack 从配置文件（webpack.config.js）中读取配置信息，包括入口文件、输出配置、加载器（loaders）、插件（plugins）等。
  2. 构建编译器：Webpack 创建一个编译器（Compiler）对象，它负责整个编译过程。
  3. 编译：编译器开始编译过程，从入口文件开始，递归地解析所有依赖的模块。
  4. 加载器处理：在编译过程中，根据不同文件类型和配置的加载器，Webpack 会对文件进行相应转换
  5. 插件系统：Webpack 在编译过程中会触发多个钩子事件，插件可以监听这些事件并执行特定的任务，如压缩代码、生成 source map、优化图片等。
  6. 输出：编译完成后，Webpack 将所有模块打包成一个或多个 bundle 文件，并根据配置输出到指定目录。
  7. 热模块替换（HMR）：Webpack Dev Server 提供了热模块替换功能，可以在开发过程中实时更新模块，而无需刷新页面。

Vite工作原理：

  1. 快速启动：Vite 在开发模式下利用浏览器的 ES 模块原生支持，能够实现近乎瞬时的启动速度。
  2. 增量编译：Vite 在开发过程中只重新编译改变的部分，而不是整个项目，这大大提高了开发效率。
  3. 简洁配置：Vite 的配置文件（通常是 vite.config.js）相对简单，对于大多数项目来说，默认配置已经足够使用。
  4. 热更新：Vite 提供了快速的热更新体验，可以在文件变化时立即更新页面，无需等待编译过程。
  5. 生产构建：尽管开发体验非常快，Vite 在生产环境下依然提供了完整的构建优化，包括压缩、代码分割等。

特点：

  • 开发服务器速度快，因为它利用了现代浏览器对 ESM 的支持。
  • 默认支持 TypeScript、JSX、CSS 预处理器等现代前端技术。
  • 构建配置简单，许多功能在默认情况下已经优化。
  • 与 Vue 3 和 React 17+ 有很好的集成。

总结：Webpack 更加成熟和灵活，适用于各种规模的项目，而 Vite 则注重开发体验和速度，特别适合现代框架（如 Vue 3 和 React 17+）的项目

Three.js技术栈

Three.js 是一个基于 WebGL 的 JavaScript 3D 库，它提供了一套强大的工具和组件来创建和显示3D图形在网页上。以下是你提到的一些 Three.js 组件的详细介绍：

  1. Scene（三维场景）：
    • Scene 是 Three.js 中所有对象的容器，包括几何体、灯光、相机等。它定义了3D世界的环境，可以包含多个子对象。
  2. PerspectiveCamera（透视相机）：
    • PerspectiveCamera 创建一个透视相机，模拟人眼观察世界的方式。相机有几个重要的属性，如 fov（视场角度）、aspect（宽高比）、near 和 far（裁剪面）。
  3. AmbientLight（环境光）：
    • AmbientLight 是一种没有方向的光，它会均匀地照亮场景中的所有对象。它通常用于模拟间接光或环境光。
  4. DirectionalLight（定向光）：
    • DirectionalLight 模拟了一个方向性的光源，比如太阳光。它有一个明确的方向，但不会随着距离的增加而衰减。
  5. WebGLRenderer（WebGL渲染器）：
    • WebGLRenderer 是 Three.js 中用于渲染场景的渲染器之一。它使用 WebGL 来在网页上绘制3D图形。它提供了多种渲染选项和性能优化工具。
  6. PMREMGenerator（PBR环境贴图生成器）：
    • PMREMGenerator 是用于生成 PBR（基于物理的渲染）环境贴图的工具。它可以帮助创建更真实的反射和折射效果。
  7. OrbitControls（轨道控制器）：
    • OrbitControls 是一种用户交互工具，允许用户通过鼠标或触摸控制来围绕场景中的物体旋转、缩放和平移视图。
  8. ViewHelper（视角指示器）：
    • ViewHelper 通常用于辅助用户理解当前的视图方向或提供视图控制的参考。它不是 Three.js 的标准组件，可能是特定项目中自定义的工具。
  9. Raycaster（射线处理器）：
    • Raycaster 是一个用于计算从相机发出的射线与场景中对象的交点的工具。它常用于实现点击或触摸事件的交互，比如选择场景中的物体。
  10. GridManager（网格管理器）：
    • GridManager 通常用于管理场景中的网格线，以帮助用户可视化和对齐3D对象。它不是 Three.js 的标准组件，可能是特定项目中自定义的工具。
  11. AxesHelper：
    • AxesHelper 是一个可视化工具，用于在场景中显示坐标轴（X、Y、Z轴），帮助开发者对齐和定位3D对象。
  12. CubeTextureLoader（天空盒加载器）：
    • CubeTextureLoader 用于加载天空盒纹理，天空盒是一种包围场景的全方向背景，可以增强场景的视觉效果。
  13. TModel_gltf, TModel_obj：
    • 这些可能是特定项目中用于加载和处理 .gltf 或 .obj 格式3D模型的自定义工具或类。.gltf 是一种现代的3D模型格式，而 .obj 是一种较早的格式。
  14. Geometry（几何体）：
    • 几何体定义了3D模型的形状，包括顶点、面、线等。Three.js 提供了多种内置的几何体，如立方体（BoxGeometry）、球体（SphereGeometry）等。
  15. Material（材质）：
    • 材质定义了几何体的表面属性，如颜色、纹理、反射率等。Three.js 支持多种材质类型，包括基本材质（MeshBasicMaterial）、标准材质（MeshStandardMaterial）、物理材质（MeshPhysicalMaterial）等。
  16. Mesh（网格）：
    • 网格是几何体和材质的组合，用于在场景中渲染3D对象。它通常用于表示复杂的3D模型。
  17. Light（光源）：
    • 除了环境光和定向光，Three.js 还提供了其他类型的光源，如点光源（PointLight）、聚光灯（SpotLight）和半球光（HemisphereLight）。
  18. Texture（纹理）：
    • 纹理是用于覆盖3D对象表面的图像。Three.js 支持多种纹理类型，包括基本纹理（Texture）、立方体纹理（CubeTexture）和视频纹理（VideoTexture）。
  19. Animation（动画）：
    • Three.js 提供了动画系统，允许开发者创建和控制3D对象的动画。这包括骨骼动画、形态动画（MorphAnimation）和关键帧动画。
  20. Loader（加载器）：
    • 加载器用于加载外部资源，如模型、纹理和音频。Three.js 提供了多种加载器，如 GLTFLoader、OBJLoader、TextureLoader 等。
  21. Controls（控制器）：
    • 控制器是用户交互的接口，除了 OrbitControls，还有 TransformControls（用于变换对象）、FirstPersonControls（第一人称控制器）等。
  22. Helpers（辅助工具）：
    • 除了 AxesHelper，还有 BoxHelper、ArrowHelper、PlaneHelper 等，用于在场景中可视化辅助线和形状。
  23. Post-processing（后处理效果）：
    • 后处理效果用于在渲染完成后对场景进行进一步的视觉效果处理，如颜色校正、模糊、景深等。Three.js 提供了 EffectComposer、RenderPass 等后处理工具。
  24. ShaderMaterial（着色器材质）：
    • ShaderMaterial 允许开发者使用自定义的顶点和片段着色器来创建复杂的视觉效果。
  25. Physics（物理模拟）：
    • Three.js 社区提供了物理引擎集成，如 ammo.js，用于模拟碰撞、重力和其他物理行为。
  26. VR/AR（虚拟现实/增强现实）：
    • Three.js 支持 VR/AR 技术，提供了 WebVR 和 AR.js 等库，允许开发者创建沉浸式体验。
  27. Audio（音频）：
    • Three.js 可以集成音频库，如 Howler.js，用于在3D场景中播放和控制声音。
  28. CanvasRenderer（Canvas渲染器）：
    • CanvasRenderer 是另一种渲染器，使用 HTML5 的 <canvas> 元素进行渲染，适用于不支持 WebGL 的环境。

SVG技术栈

SVG（Scalable Vector Graphics）是一种基于 XML 的向量图形格式，它被广泛用于网页设计中，以创建可缩放的图形。SVG 技术点包括：

  1. 基本形状：
    • <rect>：矩形
    • <circle>：圆形
    • <ellipse>：椭圆形
    • <line>：直线
    • <polyline>：折线
    • <polygon>：多边形
    • <path>：路径，用于创建复杂的形状
  2. 文本和字体：
    • <text>：文本元素
    • <tspan>：文本跨度，用于文本的样式和位置调整
    • <textPath>：文本路径，使文本沿路径排列
    • 字体属性：如 font-family、font-size、font-weight 等
  3. 填充和描边：
    • fill：填充颜色
    • stroke：描边颜色
    • stroke-width：描边宽度
    • stroke-linecap：描边端点样式
    • stroke-dasharray：描边虚线样式
  4. 渐变和图案：
    • <linearGradient>：线性渐变
    • <radialGradient>：径向渐变
    • <pattern>：图案填充
  5. 变换：
    • transform：应用变换，如平移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）
  6. 交互性：
    • onclick、onmouseover 等事件属性：用于添加交互行为
    • <a> 元素：创建可点击的超链接区域
  7. 动画：
    • <animate>：创建动画效果
    • <animateTransform>：对元素进行变换动画
    • SMIL（Synchronized Multimedia Integration Language）：SVG 的动画语言
  8. 滤镜效果：
    • <filter>：定义滤镜效果
    • <feGaussianBlur>：高斯模糊
    • <feDropShadow>：添加阴影
    • <feColorMatrix>：颜色矩阵
  9. 遮罩和剪裁：
    • <mask>：创建遮罩层
    • <clipPath>：定义剪裁区域
  10. 视图和视图框：
    • viewBox 属性：定义 SVG 画布的视图区域
    • preserveAspectRatio：控制 SVG 如何适应不同尺寸
  11. 脚本和样式：
    • <script> 元素：嵌入 JavaScript 代码
    • 内联 <style> 元素：定义 CSS 样式
  12. 响应式设计：
    • SVG 图形是矢量的，可以无损缩放，非常适合响应式设计
  13. 可访问性：
    • <title> 和 <desc> 元素：为 SVG 图形提供描述，增强可访问性
  14. 集成：
    • SVG 可以与 HTML、CSS 和 JavaScript 无缝集成，实现丰富的交互和动态效果
  15. 性能优化：
    • 使用 <use> 元素重用图形
    • 合理使用 <defs> 定义可重用的图形和样式
posted @ 2024-09-23 11:42  德琪  阅读(61)  评论(0)  编辑  收藏  举报