Bagaimana untuk menggabungkan perancah vue dengan thinkphp

Vue ialah rangka kerja JavaScript dipacu data dan ThinkPHP ialah rangka kerja PHP sumber terbuka Kedua-duanya sangat popular dalam bidang masing-masing. Cara menggunakan Vue dan ThinkPHP bersama-sama adalah isu yang sangat penting, kerana ini membolehkan kami membangunkan aplikasi web dengan lebih cekap dan mudah. Artikel ini akan memperkenalkan cara menggunakan Vue dan ThinkPHP untuk pembangunan.

1 Cipta projek Vue

Untuk menggunakan Vue, kita perlu mencipta projek Vue terlebih dahulu. Kita boleh melakukan ini menggunakan Vue CLI (Antara Muka Talian Perintah). Vue CLI boleh dipasang menggunakan arahan berikut:

npm install -g vue-cli

Kemudian, projek Vue baharu boleh dibuat menggunakan arahan berikut:

vue init webpack my-project

Di sini, 'projek saya' ialah nama projek. Kami kemudiannya boleh menavigasi ke direktori projek dan memasang semua kebergantungan yang diperlukan:

cd my-project
npm install

2. Pasang ThinkPHP

Sekarang, kami telah mencipta projek Vue baharu. Seterusnya, kita perlu memasang dan mengkonfigurasi ThinkPHP. Di sini, kami menganggap bahawa anda sudah memasang pelayan PHP dan MySQL. Versi terbaharu kod rangka kerja boleh dimuat turun dari laman web rasmi ThinkPHP dan diletakkan dalam direktori pelayan projek. Seterusnya, anda perlu mengkonfigurasi sambungan pangkalan data dan membuat jadual pangkalan data untuk menyimpan data. Anda boleh menggunakan kod berikut untuk mencipta jadual ringkas:

CREATE TABLE `users` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL DEFAULT '',
  `email` varchar(255) NOT NULL DEFAULT '',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Ini akan mencipta jadual yang dipanggil 'pengguna' yang mempunyai tiga medan 'id', 'nama' dan 'e-mel' .

3. Hubungkan Vue dengan ThinkPHP

Kini, kami bersedia untuk menghubungkan Vue dengan ThinkPHP. Dalam direktori akar projek Vue, kita perlu mencipta folder baharu yang dipanggil 'config'. Dalam folder ini, kita perlu mencipta fail baharu yang dipanggil 'index.js'. Ini ialah fail konfigurasi Vue yang digunakan untuk menetapkan pilihan untuk komunikasi dengan pelayan. Fail ini boleh dibuat menggunakan kod berikut:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

Ini akan menyediakan pelayan pembangunan Vue untuk memproksi semua permintaan daripada '/api' dan menghantarnya ke pelayan pada 'localhost:8080'. Anda boleh menukar nilai ini mengikut keperluan.

Seterusnya, kita perlu mengubah suai fail kemasukan projek Vue (biasanya 'index.js'). Kami boleh menggunakan kod berikut untuk menyediakan sambungan Vue ke pelayan:

import axios from 'axios'

axios.defaults.baseURL = '/api'

Vue.prototype.$http = axios

Ini akan memberitahu Vue untuk menggunakan perpustakaan axios untuk menghantar semua permintaan HTTP. Di sini kami juga menetapkan URL asas supaya permintaan akan diproksikan ke pelayan yang betul.

Kini, kita perlu mencipta komponen mudah untuk mendapatkan data daripada pelayan. Kita boleh menggunakan kod berikut untuk mencipta komponen ini:

<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }} ({{ user.email }})</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      users: []
    }
  },

  created () {
    this.$http.get('/users')
      .then(response => {
        this.users = response.data
      })
  }
}
</script>

Ini akan mencipta komponen Vue yang dipanggil 'UserList' yang akan mendapat senarai pengguna daripada pelayan dan memaparkan nama dan alamat e-mel mereka.

Akhir sekali, di bahagian pelayan, kita perlu mencipta Pengendali untuk mengendalikan permintaan yang dibuat oleh Vue. Pengendali ini boleh dibuat menggunakan kod berikut:

<?php

namespace app\index\controller;

use think\Controller;
use think\Db;

class Api extends Controller
{
    public function getUsers()
    {
        $users = Db::name(&#39;users&#39;)->select();
        return json($users);
    }
}

Ini akan mencipta pengawal yang dipanggil 'Api' yang akan mengendalikan permintaan pada laluan '/api/users' dan mengembalikan senarai pengguna.

4. Jalankan aplikasi

Sekarang, kami bersedia untuk menjalankan aplikasi. Dalam direktori akar projek Vue anda, anda boleh memulakan pelayan pembangunan dengan arahan berikut:

npm run dev

Ini akan memulakan pelayan pembangunan Vue dan menyambungkan Vue ke pelayan ThinkPHP. Komponen sampel kami boleh diakses menggunakan URL berikut:

http://localhost:8080/users

Ini akan mendapatkan senarai pengguna daripada pelayan dan memaparkannya pada halaman.

Ringkasan

Artikel ini memperkenalkan cara menggunakan Vue dan ThinkPHP untuk pembangunan. Kami belajar tentang proses mencipta projek Vue, memasang dan mengkonfigurasi ThinkPHP dan menyambungkan Vue dengan ThinkPHP. Kami juga mencipta komponen Vue mudah untuk mendapatkan data daripada pelayan dan membincangkan cara mencipta pengendali bahagian pelayan. Jika anda ingin mula membangun dengan Vue dan ThinkPHP, maka artikel ini pasti akan membantu anda.

Atas ialah kandungan terperinci Bagaimana untuk menggabungkan perancah vue dengan thinkphp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!