Ajax+node.js Front-end Interaction Best Practices (01)

1.node.js Introduction 1.0. Data interaction process between front and back tables

In web development, we often hear the front-end and backstage, what are they doing specific work? How do they interact with each other? We have to figure out all these basic questions and have a general direction of study, first of all, let's look at a scene that almost everyone in life has experienced, such as:

When you go to the restaurant to eat, sit down after the waiter will bring a menu, ask you what you need, this time you browse the menu, the food you want to eat to tell the waiter, the waiter put your order to the backstage, backstage according to your order of the dish name, one by one, the dish is done after you call the waiter to serve you, This is actually similar to the front and back interaction in our web development, so let's look at what points are similar:

1 Menu---Browser page, the menu you see if you are in web development, is equivalent to the browser page that the user sees

2-point dish (record what you want to eat)---Click on the page (and interact with the page, for example: click Login)

3 The waiter sends the menu to the back chef---send data (can be interpreted as a menu) to the backstage (can be interpreted as the back kitchen)

4 after cooking---background processing data

5 Serving---Backstage to send the processed data to the foreground

Based on some of the similarities above, we summarize the features of the front and back:

1, the front desk is visible to the user, for example, the menu, you can see the site page (such as the Screw Classroom homepage)

2, the background to the user is not visible, the user does not care about the background of the specific what to do, the user only need to know what to eat (specifically want to see those page data), and do not care how to do these dishes (general after the kitchen is not open)

3, the kitchen and dining table between the need to establish a communication connection, this matter by the waiter to complete, in the network is specifically those network transmission equipment to complete

To sum up, I think you should roughly guess what the front-end engineers and back-end engineers do, the front-end engineers are mainly responsible for the page display, which includes the PC, mobile, TV, etc., need to consider how the backend to my data display better look, that is, I have to make the menu very good-looking, Customer order is more desire, which customer order of the interactive process is also very important, related to user experience, there is a very important responsibility is to send data to the background to deal with, the user and the page when the interaction needs, do not need what, how to improve the experience is also the front-end need to care, The bottom line is that the front-end is responsible for user experience, the background is mainly processing data, the process does not need to let users know that you can go to the warehouse to take raw materials, with various tools to complete the menu of various dishes, only the final presentation of a delicious dish on the row, summed up is the front-end responsible and user interaction, The background is responsible for processing the data, below we have a picture to show you:

What is 1.1.node.js?

node. js is a JavaScript runtime (runtime), released in May 2009, developed by Ryan Dahl, essentially encapsulating the chrome V8 engine

Let's look back at a diagram of the previous Dom

Summarize the key points:

1 ECMAScript is the standard for JavaScript

2 JavaScript relies on the interface provided by the DOM and BOM on the browser side, with these interfaces to manipulate elements and browsers in the Web page

3 JavaScript also requires a running environment on the backend that's node. js, which expands some modules so that JS has the ability to develop back-end

4 related specifications organization, ECMA, CommonJs

1.2.node.js Installation

: https://nodejs.org/en/download/

Select Download according to your own platform and operating system bit, double click Install after download, always click Next, preferably install in default location, so as not to appear unknown problem

After installation, test whether the installation is successful.

node -v

If the version number of node appears, the installation is successful

1.3. Development tool Installation

This time we will change an editor to develop the node code, the editor called Webstorm, to node development more friendly,: Click to enter the official website

The installation method is also directly click Next

1.4. First procedure

1 start Webstorm, the first open will ask you whether to import the existing configuration file, usually choose a second

2 Ask if you agree to some terms, which you must agree to use Select the first button

3 Asked if you are active version or 30 days of trial, you can buy it yourself, you can use the free 30 days, about how to activate the problem, please contact QQ address

4 Best One popup item click to receive

5 Choose a theme color you like, white or black

6 If you don't like the current theme, you can also install a new theme, and finally start the code side write

7 Creating a Project

8 Select the project location and click Create

9 go to the main interface can create new files, write code, about the setup problem, you can watch the video tutorial

10 Enter a piece of code in the new file and right-click Run to

Ajax+node.js Front-end Interaction Best Practices (01)