根据提供的代码,以下是注册界面的主要逻辑流程:
1. **前端部分 (`register.vue`)**:
- 创建了一个表单,包含以下字段:账号、密码、姓名、学院、班级、专业、电话、电子邮箱。
- 对每个字段进行了验证规则设置,例如账号必须为10位数字,密码长度不少于6位等。
- 提交表单时调用 `onSubmit` 方法进行验证和提交。
2. **表单验证**:
- 使用 `el-form` 和 `el-form-item` 组件来定义表单及其验证规则。
- 验证规则通过 `rules` 对象定义,使用 `required` 属性确保必填项,使用 `pattern` 属性进行正则匹配。
3. **提交表单**:
- 调用 `formRef.value.validate()` 进行表单验证。
- 如果验证通过,使用 `axios` 发送 POST 请求到 `/api/register` 接口。
- 根据响应结果处理成功或失败的情况:
- 成功时显示提示信息并跳转到登录页面。
- 失败时显示错误信息。
4. **后端部分 (`register.js`)**:
- 接收前端发送的注册数据。
- 查询数据库检查用户是否已存在。
- 如果用户已存在,返回失败信息。
- 如果用户不存在,将用户信息插入数据库,并返回成功信息。
### 完整代码实现
#### 前端部分 (`register.vue`)
```vue
<template>
<el-row style="min-height: 100vh;" class="bg-blue-500">
<el-col :lg="16" :md="12" class="flex items-5xl text-light-500 mb-5">勤以为学</div>
<div class="font-bold text-5xl text-light-500">信以为生</div>
</el-col>
<el-col :lg="8" :md="12" class="bg-light-50 flex items-center justify-center flex-col">
<h2 class="font-bold text-2xl text-blue-500 mb-5">学情监测系统用户注册</h2>
<el-form :model="form" :rules="rules" label-width="auto" style="max-width: 600px" hide-required-asterisk="false" ref="formRef">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="账号" prop="userid">
<el-input v-model="form.userid">
<template #prefix>
<el-icon><User /></el-icon>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password" show-password>
<template #prefix>
<el-icon><Lock /></el-icon>
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="姓名" prop="username">
<el-input v-model="form.username" type="text">
<template #prefix>
<el-icon><UserFilled /></el-icon>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="学院" prop="college">
<el-input v-model="form.college">
<template #prefix>
<el-icon><School /></el-icon>
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="班级" prop="class">
<el-input v-model="form.class">
<template #prefix>
<el-icon><HomeFilled /></el-icon>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="专业" prop="major">
<el-input v-model="form.major">
<template #prefix>
<el-icon><Reading /></el-icon>
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="电话" prop="phone">
<el-input v-model="form.phone">
<template #prefix>
<el-icon><Phone /></el-icon>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="电子邮箱" prop="email">
<el-input v-model="form.email">
<template #prefix>
<el-icon><Message /></el-icon>
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" justify="center">
<el-col :span="3">
<el-form-item>
<el-button type="primary" @click="onSubmit">注册</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-col>
</el-row>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios';
const formRef = ref(null)
const form = reactive({
userid: '',
password: '',
username: '',
class: '',
college: '',
phone: '',
email: ''
})
const rules = {
userid: [
{ required: true, message: '账号不能为空', trigger: 'blur' },
{ pattern: /^\d{10}$/, message: '账号必须是10位数字', trigger: 'blur' }
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
{ min: 6, message: '密码长度不少于6位', trigger: 'blur' }
],
username: [
{ required: true, message: '姓名不能为空', trigger: 'blur' }
],
college: [
{ required: true, message: '学院不能为空', trigger: 'blur' }
],
class: [
{ required: true, message: '班级不能为空', trigger: 'blur' }
],
major: [
{ required: true, message: '专业不能为空', trigger: 'blur' }
],
phone: [
{ required: true, message: '电话不能为空', trigger: 'blur' },
{ pattern: /^\d{11}$/, message: '电话必须是11位数字', trigger: 'blur' }
],
email: [
{ required: true, message: '电子邮箱不能为空', trigger: 'blur' },
{ pattern: /^[a-9-]+\.[a-zA-Z0-9-.]+$/, message: '电子邮箱格式不正确', trigger: 'blur' }
]
}
const onSubmit = async () => {
const isValid = await formRef.value.validate();
if (isValid) {
try {
const response = await axios.post('/api/register', form);
if (response.data.success) {
alert(response.data.message);
router.push('/login');
} else {
console.error('注册失败:', response.data.message);
alert(response.data.message);
}
} catch (error) {
console.error('注册请求失败:', error);
alert('注册失败,请稍后再试。');
}
} else {
console.log('表单验证失败');
}
};
const router = useRouter();
</script>
```
#### 后端部分 (`register.js`)
```javascript
let db = require('../db/index');
module.exports.post = (req, res) => {
const { userid, password, username, college, class: 班级, major: 专业, phone, email } = req.body;
// 检查用户是否存在
db.connection.query('SELECT * FROM user WHERE userid = ?', [userid], (error, results) => {
if (error) {
return res.json({ success: false, message: '数据库查询错误' });
}
if (results.length > 0) {
// 用户已存在
return res.json({ success: false, message: '账号已存在' });
} else {
// 添加新用户到数据库
const query = 'INSERT INTO user SET ?';
db.connection.query(query, {
userid: userid,
password: password,
username: username,
college: college,
class: 班级,
major: 专业,
phone: phone,
email: email
}, (error, results) => {
if (error) {
return res.json({ success: false, message: '注册失败' });
}
// 注册成功
res.json({ success: true, message: '注册成功,请登录。' });
});
}
});
};
```
### 总结
- **前端**: 实现了表单的创建、验证和提交功能,使用 `axios` 发送请求。
- **后端**: 接收前端请求,验证用户是否存在,如果不存在则将其添加到数据库中,并返回相应的响应。