基于Vue2+ElementUI 用户登录注册、用户管理功能
以下是一个简化的Vue2和ElementUI用户登录、注册和用户管理界面的代码示例:
<template>
<el-container>
<el-header>
<h1>用户管理系统</h1>
</el-header>
<el-main>
<!-- 登录表单 -->
<el-form v-if="!isLoggedIn" ref="loginForm" :model="loginForm" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="loginForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
<el-button @click="goToRegister">注册</el-button>
</el-form-item>
</el-form>
<!-- 注册表单 -->
<el-form v-if="showRegister" ref="registerForm" :model="registerForm" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="registerForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码">
<el-input type="password" v-model="registerForm.confirmPassword" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register">注册</el-button>
<el-button @click="goToLogin">返回登录</el-button>
</el-form-item>
</el-form>
</el-main>
</el-container>
</template>
<script>
export default {
data() {
return {
isLoggedIn: false, // 用户是否登录
showRegister: false, // 是否显示注册表单
loginForm: {
username: '',
password: ''
},
registerForm: {
username: '',
password: '',
confirmPassword: ''
}
};
},
methods: {
login() {
// 登录逻辑
this.isLoggedIn = true;
},
goToLogin() {
this.showRegister = false;
},
goToRegister() {
this.showRegister = true;
},
register() {
// 注册逻辑
this.$message.success('注册成功,请登录!');
this.showRegister = f
评论已关闭