用vue写一个登录页面包含封装axios
时间: 2024-02-22 09:38:41 浏览: 38
好的,我可以为您提供示例代码,但是您需要确保您已经安装了Vue.js和Axios。
首先,您需要创建一个名为“Login.vue”的Vue组件。在该组件中,定义一个名为“login”函数,在该函数中使用Axios发送POST请求以验证用户的凭据,并将响应返回给用户。
以下是示例代码:
<template>
<div>
<h1>Welcome to our login page!</h1>
<form>
<label>Username:</label>
<input type="text" v-model="username" />
<label>Password:</label>
<input type="password" v-model="password" />
<button type="submit" @click.prevent="login">Log in</button>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async login() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
console.log(response.data)
} catch (error) {
console.log(error)
}
}
}
}
</script>
在上面的代码中,当用户点击“Log in”按钮时,将调用“login”函数。该函数将使用Axios发送一个POST请求到“/api/login”端点,其中包含用户提供的用户名和密码。如果请求成功,将在控制台中打印响应数据,否则将会打印错误信息。
这是一个简单的示例,您可以根据自己的需求进行修改。希望对您有所帮助!