Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "what is the basic knowledge of Vue+ElementUI+Springboot", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what is the basic knowledge of Vue+ElementUI+Springboot" article.

Back end

(1) at the beginning, the web backend is basically written by php, and the scripted language is very convenient to be embedded in HTML.

(2) then Java began to make efforts, and JSP+Servlet became the mainstream.

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

AOP: for example, exceptions can be thrown everywhere in our program. Try and catch used to be very tedious everywhere, and the processing after catch is more or less the same. If there is an aspect that blocks the egress of 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, you only need to throw an exception, there is no need for catch, there is less code to say, and the way of exception handling is unified. This is just one of the simplest applications of AOP.

IoC:Spring provides the concept of a container, new all the classes that need to be instantiated into an object called Bean (similar to class B). When class A needs class B, the managed class B object is injected into class A like a squeeze. In this way, we untie the coupling between classes, take whatever we want, and there is no pre-dependency between them. When I get class A, I don't need to instantiate a class B and a class C in the constructor of class A. Of course, there are actually a lot of complex reference relationships between classes, and the order of instantiation and dependent loop exceptions are left to Spring to manage.

(4) as people continue to become lazy, Spring XML does not want to write, so there is something like Springboot. The slogan is "convention is greater than configuration". Some basic parameters are set. If you do not need to change, you can use pom directly. 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. All config bean and application.yml are automatically injected, so there is no need to write XML to say which bean is the name of the class, what id is, how to initialize, and so on. So far, with Jetbrains's IDEA integrated development environment, it is very easy to write java, and the amount of code is small and easy to maintain.

(5) Future: it must be the world of Go.

Front end

(1) at the beginning: the three King Kong of HTML+CSS+JS

(2) found that JS can not satisfy the desire, want to develop a more convenient script, so Jquery came out.

(3) then feel that there are too many repetitive statements in HTML, so there is a front-end combination language: JSP and so on. Even now, Springboot has thymeleaf for front-end rookies who write back-ends.

(4) the front-end bosses see that the threshold of the front-end is too low, so they raise the threshold. In fact, I want to manage the repeated code with the idea of "component". For example, I finally wrote a very beautiful Table in HTML+CSS+JS, but every time I used it, I had to copy all the code in the past, and if I changed it a little bit, I had to change all the copied places. If the Table is a component, I just need to reference it and pass the data to it, and it can automatically render to HTML and reference the relevant CSS and JS. In addition, every time you have to think about which browsers are compatible, how troublesome it is. If there is a script, enter which browsers to support, write in an advanced language, and then automatically convert it to native HTML+CSS+JS compatible with various browsers when compiling. This gives rise to the modern front-end language. The foundation of the modern front-end language is React, which weaves everything with JS. React is still relatively native, so various frameworks have been derived from it, notably Vue and Ant Design, which encapsulate some common ideas, as well as the basic operation of JS to generate HTML. I really want to say that getting started is too difficult.

1. Basic concepts

Node.js: the runtime of javascript, specifically designed to run js. For example, whether node xxx.js is like java-jar xxx.jar

Npm:node.js package management. There are a lot of written js, and references need version control, so you have npm, which is conceptually similar to java's maven and gradle.

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

Babel: used to convert high-level versions of js, such as ES6 and ES7, into lower-level versions of js, making it easy to be compatible with scripts on various running platforms

Vue-cli: is the command line tool of vue

Vue-router: the front end has an important concept called "routing", which actually controls how the page URL jumps, which is the routing component of vue.

Webpack: packaging and compressing all the front-end project code together, compiling high-level languages (such as CSS's high-level languages SCSS, LESS), reducing code redundancy, loading files on demand, distinguishing multiple environment configurations, compressing images, fonts and other files, and hot loading (immediately after saving the code to the browser without restarting the service)

2. Npm comparison item npmmaven warehouse name

Registry

Repository official warehouse

Http://registry.npmjs.org

Https://mvnrepository.com domestic warehouse

Https://registry.npm.taobao.org

Http://maven.aliyun.com/nexus/content/groups/public profile

Package.json

Pom.xml profile content

"dependencies": {"vue": "^ 1.0.0"}

…… Package the resulting directory disttarget

Because npm is very popular, npm has been integrated into the higher version of node.js.

3 、 Vue

Get a rough idea of what vue is.

Syntax: vue is syntactically similar to the tagged version of JSP's dynamic web language, or very similar to themeleaf.

Components: everything in vue is a component, and you can package HTML+CSS+JS together to customize a component.

Routing: essentially, what URL is given and what components should be returned.

Some packaged functions: for example, mounted can process content when a web page is loaded, data can define some variables and automatically render local components when it changes, methods can define some js functions, and so on.

You can write CSS in languages such as SCSS. You can add the scope keyword to limit the scope of css, and you only need import to refer to any other component. Defined components can be written directly in the form of HTML tags, and parameters can be passed through data, for example:

The core is to write HTML+CSS+JS more lazily in high-level languages.

4 、 element-ui

Element-ui is a front-end UI from ele.me. It has some beautiful components that you only need to piece together into web pages instead of writing them from scratch.

For example, such as this kind of checkbox, table, progress bar and so on, the style is very good-looking, just send the data in and display it. If you feel that there is something unattractive, you can overwrite the CSS to replace it, which is very convenient for the middle and background pages with strong functional requirements and indifferent interface design.

5. Why not use layui

I've been using layui since I got to the front end. Later, it is found that it is more suitable to optimize the page display effect on the basis of native HTML+CSS+JS/Jquery, but not compatible with the idea of modern front-end language. It comes with some initialization and event-triggered jquery, which doesn't quite match the way vue is written. In addition, the components are not complete, such as tooltip, popover are not available.

The above is the content of this article on "what is the basic knowledge of Vue+ElementUI+Springboot". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.