How to separate the front and rear ends

  java, question

Now there is a project that wants to do separate development of front-end and back-end, how should it be done? This is mainly about data communication and rights management.

Our ERP system is completely separated from the front end and the rear end and has no connection.

The back-end uses the modified Laravel framework to split the business and route to separate the complex authority verification at the back-end, while the outside is still a simple and clear RESTful API.

The front end is built with Vue.js plus Bootstrap.

additional remarks

Before asking this question, it is necessary for the subject to have a certain understanding of the HTTP protocol, so that you won’t get entangled in some details. Because essentially the difference between the front and back ends is that one is the requestor and the other is the responder.

In the past development without separation, the front-end requests were usually made by clicking on a hyperlink, and then the browser took over the follow-up. The browser issued a request to obtain data and refresh the entire page. The back-end scripts such as PHP directly output a complete HTML page after receiving the request.

When Ajax came later, Javascript scripts triggered the event to controllably let browsers issue HTTP requests with limited request headers under specific conditions, and after receiving the responses, the scripts would still process the output themselves instead of the browser rendering the output directly in the past, thus enabling the front end to realize the function of local refresh.

After understanding this, it will be very simple. The backend only outputs data according to the request, and the request contains only a few key data:

  • What is the requested resource

  • Qualifying conditions for requested resources

  • Requested parameters

  • Requested data body

The requested resource is what we call Request URI, such as tohttp://www.a.com/order/128141/detailThe request, the resource is/order/128141/detail.

Resource constraints apply to any request, often withQuery StringReflect, for examplehttp://www.a.com/shop/goods?name=test&sort=time&page=2In this?The latter part is the query string, just as it isQueryThe meaning of the two words is used to limit the result set of resources.

The query string is often misunderstood by Xiao Bai as being used to transfer data, and $_GET and $_POST are both used to transfer and obtain data. if you have this awareness for a long time, PHP deserves to be looked down upon. .

Request parameters are some of the things in the Header section, usually similar toCookies,AcceptAnd so on, is used to tell the server some basic information of the requestor.The back-end authorization verification is basically realized by using this part. Cookie does not need to be used as the only channel to realize Sessio n. It can completely realize its own set of authentication and session process according to the specifications..

Finally is the requested data body, forGet,DeleteRequest, there is no transfer data (GET is to get,DeleteIs to delete, how to transfer data? ), but forPost,PutYou need to transfer data through the requestor, such as form submission, such as file upload.

The back-end can completely construct a hierarchical (implemented by middleware) filtering process by using large and small data in the request, and with reasonable routing modules and controllers, the back-end can be easily separated.

There are also many front-end games, so I’ll take ajax as the simplest and most practical one. Whether you use UIkit or not, ajax will not change. It is a channel for requests.

Having said so much, you must understand that to separate, you must distinguish between duties. The front end is to obtain data, so it is good to use ajax to send a request to obtain data, and render the data as it is rendered. As for the data, as long as the structure is correct, it is always recognized as correct.

//I have written a lot, and I will add it later when I am free.