Vue3+node.js实现注册

embedded/2024/11/29 18:47:02/

文章目录

    • 前端代码实现
    • 后端代码实现

效果图
在这里插入图片描述

前端代码实现

javascript"><template><div class="register-container"><el-card class="register-card"><template #header><div class="card-header"><span>注册</span></div></template><el-form label-width="80px" ref="formRef" :model="formData" :rules="rules"><el-form-item label="用户名" prop="username"><el-input v-model="formData.username" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="formData.password" type="password" placeholder="请输入密码"></el-input></el-form-item><el-form-item label="确认密码" prop="confirmPassword"><el-input v-model="formData.confirmPassword" type="password" placeholder="请确认密码"></el-input></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="formData.name" placeholder="请输入姓名"></el-input></el-form-item><el-form-item label="性别" prop="sex"><el-select v-model="formData.sex" placeholder="请选择性别"><el-option label="男" value="男"></el-option><el-option label="女" value="女"></el-option></el-select></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="formData.email" placeholder="请输入邮箱"></el-input></el-form-item><el-form-item><el-button style="width: 100%;" @click="handleSubmit" type="primary">注册</el-button></el-form-item><el-form-item><el-button link type="info" @click="toggleToLogin">已有账号?去登录</el-button></el-form-item></el-form></el-card></div>
</template><script setup>
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { reactive, ref } from 'vue';// 初始化
const formRef = ref(null);// 注册跳转
const toggleToLogin = () => {location.href = '/login';
}// 表单数据
const formData = ref({username: '',password: '',confirmPassword: '', name: '',sex: '',email: ''
});const validateConfirmPassword = (rule, value, callback) => {if (value !== formData.value.password) {callback(new Error('两次输入的密码不一致'));} else {callback();}
};// 校验规则
const rules = reactive({username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 20, message: '长度在3到20个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }],confirmPassword: [{ required: true, message: '请确认密码', trigger: 'blur' },{ validator: validateConfirmPassword, trigger: 'blur' }  // 自定义验证],name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],sex: [{ required: true, message: '请选择性别', trigger: 'change' }],email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }]
});// 注册处理
const handleSubmit = async () => {const form = formRef.value;if (!form) return;try {await form.validate();const res = await axios.post('http://localhost:3030/user/register', formData.value);if (res.data.code === 200) {ElMessage.success(res.data.message || '注册成功');location.href = '/login';  } else {ElMessage.error(res.data.message || '注册失败');}} catch (error) {console.error('注册请求错误', error);ElMessage.error(error.response?.data?.message || '注册失败,请稍后重试');}
}
</script><style scoped>
.register-container {min-height: 100vh;display: flex;background-color: aqua;align-items: center;justify-content: center;
}
.register-card {width: 400px;border-radius: 8px;
}
.card-header {font-size: 24px;font-weight: bold;text-align: center;
}
</style>

后端代码实现

javascript">//注册
router.post('/register',async (req,res)=>{try {const {name,username,password,sex,email} = req.body//必填字段if(!name || !username || !password || !sex ||!email){return res.json({code:400,message:'请填写所有必填字段'})}//检查用户是否存在const checkSql = 'select count(*) as count from user where username = ?'const [[{count}]] = await pool.query(checkSql,[username])if(count > 0){return res.json({code:400,message:'用户已存在'})}//插入新用户const insertSql = 'insert into user (username,password,name,sex,email) values (?,?,?,?,?)'const [result] =await pool.query(insertSql,[username,password,name,sex,email])success(res,null,'注册成功')} catch (error) {handleError(res,error)}
})

http://www.ppmy.cn/embedded/141548.html

相关文章

林业产品推荐系统:Spring Boot开发手册

3 系统分析 这部分内容虽然在开发流程中处于最开始的环节&#xff0c;但是它对接下来的设计和实现起着重要的作用&#xff0c;因为系统分析结果的好坏&#xff0c;将直接影响后面环节的开展。 3.1可行性研究 影响系统开发的因素有很多&#xff0c;比如开发成本高就不适合开展&a…

深入浅出:JVM 的架构与运行机制

一、什么是JVM 1、什么是JDK、JRE、JVM JDK是 Java语言的软件开发工具包&#xff0c;也是整个java开发的核心&#xff0c;它包含了JRE和开发工具包JRE&#xff0c;Java运行环境&#xff0c;包含了JVM和Java的核心类库&#xff08;Java API&#xff09;JVM&#xff0c;Java虚拟…

输入json 达到预览效果

下载 npm i vue-json-pretty2.4.0 <template><div class"newBranchesDialog"><t-base-dialogv-if"addDialogShow"title"Json数据配置"closeDialog"closeDialog":dialogVisible"addDialogShow":center"…

Realtek网卡MAC刷新工具PG8168.exe Version:2.34.0.4使用说明

本刷新工具虽然文件名叫PG8168.EXE&#xff0c;但不是只有RTL8168可用&#xff0c;是这一个系列的产品都可以使用。实验证明RTL8111也可以使用。 用法&#xff1a; PG8168 [/h][/?][/b][/c HexOffsetHexValue][/d NICNumber][/l][/r][/w][/v] [/# NICNumber] [/nodeidHexNOD…

【网络-交换机】生成树协议、环路检测

路由优先级 路由优先级决定了在多种可达的路由类型中&#xff0c;哪种路由将被用来转发数据包。路由优先级值越低&#xff0c;对应路由的优先级越高&#xff0c;优先级值255表示对应的路由不可达。一般情况下&#xff0c;静态路由的优先级为1&#xff0c;OSPF路由优先级为110&a…

Qt | 开发技能提升档次哈

点击上方"蓝字"关注我们 01、Creator常用快捷键 >>> F1 查看帮助 F2 跳转到函数定义 Shift+F2 声明和定义之间切换 F3 查找下一个 F4 头文件和源文件之间切换 Ctrl+1 欢迎模式 Ctrl+2 编辑模…

DRM(数字权限管理技术)防截屏录屏----视频转hls流加密、web解密播放

提示&#xff1a;视频转hls流加密、web解密播放 需求&#xff1a;研究视频截屏时&#xff0c;播放器变黑&#xff0c;所以先研究的视频转hls流加密 文章目录 [TOC](文章目录) 前言一、工具ffmpeg、openssl二、后端nodeexpress三、web播放四、文档总结 前言 ‌HLS流媒体协议‌&a…

结构体,枚举,联合知识点笔记总结

结构体&#xff1a; 1.之前我们知道&#xff0c;数组&#xff1a;一些值的结合&#xff0c;类型是相同的 结构&#xff1a;是一些值的集合&#xff0c;这些值称为成员变量。结构的每个成员可以是不同类型的变量 struct s {int a; --|-->结构体成员int b; --}; 注意…