创新实训——前端：注册页面（邮箱验证）/密码修改页面

调整整体布局：

1. 在外层的 <div> 元素中，添加了 Flexbox 布局的样式：

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

这些样式确保 <div> 元素占据整个视口的高度，并且在水平和垂直方向上居中其子元素。

1. 在内层的 <div> 元素中，添加了 width 属性：

css

复制

width: 500px;

这个属性设置内层 <div> 元素的宽度为 500 像素。

设置邮箱验证功能：

<template>

  <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">

    <div style="width: 500px; text-align: center;">

      <h1 style="text-align: center; border-bottom-width: 50px;">注册</h1>

      <el-form ref="ruleFormRef" :model="confirm" :rules="rules" label-position="left" label-width="80px">

        <el-form-item label="用户名" prop="username">

          <el-input v-model="confirm.username" prefix-icon="user" />

        </el-form-item>

        <el-form-item label="密码" prop="password">

          <el-input v-model="confirm.password" prefix-icon="Lock" type='password' />

        </el-form-item>

        <el-form-item label="重复密码" prop="passwordConfirm">

          <el-input v-model="confirm.passwordConfirm" prefix-icon="Lock" type='password' />

        </el-form-item>

        <el-button type="primary" style="width:100% " @click="signup">注册</el-button>

      </el-form>

    </div>

  </div>

</template>

<script setup>

import { getCurrentInstance, reactive } from "vue";

import { ElMessage, ElNotification } from "element-plus";

import request from "../request";

import router from "../router";

const { proxy } = getCurrentInstance();

const user = reactive({

  username: '',

  password: ''

})

const confirm = reactive({

  username: '',

  password: '',

  passwordConfirm: ''

});

const rules = reactive({

  username: [

    { required: true, message: '请输入用户名', trigger: 'blur' }

  ],

  password: [{

    required: true, message: '请输入密码', trigger: 'blur'

  }],

  passwordConfirm: [{

    required: true, message: '请确认密码', trigger: 'blur'

  }]

})

const signup = () => {//注册

  proxy.$refs.ruleFormRef.validate((valid) => {

    if (valid) {

      if (confirm.password === confirm.passwordConfirm) {//confirm用来处理信息是否合法，让后再将数据送给user

        user.username = confirm.username;

        user.password = confirm.password;

        request.post('/user/signup', user).then(res => {

          if (res.code === "200") {

            alert('注册成功')

            router.push("/login")

          } else {

            ElMessage({

              type: 'error',

              message: res.msg

            })

          }

        })

      } else {

        ElMessage({

          type: 'error',

          message: '密码不一致！'

        })

      }

    }

  })

}

</script>

<template>

  <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">

    <div style="width: 500px; text-align: center;">

      <h1 style="text-align: center; border-bottom-width: 50px;">注册</h1>

      <el-form ref="ruleFormRef" :model="confirm" :rules="rules" label-position="left" label-width="80px">

        <el-form-item label="用户名" prop="username">

          <el-input v-model="confirm.username" prefix-icon="user" />

        </el-form-item>

        <el-form-item label="密码" prop="password">

          <el-input v-model="confirm.password" prefix-icon="Lock" type='password' />

        </el-form-item>

        <el-form-item label="重复密码" prop="passwordConfirm">

          <el-input v-model="confirm.passwordConfirm" prefix-icon="Lock" type='password' />

        </el-form-item>

        <el-button type="primary" style="width:100% " @click="signup">注册</el-button>

      </el-form>

    </div>

  </div>

</template>

<script setup>

import { getCurrentInstance, reactive } from "vue";

import { ElMessage, ElNotification } from "element-plus";

import request from "../request";

import router from "../router";

const { proxy } = getCurrentInstance();

const user = reactive({

  username: '',

  password: ''

})

const confirm = reactive({

  username: '',

  password: '',

  passwordConfirm: ''

});

const rules = reactive({

  username: [

    { required: true, message: '请输入用户名', trigger: 'blur' }

  ],

  password: [{

    required: true, message: '请输入密码', trigger: 'blur'

  }],

  passwordConfirm: [{

    required: true, message: '请确认密码', trigger: 'blur'

  }]

})

const signup = () => {//注册

  proxy.$refs.ruleFormRef.validate((valid) => {

    if (valid) {

      if (confirm.password === confirm.passwordConfirm) {//confirm用来处理信息是否合法，让后再将数据送给user

        user.username = confirm.username;

        user.password = confirm.password;

        request.post('/user/signup', user).then(res => {

          if (res.code === "200") {

            alert('注册成功')

            router.push("/login")

          } else {

            ElMessage({

              type: 'error',

              message: res.msg

            })

          }

        })

      } else {

        ElMessage({

          type: 'error',

          message: '密码不一致！'

        })

      }

    }

  })

}

</script>

1. 在 <el-form> 组件中，添加了一个新的 <el-form-item> 来显示邮箱输入框，并添加了对应的验证规则。
2. 在 <el-form-item> 标签中，添加了一个新的 <el-input> 组件来显示验证码输入框。
3. 在 <el-form-item> 标签中，添加了一个新的 <el-button> 组件来发送验证码。
4. 在 <script setup> 标签中，添加了一个新的函数 sendCode，用于发送验证码。这个函数调用了一个假设的 sendEmailCode 函数，并传递了 confirm.email 作为参数。
5. 在 <script setup> 标签中，修改了 signup 函数，以便在注册时同时发送验证码。现在 signup 函数会收集 user 和 confirm 对象中的所有属性，并将它们合并到一个新对象中，然后传递给 /user/signup 路径。
6. 在 <script setup> 标签中，添加了一个新的验证规则 code，用于验证验证码输入框。

这些修改确保了在注册表单现在包含了一个邮箱输入框、一个验证码输入框，以及一个发送验证码的按钮。当用户点击注册按钮时，将验证所有输入，包括验证码，并发送一个包含用户名、密码、邮箱和验证码的请求到 /user/signup 路径。

调整验证码界面：

要将 <el-button> 按钮与 <el-input> 输入框放在同一行，您可以使用 <el-form-item> 组件的 span 属性来定义其宽度，并使用 <el-col> 组件来定义列的宽度。Element Plus 组件库的栅格系统是基于 Bootstrap 的，所以您可以使用类似 Bootstrap 的栅格系统来布局。

以下是如何将按钮与输入框放在同一行：

<el-form ref="ruleFormRef" :model="confirm" :rules="rules" label-position="left" label-width="80px">

  <el-form-item label="邮箱" prop="email">

    <el-col :span="14">

      <el-input v-model="confirm.email" prefix-icon="user" />

    </el-col>

    <el-col :span="6">

      <el-button type="primary" style="width: 80px;" @click="sendCode">发送验证码</el-button>

    </el-col>

  </el-form-item>

  <!-- 其他表单项 -->

</el-form>

使用了两个 <el-col> 组件，每个组件的宽度分别为 14 和 6，总共占满一行。<el-col> 组件的 :span 属性定义了它在栅格中的宽度，范围从 1 到 24。

最终结果：