我正在尝试在不使用Vuex的情况下使用Vue设置用户登录和角色身份验证,因为这对我们应用程序的范围有些许限制。最初尝试在Vue之外使用jQuery AJAX失败后,我辞职了以使其能够与Vue的面向数据的模型一起使用,而我一直在为此奋斗(我是一个行业的设计师,而不是真正的开发人员)。我的后端开发人员正在用纯PHP编写并使用mySQL作为参考。
从this tutorial中汲取灵感,我试图使用v-model通过axios将表单数据发送到服务器。
模板:
<form class="login-form" id="loginform" @submit.prevent="login">
<div class="form-group space">
<label class="float-label" for="username">Username</label>
<input v-model="username" type="username" id="username" class="form-control" placeholder="username">
</div>
<div class="form-group">
<label class="float-label" for="username">Password</label>
<input v-model="password" type="password" id="password" class="form-control" placeholder="password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary float-right" id="login">Log in</button>
</div>
</form>
脚本:
export default {
name: 'Login',
data () {
return {
username: '',
password: ''
}
},
methods: {
login: function () {
const loginInfo = { username, password }
console.log(loginInfo)
new Promise ((resolve, reject) => {
axios({url: 'api.com/index.php', data: loginInfo, method: 'POST' })
.then(resp => {
const token = resp.data.token
localStorage.setItem('user_token', token) // store the token in localstorage
const employeeId = resp.data.employee_id
localStorage.setItem('employee_id', employeeId) // store the id in localstorage
resolve(resp)
console.log(resp);
})
.catch(err => {
localStorage.removeItem('user_token') // if the request fails, remove any possible user token if possible
reject(err)
})
})
// myLoginRoutine(loginInfo).then(() => {
// this.$router.push('/')
// })
}
}
}
请求没有问题,但是没有返回任何东西!我决定检查一下,看看我要给他发送什么...……瞧,const loginInfo
不是输入值,正如预期的那样,而是{username: input#username.form-control, password: input#password.form-control}
坦率地说,我很困惑。我以前在表单输入中使用v模型没有问题,也不知道为什么会发生这种情况或如何解决它。有什么想法吗?
答案 0 :(得分:2)
对于将来的访问者:axios data
希望对象具有后端的那些键,但是您不能正确填充该对象。
更改
const loginInfo = { username, password }
到
const loginInfo = { username: this.username, password: this.password }