vuejs と thinkphp を組み合わせる方法

vue がサーバー側にデプロイされている場合、npm run build コマンドでパッケージ化された dist ファイルは、http で指定することで直接参照できることは誰もが知っていますが、Thinkphp はインデックスを指定することによってのみ参照できます。 php ファイルをドメイン名経由で読み込みます。フロントエンドがバックエンドデータを正常に呼び出せるようにします。

#2 つのメソッドがあります:

#1. フロントエンドは、ドメイン間のバックエンド データ。

2. フロントエンド パッケージ ファイルはバックエンド サーバー フォルダー (同じドメイン) にデプロイされます。

Web サーバー: apache

例: クロスドメイン

サーバー上のサイトの構成:

在路径/home/www/  下创建test项目文件夹，用来放项目文件。
找到httpd-vhosts.conf文件配置站点
前端站点：
<VirtualHost *:80>
    ServerName test.test.com
    DocumentRoot "/home/www/test/dist"  
    DirectoryIndex index.html
</VirtualHost>
后端站点：
<VirtualHost *:80>
    ServerName test.testphp.com
    DocumentRoot "/home/www/test/php"  
    DirectoryIndex index.php
</VirtualHost>

フロントエンドをパッケージ化する 適切な dist ファイルは /home/www/test/ フォルダーに配置され、http://test.test.com を実行することで参照できます。パスが変更されると、更新時に 404 エラーが表示されます。 。このとき、dist ファイル配下に .htaccess ファイルを作成し、パスが存在しない場合は http://test.test.com/index.html を指定することで問題が解決します。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

/home/www/test フォルダーにプロジェクトのルート ディレクトリ php フォルダーを作成し、php の下に thinkphp ファイルを配置します。 TP5のエントリーファイルはpublicファイル配下にありますので、ここではpublic配下のエントリーファイルindex.phpをphpフォルダに移動し(エントリーファイルはプロジェクトのルートディレクトリに置くのが個人的な習慣です)、そこにIndexモジュールをバインドします。バックエンド。

フロントエンドはバックエンド インターフェイスを呼び出します。クロスドメインがあり、いくつかのクロスドメイン ソリューションがあります。ここでは、クロスドメインの問題を解決するためにバックエンド PHP を構成します。パブリック コントローラーでクロスドメイン構成を設定します:

class Common extends Controller
{
    public $param;
    // 设置跨域访问
    public function _initialize()
    {
        parent::_initialize();
        isset($_SERVER['HTTP_ORIGIN']) ? header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']) : '';
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, authKey, sessionId");
        $param =  Request::instance()->param();
        $this->param = $param;
    }
}

フロントエンドはログイン インターフェイスを呼び出します: this.axios.post('http://test.testphp.com/index.php/base/ログイン'、{ユーザー: ''、パスワード: ''}) 。

(インターフェイスは webpack.base.conf.js ファイルで定義できます: http://test.testphp.com/index.php/)

同じドメイン

バックエンド構成は上記と同じであり、パブリック コンフィギュレーターのヘッダー構成アノテーションも同じです。 php フォルダー内のフロントエンド dist ファイル (.htaccess を含む) の下にすべてのファイルを配置します。バックエンド インデックス コントローラーのインデックス メソッドのパスを PHP のindex.html ファイルにリダイレクトします:

namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
    public function index() {
        $this->redirect('/index.html');
}

フロントエンドはログイン インターフェイスを呼び出します: this.axios.post('/index.php /base/login'、{user: ''、password: ''})

Thinkphp 関連の技術記事の詳細については、

Thinkphp チュートリアル列にアクセスして学習してください。

以上がvuejs と thinkphp を組み合わせる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。