Front-End Test: Users List

user-list-test.md

前端测试题: 用户列表

背景知识

按照如下UI，制作一个用户列表：

https://www.dropbox.com/s/h68v90cd75bxoev/Screenshot%202015-07-29%2023.30.53.png?dl=1

通过 AJAX 的方式从 API https://randomuser.me/ 读取数据。

点击用户列表的任一行，则展开显示该用户的详细信息：

https://www.dropbox.com/s/mfdy6lus3oh0smq/Screenshot%202015-07-29%2023.35.54.png?dl=1

工具

可以随意使用CSS和JS框架（如果可以用Angular就更好了）。

请一次只做一个需求，把当前的需求做完善，再做下一个。

需求

用户列表

• 在列表中显示以下数据
  • Avatar image 头像
  • Last name 姓
  • First name 名
  • Username 用户名
  • Phone 电话号码
  • Location 位置
• 头像需要是圆形的
• 表格的奇偶行分别使用不同颜色

用户详情

• 用户点击列表中的任一行，显示该用户的详细资料:
  • First Name 姓
  • Gender icon 性别图标
  • Username 用户名
  • Registered date 注册日期
  • Email 电子邮箱
  • Location 位置
  • Birthday 生日
  • Phone 电话号码
  • Cell 手机号码
  • Bigger avatar image 头像
• 点击已经展开的数据时，这一行收起来
• 点击其他数据时，展开的数据收起来，点击的数据展开显示

第二部分

如果时间充裕，请完成第二部分。