vue melaksanakan alamat tenang

Vue ialah rangka kerja bahagian hadapan Kemunculannya menjadikan pembangunan bahagian hadapan lebih mudah dan lebih cekap. Semasa pembangunan dengan Vue, adalah perkara biasa untuk menggunakan Restful API. Restful API ialah API berdasarkan REST (Representational State Transfer), yang merupakan gaya reka bentuk, biasanya berdasarkan protokol HTTP, untuk mencipta dan mengakses perkhidmatan web. Dalam artikel ini, kami akan meneroka cara Vue melaksanakan alamat RESTful.

1. Fahami RESTful API

API Rehat ialah gaya seni bina yang berdasarkan protokol Web dan HTTP Ia adalah gaya yang menekankan kesederhanaan, kebolehskalaan, kebolehselenggaraan dan kebolehbacaan. Peraturannya agak mudah: gunakan kaedah khusus protokol HTTP (GET, POST, PUT, DELETE, dll.) untuk melaksanakan operasi pada sumber pelayan.

Sebagai contoh, kaedah GET bermaksud mendapatkan data sumber daripada pelayan, kaedah POST bermaksud mencipta data sumber baharu pada pelayan, kaedah PUT bermaksud mengemas kini data sumber pada pelayan, dan kaedah DELETE bermaksud memadam sumber data pada pelayan, dsb.

API yang tenang menggunakan format JSON untuk menghantar data semasa interaksi data. JSON (JavaScript Object Notation) ialah format pertukaran data yang ringan dan subset objek asli JavaScript. Ia mempunyai kebolehbacaan, kebolehperbolehan dan semantik yang baik, menjadikannya sesuai untuk aplikasi mudah alih dan web.

2. Gunakan Axios dalam Vue untuk permintaan HTTP

Vue menggunakan Axios sebagai alat permintaan HTTP ialah klien HTTP berasaskan Promise yang boleh mengendalikan permintaan API RESTful. Mula-mula, kita perlu memasang Axios melalui npm:

npm install axios

Kemudian, kami akan menggunakan Axios dalam komponen Vue untuk menghantar permintaan GET untuk mendapatkan data API RESTful:

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    axios
      .get(`https://jsonplaceholder.typicode.com/todos`)
      .then(response => {
        this.items = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

Dalam ini contoh, kita Anda boleh melihat bahawa komponen ini mendapat data dan mengikatnya ke senarai. Kami mula-mula menggunakan pernyataan import untuk mengimport Axios, dan kemudian menggunakan kaedah axios.get() dalam komponen untuk menghantar permintaan GET. Selepas permintaan berjaya, kami menetapkan data respons kepada atribut data items komponen.

3. Laksanakan alamat RESTful

Alamat rehat biasanya merujuk kepada alamat yang mengandungi sumber dan jenis operasi dalam URL, contohnya:

GET /api/posts 获取所有文章
POST /api/posts 新增文章
PUT /api/posts/1 更新ID为1的文章
DELETE /api/posts/1 删除ID为1的文章

Alamat tenang sebenarnya adalah teras kepada API RESTful , kerana ia menggabungkan jenis sumber dan operasi, menjadikan struktur API lebih jelas dan lebih mudah difahami. Untuk melaksanakan alamat Restful dalam Vue, kami perlu menentukan kaedah permintaan dan alamat permintaan dalam permintaan Axios. Seterusnya ialah contoh pelaksanaan alamat Restful menggunakan Axios dan Vue:

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    axios
      .get(`/api/posts`)
      .then(response => {
        this.items = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    createItem() {
      axios
        .post(`/api/posts`, {
          title: 'New Post',
          body: 'This is a new post'
        })
        .then(response => {
          this.items.push(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    },
    updateItem(item) {
      axios
        .put(`/api/posts/${item.id}`, {
          title: 'Updated Post',
          body: 'This is an updated post'
        })
        .then(response => {
          this.items.splice(this.items.indexOf(item), 1, response.data);
        })
        .catch(error => {
          console.log(error);
        });
    },
    deleteItem(item) {
      axios
        .delete(`/api/posts/${item.id}`)
        .then(() => {
          this.items.splice(this.items.indexOf(item), 1);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

Dalam contoh ini, kami mencipta komponen Vue untuk mendapatkan dan memanipulasi API RESTful. Mula-mula, kami menggunakan kaedah axios.get() untuk mendapatkan semua artikel, dan kemudian menetapkan data respons kepada atribut data items komponen selepas pemerolehan berjaya. Seterusnya, kami mentakrifkan kaedah untuk mencipta, mengemas kini dan memadamkan sumber: createItem(), updateItem() dan deleteItem().

Dalam kaedah ini, kami menggunakan kaedah axios.post(), axios.put() dan axios.delete() untuk menentukan kaedah permintaan POST, PUT dan DELETE masing-masing, sambil menyatakan ID sumber dalam alamat permintaan. Selepas permintaan berjaya, kami mengemas kini data respons kepada atribut data items komponen.

4. Ringkasan

Dalam artikel ini, kami melaksanakan permintaan HTTP kepada Restful API dengan menggunakan Axios dan Vue. Kami mempelajari tentang prinsip Restful API dan cara melaksanakan alamat RESTful dalam Vue, dan cara menggunakan Axios untuk menghantar permintaan HTTP untuk mendapatkan dan mengendalikan sumber API Web. Jika anda sedang membangunkan aplikasi web, cuba gunakan Vue dan Axios untuk mengoptimumkan permintaan Restful API anda.

Atas ialah kandungan terperinci vue melaksanakan alamat tenang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!