用vue2写一个炫酷的登陆页面,并把从后端传过来的token,存到localStorage种
时间: 2024-05-04 08:19:36 浏览: 115
好的,下面给出一个简单的vue2登陆页面示例:
```
<template>
<div class="login-page">
<div class="login-box">
<h2>登陆</h2>
<input type="text" placeholder="用户名" v-model="username" />
<input type="password" placeholder="密码" v-model="password" />
<button @click="login">登陆</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
password: "",
};
},
methods: {
login() {
// 在这里向后端请求登录接口,获取token
const token = "这里写后端返回的token";
localStorage.setItem("token", token);
// 跳转到主页
this.$router.push("/");
},
},
};
</script>
<style>
.login-page {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
}
.login-box {
width: 400px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
background-color: #fff;
text-align: center;
}
h2 {
margin-bottom: 20px;
font-size: 24px;
}
input {
display: block;
width: 100%;
margin-bottom: 20px;
padding: 10px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
button {
display: inline-block;
padding: 10px 20px;
border: none;
border-radius: 3px;
background-color: #007aff;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}
</style>
```
在这个示例中,我们使用了vue-router进行页面跳转,当用户点击登陆按钮时,会向后端请求登陆接口,并将获取到的token存储到localStorage中,然后跳转到主页。在实际开发中,还需要添加一些表单验证等逻辑来保证登陆安全性。
阅读全文