Comment combiner vuejs avec thinkphp

Lorsque vue est déployée sur le serveur, nous savons tous que le fichier dist fourni via la commande npm run build peut être parcouru directement en le spécifiant via http. Thinkphp ne peut être parcouru qu'en pointant vers index.php. déposer via le nom de domaine. Pour permettre au front-end d’appeler normalement les données du back-end.

Il existe deux méthodes :

1. Le front-end rappelle-. terminer les données dans tous les domaines.

2. Le fichier de packaging front-end est déployé dans le dossier du serveur back-end (même domaine).

Serveur Web : apache

Par exemple : cross-domain

Configurer le site sur le serveur :

在路径/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>

Emballez le front-end Le bon fichier dist est placé dans le dossier /home/www/test/ et peut être parcouru en exécutant http://test.test.com Lorsque le chemin change, une erreur 404 apparaîtra lors de l'actualisation. À ce stade, créez un fichier .htaccess sous le fichier dist. Lorsque le chemin n'existe pas, pointer le chemin vers http://test.test.com/index.html peut résoudre ce problème.

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

Créez le dossier php du répertoire racine du projet sous le dossier /home/www/test et placez le fichier thinkphp sous php. Le fichier d'entrée de TP5 se trouve sous le fichier public. Ici, déplacez le fichier d'entrée index.php sous public vers le dossier php (mon habitude personnelle est de placer le fichier d'entrée dans le répertoire racine du projet) et liez le module Index au fichier public. back-end.

Le front-end appelle l'interface back-end, il existe des solutions inter-domaines et il existe plusieurs solutions inter-domaines. Ici, je vais configurer le php back-end pour résoudre le problème inter-domaines, et. définir la configuration inter-domaines dans le contrôleur public :

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

Le front-end appelle l'interface de connexion : this.axios.post('http://test.testphp.com/index.php/base/ connexion', {utilisateur : '', mot de passe : ''}) .

(L'interface peut être définie sous le fichier webpack.base.conf.js : http://test.testphp.com/index.php/)

Même domaine

La configuration du backend est la même que ci-dessus, et l'annotation de configuration d'en-tête dans le configurateur public est la même. Placez tous les fichiers (y compris .htaccess) sous le fichier dist frontal dans le dossier php. Redirigez le chemin de la méthode index du contrôleur d'index back-end vers le fichier index.html sous PHP :

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

Le front-end appelle l'interface de connexion : this.axios.post('/index.php /base/login', {user : '', mot de passe : ''})

Pour plus d'articles techniques liés à Thinkphp, veuillez visiter la colonne du didacticiel Thinkphp pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!