Skip to content

Instantly share code, notes, and snippets.

@claraj
Created March 22, 2020 18:22
Show Gist options
  • Save claraj/700e5205a435806d1a0fa5eb72ca0318 to your computer and use it in GitHub Desktop.
Save claraj/700e5205a435806d1a0fa5eb72ca0318 to your computer and use it in GitHub Desktop.
title Express and Vue
participantgroup SERVER
participant Vue app files
database Database
participant API Server
participant Express Server
end
participantgroup CLIENT (browser)
participant Web Browser
participant JavaScript Interpreter
end
Web Browser->Express Server:++Web page, please++
Express Server->Vue app files: ++Get Vue app++
Vue app files-->Express Server: ++Here's the Vue app files++
Web Browser<-Express Server:++Here's a Vue app with HTML, JS and CSS++
Web Browser->JavaScript Interpreter:++Start running JavaScript++
note over JavaScript Interpreter: ++Create Vue App++
JavaScript Interpreter->JavaScript Interpreter: ++load content into browser++
JavaScript Interpreter->JavaScript Interpreter: ++Here's an API call++
JavaScript Interpreter->Express Server:++API request++
Express Server->API Server: ++API request++
API Server->Database:++Data, please++
Database-->API Server:++Here's the data++
API Server-->Express Server: ++JSON response with data++
Express Server-->JavaScript Interpreter: ++Here's your data as JSON++
JavaScript Interpreter->JavaScript Interpreter: ++Thanks, I'll display on page++
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment