How to use the Hyperf framework for front-end and back-end separation development

How to use the Hyperf framework for front-end and back-end separation development

With the rapid development of the Internet, the development model of front-end and back-end separation has attracted more and more attention from developers. In this development model, the front end is responsible for page display and user interaction, while the back end is responsible for data processing and business logic. This article will introduce how to use the Hyperf framework for front-end and back-end separation development, and provide specific code examples.

1. Environment preparation

First, we need to install PHP and Composer. Then, use Composer to globally install the Hyperf framework with the following command:

composer global require hyperf/hyperf-skeleton

After the installation is complete, you can use the following command to create a new Hyperf project:

composer create-project hyperf/hyperf-skeleton your-project-name

2. Create Controller

In the Hyperf framework, the controller is responsible for processing requests and returning corresponding responses. We can use the following command to create a new controller:

php bin/hyperf.php gen:controller DemoController

This will generate a controller file named DemoController in the app/Controller directory. In this file, we can define various interface methods to handle different requests.

The following is a simple sample code that demonstrates how to return a response in JSON format:

<?php

declare(strict_types=1);

namespace AppController;

use HyperfDiAnnotationInject;
use HyperfHttpServerAnnotationAutoController;
use HyperfHttpServerAnnotationMiddleware;
use HyperfHttpServerAnnotationMiddlewares;
use HyperfHttpServerContractRequestInterface;
use HyperfHttpServerContractResponseInterface;

/**
 * @AutoController(prefix="demo")
 * @Middlewares({
 *     @Middleware(AppMiddlewareAuthMiddleware::class),
 * })
 */
class DemoController
{
    /**
     * @Inject
     * @var RequestInterface
     */
    private $request;

    /**
     * @Inject
     * @var ResponseInterface
     */
    private $response;

    public function index()
    {
        $data = [
            'message' => 'Hello World',
        ];
        return $this->response->json($data);
    }
}

In this sample code, we create an interface method named index, by calling The $response->json() method returns a response in JSON format.

3. Create a front-end page

In the development mode where the front-end and back-end are separated, we need to provide interface documents for front-end development so that they can call the back-end interface. Hyperf provides Swagger components that can automatically generate interface documents. We can use the following command to install the Swagger component:

composer require hyperf/swagger

Then, create a swagger.php configuration file in the config/autoload directory to configure the relevant information of the Swagger component:

<?php

use HyperfSwggerAnnotation as Swgger;

/**
 * Class DemoController
 *
 * @SwggerApi(tags={"Demo"})
 */
class DemoController
{
    /**
     * @SwggerGet(path="demo/index")
     * @SwggerResponse(code=200, description="成功", @SwggerSchema(ref="#/definitions/Hello"))
     */
    public function index()
    {
        $data = [
            'message' => 'Hello World',
        ];
        return $this->response->json($data);
    }
}

In this sample code In , we use Swagger annotations to describe the index method, including interface path, response code and other information.

4. Start the Hyperf service

After completing the creation of the controller and front-end page, we need to start the Hyperf service so that the front-end can communicate with the back-end through the interface.

Use the following command to start the Hyperf service:

php bin/hyperf.php start

5. The front-end calls the back-end interface

Once the Hyperf service is started successfully, the front-end developer can follow the interface Document to call the backend interface. They can use any front-end technology, such as JavaScript, Vue.js, React, etc.

The following is a simple sample code that demonstrates how to use JavaScript to call the backend interface:

fetch('http://localhost:9501/demo/index')
    .then(response => response.json())
    .then(data => console.log(data));

In this sample code, we use the fetch function to send a GET request, and use json() method to parse the returned response data.

Summary

Through the above steps, we can use the Hyperf framework to develop front-end and back-end separation. Developers can choose the front-end technology that suits them according to their own needs and preferences, and call the back-end interface according to the interface document. The powerful functions and rich documentation of the Hyperf framework can help developers develop more efficiently.

The above is the detailed content of How to use the Hyperf framework for front-end and back-end separation development. For more information, please follow other related articles on the PHP Chinese website!