This article is only a brief description of the project, not a detailed description of the specific technology implementation!! (Think of this article as a project description document.)
One, foreword
This project is a topic of graduation design. Since most of the topics are related to big data and e-commerce, I finally chose this relatively novel topic, so I wanted to try to challenge myself.
Actually at that time my mind completely have no idea to this topic, several times when thinking about how to implement this project, scalp feel is beyond the current ability level, but found the implementation approach and direction, then start to prepare for the project development, such as to learn to use technology stacks, design thinking and project architecture design and build project development.
In fact, many of the stacks used in this article are unfamiliar or unknown to me, so I have spent a lot of time in learning them, such as TypeScript, Three. Js, Nest and TypeORM, etc. Therefore, there are shortcomings and unreasonable areas in the project, welcome to point out!
Project background
This project is a 3D visualization Web application developed based on JavaScript language. In order to design a lightweight Internet application, B/S system architecture is adopted. On the basis of the basic framework of 3D visualization interactive platform based on WebGL, Design a visual Web page of automobile assembly process integrating immersion and good interactive operation. It mainly realizes the functions of automobile assembly module, user center module and vehicle information module.
The system hopes that through Internet technology, people can feel the process of automobile assembly in the way of human-computer interaction, to solve the gap between people and cars brought by mutual understanding, and can analyze the data obtained by the user’s automobile assembly, and promote the development of automobile industry.
Ii. Overview of related technologies
Since the project was developed independently, it used the technology stack of the front-end domain and was developed as an Internet project.
The front-end technology
In order to facilitate the maintenance of the project, the front-end project is divided into the foreground and background, which are developed independently of each other.
The difficulty to be solved in the front end is the realization of automobile assembly process. In the selection process of technology in the early stage, WebGL technology was finally selected to provide the capability of rendering 3D models on Web pages. Since this technology is relatively low-level, the package library three.js was selected. Mainly, it provides a simple way to realize the 3D scene including camera, light source, scene, controller, 3D model and other objects. In the process of realizing the functional module of automobile assembly, the module is packaged into a separate component for easy maintenance and reuse in the project.
Related technology stack:
WebGL: a low-level Web3D drawing API standard that combines JavaScript with OpenGL ES2.0;Three.js: lightweight 3D engine running based on native WebGL package;Vue 3.0: a set of progressive frameworks for building user interfacesElement Plus: Desktop component library based on Vue 3.0;axios: easy to use, concise and efficient HTTP library;
The back-end technology
In the process of selecting back-end technology in the early stage, nest framework was selected after comparing egg, KOA and Nest framework.
Node.js server application framework Nest and relational MySQL database, and develop with TypeScript superset of JavaScript weakly typed language, use MVC architecture to reduce costs for later development and maintenance, and provide interface services to view layer in the form of RestAPI. In order to share components in a more lightweight way, Monorepo mode provided by Nest framework was developed to develop efficient and scalable enterprise-level back-end services for the platform. It also integrates user authentication and mailbox authentication through Passport and JWT policies.
Here is the reason why I like Nest framework. From the perspective of framework style, the writing method of Nest framework is very similar to that of Java Spring framework. As the author is familiar with Spring framework itself, it is relatively quick to use Nest. From the perspective of module reuse, in order to facilitate the maintenance of end code, the foreground service and background service are divided into two projects in a Workspace. Nest provides Monorepo mode, which makes the library a simple and lightweight way to provide a way to share code, just meeting the needs of the Project. Re-used modules are shared across multiple projects in the form of libraries.
Related technology stack:
Node.js: JavaScript runtime server platform based on Chrome V8 engine;Nest: node.js server-side application framework out of the box;Redis database: cross-platform non-relational database;TypeORM: Object Relational Mapper (ORM) framework;JWT certification technology: the most popular cross-domain authentication solution;The MySQL database: one of the most popular relational database systems;TypeScript: superset of JavaScript types;
System analysis and design
System analysis
This system is divided into auto assembly demonstration system and background management system, auto assembly demo system includes user information management module, auto assembly module, and the official car brand module, of which the core technology is auto assembly module, realized the user can through the human-computer interaction in the form of assembling vehicle model, configuration, and they want the body color, and other functions; The background management system is mainly user management module, data statistical analysis, automobile management module and brand management module.
System user use case diagrams
System architecture
This project is designed based on B/S architecture, vue. js framework is used to build the front-end view layer technology, and webGL-based Three. Js engine library is used for 3D visualization technology. The server technology is built by Nest, the Node.js server application framework, which integrates JWT user authentication, Redis cache and ORM object relational mapper. The data persistence layer is stored by MySQL relational database.
System function module design
Foreground system function structure
Background system function structure
4. System function realization
Foreground system function realization
Login and Registration interface
At the front desk page
Model library
The user center
The car details
Auto assembly
Background system function realization
Background data analysis
User Management Interface
Official Vehicle interface
Brand Management Interface
V. Summary and prospect
conclusion
In this project, from selecting the topic to successfully completing the defense of the project, there was a lot of growth for me. This process can be divided into the following things in chronological order:
- In the early stage, I planned the whole project, clarified the design ideas, analyzed the system functional requirements and selected the technology;
- I learned relevant technologies and verified the feasibility of technologies, and also learned and understood the ideas of architecture construction of many open source projects;
- Project architecture design and construction, including database design, front-end and back-end project architecture design, etc.
- Complete the business requirement development of the overall project;
Looking forward to
Personally, I think there is still a lot of room for optimization and improvement in this project. However, as I am about to become a social employee, I may have less energy to continue to improve it. However, the most important points to be improved are as follows:
- The core function of this system is the realization of automobile assembly function modules. Due to the adoption of 3D engine rendering technology, the automobile models used are single in category, so it is necessary to consider importing automobile models to increase model richness.
- Due to the adoption of 3D engine rendering technology, the performance of the hardware system is more important, so it is necessary to continue to optimize the performance, in order to reduce the consumption of hardware performance.
- We will try our best to post the project online for online preview.
Project warehouse address: github.com/Lewage59/ca…