4.给系统添加注册成功后跳转到登录页面的功能

给系统添加注册成功后跳转到登录页面的功能

需求:
①跳转的地址要求可配置
②需要在五秒后进行跳转

实现:

  1. 先在配置文件中配置测试网址 loginUrl=http://www.baidu.com/
  2. 在配置类中获取这个配置参数的值,并通过controller层传到前端
//配置类获取参数
@Value("${loginUrl}")
    String loginUrl;
//控制层获取值,并且传给map供前端使用
map.put("loginUrl", myConfig.getLoginUrl())
  1. 前端将这个值放到隐藏域,等待js文件访问
<input class="loginUrlVal" type="hidden" name="loginUrl" id="loginUrl"/>
  1. 在js文件的注册成功函数中添加setInterval函数,并设置参数
setInterval(returnLogin,1000);//第二个参数单位毫秒,此处意思是每间隔1秒调用一次returnLogin方法
  1. 定义全局变量ms = 5,在跳转函数中先获取跳转地址,再动态改变ms的值,并传给需要显示的地方。
var ms = 5;


function returnLogin(){
    var loginUrlVal = $('.loginUrlVal').val();
    if(ms>0){
        document.getElementById("sec").innerHTML=ms;
    }else{
        window.location.href=loginUrlVal;
    }
    ms--;// 每调用一次减减
}

成功页面:
在这里插入图片描述

根据提供的代码,以下是注册界面的主要逻辑流程: 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` 发送请求。 - **后端**: 接收前端请求,验证用户是否存在,如果不存在则将其添加到数据库中,并返回相应的响应。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值