vue3.0后台管理项目（day21）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第32天，点击查看活动详情

上一篇文章中我们完成个人中心的样式，接下来我们将完成我们的登录页面

1. 登录页面的具体样式如下所示：

2. 这里我们同样需要使用到element-plus中的el-form组件，并且也要使用校验规则来判断用户输入的是否正确，这里的表单的具体代码如下所示：

<el-form
        ref="formRef"
        :model="loginData"
        label-width="100px"
        class="demo-dynamic"
      >
        <el-form-item
          prop="username"
          label="用户名"
          :rules="[
            {
              required: true,
              message: '此项为必填项',
              trigger: 'blur',
            },
          ]"
        >
          <el-input v-model="loginData.username" />
        </el-form-item>

        <el-form-item
          prop="password"
          label="密码"
          :rules="[
            {
              required: true,
              message: '此项为必填项',
              trigger: 'blur',
            },
          ]"
        >
          <el-input type="password" v-model="loginData.password" />
        </el-form-item>
      </el-form>

这里使用了v-model双向绑定，将用户输入的用户名以及密码与已有的用户名以及密码进行比对，如果相同则跳转到这个物流管理系统的首页，如果不同则提示用户用户名或者密码有误 2. 下面的el-button按钮就是用来提交用户输入的信息并且进行判断的，这里绑定了toHome这个方法，将data.loginData.username以及data.loginData.password进行判断比对，然后使用router.push跳转到home首页，这里需要用到路由跳转事件，所以我们需要在文件内部引入useRouter，如：import { useRouter } from "vue-router";如果判断成功，则使用ElMessage提示用户登陆成功，反之则提示用户他输入的用户名或者密码有误

3. 这里的背景图可以在网上随便找一张，我选择的是一个gif动图，可以提高用户的使用体验。