May 31, 2021 Article blog
As we know, a complete IT project is done by a number of different positions, including UI design, front-end development, back-end development, testing, and more. T
he front-end backend needs to be connected through technical interaction, so
what are the front-end interaction technologies on the web?
There are only two things that front-end development needs to do: 1. C reate an interface structure 2. Data interaction
Data interaction can actually be divided into two kinds: 1. G ive background technology 2. That data from the background
What is the purpose of data interaction?
Take: Render the data into the dom document To: After submitting the data to the background, the background will continue to return to one of our data, get the data, and then render the page.
1. Use cookies
For example, the fore desk stores cookies by logging in
The background uses req.cookies() to obtain stored cookie information
2. Take advantage of Ajax
Most of the front-end interactions most commonly used before learning NodeJS utilize the $.ajax, $.post, and $.getJSON that are already encapsulated in ajax and JQuery to interact back and forth by creating an XML HttpRequest object.
After learning NodeJS, we also used the $http service to build our own _http to complete the get, post and jsonp way of front-end interaction;
3. jsonp
jsonp is a back-to-back, cross-domain approach, because the previous request to the data needs to be used in the callback function, so the backend has to put the data back into the callback function
Does jsonp belong to AJAX? ajax refers to the technique of asynchronous data interaction by using xmlhttpquest objects, which is obtained by relying on the scriptsrc attribute and is not part of ajax
4. Service-side rendering
The content requested by the browser can actually be processed through the back end, the data will be rendered directly, and then to the browser on it
Implement service-side rendering in php:
You can put html code in a php language file, and accessing a php file is equivalent to accessing this corresponding html file, because in a php file, you can write some php code to render the data
Implement service-side rendering in Node:
With the template engine, node passes in data to the template when it is rendered, and you can render the dom in the template using a specific syntax: ejs, jade
Note: Routes in express are divided by the request path, and the previous route itself is divided according to the type of request.
5. WebSocket and Socket.io
Two programs on the Web exchange data through a two-way communication connection, one end of which becomes a scoket
By establishing a socket two-way connection, clients and services can communicate directly in both directions
Simple little case: socket.io the idea of chatting
1. The server side establishes the service side, var wss-require ("socket.io") (server)
2. Create a connection to the client soket var wsc s io.connect ('ws://')
3. Client connection wsc.on ("connect", function(e)
4. The server side receives a message from the client connection wss.on ("connection", function (socket)
5. Trigger wsc.on when the client sends a message ("meaasge", function (msg)
6. The client receives a server-side send message wsc.on ("message", function(e)
A qualified front-end talent, not only to grasp their professional skills, but also to understand the necessary back-end development skills, in order to better work communication. It is recommended to read about what the back-end development of the website does