Tutoriel
Dans ce tutoriel nous allons voir comment utiliser les données d’un fichier Excel dans une application Vue JS permettant de rechercher des villes par leur nom ou leur code postal en utilisant Concrete-Manager et Axios .
Prérequis
Pour ce tutoriel, il est nécessaire d'avoir une connaissance de base de Concrete Datastore, rendez-vous sur "Prise en main Concrete Datastore”.
Voici à quoi ressemblera notre application une fois terminée
Une fois connecté à la plateforme Concrete Manager vous devez "créer votre application". Vous pouvez alors renseigner le nom de votre application et choisir une couleur ou un logo .
Sur l'onglet "modélisation", "Créer un nouveau modèle" puis ajouter une propriété name et une propriété zip_code de type char au modèle
Pour cette application nous souhaitons pouvoir effectuer une recherche sur les champs name et zip_code
Pour notre application vous devez définir l'action "Récupérer" pour le modèle City sur "anonymous" afin qu'un utilisateur non authentifié puisse afficher les résultats de votre future requête.
Créer une nouvelle instance en choisissant la version de votre modélisation.
Une fois l'instance créée, vérifiez les informations dans la modale qui s'ouvre avant de confirmer le déploiement.
Ouvrez l'interface d'administration de votre base de données.
Dans le contexte de notre application nous avons un élément input avec un v-model sur une data searchTerms ainsi qu'un bouton qui appelle la méthode sendSearchRequest.
<template>
<div class="city-search_card">
<h1 class="city-search_title">City Finder</h1>
<input
class="city-search_input"
type="text"
name="city-search"
placeholder="Recherchez une ville"
autocomplete="off"
v-model="searchTerms"
>
<button
class="city-search_btn"
@click="sendSearchRequest(searchTerms)"
>
<Rechercher>
</button>
<div v-if="results.length > 0">
<p class="city-search_result_title">Résulats de la recherche</p>
<ul>
<li
v-for="(result, index) in results"
:key="index"
>
<span class="city-search_results">{{result.name}} </span>
<span class="city-search_results">{{result.zip_code}}</span>
</li>
</ul>
</div>
</div>
</template>
import axios from 'axios';
export default {
name: 'CitySearch',
data() {
return {
searchTerms: '',
results: [],
}
},
methods: {
}
}
Une fois qu'Axios a été importé, le but sera d'effectuer une requête sur l'url de l'API de l'instance pour récupérer les villes correspondant à la recherche (searchTerms). Vous pouvez retrouver cette url dans "l'onglet instance" de votre application sur Concrete Manager.
Pour récupérer la liste des villes correspondant au terme il faut construire l'URL qui sera passé au GET d'Axios comme ceci :
L'url finale qu'on utilisera dans la méthode sendSearchRequest comme celle-ci :
https://6dd9b2f3c2c444e3bf48107dee582402.instances.fr1.caas.microservices.rest/api/v1.1/city?search=${userInput}
sendSearchRequest (userInput) {
axios.get(`https://6dd9b2f3c2c444e3bf48107dee582402.instances.fr1.caas.microservices.rest/api/v1.1/city?search=${userInput}`)
.then(response => {
console.log(response)
})
}
L'objet response affiché par le console.log() aura cette forme et les résultats attendus se trouvent dans la clé data :
{
"data": {
"objects_count": 2,
"next": null,
"previous": null,
"results": [
{
"name": "ARS SUR FORMANS",
"zip_code": "01480",
"uid": "1f67cb67-f7c3-422b-98fb-96aba246992e",
"modification_date": "2022-01-21T14:54:15Z",
"creation_date": "2022-01-21T14:54:15Z",
"public": true,
"url": "https://6dd9b2f3c2c444e3bf48107dee582402.instances.fr1.caas.microservices.rest/api/v1.1/city/1f67cb67-f7c3-422b-98fb-96aba246992e/",
"verbose_name": "ARS SUR FORMANS",
"created_by": "518322e4-2a11-469d-9ee9-ee41ef021ff5",
"can_admin_users": [],
"can_view_users": [],
"can_admin_groups": [],
"can_view_groups": [],
"scopes": null
},
{
"name": "APREMONT",
"zip_code": "01100",
"uid": "fa7d6089-81af-4f67-bc97-7785cf4dcdba",
"modification_date": "2022-01-21T14:53:58Z",
"creation_date": "2022-01-21T14:53:58Z",
"public": true,
"url": "https://6dd9b2f3c2c444e3bf48107dee582402.instances.fr1.caas.microservices.rest/api/v1.1/city/fa7d6089-81af-4f67-bc97-7785cf4dcdba/",
"verbose_name": "APREMONT",
"created_by": "518322e4-2a11-469d-9ee9-ee41ef021ff5",
"can_admin_users": [],
"can_view_users": [],
"can_admin_groups": [],
"can_view_groups": [],
"scopes": null
}
],
"objects_count_per_page": 100,
"num_total_pages": 1,
"num_current_page": 1,
"max_allowed_objects_per_page": 100,
"model_name": "City",
"model_verbose_name": "City",
"list_display": [
"creation_date",
"modification_date"
],
"list_filter": {
"name": "char",
"uid": "Unknow type"
},
"total_objects_count": 2,
"create_url": "https://6dd9b2f3c2c444e3bf48107dee582402.instances.fr1.caas.microservices.rest/api/v1.1/city/"
},
"status": 200,
"statusText": "OK",
"headers": {
"content-language": "fr",
"content-type": "application/json"
},
"config": {
"transitional": {
"silentJSONParsing": true,
"forcedJSONParsing": true,
"clarifyTimeoutError": false
},
"transformRequest": [
null
],
"transformResponse": [
null
],
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1,
"maxBodyLength": -1,
"headers": {
"Accept": "application/json, text/plain, /"
},
"method": "get",
"url": "https://6dd9b2f3c2c444e3bf48107dee582402.instances.fr1.caas.microservices.rest/api/v1.1/city?search=a"
},
"request": {}
}
Dans le ".then()" de notre requête Axios, on utilise la fonction ".map()" sur "response.data.results" pour stocker les résultats dans notre data "this.results`".
La condition sur la div affichera les résultats .Une fois remplis ces derniers s'afficheront dans notre application
sendSearchRequest (userInput) {
axios.get("https://6dd9b2f3c2c444e3bf48107dee582402.instances.fr1.caas.microservices.rest/api/v1.1/city?search=" + userInput)
.then(response => {
this.results = response.data.results.map(result => {
return result
});
})
}
