vue2登录注册页面代码
时间: 2023-10-31 22:56:33 浏览: 62
以下是一个Vue2登录注册页面的代码示例:
```html
<template>
<div>
<el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules">
<h3 class="login_title">系统登录</h3>
<el-form-item label="用户名" prop="userName">
<el-input v-model="form.userName" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input show-password v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="submit" class="login_button" type="primary">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { GetLogin } from "@/Api/api";
export default {
data() {
return {
form: {
userName: "",
password: ""
},
rules: {
userName: [
{ required: true, message: "请输入用户名", trigger: "blur" }
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" }
]
}
};
},
methods: {
submit() {
// 调用登录接口
GetLogin(this.form)
.then(response => {
// 处理登录成功逻辑
})
.catch(error => {
// 处理登录失败逻辑
});
}
}
};
</script>
<style lang="less" scoped>
.login-container {
width: 400px;
border: 1px solid #eaeaea;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 15px;
box-shadow: 0 0 25px #cac6c6;
background-color: #ffffff;
box-sizing: border-box;
}
.login_title {
text-align: center;
margin-bottom: 40px;
color: #505458;
}
.el-input {
width: 198px;
}
.login_button {
margin-left: 105px;
margin-top: 10px;
}
</style>
```
在这个示例中,我们使用了Vue2和Element UI组件库来创建一个登录注册页面。页面包括一个表单,用户可以输入用户名和密码,然后点击登录按钮进行登录操作。
在`<template>`部分,我们使用了Element UI的表单组件和输入框组件来创建表单,其中`v-model`指令用于双向绑定输入框的值。
在`<script>`部分,我们引入了一个封装的axios接口`GetLogin`,它负责处理登录请求。在`submit`方法中,我们调用了`GetLogin`方法来发送登录请求,并根据返回结果进行相应的处理。
在`<style>`部分,我们使用了Less语法来定义页面的样式,其中`.login-container`是登录容器的样式,`.login_title`是登录标题的样式,`.el-input`是输入框的样式,`.login_button`是登录按钮的样式。这些样式通过`scoped`属性进行了作用域限制,只会应用在当前组件中。
希望这个示例对您有所帮助。