Erste Schritte mit vuejs und cakephp crud-json-api

27. Februar 2020 0 Von glanzel

Das Cakephp Plugin crud-json-api ermöglicht es schnell ein CRUD Backend anzulegen welches für jede Crud-Operation per json zu bedienen ist.

Für die Tabelle points

CREATE TABLE points (
id char(36) NOT NULL,
Name varchar(200) DEFAULT NULL,
Strasse varchar(200) NOT NULL
)

wird hier über http://servername/points/index auf die index() Methode des PointsControllers zugegriffen.

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Wir müssen bei diesem Beispiel (Apache-Server) mit

Den CORS Request erlauben.

Und mod_headers mit sudo a2enmod headers einschalten wenn nötig.

Auf Seiten von Vue benötigen wir die beiden Bibliotheken
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
und
https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.js
diese speichern wir in einem neu erstellten ordner .

Auf Seite von Vue legen wir die Datei ort.js an. Zuerst erstellen wir eine Vue Componente:

Vue.component('orte', {
     props: ['name', 'strasse'],
     template: '<span><h4> {{name}}</h4>
<div v-html="strasse"></div></span>'})

Die Props regeln dabei welche Variablen übergeben werden können. Das Template regelt die Ausgabe der Variablen. Dabei ist wichtig das es im Template einen umfassenden Html-Tag gibt. (im Beispiel <span>).

Nun binden wir die Daten von crud ein:

const config = {headers: {'Accept': 'application/vnd.api+json'}}; //nötig für das crud-plugin

new Vue({
el: '#orte-index', //hier wird auf die id eines html tags verwiesen
data () {
return {
orte: "noch nichts geladen" // orte wird hier einem testwert intialisert
}
},
mounted () {
axios
.get('http://localhost/dwe_map/points/index', config)
//die daten werden hier geladen
.then(response => (this.orte = response.data))
//crud-json-api gibt das json in der variablen data zurück, diese hängen wir unter dem Namen orte für vue ein.
}
})

nun benötigen wir noch die html datei um darauf zuzugreifen, diese speichern wir unter orte.html ab.

<script src="vue.js"></script>
<script src="axios.js"></script>
<div id="orte-index">
<orte 
	v-for="ort in orte.data" 
	v-bind:key="ort.id" 
	v-bind:name="ort.attributes.name" 
	v-bind:strasse="ort.attributes.strasse" 
	>
</orte>
<orte name="nur zum debuggen" >
</orte>
<p class="debugging only">{{orte}}</p>
</div>
<script src="orte.js"></script>

Dies Datei kann nun einfach mit einem Browser geöffnet werden. Die klappt sogar ohne Webserver.