Qu’est-ce que le débogage conjoint front-end et back-end ?
Habituellement, l'ingénieur back-end conçoit l'interface et rédige le document d'interface. Le document d'interface est remis à l'ingénieur front-end, et les ingénieurs front-end et back-end commencent à développer en parallèle. utilisera des données fictives (fausses données) pour le développement. Une fois le code back-end actuel terminé, le débogage commun de l'interface commence. L'ingénieur front-end modifie les données fictives pour demander à l'interface back-end de les obtenir. Le front-end Le code demande au service back-end de tester si l'interface est normale.Ce processus est un débogage conjoint front-end et back-end.
S'il existe actuellement un problème avec le débogage conjoint frontal, il est nécessaire de juger s'il répond aux exigences du document d'interface en fonction du contenu des données de demande et de réponse de l'interface dans l'environnement de test. S'il s'avère que le problème concerne le front-end ou le back-end, l'ingénieur spécifique sera responsable de la correction du défaut, puis effectuera à nouveau des tests de régression après modification.
Pour effectuer un débogage conjoint front-end et back-end dans l'enseignement, configurez d'abord l'environnement front-end, puis installez l'environnement dans lequel le projet front-end s'exécute.
Recherchez d'abord node-v16.17.0-x64.msi dans le répertoire des outils logiciels pour installer nodejs.
L'installation est terminée, vérifiez le numéro de version
Démarrez le projet front-end ci-dessous, copiez project-xczx2-portal-vue-ts.zip du projet front-end vers le répertoire de code et décompressez-le, puis utilisez IDEA ou VS Code pour ouvrir le projet-xczx2-portal-vue -ts répertoire. Ce qui suit utilise IDEA comme exemple. illustre :
Cliquez avec le bouton droit sur le fichier package.json dans le répertoire project-xczx2-portal-vue-ts,
Cliquez sur Afficher les scripts npm pour ouvrir la fenêtre npm
Cliquez sur le paramètre "Modifier 'serve'", configurez certains paramètres du projet de démarrage ci-dessous, sélectionnez nodejs, npm.
Cliquez avec le bouton droit sur Servir et cliquez sur "Exécuter le service" pour démarrer le projet.
Le lien d'accès suivant apparaît, indiquant que le démarrage a réussi.
Visitez http://localhost:8601 pour accéder au projet front-end.
En cas de problème, démarrez-le avec la commande suivante :
1. cmd pour entrer dans le répertoire racine du projet
2. Exécutez la commande suivante
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm je
npm exécuter servir
Installer les services de gestion du système
Le projet frontal est démarré avec succès et le projet frontal est accessible via le navigateur via l' adresse http://localhost:8601/ .
L'erreur signalée par le projet front-end est la suivante :
http://localhost:8601/system/dictionary/all pointe vers le service de gestion du système. Nous avons une table de dictionnaire de données, et ce lien est l'adresse d'interface utilisée par le front-end pour demander au back-end d'obtenir les données du dictionnaire de données.
Les informations du dictionnaire pour le projet sont configurées dans la table du dictionnaire de données. Cette interface sert à interroger toutes les données du dictionnaire, et nous ne la développerons pas ici.
Récupérez xuecheng-plus-system.zip dans le répertoire matériel de cours/ingénierie de projet et décompressez-le
Copiez le répertoire xuecheng-plus-system dans le répertoire racine du projet, actualisez maven ou cliquez avec le bouton droit sur pom.xml pour le convertir en projet pom.
Entrez le projet xuecheng-plus-system-service, recherchez application.yml sous ressources et modifiez les paramètres de connexion à la base de données.
Démarrez le service de gestion du système. Le démarrage est réussi. Requête dans le navigateur : http://localhost:63110/system/dictionary/all
Le port du service système est 63110
Si les informations du dictionnaire de données peuvent être lues normalement, le service de gestion du système est installé avec succès. ,
Résoudre les problèmes inter-domaines
Accédez au projet frontal via le navigateur à l'adresse http://localhost:8601/ .
Le navigateur Chrome signale l'erreur suivante :
L'accès à XMLHttpRequest sur « http://localhost:63110/system/dictionary/all » depuis l'origine « http://localhost:8601 » a été bloqué par la stratégie CORS : aucun en-tête « Access-Control-Allow-Origin » n'est présent sur la ressource demandée.
Le navigateur Firefox signale l'erreur suivante :
Requête d'origine croisée interceptée : la politique de même origine interdit la lecture des ressources distantes situées à l' adresse http://localhost:63110/system/dictionary/all . (Cause : l'en-tête CORS 'Access-Control-Allow-Origin' est manquant). Code d'état : 200.
Astuce : L'accès à http://localhost : 63110/system/dictionary/all à partir de http://localhost:8601 est bloqué par la stratégie CORS car il n'y a aucune information d'en-tête Access-Control-Allow-Origin. Le nom complet de CORS est cross origin resource share, ce qui signifie partage de ressources entre domaines.
La raison de cette invite est de déterminer si une requête inter-domaines est basée sur la politique de même origine du navigateur. La politique de même origine est un mécanisme de sécurité du navigateur. Lors d'une demande d'une adresse à une autre, si le protocole, l'hôte , et le port sont tous S'il est cohérent, il n'appartient pas à plusieurs domaines, sinon il y a une incohérence et il s'agit d'une demande inter-domaines.
Par exemple:
De http://localhost:8601 à http://localhost:8602 car les ports sont différents, il s'agit d'un inter-domaine.
De http://192.168.101.10:8601 à http://192.168.101.11:8601 car les hôtes sont différents, il s'agit d'un inter-domaine.
De http://192.168.101.10:8601 à https://192.168.101.10:8601 en raison de différents protocoles, il s'agit d'un inter-domaine.
Remarque : Il n'y a pas de requêtes d'origine croisée entre les serveurs.
Si le navigateur détermine que la requête est une requête inter-domaines, il ajoutera origin à l'en-tête de la requête pour indiquer la source de la requête.
Par exemple:
Texte brut
GET / HTTP/1.1
Origine : http://localhost:8601
Lorsque le serveur reçoit la requête, il détermine si l'origine autorise les requêtes inter-domaines. Si tel est le cas, il indique dans l'en-tête de réponse que les requêtes inter-domaines provenant de cette origine sont autorisées, comme suit :
Contrôle d'accès en texte brut
-Autoriser-Origin：http://localhost:8601
Si les demandes d'origine croisée provenant de n'importe quelle origine de nom de domaine sont autorisées, la réponse est la suivante :
Contrôle d'accès en texte brut
-Autoriser-Origine：*
Solution aux problèmes inter-domaines :
1、JSONP
Effectuez une requête inter-domaines via l'attribut src de la balise de script. Si le serveur souhaite répondre avec du contenu, il lit d'abord la valeur du paramètre de rappel de la requête. Le rappel est le nom d'une fonction de rappel. Une fois que le serveur a lu la valeur de rappel, il répondra avec le contenu en appelant la fonction de rappel. manière de le dire à la partie requérante. Comme indiqué ci-dessous:
2. Ajouter un en-tête de réponse
Le serveur ajoute Access-Control-Allow-Origin dans l'en-tête de réponse : *
3. Interdomaine via le proxy nginx
Puisqu'il n'y a pas de domaine inter-domaines entre les serveurs, le navigateur utilise nginx pour accéder à l'adresse inter-domaine.
1) Le navigateur accède d'abord à http://192.168.101.10:8601 l'adresse fournie par nginx et entre dans la page
2) Cette page nécessite un accès inter-domaines à http://192.168.101.11:8601 . Elle ne peut pas accéder directement à http://www.baidu.com:8601 à travers les domaines . Au lieu de cela, elle accède à une adresse homologue de nginx, telle que : http:/ /192.168.101.11:8601/api , accédez à http://www.baidu.com:8601 via le proxy de http://192.168.101.11:8601/api .
Cela permet un accès inter-domaines.
Il n'y a pas de cross-domain lorsque le navigateur accède à http://192.168.101.11:8601/api
nginx communique avec http://www.baidu.com:8601 via le serveur et il n'y a pas de cross-domaine.
Nous allons utiliser l'option 2 pour résoudre le problème inter-domaines. Écrivez GlobalCorsConfig.java sous le package de configuration du projet API de gestion de contenu.
le code s'affiche comme ci-dessous :
package com.xuecheng.system.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* @description 跨域过虑器
* @author Mr.M
* @date 2022/9/7 11:04
* @version 1.0
*/
@Configuration
public class GlobalCorsConfig {
/**
* 允许跨域调用的过滤器
*/
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
//允许白名单域名进行跨域调用
config.addAllowedOrigin("*");
//允许跨越发送cookie
config.setAllowCredentials(true);
//放行全部原始头信息
config.addAllowedHeader("*");
//允许所有请求方法跨域调用
config.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}Cette classe de configuration implémente un filtre inter-domaines et ajoute Access-Control-Allow-Origin à l'en-tête de réponse.
Redémarrez le service de gestion du système, le projet frontal peut entrer normalement http://localhost:8601 , observer les enregistrements du navigateur et résoudre avec succès le problème inter-domaines.
Débogage conjoint front-end et back-end
Le but du débogage conjoint front-end et back-end ici est de faire l'expérience du processus de débogage conjoint front-end et back-end.La fonction de test est la fonction de requête de cours.
1. Démarrez le projet frontal, puis démarrez le serveur de gestion de contenu.
2. Modifier l'adresse du serveur
Le front-end est connecté par défaut à l'adresse de la passerelle du projet. Le projet de passerelle n'ayant pas encore été créé, vous devez changer le fichier de configuration des paramètres du projet front-end et modifier l'adresse de la passerelle par l'adresse de la gestion de contenu. service.
Démarrez le projet front-end, utilisez le front-end pour accéder à l'interface back-end et observez si les données sur l'interface front-end sont correctes.
Visitez la page d'accueil du front-end et entrez dans la gestion des cours :
http://localhost:8601/#/organization/course-list
Modifiez les conditions du cours et les paramètres de pagination pour tester si la liste des requêtes de cours s'affiche normalement.
Suivez le journal de sortie du service de gestion de contenu pour voir s'il est normal.
À ce stade, le réglage conjoint du front-end et du back-end est pratiquement terminé.