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

后台项目 Express-Mysql-Vue3-Ts-Pinia 登录页面

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

登录页面

通过 ElementPlus 这个 UI 框架中的表单组件，快速搭建一个登录和注册的页面

下面为登录的表单界面

进行点击注册按钮，即可切换为注册表单。

下面是页面核心的页面代码

    <div class="login-form" v-if="state.flag">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" :size="formSize" status-icon>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="new-password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
          <el-button @click="registerForm">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="register-form" v-else>
      <el-form ref="ruleFormRef" :model="ruleFormRegister" :rules="rules" label-width="120px" :size="formSize" status-icon>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleFormRegister.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleFormRegister.password" type="password" autocomplete="new-password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="ruleFormRegister.confirmPassword" type="password" autocomplete="new-password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="registerSubmitForm(ruleFormRef)">确认注册</el-button>
          <el-button @click="registerForm">返回登录</el-button>
        </el-form-item>
      </el-form>
    </div>

这里有个知识点，就是我们的密码可能会进行自动的填充。解决它的办法为，在 input 标签上添加 autocomplete="off" 这个属性。

但是有时候是不生效的，这里可以在给密码填充的时候，使用 autocomplete="new-password" 这个属性，就不会自动填充了。

下面是注册和登录的代码块

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      
      setStorage({
        key: ACCESS_TOKEN,
        value: 111
      })

      router.push('/workbench')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const registerSubmitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log('register!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

可以看到在登录时，如果验证成功后，我们需要设置一个 token。

这里目前先用前端来进行设置一个 token，这样的话，我们在登录成功时，路由就可以跳转到 workbench 这个页面中。

假如如果不在这里设置 token 的话，那么 router.push('/workbench') 这段代码就会成为无用的。

因为我们在路由跳转时，进行路由的守卫拦截，如果没有 token 的话，还是在登陆页面的。

注意，到现在还没有和我们的后端 express 进行接触，还只是前端做的一些处理。

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个后台系统项目，这里进行登陆页面的处理。

后台项目 Express-Mysql-Vue3-TS-Pinia 登录页面

后台项目 Express-Mysql-Vue3-Ts-Pinia 登录页面

引言

登录页面

总结