Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "Vue+ElementUI+Springboot's basic knowledge". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

rear end

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

(2) Then Java started to power, JSP+Servlet became mainstream.

(3) Found Java smelly and long, began to encapsulate some common ideas into classes, so Spring grew up, and has two core concepts AOP aspect, IoC control inversion. These two ideas are simply invincible.

AOP: For example, every place in our program may throw exceptions, before every place to try, catch is very cumbersome, and catch after the processing is 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, many places only need to throw exceptions, no catch is needed, and a lot of code is not mentioned. It also unifies the way exceptions are handled. This is just one of the simplest applications of AOP.

IoC: Spring provides the concept of a container, all the classes that need to be instantiated are new out of an object, called Bean (similar to the pea inside), when class A needs class B, the management of class B objects like squeezing into class A. This uncouples the coupling between classes, takes what you want, and has no pre-dependent relationship with each other. When I get class A, I don't need to instantiate a class B and a class C in the constructor method of class A. Of course, there are many complex reference relationships between classes. The order of instantiation and the dependency loop exception are managed by Spring.

(4) Because people continue to become lazy, Spring XML also do not want to write, so out of the Springboot this kind of thing, the slogan is "convention is greater than configuration", set some basic parameters are good, if you do not need to change it directly reference pom can be used, if you want to change it, just 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 beans and application.yml will be automatically injected, No need to write XML to say which bean is in what class name, id is what, how to initialize and so on. At this point, with Jetbrains 'IDEA integrated development environment, writing java is very easy, the amount of code is small and easy to maintain.

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

front end

(1) The beginning: HTML+CSS+JS Three King Kong

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

(3) Then I felt that HTML repeated too many statements, so I had a front-end combination language: JSP and so on. Even now, Springboot has thymeleaf, specifically for writing back-end whiteheads.

(4) The front-end bosses saw that the threshold of the front-end was too low, so they raised the threshold... In fact, they wanted to manage the duplicate code with the idea of "components." For example, I finally wrote a very beautiful Table in HTML+CSS+JS, but every time I use it, I have to copy all the code in the past, and change all the copied places if there is a little change. If the Table were a component, I would just reference it and pass the data to it, and it would automatically render to HTML and reference CSS and JS. In addition, every time you have to consider what browser is compatible, how much trouble, if there is a script, input which versions of which browsers to support, write in a high-level language, and then automatically convert to native HTML+CSS+JS compatible with various browsers when compiled, isn't this fragrant? This is where modern front-end languages come in. The foundation of modern front-end languages is React, weaving everything in JS. React is still relatively native, so a variety of frameworks have been derived from it, famous for Vue and Ant Design, which encapsulate some common ideas, as well as JS generation HTML. I really want to say that the difficulty of entry is too high…

1. Basic concepts

Node.js: JavaScript runtime, specifically designed to run js. For example, node xxx.js, like java -jar xxx.jar

npm: node.js package management. There are many well-written js, references also need version control, there is npm, conceptually similar to java maven, gradle.

ES6: ECMAScript 6 is a new version of JavaScript that is easier to write than native JavaScript.

Babel: Script used to convert ES6, ES7 and other advanced versions of js to low-level versions of js language, which is compatible with various operating platforms.

Vue-CLI: Command line tool for VUE

vue-router: There is an important concept called "routing" at the front end. In fact, it is how to jump the URL of the page. This is the routing component of vue.

webpack: package and compress all front-end project code together, compile high-level languages (such as CSS high-level language SCSS, LESS), reduce code redundancy, load files on demand, distinguish multiple environment configurations, compress images, fonts and other files, and hot-load (save the code and immediately display it to the browser without restarting the service)

2. npm comparison item npmaven repository name

registry

repository official repository

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 configuration file content

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

... packaged directory disttarget

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

3、Vue

Understand what VUE is.

Syntax: vue is syntactically similar to the tag-based version of JSP, or very similar to themeleaf.

Components: Everything in vue is a component, you can customize a component by packaging HTML+CSS+JS together.

Routing: Essentially, what URL should be given and what component should be returned.

Encapsulated features: mounted can process content when a web page loads, data can define variables and automatically render local components when changes occur, methods can define js functions, and so on

CSS you can use SCSS and other languages to write, you can add scope keyword to limit the scope of css, and only need import can refer to any other component, defined components can be written directly in the form of HTML tags, through data to pass parameters, 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 that has been set up with some beautiful components. You only need to piece together these components into web pages, instead of writing components one by one from scratch.

For example, such radio boxes, tables, progress bars, etc., the style is very nice, just need to pass the data can be displayed. If you feel that there is something bad, you can rewrite CSS to replace it yourself. It is very convenient for the middle page and background page with strong functional requirements and indifferent interface design.

5 Why not lay it?

Since I started using the front end, I have been using layui. It was later found to be more suitable for optimizing page display on the basis of native HTML+CSS+JS/Jquery, rather than being compatible with modern front-end language ideas. It comes with some initialization and event-triggered jquery, which doesn't fit well with vue. In addition, the components are not complete, such as tooltip, popover is not available.

"Vue+ElementUI+Springboot basics what" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

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.