Cara menggunakan Laravel untuk melaksanakan penggunaan berasingan bahagian hadapan dan belakang

Dalam dunia Internet hari ini, perkhidmatan perisian dengan aplikasi Web sebagai teras menjadi semakin popular. Antaranya, rangka kerja Laravel, sebagai rangka kerja pembangunan yang sangat baik untuk bahasa PHP, bukan sahaja mempunyai prestasi yang cekap, tetapi juga mempunyai beberapa siri kelebihan seperti pengalaman pembangunan yang mesra, komuniti sumber terbuka yang kaya, ORM yang berkuasa dan sistem migrasi. Dalam pembangunan bahagian belakang Laravel, model pembangunan pemisahan bahagian hadapan dan belakang telah beransur-ansur menjadi popular baru-baru ini. Artikel ini akan memperkenalkan cara menggunakan Laravel untuk mencapai penggunaan berasingan bahagian hadapan dan belakang.

1. Apakah pemisahan bahagian hadapan dan bahagian belakang

Pemisahan bahagian hadapan dan bahagian belakang ialah cara baharu untuk membangunkan aplikasi web, yang memisahkan sepenuhnya bahagian hadapan dan bahagian belakang? bahagian belakang dari perspektif teknikal. Program front-end bertanggungjawab untuk menjana antara muka dan berkomunikasi dengan pelayan untuk mendapatkan data, manakala program latar belakang bertanggungjawab untuk memproses logik perniagaan dan mengakses pangkalan data.

Pendekatan ini mempunyai banyak faedah. Pertama, ia boleh meningkatkan kecekapan pembangunan bahagian hadapan dan belakang. Pembangun bahagian hadapan dan bahagian belakang boleh membangun secara selari, mengurangkan pergantungan antara satu sama lain, kedua, ia boleh meningkatkan prestasi aplikasi. Memandangkan perkhidmatan bahagian hadapan dan bahagian belakang boleh digunakan dan dikembangkan secara berasingan, prestasi keseluruhan sistem boleh dipertingkatkan dengan ketara. Di samping itu, pendekatan ini membolehkan kedua-dua pembangun bahagian hadapan dan bahagian belakang menumpukan pada kawasan masing-masing sebanyak mungkin, meningkatkan kualiti dan kebolehselenggaraan kod.

2. Pelaksanaan pemisahan bahagian hadapan dan belakang dalam Laravel

Dalam pembangunan Laravel, pelaksanaan pemisahan bahagian hadapan dan belakang memerlukan penggunaan beberapa rangka kerja bahagian hadapan . Antaranya, kita boleh menggunakan rangka kerja arus perdana seperti Vue.js, React atau Angular sebagai penyelesaian pembangunan bahagian hadapan. Dalam Laravel, kita boleh menggunakan dua kaedah berikut untuk mencapai pemisahan bahagian hadapan dan belakang.

1. Buat projek bahagian hadapan baharu

Kami boleh membuat projek bahagian hadapan bebas dahulu, dan kemudian berinteraksi dengan bahagian belakang Laravel melalui API. Dalam mod ini, Laravel hanya bertanggungjawab untuk menulis antara muka API data bahagian belakang, dan bahagian hadapan menggunakan AJAX atau API Ambil untuk meminta antara muka data hujung belakang. Kod bahagian hadapan dan hujung belakang boleh digunakan pada pelayan atau port yang berbeza.

Kelebihan pendekatan ini ialah pemisahan antara bahagian hadapan dan bahagian belakang adalah sangat tinggi Pembangun boleh memberikan permainan sepenuhnya kepada kekuatan masing-masing sambil meningkatkan prestasi aplikasi. Anda juga boleh menggunakan beberapa rangka kerja dan alatan bahagian hadapan moden untuk meningkatkan kecekapan pembangunan dan pengalaman pembangunan.

Berikut ialah contoh mudah untuk menunjukkan pendekatan ini. Mari kita ambil Laravel sebagai bahagian belakang dan Vue.js sebagai bahagian hadapan sebagai contoh:

1.1 Buat projek Laravel baharu

Pertama, kita perlu mencipta projek Laravel baharu dalam baris arahan:

composer create-project --prefer-dist laravel/laravel blog

1.2 Buat projek Vue.js baharu

Seterusnya, kita perlu mencipta projek Vue.js baharu:

npm install -g vue-cli
vue init webpack frontend

1.3 Konfigurasikan Laravel dan Vue .js

Seterusnya, kita perlu mengkonfigurasi fail routes/api.php untuk membalas permintaan daripada bahagian hadapan Vue.js.

Route::get('/todos', function () {
    return App\Todo::all();
});

Dalam frontend/src/App.vue kita boleh menggunakan Axios atau mana-mana pustaka AJAX lain untuk mendapatkan API bahagian belakang. Dalam contoh ini kita akan menggunakan perpustakaan 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>

Dalam frontend/config/index.js kita boleh menyediakan bahagian hadapan Vue.js untuk menggunakan port yang berbeza daripada bahagian belakang Laravel. Kami kemudiannya boleh menjalankan dan mengakses aplikasi.

php artisan serve --port=8000
cd frontend
npm start

2. Gunakan Laravel Mix untuk membungkus projek bahagian hadapan

Cara lain ialah membungkus kod bahagian hadapan dan kod belakang Laravel ke dalam kod yang sama projek untuk penggunaan Mod Laravel Mix ini digunakan sebagai alat untuk membina aplikasi bahagian hadapan. Laravel Mix ialah alat binaan Webpack yang dipermudahkan yang membolehkan kami membungkus sumber bahagian hadapan dengan mudah.

Kelebihan kaedah ini ialah kod bahagian hadapan dan bahagian belakang akan dibungkus secara keseluruhan, menjadikannya mudah untuk digunakan dan diselenggara. Kita boleh menggunakan arahan yang serupa dengan npm run dev dan npm run build untuk menyusun kod bahagian hadapan dan meletakkan hasil kompilasi dalam direktori awam Laravel supaya kami boleh mengakses aplikasi terus melalui penyemak imbas.

Berikut ialah contoh mudah untuk menunjukkan pendekatan ini:

2.1 Cipta projek Laravel baharu

Pertama, kita perlu mencipta projek Laravel baharu pada baris arahan Projek Laravel :

composer create-project --prefer-dist laravel/laravel blog

2.2 Pasang Node.js dan NPM

Dalam langkah seterusnya, kita perlu memasang Node.js dan NPM.

Di Ubuntu, anda boleh memasangnya menggunakan arahan berikut:

sudo apt-get install nodejs
sudo apt-get install npm

2.3 Pasang Laravel Mix dalam Laravel

Kemudian, kita perlu memasang Laravel Mix:

npm install --save-dev laravel-mix

Kemudian, kita perlu melaksanakan arahan berikut untuk menjana fail konfigurasi webpack.mix.js:

node_modules/.bin/mix

2.4 Tulis kod bahagian hadapan

Seterusnya, kita perlu menulis kod bahagian hadapan. Sebagai contoh, kita boleh menulis beberapa kod JavaScript dalam fail resources/assets/js/app.js. Berikut ialah contoh mudah:

"use strict";

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});

2.5 Menulis sumber bahagian hadapan

Kita boleh meletakkan fail sumber bahagian hadapan dalam direktori resources/assets. Sebagai contoh, kita boleh menulis beberapa gaya CSS di dalam 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;
}

2.6 Mengkonfigurasi Campuran Laravel

我们需要在 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

这样，我们就可以在浏览器中看到我们的应用程序了。

3. 部署应用程序

无论我们使用哪种方式来实现前后端分离，最终都需要进行部署。我们可以使用第三方工具如 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 的灵活性使得它可以与许多现代前端框架和工具配合使用，让开发人员可以更自由地选择适合自己的开发方式。

Atas ialah kandungan terperinci Cara menggunakan Laravel untuk melaksanakan penggunaan berasingan bahagian hadapan dan belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!