對于一個網(wǎng)站來說，登錄功能是必不可少的。而Vue和WZ框架的結(jié)合，可以更加簡單地實現(xiàn)登錄功能。

首先，需要使用Vue和WZ框架來搭建前端頁面。在HTML文件中引入Vue和WZ的CDN鏈接，并建立一個Vue實例：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" >
<div id="app">
<div>
<label>用戶名</label>
<input type="text" v-model="username">
</div>
<div>
<label>密碼</label>
<input type="password" v-model="password">
</div>
<button @click="login">登錄</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
username: '',
password: '',
},
methods: {
login() {
// 在此處添加登錄代碼
},
},
});
</script>

接下來，需要編寫后端代碼以實現(xiàn)登錄功能。這里使用PHP語言來演示。通過POST請求傳送用戶名和密碼，后端代碼在服務(wù)器上接收到這些數(shù)據(jù)，然后進行用戶的身份驗證。如果驗證成功，就返回一個JSON字符串來指示用戶已經(jīng)成功登錄。否則，返回一個登錄失敗的錯誤消息。

<?php
header('Content-Type: application/json');
$username = $_POST['username'] ?? '';
$password = $_POST['password'] ?? '';
if ($username !== 'admin' || $password !== '123456') {
echo json_encode(array('status' =>'error', 'error' =>'用戶名或密碼錯誤'));
} else {
echo json_encode(array('status' =>'success'));
}
?>

最后，需要在Vue的登錄方法中添加異步請求，以便調(diào)用后端代碼。這里使用axios庫來發(fā)送POST請求。如果登錄成功，就跳轉(zhuǎn)到成功頁面；否則，顯示一個錯誤消息。

methods: {
async login() {
try {
const res = await axios.post('/api/login.php', {
username: this.username,
password: this.password,
});
if (res.data.status === 'success') {
alert('登錄成功');
window.location.href = '/success.html';
} else {
alert(res.data.error);
}
} catch (err) {
alert('網(wǎng)絡(luò)錯誤');
}
},
},

至此，一個基于Vue和WZ框架的簡單登錄功能就已經(jīng)實現(xiàn)！