Si vous êtes impliqué dans le développement frontend, vous connaissez probablement les mises en scène suivantes: les termes du projet diminuent rapidement, votre direction, ou le client, ou les deux, ensemble, veulent voir de leurs yeux l'application de travail en ce moment, même avec de fausses données. En même temps, il peut y avoir un dos, mais c'est la couche d'interaction api avec le front qui manque du tout.
Donc, récemment, j'ai fait face à une telle situation, et je suis en train de développer une interface pour angulaire (les gens assis sur des chaises tapotaient lentement, quelqu'un hocha la tête avec compréhension).
Maintenant, je vais l'essayer sérieusement. D'une part, la situation n'est pas rare et de nombreuses solutions peuvent être choisies.
Plusieurs solutions me sont venues à l'esprit:
- Données de niveau composant de code dur
- Codez les données au niveau des services de résolution, épinglez-les aux routes nécessaires
- Données codées en dur au niveau du fournisseur de services de données
- Rincer l'API et, selon les contrats convenus, renvoyer les données codées en dur
Mais aucune de ces options ne semblait être une béquille inépuisable, pour chacune desquelles il y avait des lacunes importantes.
- La première option a tout de suite disparu - une solution inutilisée absolument incommode, au fur et à mesure du développement du projet, tout devra être réécrit.
- Cette solution pourrait avoir lieu, mais encore une fois, la structure du projet et la logique des composants seront réécrites.
- Une option possible, vous pouvez même retourner des données de stub de manière asynchrone, simulant un appel de serveur, cependant, comme dans les solutions précédentes au problème, nos intercepteurs (s'ils existent, mais ils existent) seraient sans travail, et il se trouve que l'imitation du travail avec le support devient incomplet.
- La dernière option semblait tout à fait acceptable, sans les problèmes des options précédentes, mais je ne voulais pas écrire de code dur dans le projet backend simplement pour des raisons d'hygiène.
En conséquence, une autre option a été choisie: créer un serveur Web distinct, qui retournerait les données en fonction des itinéraires et des contrats, et configurer une configuration distincte pour l'assemblage et l'exécution d'angular. Il s'est avéré facile de faire les deux.
Pour implémenter le faux serveur,
express a été sélectionné.
Commençons par ça.
Nous sélectionnons l'endroit où nous voulons écrire du code pour le serveur msk, par exemple, dans le répertoire mock-server à côté du projet ng.
Ensuite, vous devez initialiser le projet et ajouter le package avec express.
npm init
npm install --save express
Ensuite, ajoutez un code qui nous renverra des données. Nous créons le fichier index.js, nous reprenons le code du premier tutoriel.
const express = require("express"); const app = express(); app.get("/url", (req, res, next) => { res.json(["Tony", "Lisa", "Michael", "Ginger", "Food"]); }); app.listen(3000, () => { console.log("Server running on port 3000"); });
Démarrez le serveur
node index.js
Vérifiez auprès du facteur:
Tout est super, le serveur fonctionne. Configurons maintenant l'un des itinéraires, comme si nous demandions des données à partir d'une véritable API. Disons que nous avons besoin d'une liste de tous les livres, remplissez le fichier books.json avec des livres
[ { "rn": 0, "id": "0", "name": "Jungle", "type": 0, "wells": 10042, "default": false, "hidden": false, "author": "Admin" }, { "rn": 1, "id": "1", "name": "Main", "type": 1, "wells": 156, "default": true, "hidden": false, "author": "User" } ]
Et mettez à jour le fichier d'application:
const express = require("express"); const app = express(); app.get("/api/book/", (req, res, next) => { const books = require('./books'); res.json(books); }); app.listen(3000, () => { console.log("Server running on port 3000"); });
Et vérifiez:
Super.
Commençons maintenant avec l'application angulaire.
Ajoutez la configuration qui stocke l'adresse à l'arrière dans les fichiers environnements / environnement * .ts.
environment.ts:
export const environment = { production: false, backend: 'http://localhost:5000/' }
environment.prod.ts
export const environment = { production: true, backend: 'http://localhost:5000/' }
En mode normal, et en mode prod et en mode développement, nous rechercherons l'api de base .net sur le port 5000, comme décrit ci-dessus. Ensuite, nous décrivons la configuration du dossier temporaire
environment.mock.ts
export const environment = { production: false, backend: 'http://localhost:3000/' }
Ici, comme vous pouvez le voir, nous recherchons une API sur le port 3000, où nous allons exécuter express.
Nous avons maintenant besoin d'un intercepteur qui dirigera les appels vers l'arrière vers le bon serveur, selon la configuration.
@Injectable() export class RequestInterceptor implements HttpInterceptor { baseUrl: string; constructor() { this.baseUrl = environment.backend; } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(this.modifyRequest(req)); } private modifyRequest = (req: HttpRequest<any>): HttpRequest<any> => { if (req.url.startsWith('api/')) { const url = this.baseUrl; req = req.clone({ url: url + req.url }); } return req; } }
Il reste à configurer la nouvelle configuration pour assembler et lancer l'application pour travailler avec le faux serveur.
Pour ce faire, nous devons modifier un peu angular.json.
Dans la section de votre projet, architect / build / configurations, ajoutez une nouvelle configuration de build fictive et décrivez le remplacement des fichiers d'environnement pour cette configuration. Aussi pour le mode de service, créez une configuration fictive et spécifiez l'option de construction souhaitée
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "your-project": { /*****/ "architect": { "build": { /*****/ "configurations": { "production": { /*****/ }, "mock": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.mock.ts" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "your-project:build" }, "configurations": { "production": { "browserTarget": "your-project:build:production" }, "mock": { "browserTarget": "your-project:build:mock" } } } }, /*****/ } } }
C'est tout, il reste maintenant à exécuter le projet dans la configuration souhaitée
ng serve --configuration=mock
et vérifiez où les appels à l'arrière s'envolent:
Tout est super.
En fait, cette conception nous aidera encore beaucoup lorsque nous resserrerons l'intégration et les tests e2e au projet. J'essaierai d'écrire à ce sujet dans un avenir proche.