react--antDesignUI的后台管理（登录，Tab导航）

登陆时的提示

数据库中的管理员账户是直接插入进去的

退出功能

后端实现接口

前端实现

单点登陆 - 一次只能有一个设备在线

• 如果将上一个登陆的账户然他下线：即时通讯 --- socket通讯
• 登录时提示用户已登录，如果点击继续，就给服务器发送了一条消息
• 服务器接收到消息，主动推送消息给上一个登陆的账户，上一个登陆的客户端其实在登陆的时候已经开启监听服务器推送的 再次登陆的函数，服务器一旦发送消息，就执行该函数
• 此函数的设计可以包含退出登陆的功能，以及提示用的信息
  

面包屑导航 -- 快捷导航

编写配置信息

• 疑问：
  
  

主页面修改我们的路由的配置

页面的链接发生变化，左侧的导航没有跟随者改变

实现用户列表

后端：实现获取用户列表的接口

前端：调用获取用户列表的接口

const columns = [
    {
        title: '昵称',
        dataIndex: 'nickname',
        key: 'nickname',
    },
    {
        title: '头像',
        dataIndex: 'avatar',
        key: 'avatar',
        render: val => <img src={ val } alt='' style={{width: '90px'}}/>,
    },
    {
        title: '手机号',
        dataIndex: 'tel',
        key: 'tel',
        render: val => <span> { val }</span>,
    },
    {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
        render: val => val === 1 ? <span><ManOutlined style={{color: 'blue'}}/>男</span> : val === 0 ? <span ><WomanOutlined style={{color: 'hotpink'}}/>女</span> : <span>未设置</span>,
    },
    {
        title: '邮箱',
        dataIndex: 'email',
        key: 'email',
    },
    {
        title: '会员级别',
        dataIndex: 'member', // 0 非会员 1表示普通会员 2表示超级会员
        key: 'member',
        render: val => val === 0 ? <Tag>非会员</Tag> : val === 1 ? <Tag color="blue">普通会员</Tag> : <Tag color="gold">超级会员</Tag>,
    },
    {
        title: '操作',
        dataIndex: 'opr',
        key: 'opr',
        render: () => <div>
        <Button size="middle" type="link" shape="round" style={{ color: 'orange'}}><EditOutlined /></Button>
        <Button size="middle" type="link" shape="round" danger><DeleteOutlined /></Button>
        </div>
    },
];

管理员列表实现 - 用户权限

后端

前端

复制用户列表代码，删除了不需要的代码，添加了一个新的组件 用来表示用户的登陆状态

添加管理员

 

-------------------------------------------------------------------------------------文章来自吴大勋（大勋说）链接