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.
