根据提供的代码，完成注册界面验证用户信息是否正确，是否存在，若不存在并添加到数据库中，注册成功后跳转到登录页面

根据提供的代码，以下是注册界面的主要逻辑流程：

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`)

<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`)

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` 发送请求。
- **后端**: 接收前端请求，验证用户是否存在，如果不存在则将其添加到数据库中，并返回相应的响应。