vue前端登入页面连接后端数据
时间: 2024-09-29 13:04:58 浏览: 28
Vue前端登录页面通常通过AJAX或者Fetch API与后端服务器进行交互,以便获取或提交用户登录信息。以下是创建一个基本的登录页面连接后端数据的步骤:
1. **HTML结构**:
```html
<!-- login.vue -->
<form @submit.prevent="login">
<input v-model="username" placeholder="用户名" />
<input type="password" v-model="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
```
2. **Vue实例和数据绑定**:
```javascript
// login.vue (script部分)
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
login() {
this.$http.post('/api/login', { username: this.username, password: this.password })
.then(response => {
// 登录成功处理
console.log('登录成功:', response.data);
})
.catch(error => {
// 错误处理
console.error('登录失败:', error.response.data);
});
}
}
};
```
这里假设你使用了`vue-resource`或`axios`这样的库来进行HTTP请求。如果是Vue 3,可以考虑使用内置的`fetch`或`@vue/cli-plugin-fetch`。