该代码段展示了一个使用Vue.js编写的用户登录表单，表单通过axios向服务器发送POST请求进行用户验证。当登录成功时，会获取到token并利用VueRouter进行页面跳转到/input路径，并将token作为查询参数传递。
<template>
<div id="container">
<form class="box">
<h2 class="box-head">用户登录</h2>
<div class="box-body">
<p><label>用户名：</label><input type="text" name="user-name" v-model="username"></p>
<p><label>密码：</label><input type="password" name="password" v-model="password"></p>
<p><label></label><button type="button" @click="login"> 登录</button></p>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
password: "",
username: "",
token: "",
}
},
methods: {
login() {
this.axios({
method: "post",
url: "http://114.67.241.121:8088/user/login",
params: {
password: this.password,
username: this.username
}
}).then(res => {
console.log(res)
this.token = res.data.data.token
this.$router.push(
{
path: '/input',
query: { token: this.token }
})
})
}
}
}
</script>
<style scoped>
.box {
width: 400px;
background: #fef4eb;
margin: 10px auto;
font-family: simHei, sans-serif;
}
.box .box-head {
padding: 5px;
margin: 0;
font-size: 16px;
background: #ffebd7;
}
.box .box-body label {
display: inline-block;
width: 100px;
text-align: right;
}
.box .box-body input[type=text] {
width: 203px;
height: 25px;
padding-left: 5px;
border: solid 1px #DDDCD8;
border-radius: 3px;
box-shadow: 0 1px 2px 0 #DDDCD8 inset;
background-color: #FFFDEC;
outline: none;
}
.box .box-body input[type=password] {
width: 203px;
height: 25px;
padding-left: 5px;
border: solid 1px #DDDCD8;
border-radius: 3px;
box-shadow: 0 1px 2px 0 #DDDCD8 inset;
background-color: #FFFDEC;
outline: none;
}
.box .box-body button {
width: 104px;
height: 31px;
border: 0;
border-radius: 5px;
line-height: 31px;
font-size: 16px;
background: rgb(0, 42, 255);
color: #fff;
}
</style>
扫一扫
2619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
