vuejs와 thinkphp를 결합하는 방법

vue가 서버 측에 배포되면 npm run build 명령을 통해 패키징된 dist 파일은 http를 통해 지정해야만 직접 찾아볼 수 있다는 것을 우리는 모두 알고 있습니다. index.php 파일을 도메인 이름을 통해. 프런트 엔드에서 백엔드 데이터를 정상적으로 호출할 수 있도록 합니다.

# 🎜🎜#1의 두 가지 방법이 있습니다. 프런트 엔드는 도메인 간에 백엔드 데이터를 호출합니다.

2. 프런트엔드 패키징 파일은 백엔드 서버 폴더(동일 도메인)에 배포됩니다. 웹 서버: 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/ 기본/로그인', {사용자: '', 비밀번호: ''}). (인터페이스는 webpack.base.conf.js 파일에서 정의할 수 있습니다: http://test.testphp.com/index.php/)

#🎜 🎜 # Same Domain

백엔드 구성은 위와 동일하고, 퍼블릭 구성기의 헤더 구성 주석도 동일합니다. 모든 파일(.htaccess 포함)을 php 폴더의 프런트엔드 dist 파일 아래에 배치합니다. 백엔드 인덱스 컨트롤러의 인덱스 메소드 경로를 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: '', 비밀번호: ''})

Thinkphp 관련 기술 기사를 더 보려면

Thinkphp

튜토리얼 컬럼을 방문하세요. 배우다!

위 내용은 vuejs와 thinkphp를 결합하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!