后台管理系统-登录功能与Token管理

发布于:2025-02-21 ⋅ 阅读:(154) ⋅ 点赞:(0)

登录演示和功能拆解

表单基础校验实现

1. 基础双向绑定

<template>
    <el-form>
      <el-form-item label="账号">
        <el-input v-model="formData.username" />
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-model="formData.password" />
      </el-form-item>

      <el-form-item>
        <el-checkbox v-model="formData.remember">记住我</el-checkbox>

      </el-form-item>

      <el-form-item>
        <el-button type="primary" class="login_btn">登录</el-button>

      </el-form-item>

    </el-form>

</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      formData: {
        username: '',
        password: '',
        remember: ''
      }
    }
  }
}

</script>

2. 表单校验配置

  1. 按照业务要求编写校验规则对象(rules)
  1. el-form组件绑定表单对象(model)和规则对象(rules)
  1. el-form-item组件通过prop属性指定要使用的校验规则

<template>
    <el-form :model="formData" :rules="rules">
      <el-form-item
        label="账号"
        prop="username"
      >
        <el-input v-model="formData.username" />
      </el-form-item>

      <el-form-item
        label="密码"
        prop="password"
      >
        <el-input v-model="formData.password" />
      </el-form-item>

      <el-form-item prop="remember">
        <el-checkbox v-model="formData.remember">记住我</el-checkbox>

      </el-form-item>

      <el-form-item>
        <el-button type="primary" class="login_btn">登录</el-button>

      </el-form-item>

    </el-form>

</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      formData: {
        username: '',
        pas

网站公告

今日签到

点亮在社区的每一天
去签到