Tutorial Vue dan Axios yang walaupun pemula boleh belajar untuk membantu anda memulakan pembangunan bahagian hadapan

Tutorial Vue dan Axios yang boleh dipelajari oleh pemula pun akan membantu anda memulakan pembangunan bahagian hadapan

1 Pengenalan kepada Vue

Vue ialah rangka kerja pembangunan bahagian hadapan yang boleh membantu kami membina antara muka pengguna interaktif. Berbanding dengan rangka kerja lain, Vue lebih ringan, mudah dipelajari dan digunakan serta sesuai untuk pembangunan projek dari semua saiz.

Pemasangan 1.1 Vue

Mula-mula, kita perlu memasang Vue. Anda boleh memasangnya dengan cara berikut:

1.1.1 Pasang menggunakan alat pengurusan pakej

Gunakan npm atau benang dalam baris arahan untuk memasang Vue:

npm install vue

atau

yarn add vue

1.1.2 Gunakan CDN untuk mengimport

Tambah dalam fail HTML Kod berikut:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1.2 Hello World

Tambah bekas dalam fail HTML:

<div id="app">
  {{ message }}
</div>

Tambah kod berikut dalam fail JavaScript:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

Buka penyemak imbas dan anda akan melihat perkataan " Hello Dunia!"

2. Pengenalan kepada Axios

Axios ialah klien HTTP berasaskan Promise, digunakan untuk menghantar permintaan HTTP dalam penyemak imbas dan Node.js. Ia boleh meminta data merentas domain pada platform yang berbeza, dan menyokong pemintasan permintaan, pemintasan tindak balas dan fungsi lain.

2.1 Pemasangan Axios

Gunakan arahan berikut untuk memasang Axios:

npm install axios

atau

yarn add axios

2.2 Hantar permintaan GET

Tambah kod berikut dalam fail JavaScript:

Permintaan GET di atas dan hantar kod GET mencetak data pulangan.

2.3 Hantar permintaan POST

Tambah kod berikut dalam fail JavaScript:

axios.get('/api/users')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

Kod di atas menghantar permintaan POST dan lulus objek JSON sebagai badan permintaan.

3. Menggabungkan Vue dan Axios

Sekarang, mari gunakan Vue dan Axios bersama-sama.

3.1 Pasang Vuex

Vuex ialah corak pengurusan keadaan yang dibangunkan khusus untuk aplikasi Vue.js. Gunakan arahan berikut untuk memasang Vuex:

axios.post('/api/users', {
  firstName: 'John',
  lastName: 'Doe'
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

atau

npm install vuex

3.2 Cipta kedai

Tambah kod berikut dalam fail JavaScript:

yarn add vuex

Kod di atas mencipta kedai Vuex, di mana keadaan mentakrifkan keadaan bernama pengguna, mutasi A kaedah bernama setUsers ditakrifkan untuk mengemas kini nilai pengguna, dan tindakan mentakrifkan kaedah bernama getUsers untuk menghantar permintaan GET dan mengemas kini nilai pengguna.

3.3 Gunakan kedai

Tambah kod berikut dalam fail JavaScript:

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    users: []
  },
  mutations: {
    setUsers(state, users) {
      state.users = users;
    }
  },
  actions: {
    getUsers({ commit }) {
      axios.get('/api/users')
        .then(function (response) {
          commit('setUsers', response.data);
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }
});

export default store;

Kod di atas akan mengimport kedai, menggunakan kedai dalam contoh Vue, dan panggil kaedah getUsers dalam cangkuk yang dipasang untuk menyimpan data yang diperoleh ke pengguna. Kemudian ikat pengguna kepada templat komponen melalui sifat yang dikira.

Sekarang, muat semula halaman dan anda akan melihat data pengguna yang diperolehi dari latar belakang.

Kesimpulan

Melalui tutorial ini, anda telah belajar membina aplikasi bahagian hadapan yang mudah menggunakan Vue dan Axios. Saya harap artikel ini akan membantu anda dan memberi anda pemahaman yang lebih mendalam tentang penggunaan Vue dan Axios, serta senario aplikasi mereka dalam pembangunan bahagian hadapan. Saya mengucapkan selamat belajar dan menyeronokkan dengan pembangunan bahagian hadapan!

Atas ialah kandungan terperinci Tutorial Vue dan Axios yang walaupun pemula boleh belajar untuk membantu anda memulakan pembangunan bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!