git 地址 vue数据管理系统项目地址

说明文档

1. 题目

实现一张数据管理表格，包含以下字段，实现其增删改查和查看。id 头像 姓名 性别 手机号 邮箱 个人简介 密码

2. 角色分配

1. 管理员 : 姓名: 李磊 账号: admin 密码: admin

管理员mock数据

const managerData = {
   
    id: 1111,
    token: "qwer13265",
    name: "小马甲",
    phoneNum: 15623272359,
    role: 1,
    sex: "男",
    email: "123465@henhaoji.com",
    img:
      "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2621280521,1724782664&fm=26&gp=0.jpg",
    introduce:
      "游戏奋斗者,廿四哦打死哦i哦亲哦阿萨大四哦i倒是安居客圣诞节撒谎绘画覅婚纱活动教案或就哈哈的骄傲和世界的哈吉今安徽省的剧情和较好的",
    password: 666666,
    msg: "success",
  }

2. 普通用户: 姓名:尤大大 账号:15623703201 密码:111111

3. 操作说明

3.1 登录

1. 用户必须通过登录才能进入系统首页以及查看详情页，如果未登录用户通过url强行访问首页及详情页将会被拦截并跳转到登录页面
2. 用户分角色登录展现不同权限的页面，项目中开通一个管理员账号和一个普通用户账号：
   • 管理员 ：姓名 小马甲 账号 admin 密码 admin ，权限：查看所有用户列表，搜索单个用户，增加用户，编辑用户，删除用户，查看用户详情
   • 普通用户：姓名:尤大大 账号:15623703201 密码:111111,权限：只能看到自己的列表，编辑自己信息，查看自己详情

3.2 查询

1. 管理员总表查询:管理员通过账号登录可以查询到总体用户的数据并渲染到表格上
2. 管理员单个查询:管理员可以通过上方的搜索框输入想要查询的人的名字全称就可以精准查询到

3.3 增加

管理员可以通过点击增加成员,弹出弹窗进行增加成员的表单的填写,表单通过验证后才能进行提交增加数据
表单验证规则: name :不能为空 password:密码不少于4位 email : /\w+@[a-z0-9]+.[a-z]{2,4}/ introduce不能为空

3.4 编辑

管理员可以通过点击编辑所有成员,普通用户只能编辑自己,弹出弹窗进行编辑成员的表单的填写,表单通过验证后才能进行提交更改数据
验证同上

3.4 删除

管理员可通过点击删除删除对应的列表

3.5 查看详情

管理员可以通过点击列表中所有的详情通过路由跳转到详情页面,普通用户只能查看自己的详情,如果通过url强行访问,将会进行路由拦截