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:
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项目
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 // 是否跨域
}
}
}
}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.
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 kes ini, bahagian belakang kami perlu mendedahkan antara muka API RESTful. Contohnya, dalam sistem yang diurus pengguna, kita boleh mempunyai antara muka API berikut:
| pengguna + | Kemas kini penetapan Maklumat pengguna | ||
| /pengguna/{id} | DELETE | Padam pengguna yang ditentukan | |
| Di bahagian hadapan kod panggilan berikut, contoh-contoh antara muka | berikut: Vue.http.get('/api/users')
.then(response => {
if (response.body.code === 0) {
this.users = response.body.data
} else {
alert(response.body.message)
}
})Salin selepas log masuk | ||
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
