As a self-taught backend, I don’t know much about the front-end. Does spa return to the website once when accessing the website, and then switch to the display via the front-end routing? Then the server is only responsible for returning data to ajax?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You only need to provide a url link to the front-end index.html page, and then write the interface API, and leave the rest to the front-end.
Yes, you understand it correctly
There is only one entry file, which relies on routing to switch components and provides api in the background
1. Whether it is a one-time return depends on whether you have done asynchronous loading of code and extraction of common parts.
Hope this helps.2. The switching of spa pages is navigated through front-end routing. 3. The front and back ends are completely separated, the code is not coupled, and the server Only data services are provided. The front end calls the server interface through ajax and updates the page after obtaining the data.
Traditional: The front-end is composed of multiple pages, and the back-end is responsible for organizing data, implementing routing, and even generating page content; the front-end and back-end are actually mixed together;
Current: The front-end is composed of a single page or a small number of pages (Single Page Application), The front-end framework is responsible for organizing routing and switching page content (generally splitting pages into components/Components), while the back-end is only responsible for providing API services and sending and receiving data;
In this way, the front-end and back-end are basically separated and decoupled.
The back-end is only responsible for providing the data required by the front-end. The implementation of other logic such as switching jumps between pages and user interaction is completed by the front-end.
The spa single page only needs one index.html page as the entrance to the entire project, and then introduces the necessary js files. Other js files can be loaded on demand, and the specific page content can be dynamically generated and rendered by js. Sometimes page changes are not re-requests or refreshes, but are event-driven and execute corresponding methods to re-render the current page.
Everything starts with partial refresh of ajax.
Traditional web, the browser enters a url and returns a page.
Later, people found that this was too wasteful of resources. For example, if I clicked a like, then the number of likes in the database and the page would be +1. Refreshing the page would definitely not work, so let's do a 'partial refresh'.
Later, the clever developer thought that the hash path segment (shaped like #header) will not send a request to the server, so we can load a small page when clicking an anchor, refresh it partially, and add You can operate the browser's history to implement functions such as rollback. Then just create a front-end routing. Then the front-end routing appears.
In fact, front-end routing is essentially a partial refresh, but more standardized. This refresh brings back a complete component, which contains views and data. The data here is divided into two types, one is the back The data passed from the front end becomes database data for the time being, and the other is the data generated on the front end for better management of views, which temporarily becomes view data.
After talking about it, we can analyze what SPA is.
SPA is the abbreviation of single page application, which is called single page application in Chinese. What is a single page? There is only one page. This page is usually index.html, which is the entry file of the project. From the start to the end of the project, the browser always It’s all on this page, and the changes you see are just the creation and deletion of components. For example, if you introduce bootstrap to this page (not a good idea), then all your components will be affected by bootstrap.
... I really can’t write any more, the rest is too long. I’ll write an article someday to explain it. As an answer, the length is too big.
To put it simply, the front-end provides views and the back-end provides json data. The back-end data is used to render the front-end page.