SDU棋界精灵——web用户端设计

一、登陆注册页面

1. 前端页面结构

• 登录页面 (login.vue)

  • 核心组件：使用 el-input 实现用户名、密码、验证码输入框。

  • 验证码模块：通过 <img> 标签显示动态验证码图片，支持点击刷新。

  • 表单提交：点击“登录”按钮触发 login 方法，完成输入校验与API调用。

  • 跳转逻辑：提供“注册”链接，点击后跳转至 /register。

login() {
  // 输入校验
  if (!this.form.username.trim()) {
    showDanger("用户名不能为空");
    return;
  }
  // 调用API
  Api.user.login(this.form, ({ data }) => {
    if (data.code === 0) {
      showSuccess("登录成功！");
      goToPage("/home");
    } else {
      showDanger(data.msg);
    }
  });
}

• 注册页面 (register.vue)

  • 新增字段：在登录页基础上增加“确认密码”输入框。

  • 密码一致性校验：检查两次输入的密码是否一致。

  • 表单提交：点击“立即注册”按钮触发 register 方法，调用注册接口。

register() {
  if (this.form.password !== this.form.confirmPassword) {
    showDanger("密码不一致");
    return;
  }
  Api.user.register(this.form, ({ data }) => {
    if (data.code === 0) {
      showSuccess("注册成功");
      goToPage("/login");
    }
  });
}

2. 输入验证逻辑

非空校验：使用 trim() 去除输入值的空格，若为空则通过 showDanger 显示错误提示。

if (!this.form.username.trim()) {
  showDanger("用户名不能为空");
  return;
}

密码一致性校验（仅注册页）:

if (this.form.password !== this.form.confirmPassword) {
  showDanger("两次输入的密码不一致");
  return;
}

3. API请求与后端交互

• 接口定义：在 user.js 中封装以下关键接口：

  • 登录：POST /api/v1/user/login

  • 注册：POST /api/v1/user/register

  • 获取验证码：GET /api/v1/user/captcha

  • 获取用户信息：GET /api/v1/user/info

• 请求工具：通过 httpRequest.js 的 sendRequest 方法统一管理请求配置：

  • 自动携带 Token：从 localStorage 读取 TOKEN 并添加到请求头。

  • 错误统一处理：响应状态码非 200 时，自动跳转登录页或提示错误。

• 验证码实现：

  • 生成 UUID：使用 getUUID() 生成唯一标识，作为验证码请求参数。

  • Blob 处理：将验证码图片的二进制响应转换为可展示的 URL：

const blob = new Blob([res.data], { type: res.data.type });
this.captchaUrl = URL.createObjectURL(blob);

4. Token 管理与认证

登录成功处理：后端返回 TOKEN