Comment séparer le front-end et le back-end dans le serveur php ?-Problème PHP-php.cn

Comment séparer le front-end et le back-end dans le serveur php ?

尚

Libérer： 2023-02-27 15:14:02

original

12035 Les gens l'ont consulté

Comment séparer le front-end et le back-end dans le serveur php ?

Le code PHP est écrit en HTML. Il n'y a pas de fichiers PHP purs et de fichiers HTML. Il s'agit de la non-séparation du front-end et du back-end, ce qui réduira considérablement l'efficacité du développement. . Nous devons donc séparer le serveur PHP du front-end pour parvenir à une séparation front-end et back-end.

Lecture recommandée : Serveur PHP

Avantages de la séparation front-end et back-end :

Construisez une équipe réduite pour. produits de haute qualité

2. Améliorer l'efficacité du travail et rendre la division du travail plus claire

3. Améliorer les performances locales

4. Améliorer la maintenabilité du code

Séparer le front-end et le back-end pour le serveur PHP Méthode :

Nous pouvons utiliser vue pour réaliser la séparation front-end et back-end du serveur PHP.

Vue sous Blade

Écrivez un fichier modèle Laravel, transmettez les variables PHP et effectuez le rendu.

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

Copier après la connexion

Introduisez Vue via la balise script, puis écrivez la logique de vue dans la balise.

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

Copier après la connexion

Avec les bibliothèques ajax comme axios, le front-end ne peut être écrit que dans le dossier resources/views.

Vue sous l'outil de construction

Laravel Mix fournit un pipeline qui peut compiler en continu CSS et JS.

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

Copier après la connexion

Semblable à Gulp, il fonctionne également sur Node.

npm install
npm run dev
npm run production

Copier après la connexion

Enregistrez le composant dans app.js.

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

Copier après la connexion

Ensuite, vous pouvez l'écrire directement dans le modèle PHP.

@extends('layouts.app')

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

Copier après la connexion

En fait, le principe est toujours le même que la compilation manuelle précédente. Tout d'abord, utilisez le composant de traduction webpack pour générer un modèle PHP normal et appelez-le en PHP.

Séparation et transfert

Le travail back-end ici est généralement :

Écrire le code Lumen et fournir des services
Rédiger la documentation de l'API Restful
Utiliser Postman pour tester

Le travail front-end est généralement :

Écrire le code Vue
Emballer et compiler
Utiliser Node pour transmettre les requêtes API à résoudre problèmes inter-domaines
Utilisez PM2 pour gérer les requêtes simultanées

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!