Tutorial Laravel Vue.js Single Page Application (SPA)

Aplikasi satu halaman (SPA) boleh dibina menggunakan Laravel dan Vue.js. 1) Tentukan penghalaan dan pengawal API di Laravel untuk memproses logik data. 2) Buat front-end komponen di Vue.js untuk merealisasikan antara muka pengguna dan interaksi data. 3) Konfigurasikan CORS dan gunakan AXIOS untuk interaksi data. 4) Gunakan Router Vue untuk melaksanakan pengurusan penghalaan dan meningkatkan pengalaman pengguna.

Pengenalan

Dalam pembangunan web moden, aplikasi halaman tunggal (SPA) telah menjadi pilihan arus perdana. Mereka menyediakan pengalaman pengguna yang lancar dan proses pembangunan yang cekap. Hari ini, kami akan menyelam bagaimana untuk membina spa menggunakan Laravel dan Vue.js. Melalui artikel ini, anda akan belajar cara menggunakan Laravel sebagai API backend, digabungkan dengan rangka kerja front-end Vue.js untuk membuat aplikasi satu halaman moden.

Semak pengetahuan asas

Sebelum kita memulakan, mari kita cepat mengkaji semula asas -asas Laravel dan Vue.js. Laravel adalah rangka kerja berasaskan PHP yang menyediakan ciri-ciri yang kuat dan sintaks elegan, yang sesuai untuk membina API yang tenang. Vue.js adalah rangka kerja JavaScript yang progresif yang memberi tumpuan kepada membina antara muka pengguna, terutamanya sesuai untuk membangunkan spa.

Sekiranya anda tidak biasa dengan kedua -dua rangka kerja ini, adalah disyorkan untuk mempelajari asas -asas mereka terlebih dahulu. Konsep teras Laravel termasuk penghalaan, pengawal, model, dan penghijrahan, manakala konsep teras Vue.js termasuk komponen, templat, dan pengurusan negeri.

Konsep teras atau analisis fungsi

Laravel sebagai API backend

Fungsi utama Laravel sebagai API backend adalah untuk memproses logik data dan menyediakan antara muka data. Dengan Laravel, kita boleh membuat API yang tenang untuk berinteraksi dengan data front-end.

 // Laluan/Api.php
Route :: Get ('/users', 'usercontroller@index');
Laluan :: pos ('/pengguna', 'usercontroller@store');

// app/http/controllers/usercontroller.php
App Namespace \ http \ controllers;

Gunakan App \ User;
Gunakan Illuminate \ http \ request;

Kelas UserController memanjangkan pengawal
{
    Indeks Fungsi Awam ()
    {
        kembali pengguna :: semua ();
    }

    Kedai Fungsi Awam (permintaan $ permintaan)
    {
        $ user = pengguna baru ();
        $ user-> name = $ request-> input ('name');
        $ user-> e-mel = $ permintaan-> input ('e-mel');
        $ user-> simpan ();
        pulangan $ pengguna;
    }
}

Contoh ini menunjukkan bagaimana untuk menentukan penghalaan dan pengawal API di Laravel. Dengan cara ini, kita boleh menguruskan data dengan mudah dan memberikannya ke hadapan.

Vue.js sebagai rangka kerja front-end

Fungsi utama Vue.js adalah untuk membina antara muka pengguna dan menguruskan logik front-end. Melalui vue.js, kita boleh membuat aplikasi front-end komponen untuk merealisasikan kemas kini data dinamik dan interaksi pengguna.

 // src/komponen/userlist.vue
<pemat>
  <dana>
    <h1> Senarai Pengguna </h1>
    <ul>
      <li v -for = "pengguna dalam pengguna": key = "user.id"> {{user.name}} - {{user.email}} </li>
    </ul>
    <form @hantar.prevent = "adduser">
      <input v-model = "newuser.name" placeholder = "name" />
      <input v-model = "newuser.email" placeholder = "e-mel" />
      <Button Type = "Hantar"> Tambah Pengguna </Button>
    </form>
  </div>
</template>

<script>
Eksport Lalai {
  data () {
    kembali {
      Pengguna: [],
      Newuser: {
        Nama: &#39;&#39;,
        E -mel: &#39;&#39;
      }
    };
  },
  dipasang () {
    this.fetchusers ();
  },
  Kaedah: {
    perapian () {
      Ambil (&#39;/API/Users&#39;)
        .then (response => response.json ())
        .THEN (data => {
          this.users = data;
        });
    },
    adduser () {
      Ambil (&#39;/API/Users&#39;, {
        Kaedah: &#39;pos&#39;,
        tajuk: {
          &#39;Kandungan-jenis&#39;: &#39;Aplikasi/JSON&#39;
        },
        badan: json.stringify (this.newuser)
      })
        .then (response => response.json ())
        .THEN (data => {
          this.users.push (data);
          this.newuser.name = &#39;&#39;;
          this.newuser.email = &#39;&#39;;
        });
    }
  }
};
</script>

Contoh ini menunjukkan cara membuat komponen senarai pengguna dalam vue.js dan berinteraksi dengan backend melalui API.

Contoh penggunaan

Penggunaan asas

Dalam penggunaan asas, kita perlu memastikan laravel dan vue.js dapat berinteraksi dengan betul. Pertama, kita perlu mengkonfigurasi CORS di Laravel supaya bahagian depan dapat mengakses API.

 // app/http/middleware/cors.php
App Namespace \ http \ middleware;

menggunakan penutupan;

Kelas Kelas
{
    Pemegang fungsi awam (permintaan $, penutupan $ seterusnya)
    {
        kembali $ seterusnya (permintaan $)
            -> Header ('Access-Control-Allow-Origin', '*')
            -> Header ('Control-Allow-Methods', 'Get, Post, Put, Padam, Pilihan')
            -> header ('akses-kawalan-alow-headers', 'jenis kandungan, kebenaran');
    }
}

Kemudian kita perlu menggunakan axios dalam vue.js untuk menghantar permintaan HTTP.

 // src/main.js
import vue dari 'vue';
aplikasi import dari './app.vue';
import axios dari 'axios';
import vueaxios dari 'vue-axios';

Vue.use (vueaxios, axios);

Vue baru ({
  render: h => h (app)
}). $ mount ('#app');

Dengan cara ini, kita dapat dengan mudah berinteraksi dengan data antara hujung depan dan belakang.

Penggunaan lanjutan

Dalam penggunaan lanjutan, kita boleh menggunakan Vue Router untuk melaksanakan pengurusan penghalaan untuk mewujudkan spa yang lebih kompleks.

 // src/router/index.js
import vue dari 'vue';
import vuerouter dari 'vue-router';
import userlist dari '../components/userlist.vue';

Vue.use (vuerouter);

laluan const = [
  {
    Laluan: '/',
    Nama: 'UserList',
    Komponen: UserList
  }
];

const router = vuerouter baru ({
  Mod: 'Sejarah',
  asas: proses.env.base_url,
  laluan
});

Eksport router lalai;

Melalui Vue Router, kita dapat merealisasikan navigasi antara halaman dan meningkatkan pengalaman pengguna.

Kesilapan biasa dan tip debugging

Semasa proses pembangunan, anda mungkin menghadapi beberapa masalah biasa, seperti kesilapan CORS, masalah mengikat data, dan lain -lain. Berikut adalah beberapa tip debugging:

• Kesalahan CORS : Pastikan middleware CORS dikonfigurasi dengan betul di Laravel dan nama domain yang diminta oleh bahagian depan adalah sama dengan back-end.
• Masalah mengikat data : Periksa sama ada data dalam komponen Vue.js betul -betul terikat untuk memastikan aliran data yang lancar.
• Permintaan API gagal : Gunakan alat pemaju penyemak imbas untuk melihat permintaan rangkaian dan periksa sama ada permintaan itu dihantar dan diterima dengan betul.

Pengoptimuman prestasi dan amalan terbaik

Pengoptimuman prestasi dan amalan terbaik sangat penting dalam aplikasi praktikal. Berikut adalah beberapa cadangan:

• Pengoptimuman API : Di Laravel, anda boleh menggunakan fungsi pengoptimuman pertanyaan Orm fasih untuk mengurangkan bilangan pertanyaan pangkalan data dan meningkatkan kelajuan tindak balas API.
• Pengoptimuman Front-End : Dalam Vue.js, teknologi menatal maya boleh digunakan untuk memproses sejumlah besar data untuk mengelakkan masalah prestasi yang disebabkan oleh memuat semua data sekaligus.
• Kebolehbacaan Kod : Mengekalkan kebolehbacaan dan penyelenggaraan kod, dan menggunakan komen dan dokumen yang munasabah untuk memudahkan kerjasama pasukan dan penyelidikan pasca.

Melalui pengoptimuman dan amalan terbaik ini, kami dapat membina spa yang cekap dan boleh dipelihara.

Meringkaskan

Melalui artikel ini, kami meneroka secara terperinci cara menggunakan Laravel dan Vue.js untuk membangunkan satu aplikasi halaman. Dari asas -asas kepada penggunaan lanjutan, pengoptimuman prestasi dan amalan terbaik, kami berharap kandungan ini dapat membantu anda memahami dan menggunakan dua rangka kerja yang kuat. Saya doakan yang terbaik di jalan menuju pembangunan!

Atas ialah kandungan terperinci Tutorial Laravel Vue.js Single Page Application (SPA). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!