功能流程

王皓琦
475 阅读10分钟

1.注册功能

注册两种方式

  1. 手机号+验证码注册并登录

输入手机号验证并登录，后台生成新的用户名

  1. 用户 账号 +密码注册并登录

验证并登录，随后引导绑定手机号

用户账号长度: 大于等于4

表单校验规则

  1. 填写手机号，键入 “回车/Enter” 键，或选中除该输入框的其他部分对手机号进行校验
  2. 若手机号不存在或格式错误，则提示用户检查手机号并重新输入
  3. 若该手机号已注册，则提示用户更换手机号， “登录”按钮由禁用状态变为可点击状态
  4. 若格式正确，显示 “✔手机号码正确”
  5. 用户首次输入（设置）密码（密码1），提示密码至少为6位，需要包含数字和字母
  6. 键入 “回车/Enter” 键，或选中除该输入框的其他部分对密码进行校验
  7. 调用函数对密码进行格式判断（包括长度和包含项）
  8. 若密码输入不符合要求则提示用户修改密码直至正确格式
  9. 密码输入符合要求后显示 “✔密码格式正确” ，并且确认密码输入框由禁用状态变为可输入状态
  10. 用户在 “确认密码框” 再次输入密码（密码2）
  11. 若 “密码1!=密码2” ，则提示用户 “两次输入密码不一致❌” ，同时 “确认密码框” 自动清空
  12. 若 “密码1==密码2” ， “注册” 按钮由禁用状态变为可用状态（可以点击）
  13. 提示 “注册成功✔” ，进入主页

验证手机号码部分：

请求携带数据：

手机号码

返回数据：

返回相应提示

注册成功部分：

请求携带数据：

手机号码，该手机号对应密码

返回数据：

注册成功提示

2.登录功能

两种登录方式

  1. 手机号+验证码
  2. 用户 账号 +密码

表单验证规则

  1. 填写手机号，键入 “回车/Enter” 键，或选中除该输入框的其他部分对手机号进行校验

  2. 若手机号不存在或格式错误，则提示用户检查手机号并重新输入

  3. 格式正确，用户输入密码

  4. 若后台该手机号所对应密码与该输入密码不匹配，则显示 “密码输入错误❌” ，并弹出验证窗口

    1. 点击验证码发送按钮，发送验证码发送请求，验证码发送按钮禁用，内容为60s到1s逐步递减，为0s时内容恢复 “发送验证码” ，状态为可点击
    2. 点击 “提交” 按钮，对用户输入的内容进行判断，如果长度不等于6，则提醒用户，长度等于6才发送提交请求
    3. 提交成功，返回用户名-密码登录界面

  5. 若连续三次密码输入错误，后台锁定该手机号对应账号，并显示 “❗❗密码连续输入错误多次，该账号已锁定，请10分钟后再试❗❗” ，同时所有该手机号对应的登录界面中 “登录” 按钮全部为禁用状态

  6. 若后台该手机号所对应密码与该输入密码匹配， “登录” 按钮由禁用状态变为可点击状态

  7. 提示 “登录成功✔” ，进入主页

  • 补充：忘记密码部分
  1. 用户点击 “忘记密码” 按钮，跳转至忘记密码窗口
  2. 点击验证码发送按钮，发送验证码发送请求，验证码发送按钮禁用，内容为60s到1s逐步递减，为0s时内容恢复 “发送验证码” ，状态为可点击
  3. 点击 “提交” 按钮，对用户输入的内容进行判断，如果长度不等于6，则提醒用户，长度等于6才发送提交请求
  4. 提交成功， “密码输入框” 变为可输入状态
  5. 见1.注册功能步骤g~l
  6. 提示 “密码更改成功✔” ，跳转至登录页面继续登录

3.个性化自我定义

3.1 头像部分

  1. 登录/注册成功后，跳转至个人信息完善页面

  2. 用户点击 “头像” ，跳出窗口显示 “照片” 和 “拍照”

  3. 若用户选择 “照片” ，显示“是否允许访问本机相册”

    1. 若用户点击 “是” 按钮，则打开本机相册
    2. 若用户选择 “否” 按钮，则返回窗口显示 “照片” 和 “拍照”

  4. 若用户选择 “拍照” ，则打开照相机

  5. 选取照片成功后，“确定” 按钮由禁用变为可点击状态，

  6. 用户点击 “确定” 后，照片提交至后台进行处理，调用相应程序完成转换

  7. 后台转换完成后，将漫画照片显示在该网页上，同时 “确认使用” 按钮和 “换一张” 按钮由禁用转变为可点击状态

  8. 若用户点击 “确认使用” 按钮，则该图像在后台被处理为圆形（或正方形），并将 “头像” 区域更换为该图像

  9. 若用户点击 “换一张” 按钮，则跳转至窗口显示 “照片” 和 “拍照” ，并重复3.1头像部分步骤c~h

3.2 个人形象部分

  1. 注册成功后，跳转至个人信息完善页面。登录成功后，直接跳转到主页
  2. 用户在 “昵称” 输入框中输入心仪的昵称
  3. 用户在 “邮箱” 输入框中输入常用的邮箱（邮箱需要进行验证）
  4. 用户点击 “行业” 后，下拉出现不同行业气泡（e.g.学生，白领，互联网打工人等）
  5. 用户在 “性别” 下拉选项框中点击选择性别👩🏻🧑🏻
  6. 用户在 “年龄” 输入框中输入自己的真实年龄（提示文字要在标注：真实年龄）
  7. 用户在 “身高” 输入框中输入自己的真实身高（提示文字：cm）
  8. 用户在 “体重” 输入框中输入自己的真实体重（提示文字：kg）
  9. 用户在 “鞋码” 输入框中输入自己的真实鞋码（提示文字：欧式鞋码，例如：38或38.5）
  10. 用户点击 “性格” 后，下拉出现不同性格气泡和 “自我描述” 输入框

点击后气泡相应变色，气泡内容和 “自我描述” 输入框内内容输入后台（并返回在个人信息区域窗口）

  1. 用户点击 “一句话描述自己” 输入框后，可输入一句话

12. ~~用户点击 “兴趣爱好” 后，下拉出现不同描述的气泡和 “其他” 输入框~~

~~气泡内容~~~~和 ~~~~“其他” 输入框内内容~~~~输入后台（并返回在个人信息区域窗口）~~

13. ~~用户点击 “关注的话题” 后，下拉出现不同描述的气泡和 “其他” 输入框~~

~~气泡内容~~~~和 ~~~~“其他” 输入框内内容~~~~输入后台（并返回在个人信息区域窗口）~~

1.  所有上述信息均需要输入后端并返回在个人信息区域窗口，在上述信息全部输入后端后，“提交”按钮由禁用状态转为可点击状态

<!---->

14. 用户点击 “提交” 按钮后，所有已输入后端的信息返回至个人信息区域窗口，并跳转至主页

-   补充：**邮箱验证**部分

1.  用户输入邮箱后，跳出弹框对邮箱进行验证
1.  点击验证码发送按钮，对邮箱格式进行校验
1.  格式错误，则提醒用户重新输入
1.  格式正确，则发送验证码发送请求，验证码发送按钮禁用，内容为60s到1s逐步递减，为0s时内容恢复 “发送验证码”，状态为可点击
1.  点击 “验证” 按钮，对用户输入的内容进行判断，如果长度不等于6，则提醒用户，长度等于6才发送验证请求。
1.  验证成功，返回个人信息完善页
1.  验证失败，提醒用户验证码输入错误
1.  对 “验证” 按钮进行节流控制，不允许频繁请求
1.  发送请求时对用户输入的内容进行前后空字符进行过滤

# 4.搜索匹配元友功能

根据相同的形象标签可以进行搜索，匹配与自己相似的元友，或自己希望能与之进行交流的元友。

实现方式：后端通过模糊查询调用数据库信息，前端使用ajax技术

（1）检验用户是否登录，如果没有则跳转登录页

（2）输入期望好友年龄范围（非必填）

（3）选择期望好友身份标签（必选）：大学生，中学生，研究生，博士生，IT行业，教育行业，公务员，服务行业，艺术行业，医疗行业，律师行业，饮食行业，其他(其他与输入框绑定，在输入框中输入期望的好友身份,必填)

（4）选择好友的个性标签（必选）：

（5）点击匹配，进行请求，传入数据：

| **expectAge**   |
| --------------- |
| expectIdentify  |
| expectCharacter |

返回数据：

用户id，用户头像，用户名称，用户签名，用户性别…

# 5.社区日常分享功能

网站中可以建立各类社区，如旅游社区、游戏社区、科技社区等，用户可以选择自己喜欢的社区浏览查阅相关内容，也可以在该社区发表自己的言论，分享图片。

分类标签：日常生活，旅游，游戏，服装

**（一）浏览**

(1)用户选择社区类别，获取相应社区内容，传入类别，返回用户信息和内容（text，img…)。每当滚动条滑动到底部时，调用获取信息API继续追加信息。

(2)内容点赞：传入数据：用户id，返回：状态status以及最新的点赞数

(3)内容取消点赞：和上面一样

(4)评论：用户输入评论，最多三行，超出的内容以…覆盖，输入框失去焦点，发送请求，传入comment，userid，返回全部的comment内容信息

**（二）发表**

（1）输入text信息（非必须）

（2）选择Img（可多选）（非必须，但是text和img至少有一个不为空）

（3）选择社区（必选，限制一个）：旅游社区、游戏社区、科技社区、服装社区等

（4）如果选择服装社区，则弹出用户信息确认表（弹框形式，可修改，修改之后个人信息页同步修改）：身高，体重，服装标题，服装类型：上衣，裤子，裙子，鞋子；点击相应类型，选择框为相应选择尺码内容。

（4）点击发表，传入userid，用户输入的内容，社区标签，返回状态码status，社区主页第一条为用户发表的内容，同时用户个人信息页的已发表内容同步更新。

**（三）服装测评**

主页由搜索部分和内容展示部分构成。

搜索：

（1）默认推荐与用户身高体重类似的用户的测评内容，如果用户未完善身高体重信息，则跳入个信息页

（2）输入服饰标签，点击搜索，进行模糊匹配

（3）展示返回内容（username，userimg，用户发表时间，用户评价，尺码，服装标题,img,…）

（4）如果内容太多，则做分页处理。

# 6.个人管理

（一)用户管理

我的信息：邮箱，用户名，头像，行业标签，性格标签，身高，体重

信息修改：修改邮箱，修改密码，修改用户名，修改头像，修改两个标签

（二）我的story

发布的所有内容展示和管理（删除）

（三）动态管理

评论我的，点赞我的

# 7.评论与回复

无法复制加载中的内容
avatar
文章
阅读
粉丝