基於Vue和Nest搭建的Web3D汽車組裝演示系統

本文只是對該項目進行簡要說明，不對具體技術實現進行詳細描述！！（能夠將本文看做項目說明文檔食用）前端

1、前言

本項目是一個畢業設計的選題，因爲絕大部分是大數據和電商相關的選題，最終選擇了這個比較新穎的選題，就想着嘗試去挑戰一下本身。ios

其實當時腦子裏對這個選題徹底沒有頭緒，有好幾回在思考這個項目怎麼實現的時候，頭皮發麻以爲已經超出了當前能力水平，所幸找到了實現思路和方向，因而開始着手爲項目開發作準備，好比去學習須要運用的技術棧、設計項目開發思路和項目架構設計以及搭建。git

其實本文用到的不少技術棧都是我比較陌生或者沒接觸過的，所以在學習上也花費了較多的時間，好比說TypeScript、Three.js、Nest和TypeORM等，因此項目中會存在不足和不合理的地方，歡迎你們指出來哈！github

項目背景

此項目是基於JavaScript語言開發的3D可視化Web應用程序，爲了設計出輕量級的互聯網應用程序，採用B/S系統架構，在基於WebGL的3D可視化交互平臺基本構架的基礎上，設計出集沉浸感與良好交互操做於一體的汽車組裝過程的可視化Web頁面。主要實現了汽車組裝模塊、用戶中心模塊和車輛信息模塊功能。web

本系統但願經過互聯網技術，讓人們可以以人機交互的方式感覺到汽車組裝過程，解決人們與汽車之間相互瞭解帶來的鴻溝，而且可經過用戶汽車組裝獲取的數據進行分析，推進汽車行業發展。數據庫

2、相關技術概述

因爲該項目是獨立開發的，所以運用的都是前端領域的技術棧，並做爲互聯網項目進行開發。axios

前端技術

爲了方便項目維護，將前端項目分爲了前臺和後臺，相互獨立進行開發的。後端

前端須要解決的難點是對汽車組裝過程的實現，在前期的技術選型過程當中，最終選擇使用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、總結與展望

總結

這個項目從肯定選題到順利完成項目答辯，這個過程對我來講有許多的成長，這個過程按時間順序主要能夠劃分爲如下幾件事情：

前期對整個項目進行規劃，明確設計思路，進行系統功能需求分析和技術選型；
學習相關技術以及驗證技術可行性，同時學習和了解了許多開源項目架構搭建的思想；
項目架構設計和搭建，其中包括數據庫設計、先後端項目架構設計等；
完成總體項目的業務需求開發；

展望

這個項目我我的認爲還有很大的優化和改良空間，但因爲本人即將成爲社畜，可能會比較少精力繼續去完善，但最主要須要完善的地方爲如下幾點：

本系統的核心功能是汽車組裝功能模塊的實現，因爲採用3D引擎渲染技術，所用的汽車模型類別單一，須要考慮經過導入汽車模型的方式增長模型豐富度。
因爲採用了3D引擎渲染技術，所以對硬件系統的顯卡性能是比較看重的，因此還須要對該性能方面繼續優化，以下降對硬件性能上的消耗。
後續會盡力將該項目發佈到線上方便你們在線預覽。

項目倉庫地址：github.com/Lewage59/ca…