Laravel (5.1) & Ember. js (1.20.) integration

Laravel (5.1) & Ember. as the most popular PHP framework in the world, Lavavel does not need to be introduced too much. It has a clear architecture, complete documentation, and rich tools, it helps developers quickly build multi-page web applications.

However, with the development of technology, what is the other side of web programs ?? Clients are becoming more diverse (PCs, mobile phones, tablets, and other dedicated devices ). Therefore, a unified mechanism is required to facilitate the communication between servers and different devices. Restful API is proposed based on this idea.

Ruan Yifeng gave a summary of the Restful architecture:

Each URI represents a resource;

Between the client and the server, transfer a certain performance layer of such resources;

The client uses four HTTP verbs to perform operations on server resources to achieve "transition of performance layer status ".

In terms of behavior, after the server has agreed on a set of resource interaction rules, it interacts with different front-end devices through a unified API. The server only needs to focus on data storage and analysis, or the implementation of business logic. On different clients, the presentation logic and interaction logic are separated from the business logic on the server ?? Logical and physical separation.

If the frontend and backend only have resource (data) interaction, the page routing is naturally handed over to the front-end for control, which means that the front-end does not refresh the whole page after loading the page for the first time, all data is retrieved and used from the backend using ajax, and all forms are submitted in the same way. this is a Single Page Application (SPA ).

Ember. js is a modular front-end Framework. based on the MVC concept, Ember. js provides functions such as UI binding, template system, and routing system, which is very suitable for rapid SPA development. In particular, Ember also provides a complete command line development kit ?? Ember Cli not only saves tedious development environment configuration, but also provides a wide range of development and build tools. for example, you can use CoffeeScript or ES6 for development immediately, the corresponding interpreter has been installed with the development kit. when you start the ember server, you do not have to type ember build in the command line for every change, the system automatically identifies text changes, interprets and merges them, and stores the compiled files in the dist/directory.

However, when I configured Laravel and Ember. js separately, I found that I could not immediately pull up my sleeves to write code because they were not born for each other. For example, I am faced with two problems:

Laravel and Ember. js have their own routing systems. how can laravel assign its own URL control?

User authorization is usually managed and maintained by the server. Laravel provides a complete authentication solution, however, in the SPA, the backend has to assign some permissions to the front-end (mainly page access permissions and ajax authorization). What is the best practice to solve this problem?

I believe that many people have encountered similar problems before, and this issue may have general principles and guidelines. However, at the operational level, it is related to the specific framework, which is limited by space. This article will discuss the first issue. The second question is answered in another way.

Define API interfaces

In laravel, the laravel/app/Http/routes. php file is the entry of all URLs. all URLs and corresponding processing functions should be defined here.

// laravel/app/Http/routes.phpRoute::group( array( 'prefix' => 'api/v1' ), function(){    // USERS API ==================================    Route::get('users/{id}', 'UserController@getById');    Route::delete('users/{id}', 'UserController@destroyById');    Route::put('users/{id}', 'UserController@updateById');    Route::post('users', 'UserController@storeNew');    // OTHER API ==================================    // ......});

I put all the APIs in a routing group. this group specifies that API requests must be prefixed with API/[version number]. for example, the server needs to return user information with id = 5, a GET request should be sent to the following address:

Http: // your_demain/api/v1/users/5

After receiving the request, the server passes the request object to the getById member method of UserController for processing.

I also defined user authorization interfaces in this file and divided them into one group:

// laravel/app/Http/routes.phpRoute::group( array ( 'prefix' => 'auth' ), function(){    Route::post('login', 'Auth\AuthController@postLogin');    Route::get('logout', 'Auth\AuthController@getLogout');    Route::post('register', 'Auth\AuthController@postRegister');});

The three interfaces provide logon, logout, and registration functions respectively.

Well, laravel routes only need to do so many things.

Give control of other URLs to the front-end

When the Ember page is started, the ember/dist/index.html file is used as the portal. The dist Directory stores all the created files, which are automatically generated by the system. In the index.html file, two script files and two style files are loaded from the ember/dist/assets Directory: