JavaScript-How to do the front-end static and dynamic separation

Now there's a project that wants to do the front-end and back-end separation development, what should be done? The main thing is how to do this side of data communication and authority management.

Reply content:

Now there's a project that wants to do the front-end and back-end separation development, what should be done? The main thing is how to do this side of data communication and authority management.

Our ERP system is completely separated from the front and back, with no connection.

The backend uses the modified Laravel framework, splitting the business, splitting the route, and separating the complex authorization from the backend, while still being a simple and clear RESTful API.

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

Additional Information

Before asking this question, it is necessary to have a certain understanding of the HTTP protocol, so that you will not be in some of the details of the endless tangled. Because in essence the difference between the front and back is that one is the requester and one is the responder.

Prior to the development of non-detached, the front-end of the request is often by clicking on a hyperlink, then the browser takes over the subsequent, the browser makes a request to obtain data and refresh the entire page, the backend is to receive the request, by the PHP such a back-end script directly output a full HTML page.

Then Ajax comes, is triggered by Javascript script events, controllable to let the browser under certain conditions to make a limited number of request headers HTTP request, and received a response, still by the script itself rather than the previous browser rendering output, which makes the front-end can realize the function of local refresh.

It's easy to understand this, and the backend just outputs the data based on the request, and the request contains only a few key data:

• What is the requested resource?

• Qualified criteria for the requested resource

• Requested parameters

• The requested data body

The requested resource is what we call the request URI, such as the one that originated with Http://www.a.com/order/128141/detail, and the resource is /order/128141/detail .

Resource-qualified conditions apply to any request, often to Query String（查询字符串） reflect, for example, that the http://www.a.com/shop/goods?name=test&sort=time&page=2 ? following part is the query string, just as the meaning of its 查询 two words, is used to limit the resource result set.

Query strings are often misunderstood by small white to be used to pass data, and $_get and $_post as the way to pass and get data, if there is such a sense of the long-term, PHP deserved to be looked down on AH.

Request parameters are some of the things in the Header section, the general is similar to Cookie , and Accept so on, to tell the server some of the basic information of the requestor, the back end of the authorization is basically the use of this part of the implementation, not all need to use cookies as a realization Session of the only channel, can fully follow the specification to achieve their own set of certification and session process .

Finally, the requested data body, for GET , the DELETE request, there is no delivery data (get is obtained, that DELETE is, delete, where to pass the data? ), but for POST , PUT you need to pass data through the request body, such as form submissions, such as file uploads.

Back-end utilization of large and small data in the request, it is possible to construct a hierarchical (using middleware implementation) of the filtering process, with reasonable routing module and controller, it is easy to achieve the separation of the back end.

Front end play also a lot, I take Ajax this is the simplest practical to say. Whether you use a front-end framework or not, Ajax is not a change, it's a request channel.

With so much to say, you must understand that separation is necessary to distinguish between responsibilities. The front end is to get the data, then the use of AJAX requests to obtain data is good, to get the data to render where the rendering, as for the data, as long as the structure is correct, all identified is correct.

Wrote a bunch, and was free to add

Front end can choose a set of bootstrap template, with Vuejs, background with PHP YII2 framework, design a good restful interface, YII2 self-contained RBAC module, very convenient. The front and rear stations use AJAX to transmit data.

Front-end pure html-frameset development, and back-end unified Ajax interaction, backend set filter validation session.

Front End with Bootstrap/google mdl+angular2 JS, back end with Laravel, installed on the RBAC extension (portal) can be static and dynamic separation, Laravel rest style routing is still very useful.

Answer the question first: session validation +restful
Recommended:

• Front End: Vuejs+bootstrap

• Backstage: Springboot

