前言
本篇博客记录用户注册功能的后端接口,前端页面实现以及功能测试。
后端接口
接口地址:/user/register
app.post(self.generate_route_path(["register"]), tags=self.tag, summary="用户注册")(user_service.register_user)
接口实现:
- 提供了良好的安全性验证和交互体验。使用md5对密码进行验证;同时对各种错误条件都做了处理。
async def register_user(register_form: RegisterForm):
"""用户注册接口"""
conv_id = uuid.uuid4().hex
session = Session(bind=engine)
try:
# 检查用户名是否已存在
existing_user = session.query(User).filter(User.email == register_form.email).first()
if existing_user:
return BaseResponse(code=400, msg='账号已存在')
redis = get_redis_instance()
judge = redis.get(register_form.email)
if not judge:
return BaseResponse(code=401, msg='验证码未发送')
captcha_code_str = judge.decode('utf-8')
if register_form.captcha != captcha_code_str:
return BaseResponse(code=402, msg='验证码错误')
# 对密码进行MD5加密
password_hash = md5(register_form.password.encode('utf-8')).hexdigest()
new_user = User(id=conv_id, email=register_form.email, password=password_hash, name="", is_active=True,
age=0, sex="0", description="")
session.add(new_user)
session.commit()
session.refresh(new_user) # 获取新插入记录的id等信息
return {"code": 200, "message": "注册成功", "data": {"user_id": new_user.id}}
except IntegrityError as e:
session.rollback()
raise HTTPException(status_code=400, detail="注册失败,可能是由于数据库完整性约束")
finally:
session.close()
- 用户注册时需要发送验证码进行验证。
async def send_verification_code(email: str):
"""发送验证码到邮箱并存储到Redis"""
# 生成6位数字验证码
code = ''
for i in range(6):
ch = chr(random.randrange(ord('0'), ord('9') + 1))
code += ch
send_email(email, '注册验证码', code) # 发送邮件
redis = get_redis_instance()
redis.set(email, code, ex=4000)
return JSONResponse(content={"detail": "Verification code has been sent to your email."})
前端页面
HTML模板分析 (<template>
部分)
- 登录/注册界面: 使用了Element UI的表单组件
el-form
和按钮组件el-button
来构建登录和注册表单。 - 条件渲染: 使用Vue的
v-if
指令来根据disfiex
变量的值决定渲染登录表单还是注册表单。 - 表单验证: 表单元素使用了
prop
属性和自定义验证规则来进行前端验证。
JavaScript脚本分析 (<script>
部分)
数据定义 (data
函数)
overlaylong
和overlaytitle
: 控制登录/注册界面的类名。disfiex
: 用于切换登录和注册界面的变量。loginfiex
: 用于切换普通登录和管理员登录的变量。time
: 用于验证码发送倒计时的变量。loginForm
和registerForm
: 分别存储登录和注册表单的数据。loginRules
和registerRules
: 定义了登录和注册表单的验证规则。
计算属性 (computed
属性)
code_button_disable
: 根据time
变量的值动态决定发送验证码按钮是否禁用。
方法定义 (methods
对象)
-
change
方法: 切换登录和管理员登录的视图。 -
- 处理用户注册的逻辑。
register
方法- 首先验证注册表单是否有效。
- 如果有效,调用
register
服务函数发送注册信息。 - 成功注册后,显示成功消息并返回登录界面。
-
- 处理发送验证码的逻辑。
getVerifyCode
方法- 验证邮箱格式后,调用
sendVerifyCode
服务函数发送验证码。 - 设置倒计时并更新按钮文本。
表单验证规则
validPass
: 验证两次密码输入是否一致。valid_regis_password
: 验证密码复杂性,包括长度和字符类型。valid_email
: 验证邮箱格式。valid_code
: 验证验证码是否为6位数字。
var valid_regis_password = (rule, value, callback) => {
if (value.length < 8 || value.length > 16) {
callback(new Error('密码长度在8~16位之间'))
}
if (checkPass(value)) {
callback()
} else {
callback(new Error('密码必须包含数字、小写字母、大写字母、下划线\'_\'中的至少两种'))
}
}
var valid_email = (rule, value, callback) => {
if (/\w*@.*/.test(value)) {
callback()
} else {
callback(new Error('请输入正确的邮箱'))
}
}
var valid_code = (rule, value, callback) => {
if (/\d{6}/.test(value)) {
callback()
} else {
callback(new Error('请输入6位数字验证码'))
}
}
注册流程
- 用户填写注册表单,包括邮箱、密码、确认密码和验证码。
- 用户点击发送验证码,系统验证邮箱格式后发送验证码。
- 用户填写验证码并提交注册表单。
- 系统验证注册表单数据的有效性。
- 如果验证通过,调用后端服务进行注册。
- 注册成功后,向用户显示注册成功的消息,并返回登录界面。
功能测试
按照相关要求,填写需要的字段。
邮箱验证码实例
在数据库中查看新注册的用户信息,密码字段为md5加密后的字符串。
重复注册: