Mysql Question posted in
The official MySQL documentation can be found here.

Architecture using VueJS, ExpressJS, MySQL – MVP MVC MVVM?

What is the architectural name or pattern for my Vue.js + Express.js + MySQL application?

I need to explain the architecture of my app for a project, but I’m not sure what name or pattern to attribute to it.

Vue.js (Frontend)

  • Only responsible for the UI/UX
  • Sends requests via Axios to the Express.js backend
    Express.js (Backend)
  • Handles requests from the Vue.js frontend
  • Processes and manages data
  • Interacts with the MySQL database to read/write data
  • Sends responses back to the Vue.js frontend
    MySQL (Database)
  • Stores data (model layer)

What architectural pattern is this app following, and what would be the appropriate way to describe it?

Tags:

2

Answers


  1. 0

    Honestly, just explaining it in easy words without things VENOM or BEAVER acronyms, will make life easier for everybody (like non-heavy tech-savvy people) and be more inclusive.

    A few points about the list above:

    Only responsible for the UI/UX

    Vue is not really responsible for your UX

    Sends requests via Axios to the Express.js backend Express.js (Backend)

    Can indeed make some external requests with ofetch or else yes

    "Handles requests from the Vue.js frontend"

    not sure what this means

    Processes and manages data

    very abstract (especially if you don’t mention state)

    Interacts with the MySQL database to read/write data

    no. Your frontend framework does not do that (could maybe be fine if you use a proxy like Supabase but still, unrelated)

    Sends responses back to the Vue.js frontend MySQL (Database)

    no and redundant with doing HTTP calls

    Stores data (model layer)

    yes kinda redundant again with the point above

    This is a very fast and simple definition so far.

    enter image description here

    This is a more detailed explanation of what Vue actually is.

    Login or Signup to reply.
  2. 0

    Your Vue.js + Express.js + MySQL application would be considered a three-tier web application. The three-tier architecture is a type of software architecture that is organized into three major parts, which are often referred to as tiers or layers:

    1. Presentation Layer: This is the topmost level of the application. For your app, this is the Vue.js frontend where the UI/UX is handled.
    2. Application Layer: Also known as the logic tier, or middle tier, this is where the core application processes occur. In your case, it’s the Express.js backend that handles requests, processes data, and communicates with the database.
    3. Data Layer: This is the layer where the data is stored and managed. Your MySQL database serves this purpose.

    Moreover, the specific design pattern of your application is commonly referred to as the Model-View-Controller (MVC) pattern. The MVC pattern is a specific way to organize interactions between the presentation, application, and data tiers in your application. Here’s how each part of your stack fits into the MVC framework:

    1. Model: This is your MySQL database. It represents the data structure, handles data storage, retrieval, and any business logic.
    2. View: The Vue.js frontend acts as the view. It’s responsible for presenting the user interface and displaying data to the user.
    3. Controller: Your Express.js backend serves as the controller. It processes incoming requests, performs operations on the model, and selects views to render to the user.

    In a typical MVC pattern:
    The Model corresponds to all the data-related logic that the user works with.
    The View displays the data (the model) and sends user actions (e.g., button clicks) to the controller. The Controller handles the user input from the view, manipulates the model, and finally sends the view to be rendered.

    Operations common to this type of application would also lump it into being a CRUD app. CRUD stands for Create, Read, Update, and Delete, which are the four basic operations of persistent storage. These operations are fundamental to the management of data in databases and are often used to describe user interface conventions that facilitate viewing, searching, and changing information.
    In the context of your Vue.js + Express.js + MySQL application:

    1. Create: You can add new data entries to the MySQL database.
    2. Read: Your application can retrieve and display data from the database.
    3. Update: You have the ability to modify existing data in the database.
    4. Delete: Your application can remove data entries from the database.

    These CRUD operations are essential for the functionality of most web applications, as they allow users to interact with and manage data efficiently. Your application’s architecture, with Vue.js as the frontend, Express.js as the backend, and MySQL as the database, supports these CRUD operations, also making it a CRUD application.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search