App with Flask and Vue
Eva Martin del Pico
PyDay BCN 2022
Links
Components of a web application
Back End
Database
Server
API
Internet communication
Front End / Client
…
File System
Components of a web application
Back End
Database
Server
API
Internet communication
Front End / Client
…
Our app 🤓
App to store code snippets.
Our app 🤓
App to store code snippets.
The Database
{
"_id" : "63817ec05082489ee2f502b8",
"title" : "Execute a program from Python",
"description" : "To call an external command within Python as if I'd typed it in a shell or command prompt, use the subprocess module in the standard library.",
"body" : "import subprocess\nsubprocess.run([\"ls\", \"-l\"])\n",
"source" : [
"https://stackoverflow.com/a/89243"
],
"tags" : [
"Python",
"cmd"
],
"type" : "Code"
}
For simplicity, we will use a dockerized database ready to use.
Instructions in repository
JSON
Collections are a bunch of documents (JSONs)
The API - REST
We need a GET endpoint to retrieve snippets and a POST endpoint to add new snippets
[GET] /snippet
[POST] /snippet
The API - REST
The FrontEnd - Vue (Nuxt/Vuex)
Components
Lifecycle hooks
The FrontEnd - Vue (Nuxt/Vuex)
Vuex Store 💚
The FrontEnd - Vue (Nuxt/Vuex)