This is the 23rd day of my participation in Gwen Challenge

As back-end development can also be appropriate to understand a little front-end knowledge, after all, is usually the development of the most contact, understand some back-end data interaction knowledge, can help the back-end in the processing of business logic to consider more.

Before I start talking about front-end data interaction, let me ask you a question. What exactly does it do to enter an address on a website and open a page?

Enter www.baidu.com – > DNS – > Establish a connection with the server – > initiate an HTTP request – > The server responds to the HTTP request and the browser gets the HTML code – > the browser parses the HTML code, And request resources in THE HTML code (such as JS, CSS, images) – > browser to render the page to the user.

Development mode without separation of front and back ends:

Front-end code (Html, JS, CSS) is written in JSPS, or even Java code embedded in JSPS. When a user visits a website, the page data is also an Html document. The JSP is compiled into servlets by the Servlet container, and then the Html, CSS, JS code in the JSP is output to the browser.

In the application mode without separation of the front and back ends, the effects seen by the front end page are controlled by the back end, which renders the page or redirects the page, that is, the back end needs to control the display of the front end, and the front end and the back end have a high degree of coupling

Weaknesses and disadvantages:

The developed software has slow response speed, poor quality and poor user performance. The front and back ends are seriously coupled, the code is chaotic, and the maintainability is poor. Research and development personnel take into account both the front and back ends, resulting in low development efficiency and long research and development cycle.

Front and rear end separation mode:

What the front end needs is that the back end returns the correct data format, takes the data, renders the HTML page, and presents the data, and the back end returns only the data the front end needs. What effect the user sees is controlled by the front end, and the front end is free to do some special design, without considering the logic of the back end.

Advantage:

Increased code maintainability, reduced server load after separation, and improved system performance. Through API connection, simple, clear and easy to maintain.

This leads to the way the front and back end data interact.

Data interaction between the front and back ends

1. Through cookies

The front-end saves login information and account information in cookies, and the back-end obtains information through req.cookies().

2. Through Ajax

Use ajax and JQuery wrapped.ajax,.ajax,.ajax,.post, $.getjson to create an XMLHttpRequest object for front and back interaction.

Common parameters:

1. Url Request address

2, type request type, default is ‘GET’, common also ‘POST’

3, dataType Sets the format of the data to be returned, usually in ‘JSON’ format, but can also be set to ‘HTML’

4. Data Sets the data sent to the server

5. Success Sets the callback function after the request succeeds

Error sets the callback function if the request fails

7. Async Sets async. The default value is ‘true’, indicating asynchrony

3. Through JSONP

Jsonp is a cross-domain combination of the front end and the back end, because the front end requests data that needs to be used in the callback function, so the back end puts the data back in the callback function.

$.ajax({

url:"".dataType:"jsonp".jsonp:'callback',

success(function(res){

console.log(res)

   })

})
Copy the code

4. Server rendering

The backend processes the data and renders it directly to the browser.

Implement server-side rendering in Node:

Using the template engine, Node passes in data to the template as it renders the DOM using a specific syntax within the template. For example: EJS, Jade

5. WebSocket and socket. IO

Data exchange is realized through a two-way communication connection. One end of the connection becomes a scoket. By establishing a two-way socket connection, the client and the server can directly carry out two-way communication.

  1. Var WSS =require(” socket. IO “)(server)

  2. Socket var WSC = IO. Connect (‘ ws:// ‘)

  3. Wsc. on(” connect “,function(e){})

  4. WSS. On (” Connection “,function(socket){})

  5. Wsc. on(” meaasge “,function(MSG){})

  6. WSC. On (” message “,function(e){})

Front-end parameter transmission mode

1, cookie,

2, URL

Get requests pass parameter values to other pages with the URL, parameter names and values.

Advantages: transfer parameters less, easy to operate, simple and clear

Disadvantages: parameters will be exposed, not conducive to confidentiality, not suitable for multi-data transmission

3, Form Form

The form submits all the content of the form to the background, such as input fields, checkboxes, checkboxes, text fields, file fields, etc.

The corresponding value can be obtained in the background through the corresponding name attribute.

The Action property in the form identifies the address to submit the data.

The Method property specifies how the form should be submitted.

Ajax submission in JQuery

Construct a JSON object, convert it into a STRING in JSON format and pass it to the background.

5. H5 Web Storage

LocalStroage and sessionStorage

SetItem (key,value) to save data.

Read data: localstorage.getitem (key);

Delete a single item: localstorage.removeItem (key);

Delete all data: localstorage.clear ();

Get the key of an index: localstorage.key (index);