javascript - How to separate dynamic and static back-ends

Now there is a project that wants to develop the front-end and back-end separately. What should I do? Mainly what should be done in data communication and rights management.

Reply content:

Now there is a project that wants to develop the front-end and back-end separately. What should I do? Mainly what should be done in data communication and rights management.

Our ERP system is that the front and back ends are completely separated and have no connection.

The backend uses the modified Laravel framework, which splits the business and routing to separate the complex permission verification on the backend. At the same time, it is still a simple and clear RESTful API to the outside world.

The front end is built using Vue.js Bootstrap.

Additional instructions

Before asking this question, it is necessary for the questioner to have a certain understanding of the HTTP protocol, so that you will not be endlessly entangled in some details. Because essentially the difference between the front and back ends is that one is the requester and the other is the responder.

In the past non-separated development, front-end requests were often made by clicking on a hyperlink, and then the browser took over the follow-up. The browser made its own request to obtain data and refreshed the entire page. After receiving the request, the back-end A complete HTML page is directly output by a back-end script such as PHP.

Later, when Ajax came, events were triggered by Javascript scripts, allowing the browser to controllably issue HTTP requests with limited request headers under specific conditions, and after receiving the response, the script would still handle it by itself instead of the previous The browser directly renders the output, which allows the front end to implement partial refresh function.

After understanding this, it is very simple. The backend only outputs data according to the request. The request contains nothing more than a few key data:

• What is the resource requested

• Qualification of the requested resource

• Request parameters

• Requested data body

The requested resource is what we call Request URI. For example, for a request to http://www.a.com/order/128141/detail, the resource is /order/128141/detail.

Resource qualification conditions are applicable to any request, and are often represented by Query String（查询字符串）, such as http://www.a.com/shop/goods?name=test&sort=time&page=2, where the part after ? is the query string, just as the meaning of the word 查询 is used to Limited resource result set.

Query strings are often misunderstood by newcomers as being used to transfer data, and both $_GET and $_POST are used as ways to transfer and obtain data. If this awareness has existed for a long time, PHP deserves to be criticized. Look down on it. .

Request parameters are some things in the Header part. Common ones are similar to Cookie, Accept, etc., which are used to tell the server some basic information about the requester. The back-end permission verification is basically Implemented using this part, it is not necessary to use Cookie as the only channel to implement Session. You can completely implement your own set of authentication and session processes in accordance with the specifications .

The last one is the data body of the request. For GET, DELETE requests, there is no data to be passed (GET is to get, DELETE is to delete, how to pass the data?), but for POST, PUT Then you need to pass data through the request body, such as form submission or file upload.

The backend can use the large and small data in the request to build a well-defined filtering process (implemented by middleware). With reasonable routing modules and controllers, it is easy to achieve the separation of the backend.

There are many front-end methods. I will take ajax as the simplest and most practical one. Whether you use a front-end framework or not, ajax will not change. It is a request channel.

Having said all of the above, you must understand that to separate, you must clarify responsibilities. The front end is to obtain data, so just use ajax to send a request to obtain the data. You can render the data wherever you get it. As for the data, as long as the structure is correct, it will be considered correct.

// I wrote a lot, I will add more when I have time

You can choose a bootstrap template for the front end and use it with vuejs. The backend uses the yii2 framework in php to design a restful interface. yii2 comes with its own rbac module, which is very convenient. The front and backend use ajax to transmit data.

The front-end is developed purely with html-frameset, and interacts with the back-end through ajax. The back-end has a filter to verify the session.

The front-end uses Bootstrap/Google MDL Angular2 JS, and the back-end uses Laravel. Installing the RBAC extension (portal) can separate dynamic and static. Laravel's REST-style routing is still very useful.

Answer the question first: session verification RESTFUL
Recommended:

• Front end: vuejs bootstrap

• Backend: Springboot