|
1 | 1 | import { PageComponent } from 'rasengan'; |
| 2 | +import { Markdown, TableOfContents, extractTOC } from '@rasenganjs/mdx'; |
| 3 | + |
| 4 | +const markdown = ` |
| 5 | +# Créer une API REST avec Express.js |
| 6 | +
|
| 7 | +Express.js est un framework minimaliste et flexible pour Node.js, idéal pour construire des API REST rapidement et efficacement. Dans cet article, nous allons voir comment créer une API REST basique avec Express.js, incluant les routes de base pour la gestion des données. |
| 8 | +
|
| 9 | +## Prérequis |
| 10 | +
|
| 11 | +Avant de commencer, assurez-vous d'avoir Node.js installé sur votre machine. Si ce n'est pas encore fait, téléchargez-le depuis [nodejs.org](https://nodejs.org/). |
| 12 | +
|
| 13 | +## Initialisation du projet |
| 14 | +
|
| 15 | +### Création du projet |
| 16 | +
|
| 17 | +Créez un nouveau dossier pour votre projet et initialisez un projet Node.js : |
| 18 | +
|
| 19 | +~~~sh |
| 20 | +mkdir my-api && cd my-api |
| 21 | +npm init -y |
| 22 | +~~~ |
| 23 | +
|
| 24 | +### Installation d'Express.js |
| 25 | +
|
| 26 | +Ensuite, installez Express.js : |
| 27 | +
|
| 28 | +~~~sh |
| 29 | +npm install express |
| 30 | +~~~ |
| 31 | +
|
| 32 | +## Création du serveur Express |
| 33 | +
|
| 34 | +### Configuration du serveur |
| 35 | +
|
| 36 | +Créez un fichier ~server.js~ à la racine de votre projet et ajoutez le code suivant : |
| 37 | +
|
| 38 | +~~~javascript |
| 39 | +const express = require('express'); |
| 40 | +const app = express(); |
| 41 | +const PORT = process.env.PORT || 3000; |
| 42 | +
|
| 43 | +app.use(express.json()); // Middleware pour parser le JSON |
| 44 | +
|
| 45 | +app.get('/', (req, res) => { |
| 46 | + res.send('Bienvenue sur mon API REST !'); |
| 47 | +}); |
| 48 | +
|
| 49 | +app.listen(PORT, () => { |
| 50 | + console.log(~Serveur démarré sur http://localhost:\${PORT}~); |
| 51 | +}); |
| 52 | +~~~ |
| 53 | +
|
| 54 | +### Démarrage du serveur |
| 55 | +
|
| 56 | +Lancez votre serveur avec la commande : |
| 57 | +
|
| 58 | +~~~sh |
| 59 | +node server.js |
| 60 | +~~~ |
| 61 | +
|
| 62 | +Vous devriez voir ~Serveur démarré sur http://localhost:3000~ dans votre terminal et pouvoir accéder à l'URL ~http://localhost:3000~ depuis votre navigateur. |
| 63 | +
|
| 64 | +## Mise en place des routes CRUD |
| 65 | +
|
| 66 | +### Création du fichier des routes |
| 67 | +
|
| 68 | +Ajoutons maintenant des routes pour gérer une ressource simple, comme des utilisateurs. |
| 69 | +
|
| 70 | +Créez un dossier ~routes/~ et ajoutez un fichier ~users.js~ : |
| 71 | +
|
| 72 | +~~~javascript |
| 73 | +const express = require('express'); |
| 74 | +const router = express.Router(); |
| 75 | +
|
| 76 | +// Données fictives |
| 77 | +let users = [ |
| 78 | + { id: 1, name: 'John Doe' }, |
| 79 | + { id: 2, name: 'Jane Doe' } |
| 80 | +]; |
| 81 | +
|
| 82 | +// Lire tous les utilisateurs |
| 83 | +router.get('/', (req, res) => { |
| 84 | + res.json(users); |
| 85 | +}); |
| 86 | +
|
| 87 | +// Lire un utilisateur par ID |
| 88 | +router.get('/:id', (req, res) => { |
| 89 | + const user = users.find(u => u.id === parseInt(req.params.id)); |
| 90 | + if (!user) return res.status(404).json({ message: 'Utilisateur non trouvé' }); |
| 91 | + res.json(user); |
| 92 | +}); |
| 93 | +
|
| 94 | +// Créer un utilisateur |
| 95 | +router.post('/', (req, res) => { |
| 96 | + const newUser = { |
| 97 | + id: users.length + 1, |
| 98 | + name: req.body.name |
| 99 | + }; |
| 100 | + users.push(newUser); |
| 101 | + res.status(201).json(newUser); |
| 102 | +}); |
| 103 | +
|
| 104 | +// Mettre à jour un utilisateur |
| 105 | +router.put('/:id', (req, res) => { |
| 106 | + const user = users.find(u => u.id === parseInt(req.params.id)); |
| 107 | + if (!user) return res.status(404).json({ message: 'Utilisateur non trouvé' }); |
| 108 | + user.name = req.body.name; |
| 109 | + res.json(user); |
| 110 | +}); |
| 111 | +
|
| 112 | +// Supprimer un utilisateur |
| 113 | +router.delete('/:id', (req, res) => { |
| 114 | + users = users.filter(u => u.id !== parseInt(req.params.id)); |
| 115 | + res.status(204).send(); |
| 116 | +}); |
| 117 | +
|
| 118 | +module.exports = router; |
| 119 | +~~~ |
| 120 | +
|
| 121 | +### Intégration des routes dans le serveur |
| 122 | +
|
| 123 | +Puis, modifiez ~server.js~ pour utiliser ces routes : |
| 124 | +
|
| 125 | +~~~javascript |
| 126 | +const express = require('express'); |
| 127 | +const app = express(); |
| 128 | +const PORT = process.env.PORT || 3000; |
| 129 | +const usersRoutes = require('./routes/users'); |
| 130 | +
|
| 131 | +app.use(express.json()); |
| 132 | +app.use('/users', usersRoutes); |
| 133 | +
|
| 134 | +app.listen(PORT, () => { |
| 135 | + console.log(~Serveur démarré sur http://localhost:\${PORT}~); |
| 136 | +}); |
| 137 | +~~~ |
| 138 | +
|
| 139 | +## Test des routes |
| 140 | +
|
| 141 | +Vous pouvez tester votre API avec [Postman](https://www.postman.com/) ou en utilisant ~curl~ : |
| 142 | +
|
| 143 | +### Tester la récupération des utilisateurs |
| 144 | +
|
| 145 | +- Récupérer tous les utilisateurs : |
| 146 | + ~~~sh |
| 147 | + curl -X GET http://localhost:3000/users |
| 148 | + ~~~ |
| 149 | +- Récupérer un utilisateur par ID : |
| 150 | + ~~~sh |
| 151 | + curl -X GET http://localhost:3000/users/1 |
| 152 | + ~~~ |
| 153 | +
|
| 154 | +### Tester la création d'un utilisateur |
| 155 | +
|
| 156 | +- Créer un utilisateur : |
| 157 | + ~~~sh |
| 158 | + curl -X POST http://localhost:3000/users -H "Content-Type: application/json" -d '{"name": "Alice"}' |
| 159 | + ~~~ |
| 160 | +
|
| 161 | +### Tester la mise à jour d'un utilisateur |
| 162 | +
|
| 163 | +- Mettre à jour un utilisateur : |
| 164 | + ~~~sh |
| 165 | + curl -X PUT http://localhost:3000/users/1 -H "Content-Type: application/json" -d '{"name": "John Smith"}' |
| 166 | + ~~~ |
| 167 | +
|
| 168 | +### Tester la suppression d'un utilisateur |
| 169 | +
|
| 170 | +- Supprimer un utilisateur : |
| 171 | + ~~~sh |
| 172 | + curl -X DELETE http://localhost:3000/users/1 |
| 173 | + ~~~ |
| 174 | +
|
| 175 | +## Conclusion |
| 176 | +
|
| 177 | +Vous venez de créer une API REST basique avec Express.js ! Ce guide vous a montré comment configurer un serveur, définir des routes CRUD et tester votre API. Pour aller plus loin, vous pouvez ajouter une base de données avec MongoDB ou PostgreSQL et utiliser des middleware comme \`cors\` ou \`morgan\` pour améliorer votre API. |
| 178 | +
|
| 179 | +Bon codage ! 🚀 |
| 180 | +`; |
2 | 181 |
|
3 | 182 | export const Contact: PageComponent = () => { |
| 183 | + console.log(extractTOC(markdown)); |
4 | 184 | return ( |
5 | | - <section> |
6 | | - <h1>Contact page</h1> |
| 185 | + <section className="overflow-auto"> |
| 186 | + {/* <h1>Contact page</h1> */} |
| 187 | + |
| 188 | + <section className="mx-auto grid w-full max-w-3xl grid-cols-1 gap-10 xl:max-w-6xl xl:grid-cols-[minmax(0,1fr)_var(--container-2xs)] h-screen"> |
| 189 | + <section className="px-0 pt-10 pb-24 sm:px-6 xl:pr-0"> |
| 190 | + <Markdown content={markdown} /> |
| 191 | + </section> |
| 192 | + |
| 193 | + <aside className="rasengan-toc max-xl:hidden"> |
| 194 | + <TableOfContents items={extractTOC(markdown)} /> |
| 195 | + </aside> |
| 196 | + </section> |
7 | 197 | </section> |
8 | 198 | ); |
9 | 199 | }; |
|
0 commit comments