In der heutigen Internetwelt werden Softwaredienste mit Webanwendungen als Kern immer beliebter. Unter anderem bietet das Laravel-Framework als hervorragendes Entwicklungsframework für die PHP-Sprache nicht nur eine effiziente Leistung, sondern auch eine Reihe von Vorteilen wie eine benutzerfreundliche Entwicklungserfahrung, eine reichhaltige Open-Source-Community, ein leistungsstarkes ORM- und Migrationssystem. In der Back-End-Entwicklung von Laravel ist das Entwicklungsmodell der Front-End- und Back-End-Trennung in letzter Zeit allmählich populär geworden. In diesem Artikel wird erläutert, wie Sie mit Laravel eine separate Bereitstellung von Front-End und Back-End erreichen.
1. Was ist Front-End- und Back-End-Trennung?
Front-End- und Back-End-Trennung ist eine neue Art der Entwicklung von Webanwendungen, die Front-End und Back-End aus technischer Sicht vollständig trennt. Das Front-End-Programm ist für die Generierung der Schnittstelle und die Kommunikation mit dem Server zum Abrufen von Daten verantwortlich, während das Hintergrundprogramm für die Verarbeitung der Geschäftslogik und den Zugriff auf die Datenbank verantwortlich ist.
Diese Methode hat viele Vorteile. Erstens kann es die Effizienz der Front-End- und Back-End-Entwicklung verbessern. Front-End- und Back-End-Entwickler können parallel entwickeln, wodurch die Abhängigkeit voneinander verringert wird. Zweitens kann dadurch die Anwendungsleistung verbessert werden. Da Front-End- und Back-End-Dienste separat bereitgestellt und erweitert werden können, kann die Gesamtleistung des Systems erheblich verbessert werden. Darüber hinaus ermöglicht dieser Ansatz sowohl Front-End- als auch Back-End-Entwicklern, sich so weit wie möglich auf ihre jeweiligen Bereiche zu konzentrieren und so die Codequalität und Wartbarkeit zu verbessern.
2. Implementierung der Front-End- und Back-End-Trennung in Laravel
In der Laravel-Entwicklung erfordert die Implementierung der Front-End- und Back-End-Trennung die Verwendung einiger Front-End-Frameworks. Darunter können wir Mainstream-Frameworks wie Vue.js, React oder Angular als Front-End-Entwicklungslösungen verwenden. In Laravel können wir die folgenden zwei Methoden verwenden, um eine Trennung von Front-End und Back-End zu erreichen.
Wir können zuerst ein unabhängiges Front-End-Projekt erstellen und dann über die API mit dem Laravel-Backend interagieren. In diesem Modus ist Laravel nur für das Schreiben der Back-End-Daten-API-Schnittstelle verantwortlich, und das Front-End verwendet AJAX oder Fetch API, um die Back-End-Datenschnittstelle anzufordern. Die Front-End- und Back-End-Codes können auf verschiedenen Servern oder Ports bereitgestellt werden.
Der Vorteil dieses Ansatzes besteht darin, dass die Trennung zwischen Front-End und Backend sehr hoch ist. Entwickler können ihre jeweiligen Stärken voll ausspielen und gleichzeitig die Leistung der Anwendung verbessern. Sie können auch einige moderne Front-End-Frameworks und -Tools verwenden, um die Entwicklungseffizienz und das Entwicklungserlebnis zu verbessern.
Hier ist ein einfaches Beispiel, um diesen Ansatz zu demonstrieren. Nehmen wir als Beispiel Laravel als Backend und Vue.js als Frontend:
1.1 Erstellen Sie ein neues Laravel-Projekt.
Zuerst müssen wir in der Befehlszeile ein neues Laravel-Projekt erstellen:
composer create-project --prefer-dist laravel/laravel blog
1.2 Erstellen Sie ein neues Vue .js-Projekt
Als nächstes müssen wir ein neues Vue.js-Projekt erstellen:
npm install -g vue-cli vue init webpack frontend
1.3 Laravel und Vue.js konfigurieren
Als nächstes müssen wir die Datei routes/api.php konfigurieren Um auf Anfragen vom Vue.js-Frontend zu antworten. routes/api.php 文件来响应 Vue.js 前端的请求。
Route::get('/todos', function () {
return App\Todo::all();
});在 frontend/src/App.vue 中，我们可以使用 Axios 或任何其他 AJAX 库来获取后端 API。在这个示例中，我们将使用 Axios 库。
<template>
<div class="todo-list">
<div class="todo" v-for="todo in todos" :key="todo.id">
<input type="checkbox" :checked="todo.completed" @change="toggle(todo)">
<label>{{ todo.title }}</label>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
todos: []
}
},
created () {
axios.get('/api/todos')
.then(response => {
this.todos = response.data
})
.catch(error => {
console.log(error)
})
},
methods: {
toggle (todo) {
todo.completed = !todo.completed
axios.put('/api/todos/' + todo.id, todo)
.then(response => {})
.catch(error => {
console.log(error)
})
}
}
}
</script>在 frontend/config/index.js 中，我们可以将 Vue.js 前端设置为使用与 Laravel 后端不同的端口。然后，我们可以运行并访问这个应用程序。
php artisan serve --port=8000 cd frontend npm start
另一个方式是将前端代码和 Laravel 后台代码打包到同一个项目中进行部署，这种模式下 Laravel Mix 作为工具用于构建前端应用程序。Laravel Mix 是一个简化了 Webpack 的构建工具，可以让我们轻松地打包前端资源。
这种方式的优点是前后端代码会打包成一个整体，方便部署和维护。我们可以使用类似于 npm run dev 和 npm run build 的命令来编译前端代码，并将编译结果放在 Laravel 的 public 目录中，这样我们就可以通过浏览器直接访问应用程序了。
下面是一个简单的示例来演示这种方式的实现：
2.1 创建一个新的 Laravel 项目
首先，我们需要在命令行中创建一个新的 Laravel 项目：
composer create-project --prefer-dist laravel/laravel blog
2.2 安装 Node.js 和 NPM
在接下来的步骤中，我们需要安装 Node.js 和 NPM。
在 Ubuntu 中，可以使用以下命令安装：
sudo apt-get install nodejs sudo apt-get install npm
2.3 在 Laravel 中安装 Laravel Mix
然后，我们需要安装 Laravel Mix：
npm install --save-dev laravel-mix
然后，我们需要执行以下命令来生成 webpack.mix.js 配置文件：
node_modules/.bin/mix
2.4 编写前端代码
接下来，我们需要编写前端代码。例如，我们可以在 resources/assets/js/app.js 文件中编写一些 JavaScript 代码。以下是一个简单的示例：
"use strict";
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});2.5 编写前端资源
我们可以把前端的资源文件放在 resources/assets 目录下。例如，我们可以在 resources/assets/sass/app.scss
html, body {
height: 100%;
margin: 0;
}
#app {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.title {
font-size: 24px;
text-align: center;
}frontend/src/App.vue können wir Axios oder jede andere AJAX-Bibliothek verwenden, um die Backend-API zu erhalten. In diesem Beispiel verwenden wir die Axios-Bibliothek.
const mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');frontend/config/index.js können wir das Vue.js-Frontend so einrichten, dass es einen anderen Port als das Laravel-Backend verwendet. Anschließend können wir die Anwendung ausführen und darauf zugreifen. 🎜npm run dev
npm run dev und npm run build verwenden, um den Front-End-Code zu kompilieren und die Kompilierungsergebnisse im öffentlichen Verzeichnis von Laravel abzulegen, damit wir den Browser verwenden können greift direkt auf die Anwendung zu. 🎜🎜Hier ist ein einfaches Beispiel, um diesen Ansatz zu demonstrieren: 🎜🎜2.1 Erstellen Sie ein neues Laravel-Projekt 🎜🎜Zuerst müssen wir ein neues Laravel-Projekt in der Befehlszeile erstellen: 🎜npm run watch
sudo apt-get install nginx sudo apt-get install mysql-server sudo apt-get install php-fpm
server {
listen 80;
server_name yourdomain.com;
root /var/www/public;
index index.php;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location ~ /\. {
deny all;
}
location ~ \.php$ {
fastcgi_pass unix:/run/php/php7.4-fpm.sock;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
internal;
}
}webpack.mix .js Konfigurationsdatei: 🎜cp -r /path/to/frontend/dist/* /var/www/public
resources/assets/js/app.js schreiben. Das Folgende ist ein einfaches Beispiel: 🎜sudo mysql_secure_installation
resources/assets ablegen. Beispielsweise können wir einige CSS-Stile in resources/assets/sass/app.scss schreiben. 🎜CREATE DATABASE dbname CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; CREATE USER 'dbuser'@'localhost' IDENTIFIED BY 'dbpassword'; GRANT ALL PRIVILEGES ON dbname.* TO 'dbuser'@'localhost';
我们需要在 webpack.mix.js 文件中配置 Laravel Mix。例如，我们可以使用 .sass() 方法来生成 CSS 文件，并使用 .js() 方法来生成 JavaScript 文件：
const mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');2.7 编译前端资源
接下来，我们可以运行以下命令来编译前端资源：
npm run dev
或
npm run watch
这样，我们就可以在浏览器中看到我们的应用程序了。
无论我们使用哪种方式来实现前后端分离，最终都需要进行部署。我们可以使用第三方工具如 Jenkins、Capistrano 和 Docker Compose 等来自动化部署。这里介绍一种基于 NGINX + PHP-FPM + MySQL 的部署方式。
3.1 安装服务
首先，我们需要安装 NGINX、PHP-FPM 和 MySQL。我们可以使用以下命令在 Ubuntu 中进行安装：
sudo apt-get install nginx sudo apt-get install mysql-server sudo apt-get install php-fpm
3.2 配置 NGINX
接下来，我们需要配置 NGINX。我们可以在 /etc/nginx/sites-available 目录下创建一个新的配置文件。以下是配置文件的示例：
server {
listen 80;
server_name yourdomain.com;
root /var/www/public;
index index.php;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location ~ /\. {
deny all;
}
location ~ \.php$ {
fastcgi_pass unix:/run/php/php7.4-fpm.sock;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
internal;
}
}我们需要将我们的代码放置在 /var/www/public 目录中。例如，我们使用前两种方式中的第一种方式，代码存放在了一个 独立的前端项目 中。我们可以使用以下命令将编译好的前端代码复制到 /var/www/public 目录中：
cp -r /path/to/frontend/dist/* /var/www/public
3.3 配置 MySQL
接下来，我们需要配置 MySQL。我们可以使用以下命令进行安全设置：
sudo mysql_secure_installation
然后，我们可以创建一个新的 MySQL 数据库：
CREATE DATABASE dbname CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; CREATE USER 'dbuser'@'localhost' IDENTIFIED BY 'dbpassword'; GRANT ALL PRIVILEGES ON dbname.* TO 'dbuser'@'localhost';
在 Laravel 的 .env 配置文件中，我们需要进行如下数据库配置：
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=dbname DB_USERNAME=dbuser DB_PASSWORD=dbpassword
3.4 执行数据库迁移
接下来，我们需要执行 Laravel 数据库迁移，并进行一些初始化操作：
php artisan migrate php artisan db:seed php artisan key:generate
3.5 重启服务
最后，我们需要重启 NGINX 和 PHP-FPM 服务，使配置生效：
sudo systemctl restart nginx sudo systemctl restart php7.4-fpm
至此，我们可以通过浏览器访问我们的应用程序，Laravel 前后端分离部署就完成了。
三、结论
本文介绍了使用 Laravel 实现前后端分离部署的两种方式：创建一个新的前端项目和使用 Laravel Mix 打包前端项目两种方式。当然，对于前端开发人员来说，也可以选择自己熟悉的框架、编程语言来进行前端开发，只需要遵循前后端分离的原则即可。总之，Laravel 的灵活性使得它可以与许多现代前端框架和工具配合使用，让开发人员可以更自由地选择适合自己的开发方式。
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Laravel, um die separate Bereitstellung von Front-End und Back-End zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
