BEAR.Sunday + Vue.js로 시작하는 단일 페이지 애플리케이션

BEAR.Sunday 매뉴얼는 React를 프런트 엔드 프레임 워크로 응용 프로그램을 빌드하는 예제를 제공합니다.

여기에서는 Vue.js 의 webpack-simple template의 백엔드를 BEAR.Sunday 로 구축한 싱글 페이지 어플리케이션을 만들어 보고 싶습니다.

운영 환경

PHP 7.1

BEAR.Package v1.7.0

Vue.js v2.5.11

소스 코드는 GitHub에서 공개합니다.

이 항목에서 소개되지 않은 자세한 내용은 완성 된 버전의 소스 코드 및 각 커밋을 참조하십시오

webpack-simple template에서 Vue 앱의 병아리 만들기

먼저 webpack-simple template에서 Vue 앱의 병아리를 만듭니다.

$ vue init webpack-simple advent-vue-project 

? Project name advent-vue-project
? Project description A Vue.js project
? Author 
? License MIT
? Use sass? No

   vue-cli · Generated "advent-vue-project".

   To get started:

     cd advent-vue-project
     npm install
     npm run dev

$ tree -a -L 1            
.
├── .babelrc
├── .editorconfig
├── .gitignore
├── README.md
├── index.html
├── package.json
├── src
└── webpack.config.js

$ npm install 
$ npm run dev

> [email protected] dev /Users/Yuu/workspace/advent-calendar/advent-vue-project
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html

npm run dev를 실행하면 브라우저에서 자동으로 응용 프로그램이 시작됩니다.

BEAR.Skeleton에서 BEAR 앱의 병아리 만들기

그런 다음 BEAR.Skeleton에서 BEAR 앱의 병아리를 만듭니다.

또한 응용 프로그램의 항목 화면을 HTML로 렌더링하기 위해 madapaja/twig-module을 설치합니다.

$ composer create-project -n bear/skeleton MyAdvent.MyProject
$ tree -a -L 1
.
├── .env
├── .gitignore
├── .php_cs.dist
├── README.md
├── autoload.php
├── bootstrap
├── composer.json
├── composer.lock
├── phpcs.xml
├── phpmd.xml
├── phpunit.xml.dist
├── public
├── src
├── tests
├── var
└── vendor

$ composer require madapaja/twig-module

 TwigModule をアプリケーションにインストールし、Twigテンプレートファイルを作成する
 以下のコミットを参照
 https://github.com/kawanamiyuu/Kawanamiyuu.VuejsSpa/commit/5ba0dc0518b9063bd47988a4b29470750cc41312

$ php -S 127.0.0.1:8080 -t public

Vue 앱의 클라이언트 코드를 BEAR 앱으로 포팅

Vue 응용 프로그램의 src 디렉터리를 src-ui로 BEAR 응용 프로그램에 이식합니다.

$ tree -a -L 1
.
├── .babelrc <--
├── .env
├── .gitignore
├── .php_cs.dist
├── README.md
├── autoload.php
├── bootstrap
├── composer.json
├── composer.lock
├── node_modules <--
├── package.json <--
├── phpcs.xml
├── phpmd.xml
├── phpunit.xml.dist
├── public
├── src
├── src-ui <--
├── tests
├── var
├── vendor
└── webpack.config.js <--

webpack.config.js를 편집하여 Vue 응용 프로그램을 빌드할 위치를 BEAR 응용 프로그램의 진입점인 public 아래로 변경합니다.

 module.exports = {
-  entry: './src/main.js',
+  entry: './src-ui/main.js',
   output: {
-    path: path.resolve(__dirname, './dist'),
+    path: path.resolve(__dirname, './public/dist'),
     publicPath: '/dist/',
     filename: 'build.js'
   },

페이지 콘텐츠를 Ajax로 표시

Vue 앱 콘텐츠(Essential Links 및 Ecosystem 링크 URL 및 라벨)를 Ajax에서 백엔드에서 가져오고 표시합니다.

클라이언트 측 라우팅에는 vue-router을 사용하고 백엔드와의 Ajax 통신에는 axios을 사용합니다.

BEAR 앱의 특정 페이지 리소스에서 Json 렌더링을 수행하기 위해 AOP에서 렌더러를 JsonRenderer로 바꿉니다.

// src/Module/JsonRendererInterceptor.php (新規)

use BEAR\Resource\JsonRenderer;
use BEAR\Resource\ResourceObject;
use Ray\Aop\MethodInterceptor;
use Ray\Aop\MethodInvocation;

class JsonRendererInterceptor implements MethodInterceptor
{
    public function invoke(MethodInvocation $invocation)
    {
        $ro = $invocation->getThis();
        /* @var $ro ResourceObject */
        $ro->setRenderer(new JsonRenderer);

        return $invocation->proceed();
    }
}

// src/Module/AppModule.php (編集)

use Kawanamiyuu\VuejsSpa\Annotation\Api;
use Ray\Di\AbstractModule;

class AppModule extends AbstractModule
{
    protected function configure()
    {
        // ...

        $this->bindInterceptor(
            $this->matcher->annotatedWith(Api::class),
            $this->matcher->startsWith('on'),
            [JsonRendererInterceptor::class]
        );

        // ...
    }
}

// src/Resource/Page/Links.php (新規)

use BEAR\Resource\ResourceObject;
use Kawanamiyuu\VuejsSpa\Annotation\Api;

/**
 * @Api
 */
class Links extends ResourceObject
{
    public function onGet()
    {
        $this['essential_links'] = [
            [
                'label' => 'Core Docs',
                'url' => 'https://vuejs.org'
            ],
            // ...
        ];

        $this['ecosystem_links'] = [
            [
                'label' =>'vue-router',
                'url' => 'http://router.vuejs.org/',
            ],
            // ...
        ];

        return $this;
    }
}

이것으로 초기 표시 후, 클라이언트 측에서 라우팅하고 (해당 커밋 ), 한편 비동기로 컨텐츠를 표시한다 (해당 커밋 ) 싱글 페이지 어플리케이션이 완성되었습니다.



↓↓↓ ( Welcome to Your Vue.js App 클릭)