1. Le Web de l'Ancien Monde

Backend

(1) Au début, le backend Web était essentiellement écrit en PHP, un langage de script très pratique à intégrer dans HTML.

(2) Ensuite, Java a commencé à prendre de l'ampleur et JSP+Servlet est devenu courant.

(3) J'ai trouvé que Java était long et malodorant, alors j'ai commencé à encapsuler certaines idées couramment utilisées dans des classes, donc Spring a grandi et a deux concepts de base : les aspects AOP et l'inversion du contrôle IoC. Ces deux idées sont tout simplement invincibles.

AOP : Par exemple, des exceptions peuvent être lancées à chaque endroit de notre programme. Dans le passé, il était très fastidieux d'essayer d'attraper à chaque endroit, et le traitement post-capture était similaire. S'il existe un aspect qui intercepte la sortie du Web, tout le trafic passera par cet aspect. Une fois qu'une exception est interceptée et levée, le code d'erreur correspondant sera renvoyé de cette manière, dans de nombreux endroits, il suffit d'obtenir des exceptions. lancé, et il n'est pas nécessaire d'attraper. Moins c'est mieux. Sans parler du code, la méthode de gestion des exceptions est également unifiée. Ce n'est que l'application la plus simple d'AOP.

IoC : Spring fournit un concept de conteneur, qui crée un nouvel objet pour toutes les classes qui doivent être instanciées, appelé Bean (similaire à ce site dans Wandou). Lorsque la classe A a besoin de la classe B, les objets de classe B gérés. sont injectés en classe A comme sur ce site. Cela découple le couplage entre les classes. Vous pouvez obtenir ce que vous voulez. Il n'y a pas de pré-dépendance entre elles. Lorsque j'obtiens la classe A, je n'ai pas à me soucier du constructeur de la classe A. J'ai également besoin d'instancier un. classe d'abord. B. Une classe C... Bien sûr, il existe en fait de nombreuses relations de référence complexes entre les classes. L'ordre d'instanciation et les exceptions de boucle de dépendance peuvent être gérés par Spring.

(4) Alors que les gens continuent de devenir paresseux, Spring XML ne veut plus être écrit, donc quelque chose comme Springboot est né. Le slogan est "La convention est supérieure à la configuration". Certains paramètres de base ont été définis. besoin de changer Si vous souhaitez référencer directement le pom, vous pouvez l'utiliser. Si vous souhaitez le modifier, il vous suffit de configurer les paramètres facultatifs dans le fichier application.yml. Si vous souhaitez le personnaliser plus profondément, écrivez simplement. un bean de configuration. Tout Le bean de configuration et application.yml seront automatiquement injectés. Il n'est pas nécessaire d'écrire du XML pour savoir quelle classe de bean est appelée, quel est son identifiant, comment l'initialiser, etc. Grâce à l'environnement de développement intégré IDEA de Jetbrains, l'écriture de Java deviendra extrêmement simple, la quantité de codage sera réduite et il sera facile à maintenir.

(5) Le futur : Ce sera définitivement le monde du Go.

Front-end

(1) Au début : HTML+CSS+JS, les trois grands outils

(2) J'ai trouvé que JS ne pouvait pas satisfaire mon désir, et je voulais développer des scripts plus pratiques, alors Jquery est venu dehors.

Parce que HTML contient trop d'instructions répétées, des langages combinés front-end et back-end tels que JSP ont émergé. Thymeleaf est toujours disponible pour Springboot et fournit aux développeurs back-end des outils spécifiquement présentés aux novices du front-end.

Les experts du front-end ont constaté que le seuil du front-end était trop bas, ils ont donc utilisé la réflexion « composants » pour gérer le code en double et augmenter le seuil. Par exemple, j'ai finalement écrit un très beau tableau en HTML+CSS+JS, mais à chaque fois que je l'utilise, je dois copier tout le code. Si je fais une petite modification, je dois changer tous les endroits copiés. Si ce tableau est un composant, il me suffit de le référencer, puis de lui transmettre les données, et il peut automatiquement être rendu en HTML et référencer le CSS et le JS pertinents. De plus, il est difficile de devoir déterminer à chaque fois quels navigateurs sont compatibles. S'il existe un script, entrez les versions et les navigateurs qui doivent être pris en charge, écrivez-le dans un langage plus avancé, puis convertissez-le automatiquement en compatible avec divers. navigateurs lors de la compilation. Le HTML+CSS+JS natif du navigateur, n'est-ce pas génial ? Cela conduit à des langages front-end modernes. La base du langage front-end moderne est React, et tout est tissé avec JS. React est encore relativement natif, c'est pourquoi divers frameworks ont été dérivés. Les plus célèbres sont Vue et Ant Design, qui encapsulent certaines idées communes et opérations de base telles que la génération de HTML par JS. J'ai vraiment envie de dire qu'il est trop difficile de démarrer...

2. Ouvrez la porte au nouveau monde de Vue

1. Concepts de base

Node.js est un environnement d'exécution JavaScript conçu spécifiquement pour exécuter du code JavaScript. Commandes similaires à java -jar xxx.jar, telles que l'exécution de node xxx.js
npm : gestion des packages node.js. Semblable à Maven et Gradle de Java, JavaScript dispose également de npm, qui est utilisé pour le contrôle de version et le référencement du code JavaScript déjà écrit.
ES6 : ECMAScript 6 est une nouvelle version de javascript, plus facile à écrire que le javascript natif.
Babel : utilisé pour convertir les versions js de haut niveau telles que ES6 et ES7 en langage js de version bas niveau pour faciliter la compatibilité avec les scripts sur diverses plates-formes en cours d'exécution
vue-cli : c'est l'outil de ligne de commande de vue
vue -router : Il existe un concept important dans le front-end appelé "routage", qui gère en fait la façon dont l'URL de la page saute. Il s'agit du composant de routage de Vue.
webpack : emballe et compresse tous les codes de projet front-end ensemble, peut compiler des langages de haut niveau (tels que les langages CSS de haut niveau SCSS, LESS), réduire la redondance du code, charger des fichiers à la demande et peut également faire la distinction entre plusieurs configurations d'environnement, il peut également compresser des images, des polices et d'autres fichiers, et peut également charger à chaud (afficher immédiatement le code dans le navigateur après l'avoir enregistré sans redémarrer le service)

2, npm

Élément de comparaison	npm	maven
Nom du référentiel	registre	référentiel
Référentiel officiel	http://registry.npmjs. org	https://mvnrepository.com
entrepôt national	https://registry.npm.taobao.org	http://maven.aliyun.com/nexus/content/groups/ public
Fichier de configuration	package.json	pom.xml
Contenu du fichier de configuration	"dependencies": {"vue": "^1.0.0"}	...
Le répertoire généré par le package	dist	target

Étant donné que npm est très populaire, dans les versions supérieures de node.js, npm

3 et Vue

ont été intégré Qu'est-ce que vue ?

Syntaxe : Vue est syntaxiquement similaire à la version tag du langage de page Web dynamique JSP, ou très similaire à themeleaf.
Composants : tout dans Vue est un composant. Vous pouvez encapsuler HTML+CSS+JS ensemble pour personnaliser un composant.
Routage : l'essentiel est, compte tenu de l'URL, quel composant doit être renvoyé.
Certaines fonctions encapsulées : par exemple, Mounted peut traiter le contenu lorsque la page Web est chargée, les données peuvent définir certaines variables et restituer automatiquement les composants locaux lorsqu'ils changent, les méthodes peuvent définir certaines fonctions js, etc.

CSS vous pouvez Lorsqu'il est écrit en SCSS et dans d'autres langages, vous pouvez ajouter le mot-clé scope pour limiter la portée du CSS, et vous pouvez référencer tout autre composant uniquement en l'important. Les composants définis peuvent être écrits directement sous forme de balises HTML, et. les paramètres sont transmis via les données., par exemple :

<mytitle></mytitle>

Copier après la connexion

Le noyau est d'utiliser un langage de haut niveau pour écrire HTML+CSS+JS plus paresseusement...

4. Fin de l'interface utilisateur produite par Ele.me, elle a été configurée. Elle comporte des composants exquis. Il vous suffit de rassembler ces composants dans des pages Web, au lieu d'écrire les composants un par un à partir de zéro.

Quelles sont les connaissances de base de Vue+ElementUI+Springboot Ces composants, tels que les boutons radio, les tableaux, les barres de progression, etc., sont très joliment conçus et peuvent être présentés simplement en transmettant des données. Si vous pensez qu'il y a quelque chose d'inesthétique, vous pouvez écraser le CSS et le remplacer vous-même. Ceci est très pratique pour les pages de milieu de gamme et les pages principales qui ont de fortes exigences fonctionnelles et ne se soucient pas de la conception de l'interface.