vue中axios请求数据
首先引入包:yarn add axios
再导入 import axios from 'axios'
<template>
<div>
<h1>登 录</h1>
<div class="login">
<el-form :model="formData" ref="loginForm" :rules="rules">
<el-form-item label="" prop="username">
<el-input placeholder="请输入用户名" v-model="formData.username" prefix-icon="el-icon-user"></el-input>
</el-form-item>
<el-form-item label="" prop="password">
<el-input type="password" placeholder="请输入密码" show-password v-model="formData.password"
prefix-icon="el-icon-lock"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
]
}
}
},
methods: {
login() {
console.log(this.formData);
//进行表单验证
this.$refs.loginForm.validate((valid) => {
if (valid) {
//封装axios请求
this.$ajax.get('/userlist',{
params: {
username: this.formData.username,
userpwd: this.formData.password
}
})
.then((res) => {
// console.log(res);
if (res.length > 0 ) {
console.log('登录成功');
//将数据存入vuex中
this.$store.commit('user_login', res[0]);
this.$router.push({ name: 'users' });
} else {
this.$message.error('用户名或密码错误');
}
}).catch(err => {
this.$message.error('请求失败');
})
} else {
this.$message.error('表单验证失败');
return false;
}
});
}
}
}
</script>
<style scoped>
.login {
width: 300px;
margin: 0 auto;
padding-top: 10px;
}
</style>