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

This article mainly introduces the Java front and back end separation and Vue.js example analysis, the article introduces in great detail, has a certain reference value, interested friends must read it!

The front and rear ends are not separated.

Backend templates: Jsp, FreeMarker, Velocity

Front-end template: Thymeleaf

There is no distinction between the front and back ends. Jsp is a very typical way of writing. Jsp combines HTML and Java code together. At the beginning, it does improve productivity, but over time, people find that there are problems with Jsp. For back-end engineers, they may not be proficient in css. So the process is generally like this: the front end designs the page-> the back end transforms the page into Jsp-> the back end finds problems-- > the page is given to the front end-- > the front end does not Jsp. This approach is inefficient. Especially after the rise of the mobile Internet, the company's business, generally in addition to the PC end, there are mobile phones, Mini Program, etc., usually, a backstage system needs to correspond to multiple front ends, at this time can not continue to use the front and back end of the development.

Generally speaking, the backend may return a ModelAndView, which can be displayed by the browser after it is rendered into HTML, but for Mini Program and mobile devices, HTML cannot be well displayed (in fact, mobile devices also support HTML, but the operation is inefficient). At this time, the back-end and front-end data exchange, the mainstream solution is to achieve through JSON.

Front and rear end separation

After the front and rear ends are separated, the back end no longer writes pages, but only provides JSON data interfaces (the XML data format is rarely used now). The front end can be mobile, Mini Program, or PC. The front end is responsible for JSON display, page jump and so on. After the separation of the front end, the front end currently has three mainstream frameworks:

Vue

Author you Yuxi, Vue itself draws lessons from Angular, and currently has the largest number of GitHubstar. It is recommended for back-end engineers to use this. The biggest reason is that Vue is easy to use and can be learned quickly. For back-end engineers, you can quickly build pages to solve problems, but if you are a professional front-end engineer, I will recommend you to learn all three. In terms of the current use of domestic front-end framework, Vue is the most widely used. And at present, there are a large number of Vue-related peripheral products, a variety of UI frameworks, open source projects, a lot of learning materials.

React

Facebook products. Is a js library for building a user interface, React performance is good, the code logic is simple.

Angular

AngularJS is an open source JavaScript library maintained by Google to assist single-page applications. Its goal is to enhance browser-based applications through MVC pattern (MVC) capabilities, making it easier to develop and test.

Introduction to Vue

Vue (pronunciation / vju steps /, similar to view) is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when used in conjunction with modern tool chains and various supporting class libraries, Vue is also fully capable of driving complex single-page applications.

Only focus on the view layer

MVVM framework

In the process of using jQuery, a large number of DOM operations are mixed. DOM operations are required to modify views or obtain value. MVVM is a framework for bi-directional binding between views and data models, that is, when data changes, views change, and data models change, and developers no longer need to operate DOM nodes.

Here is a simple 99 multiplication table to give you a taste of MVVM:

Title {{j}} * {{I}} = {{isimj}} var app = new Vue ({el: "# app", data: {num:9}})

The user modifies the data in the input box, causing changes in variables, and then updates the ninety-nine multiplication table.

SPA

SPA (single page web application), a single-page application, is a model of a web application or website that interacts with the user by dynamically rewriting the current page, rather than traditionally reloading the entire new page from the server. This approach avoids interrupting the user experience by switching between pages, making the application more like a desktop application. In a single-page application, all the necessary code (HTML, JavaScript, and CSS) is retrieved by the loading of a single page, or the appropriate resources are dynamically loaded and added to the page as needed (usually in response to user actions). SPA has a disadvantage, because there is only one page after the SPA application is deployed, and this page is just a bunch of js and css references, without other valid value, so it is not easy for SPA applications to be included by search engines, so, generally speaking, SPA is suitable for large enterprise background management systems.

The use of Vue can be broadly divided into two categories:

Directly introduce Vue into the page and not do SPA application

SPA application

Basic environment construction

First, you need to install two things:

NodeJS

Npm

Just search and download NodeJS directly, and after the installation is successful, you will have npm. After the installation is successful, you can verify that the installation is successful in the cmd command:

After the NodeJS installation is successful, install the tools for Vue:

Npm install-g vue-cli # only needs to be executed on the first installation

Vue init webpack my-project # create a vue project using the webpack template

Cd my-project # goes to the project directory

Npm install # download dependency (this step can be omitted if automatic npm install is selected in the last step of project creation)

Npm run dev # start the project

After launching successfully, the browser will see the following page by typing http://localhost:8080:

When executing the npm install command, a foreign download source is used by default, which can be configured to use the image of Taobao by the following code:

Npm config set registry https://registry.npm.taobao.org

After the modification is completed, the success rate of download can be effectively improved.

Introduction to the structure of Vue Project

After the Vue project is created, open the project using Web Storm. The project directory is as follows:

Build folder, which is used to hold the project build scripts

Config stores some basic configuration information of the project, the most commonly used of which is port forwarding

The node_modules directory stores all the dependencies of the project, that is, the files downloaded by the npm install command

The src directory stores the source code of the project, that is, the code written by the developer is placed here.

Static is used to store static resources

Index.html is the home page, entry page of the project, and the only HTML page of the whole project.

All project dependencies are defined in package.json, including development-time and release-time dependencies

For developers, 99.99% of the future work is done in src. The file directory in src is as follows:

The assets directory is used to store asset files

The components directory is used to store components (some reusable, non-independent pages), and of course developers can also create complete pages directly in components.

It is recommended to store components in components and create a separate page folder for complete pages.

The js file of the route is stored in the router directory

App.vue is a Vue component and the first Vue component of the project

Main.js is equivalent to the main method in Java and is the entry js of the whole project.

The main.js content is as follows:

Import Vue from 'vue'import App from'. / App'import router from'. / router'Vue.config.productionTip = false/* eslint-disable no-new * / new Vue ({el:'# app', router, components: {App}, template:''})

In main.js, import the Vue object first

Import App.vue and name it App

Import router, note that because the default file name for routing in the router directory is index.js, you can omit it

After everything has been imported successfully, create a Vue object and set the node to be processed by Vue to be'# app','#app' refers to a div defined in advance in the index.html file

Set router to the vue object, here is a simplified way to write, the complete way to write is router:router, if the key/value is exactly the same, it can be abbreviated.

Declare a component App,App this component has been imported into the project at the beginning, but the directly imported component cannot be used directly and must be declared.

A page template is defined in template, which renders the content in the App component to the'# app' 'div.

Therefore, it can be guessed that after the project starts successfully, the page effect you see is defined in App.vue.

Export default {name: 'App'} # app {font-family:' Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; text-align: center; color: # 2c3e50; margin-top: 60px;}

App.vue is a vue component, which contains three parts: 1. Page template (template); 2. Page script (script); 3. Page style (style)

In the page template, the HTML element of the page is defined. Here, two are defined, one is a picture and the other is a router-view.

The page script is mainly used to initialize the current page data, handle events, and so on.

The page style is the page beautification operation for the HTML element in template.

What needs additional explanation is that router-view, which refers to the location of the routing page, can be simply understood as a placeholder, and the content of this placeholder will be determined according to the current specific URL address. For the specific content displayed, refer to the routing table, that is, the router/index.js file, which is as follows:

Import Vue from 'vue'import Router from' vue-router'import HelloWorld from'@ / components/HelloWorld'Vue.use (Router) export default new Router ({routes: [{path:'/', name: 'HelloWorld', component: HelloWorld}]})

In this file, the Vue object, Router object, and HelloWorld components are first imported

Create a Router object and define the routing table

In the routing table defined here, the path is /, and the corresponding component is HelloWorld, that is, when the browser address is /, the HelloWorld component is displayed in the router-view location.

Start Vue in WebStorm

You can also configure vue directly in webstorm and launch it, and click the upper right corner to configure it:

Then configure the script:

After the configuration is completed, click the launch button in the upper right corner to launch a Vue project, as shown below:

Project compilation

It is impossible for such a large front-end project to be released and run directly. When the developer completes the project development, locate the cmd command line to the current project directory, and then execute the following command to package the project:

Npm run build

After the package is successful, a dist folder is generated under the current project directory. There are two files in this folder, index.html and static. The index.html page is the only HTML page in our SPA project, and the compiled js, css and other files are saved in static. When the project is released, you can use nginx to deploy static files in dist independently, or you can copy static files to the static directory of the Spring Boot project. Then compile, package and release the Spring Boot project.

The above is all the content of the article "Java front and rear separation and sample analysis of Vue.js". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow 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.