How to combine vuejs with thinkphp

When vue is deployed on the server side, we all know that the dist file packaged through the npm run build command can be browsed directly by specifying it through http. Thinkphp can only be browsed by pointing to the index.php file through the domain name. To enable the front end to call the back end data normally.

There are two methods:

#1. The front-end calls the back-end data across domains .

2. The front-end packaging file is deployed in the back-end server folder (same domain).

Web server: apache

For example: cross-domain

Configure the site on the server:

在路径/home/www/  下创建test项目文件夹，用来放项目文件。
找到httpd-vhosts.conf文件配置站点
前端站点：

    ServerName test.test.com
    DocumentRoot "/home/www/test/dist"  
    DirectoryIndex index.html

后端站点：

    ServerName test.testphp.com
    DocumentRoot "/home/www/test/php"  
    DirectoryIndex index.php

Package the front-end The good dist file is placed in the /home/www/test/ folder and can be browsed by running http://test.test.com. When the path changes, a 404 error will appear when refreshing. At this time, create an .htaccess file under the dist file. When the path does not exist, pointing the path to http://test.test.com/index.html can solve this problem.

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

Create the project root directory php folder in the /home/www/test folder, and place the thinkphp file under php. The entry file of TP5 is under the public file. Here, move the entry file index.php under public to the php folder (my personal habit is to put the entry file in the project root directory), and bind the Index module to the backend.

The front-end calls the back-end interface, there is cross-domain, and there are several cross-domain solutions. Here I will configure the back-end php to solve the cross-domain problem, and set the cross-domain configuration in the public controller:

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;
    }
}

The front-end calls the login interface: this.axios.post('http://test.testphp.com/index.php/base/login', {user: '', password: ''}) .

(The interface can be defined under the webpack.base.conf.js file: http://test.testphp.com/index.php/)

Same domain

The backend configuration is the same as above, and the header configuration annotation in the public configurator is the same. Place all files under the front-end dist file (including .htaccess) in the php folder. Redirect the path of the index method of the back-end index controller to the index.html file under PHP:

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

The front-end calls the login interface: this.axios.post('/index.php/base/login', {user: '', password: ''})

For more Thinkphp related technical articles, please visit the Thinkphp tutorial column to learn!

The above is the detailed content of How to combine vuejs with thinkphp. For more information, please follow other related articles on the PHP Chinese website!