Bagaimana untuk menggunakan Vue untuk mencapai pemisahan bahagian hadapan dan belakang dan dok antara muka?

Dengan perkembangan berterusan teknologi bahagian hadapan, model seni bina pemisahan bahagian hadapan dan bahagian belakang menjadi semakin popular. Kelebihan pemisahan bahagian hadapan dan hujung belakang adalah jelas. Sebagai rangka kerja bahagian hadapan yang popular, Vue boleh membawa pengalaman pengguna yang lebih baik. Artikel ini akan memperkenalkan secara terperinci cara menggunakan Vue untuk melaksanakan corak seni bina pemisahan bahagian hadapan dan belakang serta menunjukkan kaedah dok antara muka.

1. Pelaksanaan back-end

Untuk pelaksanaan back-end, kita boleh memilih bahasa dan rangka kerja yang kita kenali, seperti rangka kerja Spring java atau rangka kerja Django python. Saya tidak akan pergi ke terlalu terperinci di sini.

2. Pelaksanaan bahagian hadapan

Vue ialah rangka kerja bahagian hadapan yang ringan dan mudah digunakan, yang sangat sesuai untuk merealisasikan corak seni bina pemisahan bahagian hadapan dan belakang. Langkah-langkah untuk menggunakan Vue untuk mencapai pemisahan bahagian hadapan dan belakang adalah seperti berikut:

1. Cipta projek Vue

Pertama, kita perlu mencipta projek Vue baharu melalui alat baris arahan. Di sini kami menggunakan perancah Vue-cli Perintahnya adalah seperti berikut:

npm install -g vue-cli         // 全局安装Vue-cli
vue init webpack my-project   // 创建一个webpack项目

2. Ubah suai fail konfigurasi

Dalam fail konfigurasi config/index.js, konfigurasikan atribut Jadual proksi ke alamat hujung belakang proksi:

module.exports = {
  // ...
  dev: {
    // ...
    proxyTable: {
      '/api': {
        target: 'http://localhost:8888',   // 后端接口地址
        changeOrigin: true      // 是否跨域
      }
    }
  }
}

3. Tulis halaman hadapan Dan panggilan antara muka

Idea teras Vue ialah komponenisasi Kita boleh mentakrifkan halaman hadapan sebagai komponen. Pada masa yang sama, antara muka dipanggil melalui ajax Anda boleh menggunakan perpustakaan sumber Vue di sini:

<template>
  <div>
    <h2>用户列表</h2>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

export default {
  name: 'UserList',
  data () {
    return {
      users: []
    }
  },
  created () {
    Vue.http.get('/api/users')
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

Dalam kod di atas, kami mentakrifkan komponen bernama UserList, mencetuskan acara yang dibuat untuk memanggil antara muka untuk mendapatkan senarai pengguna. , dan akhirnya memindahkan data Bind ke halaman. Perlu diingatkan bahawa alamat antara muka yang dipanggil di sini ialah "/api/users". Kerana kami telah menetapkan proksi dalam fail konfigurasi, kami sebenarnya mengakses alamat belakang "http://localhost:8888/api" /users". . Hanya gunakan ia ke pelayan web dengan cara biasa.

3. Bagaimana hendak menyambung antara muka?
Docking antara muka ialah kandungan teras seni bina pemisah bahagian hadapan dan belakang. Dalam kod di atas, kami melibatkan mengakses alamat bahagian belakang "http://localhost:8888/api/users". Sebenarnya, terdapat dua kaedah untuk menyambung ke bahagian belakang.

Dalam kes ini, kami memerlukan bahagian belakang untuk menyediakan antara muka API yang mengembalikan format JSON, dan bahagian hadapan memanggil antara muka ini melalui ajax untuk mendapatkan data. Format data yang dikembalikan oleh bahagian belakang adalah seperti berikut:

npm run build

Dalam kod bahagian hadapan, kita perlu menghuraikan dan memaparkan mengikut data yang dikembalikan oleh bahagian belakang:

{
    "code": 0,
    "message": "",
    "data": [{ "id": 1, "name": "张三" }, { "id": 2, "name": "李四" }]
}

Dalam kod di atas, jika atribut kod data dikembalikan oleh bahagian belakang ialah 0, Kemudian data senarai dipaparkan pada halaman, jika tidak, kotak amaran muncul untuk menggesa mesej ralat.

Dalam kes ini, bahagian belakang kami perlu mendedahkan antara muka API RESTful. Contohnya, dalam sistem yang diurus pengguna, kita boleh mempunyai antara muka API berikut:

2. Nama antara muka

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk mencapai pemisahan bahagian hadapan dan belakang dan dok antara muka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Vue.http.get('/api/users')
      .then(response => {
        if (response.body.code === 0) {
          this.users = response.body.data
        } else {
          alert(response.body.message)
        }
      })