首先引入包:yarn add axios
再导入 import axios from 'axios'
<template>
<div>
<h1>登录页面</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" placeholder="请输入用户名" v-model="formData.username">
<br>
<label for="password">密码:</label>
<input type="password" id="password" placeholder="请输入密码" v-model="formData.password">
<br>
<button type="button" @click="login">登录</button>
</form>
</div>
</template>
<script>
import axiox from 'axios'
export default {
data() {
return {
// 这里可以放置一些数据
formData: {
username: '',
password: ''
}
}
},
methods: {
// 这里可以放置一些方法
login() {
axiox.get('http://localhost:3000/users', {
params: this.formData
}).then(res => {
if (this.formData.username === '' || this.formData.password === '') {
alert('用户名或密码不能为空')
return
}
console.log(res)
if (res.data.length > 0) {
this.$router.push({ name: 'home' })
} else {
alert('用户名或密码错误')
}
}).catch(err => {
console.log(err)
})
},
}
}
</script>
<style></style>
标签:用户名,console,请求,err,vue,res,formData,axios
From: https://www.cnblogs.com/zy8899/p/18421310