七 · 从零开始搭建一个项目(编写 登陆/注册 页面)

1.views -> 新建文件 auth目录(标识权限) auth -> Login.vue 和 auth -> Register.vue

然后在路由里注册两个页面

2.编写注册页面

<script setup lang="ts">
import {reactive, ref} from 'vue'

import type {FormInstance, FormRules} from 'element-plus'

interface RuleForm {
  userName: string;
  password: string;
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  userName: '',
  password: '',
})


const rules = reactive<FormRules<RuleForm>>({
  userName: [
    {required: true, message: '用户名不能为空', trigger: 'blur'},

  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur',
    },
    {min: 6, max: 16, message: '密码长度在6-16字符', trigger: 'blur'},
  ],

})

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

</script>

<template>
  <div class="register">
    <el-card>
      <template #header>注册</template>
      <el-form
          ref="ruleFormRef"
          style="max-width: 800px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
      >
        <el-form-item label="用户名:" prop="userName">
          <el-input v-model="ruleForm.userName" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input v-model="ruleForm.password" placeholder="请输入密码"/>
        </el-form-item>
      </el-form>
      <div class="register-footer">
        <span>已有账号? <span @click="$router.push('/login')" class="to-login">前往登陆!</span></span>
      </div>
      <div class="register-footer">
        <el-button type="primary" style="width: 100%" @click="submitForm(ruleFormRef)">提交</el-button>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.register {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;

  .register-footer {
    display: flex;
    justify-content: end;
    font-size: 12px;
    align-items: center;
    margin-bottom: 10px;

    .to-login {
      cursor: pointer;
      color: blue;
    }
  }
}

</style>

3.编写登陆页面

<script setup lang="ts">
import {reactive, ref} from 'vue'

import type {FormInstance, FormRules} from 'element-plus'

interface RuleForm {
  userName: string;
  password: string;
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  userName: '',
  password: '',
})


const rules = reactive<FormRules<RuleForm>>({
  userName: [
    {required: true, message: '用户名不能为空', trigger: 'blur'},

  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur',
    },
    {min: 6, max: 16, message: '密码长度在6-16字符', trigger: 'blur'},
  ],

})

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

</script>

<template>
  <div class="login">
    <el-card>
      <template #header>登陆</template>
      <el-form
          ref="ruleFormRef"
          style="max-width: 800px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
      >
        <el-form-item label="用户名:" prop="userName">
          <el-input v-model="ruleForm.userName" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input v-model="ruleForm.password" placeholder="请输入密码"/>
        </el-form-item>
      </el-form>
      <div class="login-footer">
        <span>没有账号? <span @click="$router.push('/register')" class="to-login">前往注册!</span></span>
      </div>
      <div class="login-footer">
        <el-button type="primary" style="width: 100%" @click="submitForm(ruleFormRef)">登陆</el-button>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;

  .login-footer {
    display: flex;
    justify-content: end;
    font-size: 12px;
    align-items: center;
    margin-bottom: 10px;

    .to-register {
      cursor: pointer;
      color: blue;
    }
  }
}

</style>