Vue.js Strukturen und Konventionen?

[BastiBln]

Moin Kinners,

ich mach grade die ersten Gehversuche mit vue.js. Ich möchte gerne zwei php-Plattformen wo ich gebaut habe, in vue.js nochmal bauen. Habe mir zwei Online-Kurse im CoderCampus angesehen und schon die erste Struktur gebaut. Header, Menu und Footer sind gebaut und eingebunden. Auch mit dem interaktiven Content via router komme ich klar.

Dennoch habe ich ein paar Fragen, wo ich im Netz nichts hilfreiches gefunden habe:

1. Ich muss recht viel Content aus Datenbanken laden, der ebenfalls interaktiv ist. Ist es besser dafür APIs zu bauen um an die Daten zu kommen, oder genügt es die php Funktionen direkt via axios anzusprechen?
Beide Plattformen sollen PWAs werden. Hätten APIs hier Vorteile?

2. Innerhalb des interaktiven Contents gibt es verschiedene Funktionen, die z.Bsp. auf anderen Content verweisen. Steuert man das auch über vue-router oder gibt es noch andere Möglichkeiten?

3. Können Daten/Statuswerte innerhalb der Plattform Struktur(nicht zur DB) auch via POST übermittelt werden, oder nur mit GET? Ich bin kein großer Fan der Datenübergabe via URL.

Vielen Dank Euch!

[BastiBln]

Eine Hilfreiche Antwort kam auf Stack Overflow:



Your question is quite loaded, but I'll try my best to point you towards some things.

1. It is better to have an API that can support pagination and other variable return types. I am quite unsure what you mean by "PHP functions from Axios", do you mean an endpoint that you built with PHP? Either way, if you are transitioning from PHP I would recommend building a REST API with Spring Boot (Java) or another MVC framework.

2. Vue Router is used to transition from one page to another for SPAs (single page apps) mainly. It is a very useful tool for routing the user from one page (each page being a Vue component in a way) to another. So I'd say "yes" to this.

3. You can do POST calls with Axios programmatically. If you have a simple POST that returns the status of something for example, then axios.post(status_endpoint).then(response => response.data) (response.data being the returned data from your endpoint) would give you the response data to use as you wish.