monnerat/web_2024
3
3
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ajout router

Browse Source
This commit is contained in:
Denis Monnerat 2025-03-03 08:34:13 +01:00
parent ae55e46aed
commit 49798f4a7f
4 changed files with 82 additions and 0 deletions
R4.01_R4.A.10/td_tp/tp4
README.md
src/ex3/test_router_riot
README.mdapp.riotindex.html

3
R4.01_R4.A.10/td_tp/tp4/README.md

@ -34,4 +34,7 @@ Vous pouvez utiliser la mienne `2fcb2848`. Si la limite de requêtes est atteint
Compléter le service ajax de recherche en utilisant l'api omdb (`service.js`), et le composant `search.riot`.
#### Ex3
Ajoutez à l'exercice 1 le router de riotjs à votre application, avec 3 routes différentes
qui filtrent la vue des todos en fonctions de leurs états. Un [exemple](./src/ex3) d'utilisation ici.

19
R4.01_R4.A.10/td_tp/tp4/src/ex3/test_router_riot/README.md Normal file

@ -0,0 +1,19 @@
Voici un [exemple](./app.riot) succint du composant router. Remplacez `base` par **votre** url de base.
La documentation du [router](https://github.com/riot/route?tab=readme-ov-file#documentation) de riot.js.
En particulier, le composant `route` admet les callbacks suivants :
```js
<app>
<router>
<route path="/home"
on-before-mount={onBeforeHomeMount}
on-mounted={onHomeMounted}
on-before-update={onBeforeHomeUpdate}
on-updated={onHomeUpdated}
on-before-unmount={onBeforeHomeUnmount}
on-unmounted={onHomeUnmounted}
/>
</router>
</app>
```

37
R4.01_R4.A.10/td_tp/tp4/src/ex3/test_router_riot/app.riot Normal file

@ -0,0 +1,37 @@
<app>
<router base={base}>
<!-- route par défaut -->
<route path="(#)?">
<h1>Route par défaut</h1>
<nav>
<ul>
<li><a href="#/route1/1">Route 1 - 1</a></li>
<li><a href="#/route1/2">Route 1 - 2</a></li>
<li><a href="#/route2/toto">Route 2 - toto</a></li>
<li><a href="#/route2">Route 2 - </a></li>
</ul>
</nav>
</route>
<route path="#/route1/:id">
<h1>Route 1 {route.params.id}</h1>
<a href="">Retour</a>
</route>
<route path="#/route2/:id?">
<h1>Route 2 {route.params.id||'pas de paramètre'}</h1>
<a href="">Retour</a>
</route>
</router>
<script>
export default {
base : '' // votre url de base
};
</script>
</app>

23
R4.01_R4.A.10/td_tp/tp4/src/ex3/test_router_riot/index.html Normal file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test router</title>
<!-- les composants -->
<script src="app.riot" type="riot"></script>
<script src="https://unpkg.com/riot@9.4.6/riot+compiler.min.js"></script>
<script src="https://unpkg.com/@riotjs/route@9.2.1/index.umd.js"></script>
</head>
<body>
<app></app>
<script>
riot.register('router', route.Router);
riot.register('route', route.Route);
riot.compile().then(()=>riot.mount('app'));
</script>
</body>
</html>