基于Vue和Nest搭建的Web3D汽车组装演示系统

本文只是对该项目进行简要说明，不对具体技术实现进行详细描述！！（能够将本文看做项目说明文档食用）

1、前言

本项目是一个毕业设计的选题，因为绝大部分是大数据和电商相关的选题，最终选择了这个比较新颖的选题，就想着尝试去挑战一下本身。

其实当时脑子里对这个选题彻底没有头绪，有好几回在思考这个项目怎么实现的时候，头皮发麻以为已经超出了当前能力水平，所幸找到了实现思路和方向，因而开始着手为项目开发作准备，好比去学习须要运用的技术栈、设计项目开发思路和项目架构设计以及搭建。

其实本文用到的不少技术栈都是我比较陌生或者没接触过的，所以在学习上也花费了较多的时间，好比说TypeScript、Three.js、Nest和TypeORM等，因此项目中会存在不足和不合理的地方，欢迎你们指出来哈！

项目背景

此项目是基于JavaScript语言开发的3D可视化Web应用程序，为了设计出轻量级的互联网应用程序，采用B/S系统架构，在基于WebGL的3D可视化交互平台基本构架的基础上，设计出集沉浸感与良好交互操做于一体的汽车组装过程的可视化Web页面。主要实现了汽车组装模块、用户中心模块和车辆信息模块功能。

本系统但愿经过互联网技术，让人们可以以人机交互的方式感觉到汽车组装过程，解决人们与汽车之间相互了解带来的鸿沟，而且可经过用户汽车组装获取的数据进行分析，推进汽车行业发展。

2、相关技术概述

因为该项目是独立开发的，所以运用的都是前端领域的技术栈，并做为互联网项目进行开发。

前端技术

为了方便项目维护，将前端项目分为了前台和后台，相互独立进行开发的。

前端须要解决的难点是对汽车组装过程的实现，在前期的技术选型过程当中，最终选择使用WebGL技术提供了将3D模型渲染在Web网页上显示的能力，因为该技术相对底层，因此选择Three.js封装库，主要是其提供了可以经过简单的方式就能够实现包括相机、光源、场景、控制器以及3D模型等对象的三维场景。在实现汽车组装功能模块的过程当中，对该模块封装成了单独的组件便于在项目中维护和复用。

相关技术栈：

• WebGL：为了将JavaScript和OpenGL ES2.0相结合而推出的底层Web3D绘图API标准；
• Three.js：轻量级基于原生WebGL封装运行的三维引擎；
• Vue 3.0：一套用于构建用户界面的渐进式框架；
• Element Plus：基于Vue 3.0的桌面端组件库；
• axios：易用、简洁且高效的http库；

后端技术

前期对后端技术选型的过程当中，在选择后端框架的过程当中，在比较了egg、koa和nest框架后，选择了nest框架。

采用Node.js服务端应用框架Nest和关系型MySQL数据库，并以JavaScript弱类型语言的超集TypeScript进行开发，使用MVC架构为后期的开发和维护下降成本，并以RestAPI的形式向视图层提供接口服务，为实现经过更轻量级的方法来共享组件，以Nest框架提供的Monorepo模式进行开发，为平台开发高效、可扩展的企业级后端服务。同时集成了经过Passport和JWT策略实现了用户身份验证和邮箱验证等功能。

这里讲一下我我的喜欢Nest框架的缘由，从框架风格角度，Nest框架的写法和Java的Spring框架很是相似，因为笔者对Spring框架自己有必定熟练度，因此上手Nest也比较快；从模块复用角度，后为了方便端代码维护，将前台服务和后台服务在一个Workspace中分为了两个Project，而Nest提供了Monorepo模式，将库以一种简单、轻量级的方式提供了一种共享代码的方式，刚好知足项目需求，将重复使用的模块以库的形式在多个Project中共享使用。

相关技术栈：

• Node.js：基于Chrome V8引擎构建的JavaScript运行时服务端平台；
• Nest：开箱即用的Node.js服务器端应用程序的框架；
• Redis数据库：跨平台非关系型数据库；
• TypeORM：对象关系映射器（ORM）框架；
• JWT认证技术：目前最流行的跨域认证解决方案；
• MySQL数据库：目前最流行的关系型数据库系统之一；
• TypeScript：JavaScript类型的超集；

3、系统分析与设计

系统分析

本系统分为汽车组装演示系统和后台管理系统，汽车组装演示系统包括了用户信息管理模块、汽车组装模块以及官方汽车品牌模块，其中核心技术是汽车组装模块，实现了用户可经过人机交互的形式组装本身想要的汽车型号、配置和车身颜色等功能；然后台管理系统主要是用户管理模块、数据统计分析、汽车管理模块以及品牌管理模块。

系统用户用例图

系统架构

本项目是基B/S架构进行设计，前端视图层技术的搭建则使用Vue.js框架实现，3D可视化技术则采用基于WebGL封装的Three.js引擎库。而服务端技术则由Node.js服务端应用框架Nest搭建，集成了JWT用户身份认证、Redis缓存以及ORM对象关系映射器，数据持久层是经过MySQL关系型数据库存储。

系统功能模块设计

前台系统功能结构

后台系统功能结构

4、系统功能实现

前台系统功能实现

登录注册界面

前台首页

车型库

用户中心

汽车详情

汽车组装

后台系统功能实现

后台数据分析

用户管理界面

官方车辆界面

品牌管理界面

5、总结与展望

总结

这个项目从肯定选题到顺利完成项目答辩，这个过程对我来讲有许多的成长，这个过程按时间顺序主要能够划分为如下几件事情：

• 前期对整个项目进行规划，明确设计思路，进行系统功能需求分析和技术选型；
• 学习相关技术以及验证技术可行性，同时学习和了解了许多开源项目架构搭建的思想；
• 项目架构设计和搭建，其中包括数据库设计、先后端项目架构设计等；
• 完成总体项目的业务需求开发；

展望

这个项目我我的认为还有很大的优化和改良空间，但因为本人即将成为社畜，可能会比较少精力继续去完善，但最主要须要完善的地方为如下几点：

1. 本系统的核心功能是汽车组装功能模块的实现，因为采用3D引擎渲染技术，所用的汽车模型类别单一，须要考虑经过导入汽车模型的方式增长模型丰富度。
2. 因为采用了3D引擎渲染技术，所以对硬件系统的显卡性能是比较看重的，因此还须要对该性能方面继续优化，以下降对硬件性能上的消耗。
3. 后续会尽力将该项目发布到线上方便你们在线预览。

项目仓库地址：github.com/Lewage59/ca…