创新实训记录（五）

前言

本篇博客记录用户注册功能的后端接口，前端页面实现以及功能测试。

后端接口

接口地址：/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> 部分)

1. 登录/注册界面: 使用了Element UI的表单组件el-form和按钮组件el-button来构建登录和注册表单。
2. 条件渲染: 使用Vue的v-if指令来根据disfiex变量的值决定渲染登录表单还是注册表单。
3. 表单验证: 表单元素使用了prop属性和自定义验证规则来进行前端验证。

JavaScript脚本分析 (<script> 部分)

数据定义 (data 函数)

1. overlaylong 和 overlaytitle: 控制登录/注册界面的类名。
2. disfiex: 用于切换登录和注册界面的变量。
3. loginfiex: 用于切换普通登录和管理员登录的变量。
4. time: 用于验证码发送倒计时的变量。
5. loginForm 和 registerForm: 分别存储登录和注册表单的数据。
6. loginRules 和 registerRules: 定义了登录和注册表单的验证规则。

计算属性 (computed 属性)

1. code_button_disable: 根据time变量的值动态决定发送验证码按钮是否禁用。

方法定义 (methods 对象)

1. change 方法: 切换登录和管理员登录的视图。

2. register 方法

   处理用户注册的逻辑。

   • 首先验证注册表单是否有效。
   • 如果有效，调用register服务函数发送注册信息。
   • 成功注册后，显示成功消息并返回登录界面。

3. getVerifyCode 方法

   处理发送验证码的逻辑。

   • 验证邮箱格式后，调用sendVerifyCode服务函数发送验证码。
   • 设置倒计时并更新按钮文本。

表单验证规则

1. validPass: 验证两次密码输入是否一致。
2. valid_regis_password: 验证密码复杂性，包括长度和字符类型。
3. valid_email: 验证邮箱格式。
4. 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位数字验证码'))
      }
    }

注册流程

1. 用户填写注册表单，包括邮箱、密码、确认密码和验证码。
2. 用户点击发送验证码，系统验证邮箱格式后发送验证码。
3. 用户填写验证码并提交注册表单。
4. 系统验证注册表单数据的有效性。
5. 如果验证通过，调用后端服务进行注册。
6. 注册成功后，向用户显示注册成功的消息，并返回登录界面。

功能测试

按照相关要求，填写需要的字段。

邮箱验证码实例

在数据库中查看新注册的用户信息，密码字段为md5加密后的字符串。

重复注册：