<commit_before># Ajouter VueJS dans un site existant

Dans le cadre du TP, vous allez devoir « moderniser » une application simple. L’application à migrer était réalisée dans le cadre de la démonstration.

L’application existante est une « TodoList » codée avec le Framework Laravel.

# Création des API

Dans ce TP nous allons transformer « entièrement » votre ancien site codé en Laravel par « un équivalent » qui va fonctionner avec des API.

🤓 Nous n'allons donc plus utiliser la puissance de Blade, mais celle de VueJS 🚀.

## Création des API

La « nouvelle version » de notre page, va utiliser des API (et de l'ajax), ça va fondamentalement changer le fonctionnement de votre application. Il faut donc dans un premier temps créer les API qui seront nécessaire au bon fonctionnement (asynchrone) de votre page Web.

- Lister les éléments dans la TodoList.
- Ajouter un nouvel élément dans la TodoList.
- Marquer un élément comme terminé.
- Supprimer un élément.

### Création du contrôleur pour les API

… Ajout fichier, Route, retour json …

### La liste

### L'ajout

### Marquer comme terminé

### Suppression

### Validation des API

Valider que vos API fonctionne correctement grâce à l'outil [Postman](https://www.getpostman.com/).

## Ajouter VueJS dans votre projet

… Import librairie …

### Création d'un nouveau template

… Sans blade …

### Remplacer la route de base

## Suite …<commit_msg>Modification TP Laravel.<commit_after># Ajouter VueJS dans un site existant

Dans le cadre du TP, vous allez devoir « moderniser » une application simple. L’application à migrer était réalisée dans le cadre de la démonstration.

L’application existante est une « TodoList » codée avec le Framework Laravel.

# Création des API

Dans ce TP nous allons transformer « entièrement » votre ancien site codé en Laravel par « un équivalent » qui va fonctionner avec des API.

🤓 Nous n'allons donc plus utiliser la puissance de Blade, mais celle de VueJS 🚀.

## Création des API

La « nouvelle version » de notre page, va utiliser des API (et de l'ajax), ça va fondamentalement changer le fonctionnement de votre application. Il faut donc dans un premier temps créer les API qui seront nécessaire au bon fonctionnement (asynchrone) de votre page Web.

- Lister les éléments dans la TodoList.
- Ajouter un nouvel élément dans la TodoList.
- Marquer un élément comme terminé.
- Supprimer un élément.

### Création du contrôleur pour les API

… Ajout fichier, Route, retour json …

### La liste

### L'ajout

### Marquer comme terminé

### Suppression

### Validation des API

Valider que vos API fonctionne correctement grâce à l'outil [Postman](https://www.getpostman.com/).

## Ajouter VueJS dans votre projet

… Import librairie …

### Création d'un nouveau template

… Sans blade …

### Remplacer la route de base

… Édition …

### Comprendre l'Ajax
{'fraction_non_alphanumeric': 0.06944931602946335, 'fraction_numerical': 0.0, 'mean_word_length': 4.166666666666667, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6239507', 'n_tokens_mistral': 923, 'n_tokens_neox': 894, 'n_words': 432}