Bagaimana untuk menukar latar belakang vue

Vue ialah rangka kerja progresif untuk membina antara muka pengguna. Walaupun senario aplikasi utamanya ialah pembangunan bahagian hadapan, Vue juga sangat sesuai untuk membina sistem pengurusan bahagian belakang. Apabila membina sistem pengurusan bahagian belakang, kami biasanya menghadapi beberapa masalah, seperti cara menukar bahagian belakang. Artikel ini akan memperkenalkan cara menukar bahagian belakang Vue.

Mengapa menukar bahagian belakang?

Apabila membina sistem pengurusan bahagian belakang, biasanya kami perlu melakukan penambahan data, pemadaman, pengubahsuaian dan semakan, kawalan kebenaran, pengesahan log masuk, pengelogan dan operasi lain. Operasi ini memerlukan interaksi dengan bahagian belakang, yang biasanya ditulis dalam bahasa bahagian pelayan (seperti Java, PHP, dll.), manakala pembangun bahagian hadapan selalunya hanya menggunakan rangka kerja bahagian hadapan seperti Vue. Oleh itu, untuk melaksanakan operasi ini, kita perlu menulis antara muka di latar belakang dan kemudian memanggil antara muka ini di bahagian hadapan untuk melaksanakan fungsi yang sepadan.

Cara menukar latar belakang

1. Ubah suai alamat antara muka

Dalam Vue, kami biasanya menggunakan axios atau vue-resource untuk membuat permintaan rangkaian. Semua alatan ini menyediakan antara muka yang sangat mudah Kami hanya perlu menentukan URL yang diminta semasa membuat panggilan. Oleh itu, jika kita ingin menukar alamat latar belakang, kita hanya perlu mengubah suai alamat antara muka.

Sebagai contoh, alamat hujung belakang yang kami gunakan semasa pembangunan ialah http://localhost:8080, tetapi kemudian apabila kami pergi dalam talian, kami perlu menukar alamat hujung belakang kepada http://api.example.com. Kemudian kita hanya perlu menukar alamat antara muka kepada http://api.example.com dalam fail konfigurasi Vue (biasanya config.js).

2. Ubah suai kaedah permintaan

Dalam Vue, kita boleh menggunakan kaedah permintaan yang berbeza seperti dapatkan, hantar, letak, padam, dll. untuk membuat permintaan rangkaian. Antara muka latar belakang biasanya menyediakan kaedah permintaan yang sepadan untuk mengendalikan pelbagai jenis permintaan. Jika kami menggunakan kaedah siaran untuk meminta antara muka semasa pembangunan, dan kemudiannya perlu menukarnya kepada kaedah dapatkan, maka kami hanya perlu menukar kaedah permintaan untuk mendapatkan kod Vue.

Sebagai contoh, kami ingin memanggil antara muka untuk mendapatkan senarai pengguna Kaedah asal ialah siaran:

Vue.prototype.getUserList = function () {
    return this.$http.post('/user/list')
}

Sekarang kita perlu menukarnya untuk mendapatkan kaedah:

Vue.prototype.getUserList = function () {
    return this.$http.get('/user/list')
}

Ubah suai parameter Permintaan

Dalam Vue, kami menggunakan param atau parameter data untuk menghantar parameter permintaan. Antara muka latar belakang juga akan mengembalikan hasil yang berbeza berdasarkan parameter permintaan yang berbeza. Oleh itu, jika kita perlu menukar parameter permintaan, kita perlu mengubah suai antara muka bahagian belakang dengan sewajarnya.

Sebagai contoh, pada asalnya kita perlu mendapatkan maklumat pengguna dengan id 1:

Vue.prototype.getUserInfo = function () {
    return this.$http.post('/user/info', {id: 1})
}

Sekarang kita perlu mendapatkan maklumat pengguna dengan id 2:

Vue.prototype.getUserInfo = function () {
    return this.$http.post('/user/info', {id: 2})
}

Di atas ialah bagaimana Vue menukar kaedah hujung belakang. Sudah tentu, jika kami mengubah suai antara muka bahagian belakang, kami juga perlu memastikan bahawa kod bahagian hadapan boleh mengendalikan hasil yang dikembalikan dengan betul. Oleh itu, apabila mengubah suai antara muka latar belakang, kita perlu menyemak dengan teliti sama ada data pada halaman boleh dipaparkan dengan betul, sama ada pengguna boleh beroperasi secara normal, dsb. Hanya dengan memastikan ketepatan interaksi front-end dan back-end boleh sistem pengurusan back-end dibuat lebih stabil dan cekap.

Atas ialah kandungan terperinci Bagaimana untuk menukar latar belakang vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!