What are the basic knowledge of Vue+ElementUI+Springboot

1. The Old World Web

Backend

(1) At the beginning, the web backend was basically written in PHP, a scripting language that is very convenient to embed into HTML .

(2) Then Java began to exert its power, and JSP Servlet became mainstream.

(3) I found that Java was smelly and long, and I began to encapsulate some commonly used ideas into classes, so Spring grew up and had two core concepts: AOP aspects and IoC control inversion. These two ideas are simply invincible.

AOP: For example, exceptions may be thrown in every place in our program. In the past, try and catch were required in every place, which was very cumbersome, and the post-catch processing was similar. If there is an aspect that intercepts the exit of the Web, all traffic will pass through this aspect. Once an exception is intercepted and thrown, the corresponding error code will be returned. In this way, in many places, exceptions only need to be thrown, and there is no need to catch. Less is better. Not to mention the code, the exception handling method is also unified. This is just the simplest application of AOP.

IoC: Spring provides a concept of a container, which creates a new object for all classes that need to be instantiated, called a Bean (similar to this site in Wandou). When class A requires class B, Just inject the managed class B object into class A like squeezing this site. This decouples the coupling between classes. You can get whatever you want. There is no pre-dependency between each other. When I get class A, I don’t need to worry about the constructor of class A. I also need to instantiate a class first. B. A class C... Of course, there are actually many complex reference relationships between classes. The order of instantiation and dependency loop exceptions can be managed by Spring.

(4) As people continue to become lazy, Spring XML no longer wants to be written, so something like Springboot was born. The slogan is "Convention is greater than configuration", and some basic parameters are set. If you don’t need to change it, you can use it by directly referencing the pom. If you want to change it, you only need to configure the optional parameters in the application.yml file. If you want to customize it more deeply, just write a config bean. Now, all config beans and application.yml will be automatically injected, and there is no need to write XML to tell which bean the class name is, what the id is, how to initialize it, etc. Using Jetbrains' IDEA integrated development environment, writing Java will become extremely simple, the amount of coding will be reduced and it will be easy to maintain.

(5) The future: It must be Go’s world.

Front-end

(1) At the beginning: HTML CSS JS Three King Kong

(2) I found that JS could not satisfy my desire and wanted to develop more convenient scripts, so Jquery came out .

Because HTML contains too many repeated statements, front-end and back-end combined languages ​​such as JSP emerged. Thymeleaf is still available for Springboot, and it provides back-end developers with tools specifically introduced to front-end novices.

Front-end experts found that the front-end threshold was too low, so they used "component" thinking to manage duplicate code and raise the threshold. For example, I finally wrote a very beautiful Table using HTML CSS JS, but every time I use it, I have to copy all the code. If I make a little change, I have to change all the copied places. If this Table is a component, I only need to reference it, and then pass the data to it, and it can automatically render into HTML and reference the relevant CSS and JS. How great. In addition, it is troublesome to have to consider which browsers are compatible every time. If there is a script, enter which versions and browsers are to be supported, write it in a more advanced language, and then automatically convert it to compatible with various browsers during compilation. The browser's native HTML CSS JS, isn't this great? This leads to modern front-end languages. The foundation of modern front-end language is React, and everything is woven with JS. React is still relatively native, so various frameworks have been derived on top of it. The famous ones are Vue and Ant Design, which encapsulate some common ideas and basic operations such as JS generating HTML. I really want to say that it is too difficult to get started...

2. Open the door to the new world of Vue

1. Basic concepts

• Node .js is a JavaScript runtime environment designed specifically to execute JavaScript code. Commands similar to java -jar xxx.jar, such as executing node xxx.js

• npm: node.js package management. Similar to Java's Maven and Gradle, JavaScript also has npm, which is used for version control and referencing already written JavaScript code.

• ES6: ECMAScript 6 is a new version of javascript, which is easier to write than native javascript.

• Babel: used to convert high-level version js such as ES6 and ES7 into low-level version js language to facilitate script compatibility with various running platforms

• vue-cli: It is the command line tool of vue

• vue-router: There is an important concept in the front end called "routing", which actually manages how the page URL jumps. This is Vue's routing component.

• webpack: packages and compresses all front-end project codes together, can compile high-level languages ​​(such as CSS high-level languages ​​SCSS, LESS), reduce code redundancy, and load files on demand , you can also distinguish between multiple environment configurations, compress images, fonts and other files, and hot load (immediately display the code in the browser after saving without restarting the service)

2, npm

##Содержимое файла конфигурации......Каталог, созданный для упаковки disttarget

Элемент сравнения	npm	maven
Название склада	реестр	репозиторий
Официальный склад	http://registry.npmjs.org	https://mvnrepository.com
внутренний склад	https: //registry.npm.taobao.org	http://maven.aliyun.com/nexus/content/groups/public
Файл конфигурации	package.json	pom.xml
	"зависимости" : {"vue": "^1.0.0"}

Поскольку npm очень популярен, npm

3 и Vue были интегрированы в более поздние версии узла. js

Получите примерное представление о том, что такое vue.

• Синтаксис: Vue синтаксически похож на версию тегов языка динамических веб-страниц JSP или очень похож на themeleaf.

• Компоненты: Все в Vue является компонентом. Вы можете инкапсулировать HTML CSS JS для настройки компонента.

• Маршрутизация: Суть в том, какой URL указан, какой компонент должен быть возвращен.

• Некоторые функции инкапсулированы: например, mount может обрабатывать контент при загрузке веб-страницы, data может определять некоторые переменные и автоматически отображать локальные компоненты при их изменении, методы могут определять некоторые js функции и т. д. Подождите

CSS можно писать на таких языках, как SCSS. Вы можете добавить ключевое слово области, чтобы ограничить область действия CSS, и вам нужно только импортировать в ссылку любой другой компонент.Определенные компоненты могут быть написаны непосредственно в виде HTML-тегов, а параметры передаются через данные, например:

<mytitle></mytitle>

Суть заключается в использовании языков высокого уровня для написания HTML CSS JS более лениво...

4.element -ui

element-ui — это интерфейсный интерфейс, созданный Ele.me. В нем уже настроено несколько изысканных компонентов. Вам нужно только объединить эти компоненты в веб-страницы без необходимости создавать их с нуля.

Эти компоненты, такие как переключатели, таблицы, индикаторы выполнения и т. д., очень красиво спроектированы и могут быть визуализированы просто путем передачи данных. Если вы считаете, что что-то неприглядно, вы можете перезаписать CSS и заменить его самостоятельно.Это очень удобно для средних и внутренних страниц, которые имеют строгие функциональные требования и не заботятся о дизайне интерфейса.

5. Почему бы не использоватьlayui

С тех пор, как я познакомился с фронтендом, я всегда использовалlayui. Позже я обнаружил, что он больше подходит для оптимизации эффекта отображения страницы на основе нативного HTML CSS JS/Jquery, но не очень совместим с идеями современных интерфейсных языков. Он поставляется с некоторыми предустановленными методами инициализации jQuery и запуска событий, которые несовместимы с методом записи Vue. Кроме того, не включены некоторые компоненты, такие как всплывающая подсказка и всплывающее окно.

The above is the detailed content of What are the basic knowledge of Vue+ElementUI+Springboot. For more information, please follow other related articles on the PHP Chinese website!