PHPサーバーでフロントエンドとバックエンドを分離するにはどうすればよいですか?-PHPの問題-php.cn

PHPサーバーでフロントエンドとバックエンドを分離するにはどうすればよいですか?

尚

リリース： 2023-02-27 15:14:02

オリジナル

12046 人が閲覧しました

PHPサーバーでフロントエンドとバックエンドを分離するにはどうすればよいですか?

php コードは HTML で記述されており、純粋な PHP ファイルと HTML ファイルが存在せず、フロントエンドとバックエンドが分離されていないため、開発効率が大幅に低下します。したがって、フロントエンドとバックエンドを分離するには、PHP サーバーをフロントエンドから分離する必要があります。

推奨書籍: php サーバー

フロントエンドとバックエンドを分離する利点:

1. 無駄のないチームを構築する高品質な製品

2. 作業効率の向上と分業の明確化

##3. ローカルパフォーマンスの向上

##4. コードの保守性の向上

#PHP サーバーでフロントエンドとバックエンドを分離する方法:

vue を使用して、PHP サーバーのフロントエンドとバックエンドを分離できます。

Vue under Blade

Laravel テンプレートファイルを作成し、PHP 変数を渡してレンダリングします。

<html>
    <body>
        <h1>{{ $hello }}</h1>
    </body>
</html>

ログイン後にコピー

script タグを通じて Vue を導入し、タグ内に Vue ロジックを記述します。

<script src="js/vue.min.js"></script>

ログイン後にコピー

axios などの ajax ライブラリでは、フロントエンドはリソース/ビューフォルダーにのみ記述できます。

ビルドツールの Vue

Laravel Mix は、CSS と JS をストリームコンパイルできるパイプラインを提供します。

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

ログイン後にコピー

Gulp と同様に、これも Node 上で実行されます。

npm install
npm run dev
npm run production

ログイン後にコピー

app.js にコンポーネントを登録します。

// app.js
Vue.component('example', require('./components/Example.vue'));

ログイン後にコピー

その後、PHP テンプレートに直接記述することができます。

@extends('layouts.app')

@section('content')
    <example></example> // 这里是使用vue组件的
@endsection

ログイン後にコピー

実際、原理は以前の手動コンパイルと同じで、まず、webpack 変換コンポーネントを使用して通常の PHP テンプレートを生成し、それを PHP に呼び出します。

分離と転送

ここでのバックエンドの作業は一般的に次のとおりです:

Lumen コードを記述してサービスを提供します

Restful API ドキュメントを作成する
テストに postman を使用する
フロントエンドの作業は一般的に次のとおりです。

Vue コードを作成する

パッケージ化してコンパイルする
Node を使用して API リクエストを転送して解決しますクロスドメインの問題
PM2 を使用して同時リクエストを処理する
##

以上がPHPサーバーでフロントエンドとバックエンドを分離するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。