添加登录页面

添加登录页面

为了解决一打开网站就显示页面和数据，这样子不太符合日常设计的要求。所以添加一个登录页面，根据用户所拥有的权限，在页面中限制其访问特定的内容

在前端的view包下创建一个Login.view，这个是登录界面的代码。

接着去Element-UI的官网https://element-plus.org/zh-CN/找到合适的组件，如何确定使用什么样的组件？向AI提问Element Plus中哪些组件最适合×××××系统

为了创建一个符合日常设计要求的登录页面，并根据用户权限限制其访问特定内容，需要使用一些 Element Plus 组件来构建这个登录页面。可以参考以下步骤和建议：

1. 创建 Login.view

首先，在前端的 views 包下创建一个 Login.view 文件，用于定义登录界面的代码。

2. 确定使用的组件

访问 Element Plus 官网 并参考组件文档，以下是一些适合登录页面的组件及其使用理由：

• Form 表单：用于容纳所有的输入字段。
• Input 输入框：用于用户输入用户名和密码。
• Button 按钮：用于提交登录表单。
• Alert 提示：用于显示错误信息，如登录失败的提示。
• Loading 加载：用于显示加载状态，提交登录表单时使用。

3. 使用这些组件构建 Login.view

下面是一个示例代码，展示如何使用这些组件创建一个登录页面：

<template>
  <div class="login-container">
    <el-form :model="loginForm" ref="loginForm" :rules="rules" label-width="80px" class="login-form">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin" :loading="loading">登录</el-button>
      </el-form-item>
      <el-alert v-if="error" :title="error" type="error" show-icon></el-alert>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loading: false,
      error: '',
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          // 模拟异步登录
          setTimeout(() => {
            this.loading = false;
            if (this.loginForm.username === 'admin' && this.loginForm.password === '123456') {
              this.$router.push({ path: '/' });
            } else {
              this.error = '用户名或密码错误';
            }
          }, 1000);
        }
      });
    }
  }
};
</script>

<style scoped>
.login-container {
  width: 400px;
  margin: 100px auto;
}
.login-form {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>