Exemple de tutoriel sur la séparation du front-end et du back-end

À mesure que l'entreprise augmente le nombre de développeurs et de projets, le coût de la communication front-end et back-end continue d'augmenter. Le front-end et le back-end du projet d'origine n'étaient pas séparés. En tant que front-end, vous devez également avoir une certaine compréhension des langages back-end tels que PHP, ce qui augmente considérablement le coût d'apprentissage du front-end. développement, en particulier lorsque vous rencontrez des erreurs de base de données et que vous n'en comprenez pas la raison, en passant beaucoup de temps à les résoudre. Par conséquent, en fonction de nos besoins commerciaux actuels, nous avons commencé à essayer de séparer le front-end et le back-end de certains nouveaux projets.

1) Séparation des codes. Les codes front-end et back-end sont séparés à l'aide de répertoires de projet indépendants. L'environnement de développement front-end n'a pas besoin de configurer l'environnement PHP ou Java. Tous les codes de projet sont gérés à l'aide de Git.

2) Amélioration du processus de développement. Le processus de développement sera divisé en local [développement local], dev [débogage conjoint front-end et back-end], bêta [tests d'assurance qualité] et prod [version en ligne].

Nodejs

Webpack

Panneau de commande

Profils d'hôte

Git

Sftp

1) Déterminer les exigences et concevoir les interfaces.

Dans l'ensemble du processus de développement, une fois les exigences et la conception déterminées, le front-end et le back-end doivent d'abord concevoir l'interface, déterminer les paramètres de l'interface correspondante et la structure JSON des données renvoyées, puis se développer de manière indépendante.

2) Développement local

L'environnement de développement local peut être construit à l'aide de Grunt, Gulp et Webpack Nous utilisons généralement Webpack pour y parvenir, car Webpack. can Il prend en charge la modularisation, offre un support relativement bon pour les développements tels que React et VUE et est relativement populaire dans la communauté. Les problèmes peuvent être résolus relativement rapidement. À l'aide de Webpack et Webpack-dev-server, vous pouvez rapidement créer un service local prenant en charge le chargement à chaud et l'actualisation du code. Bien sûr, vous pouvez créer des services simples via express.

À l'heure actuelle, nous utilisons généralement Command Pad pour gérer la ligne de commande, comme le npm start couramment utilisé, ou npm run dist, etc., ce qui est pratique et rapide.

Les ressources d'images sont gérées dans un répertoire unifié et déployées sur Qiniu à l'avance.

Le développement local utilisera la méthode des données fictives pour simuler l'interface et développer la logique de la page. Dans certains projets où jquery existe, nous utilisons jquery.mockjax.js comme outil fictif. Habituellement, un répertoire API est créé pour gérer de manière centralisée toutes les données d'interface, et est chargé et bloqué uniformément via un index.js.

3) Débogage conjoint front-end et back-end

Une fois le front-end et le back-end séparés, le débogage conjoint du front-end et du back-end -end les données seront très simples et efficaces. Il vous suffit de déployer le code sur DEV séparément sur le serveur, puis d'utiliser les outils de développement fournis par Chrome pour déboguer. Si vous rencontrez des problèmes lors du processus de débogage, vous pouvez les modifier et les soumettre à tout moment. Le front-end ne s'appuiera pas sur l'environnement de développement back-end Même s'il y a un problème avec l'environnement DEV, le back-end peut le gérer en temps opportun avec une division claire du travail. Surtout après l'introduction de Docker, nous pouvons facilement créer plusieurs environnements de développement DEV, de sorte que même si plusieurs collègues développent un projet, ils n'affecteront pas le débogage conjoint de DEV.

Lors de la publication du code, le plug-in Sublime Text sftp a été introduit pour pousser directement le code compilé localement vers le serveur DEV, rendant l'ensemble du processus très rapide.

4) Tests d'assurance qualité

En entrant dans la phase de test d'assurance qualité, elle est presque similaire à la phase de débogage conjointe, sauf qu'elle fournit un environnement de type en ligne, qui est fourni séparément Pour une utilisation en test.

5) Publication en ligne

Avant la publication, le code doit être compressé et empaqueté, ce qui se fait également à l'aide de Webpack. Ce qui mérite d'être mentionné, c'est que lorsqu'un bug se produit en ligne, nous devons mapper le code en ligne au code local pour le débogage, à l'aide de HostProfiles et de nginx. Utilisez la fonction branch de git pour créer une branche de correctif pour le traitement.

Il s'agit d'une simple solution de séparation front-end et back-end. Il s'agit simplement d'une solution proposée pour la situation de projet existante de l'entreprise. Bien sûr, de nombreux endroits peuvent être améliorés. . Par exemple, le plan Midway de Taobao ajoute une couche intermédiaire de nodejs pour le rendu des modèles et le traitement commercial.