UML Composite Structure Diagram

/images/UML_Composite_Structure_Diagram.jpeg

Notes:

• The parts; Dao, Model and DTO in the diagram represent many instances of classess but in the code they are infact folders which contain many classes. For simplicity, the folder name was used to describe connections, but it should be interepreted as zero to many instances of each class in that folder have that same connection.

• Similarily the components part in the diagram represents a folder containing many different vue pages as well as java script files all having a connection to App.vue.

Key Functional Components: Description of an interaction from frontend to database:

1. In each component vue file, a HTML page allows for a user to dynamically interact with the application. The web page responds to user events such as button clicks using different java script files. The files uses the AXIOS interface to place HTTP requests.
2. The backend folder handles these requests using RESTful services in the RestController class. These RESTful service methods in turn call methods in the service class.
3. The service class methods (business methods) actually allow for creation,deletion and updating elements in the model. It has direct contact with the model as well as all classes in the DAO folder to access the database.
4. The DAO classes use the CrudRepository interface provided by spring to create SQL queries which will modify the database.