react+antdUI后台管理项目--二级菜单+登录界面

UI库gitee地址： 速度快
https://ant-design.gitee.io/components/button-cn/

侧边栏二级菜单

31aedde72c65a9c1c05cfffb0f7ccc41.png

侧边栏组件渲染
src/views/index/SliderMemu.jsx
8472e46fb14988f13725af7113a85b03.png
800e612ab4be18adceb9cc6972861f31.png
src/views/index/index.jsx
6f3c3653f3fa213395ff56f6ec28d4b4.png

重新设计侧边栏数据

import {
  HomeOutlined,
  PictureOutlined,
  UnorderedListOutlined
} from '@ant-design/icons';
const menus = [
  {
    title: '首页',
    path: '/home',
    icon: HomeOutlined
  },
  {
    title: '轮播图管理',
    path: '/banner',
    icon: PictureOutlined,
    children: [
      {
        title: '轮播图列表',
        path: '/banner/list',
        icon: HomeOutlined
      },
    ]
  },
  {
    title: '分类管理',
    path: '/category',
    icon: UnorderedListOutlined,
    children: [
      {
        title: '分类列表',
        path: '/category/list',
        icon: HomeOutlined
      },
    ]
  },
  {
    title: '产品管理',
    path: '/product',
    icon: UnorderedListOutlined,
    children: [
      {
        title: '产品列表',
        path: '/product/list',
        icon: HomeOutlined
      },
    ]
  },
  {
    title: '用户管理',
    path: '/users',
    icon: UnorderedListOutlined,
    children: [
      {
        title: '用户列表',
        path: '/users/list',
        icon: HomeOutlined
      },
      {
        title: '用户权限',
        path: '/users/permission',
        icon: HomeOutlined
      },
    ]
  },
  {
    title: '购物车管理',
    path: '/cart',
    icon: UnorderedListOutlined,
    children: [
      {
        title: '购物车列表',
        path: '/cart/list',
        icon: HomeOutlined
      },
    ]
  },
  {
    title: '订单管理',
    path: '/order',
    icon: UnorderedListOutlined,
    children: [
      {
        title: '订单列表',
        path: '/order/list',
        icon: HomeOutlined
      },
    ]
  },
  {
    title: '地址管理',
    path: '/address',
    icon: UnorderedListOutlined,
    children: [
      {
        title: '地址列表',
        path: '/address/list',
        icon: HomeOutlined
      },
    ]
  }
]

export default menus;

添加用户权限管理的页面
97d77ac780a57e05d8e0bbd71c9a88ce.png

修改路由
41b819b6f2e1b465fc4faa05b8fd405c.png

测试效果

  • 疑问： 当你刷新页面之后，选中的效果消失了

参照Menu组件API，发现了以下的属性

0e8fd9af2d4fc8c23f4db77ae9505534.png

1d6fff00419b58d54c622fae814c0553.png

如果要根据用户的权限渲染列表

import {
  HomeOutlined,
  PictureOutlined,
  UnorderedListOutlined
} from '@ant-design/icons';
const menus = [
  {
    title: '首页',
    path: '/home',
    icon: HomeOutlined,
    permission: 1 // 所有用户可见
  },
  {
    title: '轮播图管理',
    path: '/banner',
    icon: PictureOutlined,
    permission: 2, // 管理员可见
    children: [
      {
        title: '轮播图列表',
        path: '/banner/list',
        icon: HomeOutlined,
        permission: 2, // 管理员可见
      },
    ]
  },
  {
    title: '分类管理',
    path: '/category',
    icon: UnorderedListOutlined,
    permission: 2, // 管理员可见
    children: [
      {
        title: '分类列表',
        path: '/category/list',
        icon: HomeOutlined,
        permission: 2, // 管理员可见
      },
    ]
  },
  {
    title: '产品管理',
    path: '/product',
    icon: UnorderedListOutlined,
    permission: 2, // 管理员可见
    children: [
      {
        title: '产品列表',
        path: '/product/list',
        icon: HomeOutlined,
        permission: 2, // 管理员可见
      },
    ]
  },
  {
    title: '用户管理',
    path: '/users',
    icon: UnorderedListOutlined,
    permission: 2, // 管理员可见
    children: [
      {
        title: '用户列表',
        path: '/users/list',
        icon: HomeOutlined,
        permission: 2, // 管理员可见
      },
      {
        title: '用户权限',
        path: '/users/permission',
        icon: HomeOutlined,
        permission: 3, // 超级管理员可见
      },
    ]
  },
  {
    title: '购物车管理',
    path: '/cart',
    icon: UnorderedListOutlined,
    permission: 2, // 管理员可见
    children: [
      {
        title: '购物车列表',
        path: '/cart/list',
        icon: HomeOutlined,
        permission: 2, // 管理员可见
      },
    ]
  },
  {
    title: '订单管理',
    path: '/order',
    icon: UnorderedListOutlined,
    permission: 2, // 管理员可见
    children: [
      {
        title: '订单列表',
        path: '/order/list',
        icon: HomeOutlined,
        permission: 2, // 管理员可见
      },
    ]
  },
  {
    title: '地址管理',
    path: '/address',
    icon: UnorderedListOutlined,
    permission: 2, // 管理员可见
    children: [
      {
        title: '地址列表',
        path: '/address/list',
        icon: HomeOutlined,
        permission: 2, // 管理员可见
      },
    ]
  }
]

export default menus;
  • 本地存储一个字段 roleType, 值为1
    9c7536f1df22b8566a598583f165403e.png

渲染列表时判断 权限
7f3368f6772d97eb8fff1ba8e0b0f559.png

修改本地的roleType,刷新查看效果

为了代码的严谨性，需要在index.jsx中设置权限
e4956b995247b124a72aa2af0292858c.png

未登录显示登陆页面

假设本地有一个字段 isLogin 为 true
src/App.js
db9776502bb4d8208669cd017d200d7e.png
2ce319ed4f6067fa530743cb55085770.png

封装头部组件

941f75753cf1bd92761a2dc94e642ba7.png
97604734d5c6101b087ea8a6d224cf03.png
3e5df9b3220c27f4ffa3f4965b95ea8f.png
8214481bda645d92bb6bf71520e8e6d9.png

疑问？ 这段代码是什么意思
5b2133ac699d74e510f5fe6ec38f290c.png

var a = <div>11111</div>  jsx

babel-loader  解析

import React from 'react'
var a = React.cleateElement('div', null, '11111')

5245a37087654341971550590465d025.png

  • 修改小图标的位置

审查元素得知 content组件信息如下
2e81bc2cae4cbcad2bbb0d4b3b6e4062.png
524b752e72fbc73c444f853df8529a20.png

  • 引入下拉菜单 - 点击 组件
    9ecab313d49ef401b87d35c3efc4b24e.png
    3d5379d3723f30ad7513289cdaba21d3.png
    cffd505411cb823eb0bd9ab795bf0e2e.png
    7c66dbe0262e246736088b4efc919113.png
    39bf75ad64fc250384d4edcefe7b4c01.png

  • 改造右上角
    175ed4d60f88a7c8023437600761eee1.png
    064ae20e5b573d4047aa2acf8745cc81.png
    f9f9c2d913246900843c6dba0c7a3ef1.png

  • 实现退出功能
    106b0321780ae4624f97178bac139004.png
    139d8b5bf3bb8d8dffc5af7605d7f130.png
    347a45046ff100f980d74933b8d3eb6e.png

登陆页面

设计登陆的页面一
e2027e2c9aa8a390f197fa0e5a7b24a4.png
4c1185d908c648dc70a9b41c27fcde9c.png
13e3b055ab67b5a6003f797c72c4b84c.png
82f743a6d9142bc14b9c09773d24872d.png

设计登陆页面二
https://developer.aliyun.com/mirror/npm/package/react-particles-js
https://blog.csdn.net/csdn_yudong/article/details/53128570
https://github.com/VincentGarreau/particles.js

cnpm i react-particles-js -S

ec01a20b52442bb50d7c46ad2a553166.png
8e7f28f68c0fc4c0a3ea7955bf0bfae0.png
7c723ce2545ff52108273ad750e6624c.png
d889335ebcec292f497bdbe335bebc64.png

  • 设计登陆的表单
    17b9679d7df694d4ecc6f2a9a7109b7e.png
    22d5d3e47fb823c0d4f6e94bef510bc1.png

25f85954680045f4a893b2d86203207b.png
e3d65eebaf47699e795fdb79a82bc563.png
a6511ec5eab737eeeb88eb1f8f0e7f3f.png

  • 流程
    0b303ca19b5109bd0bf3dc8c07a2d138.png
    606328f81d308a73342edc61ae22e379.png
    8b4b4f862a9307d124bb15e626c42157.png

后端管理员账户的设置

在 node接口的中设计管理员账户集合
day01/admin-app/sql/col/admins.js
a6f670f137e635e248d972ab385b0f10.png

routes/users.js 设计登陆接口
7ce17ce6b347a421fb0964d3c813a311.png

router.post('/login', function(req, res, next) {
  const { username, password } = req.body
  sql.find(Admin, { username, password }).then(data => {
    if (data.length === 0) {
      res.send({
        code: '10010',
        message: '用户名和密码不匹配'
      })
    } else {
      // 用户名和密码正确
      // 判断当前用户的登陆状态，如果是已登录 给前端传递标识，如果是未登录状态，也传递信息
      if (data[0].loginState === 1) { // 已登录
        // 前端可以提醒用户 该账户已经登陆，是不是继续登陆（单点登陆）
        res.send({
          code: '10101',
          message: '已有账户登陆了',
          data: {
            username,
            roleName: data[0].roleName,
            roleType: data[0].roleType
          }
        })
      } else {
        // 未登录 ---- 更新状态为已登录
        sql.update(Admin, { username, password }, { $set: { loginState: 1}}).then(() => {
          // 更新完毕，前端发送内容
          res.send({
            code: '11111',
            message: '登陆成功',
            data: {
              username,
              roleName: data[0].roleName,
              roleType: data[0].roleType
            }
          })
        })
      }
    }
  })
});

生成接口文档
修改端口号
64b76dd7b97cb57c65e65605fe6fe732.png
248fc949df988d622f2e392bb717ae79.png
2751e738323e47f170fff02fd02145a9.png

运行命令生成接口文档 ---- 不生成在 apidoc,生成到 admindoc

apidoc -i routes/ -o public/admindoc
5ba78b0b26c4d6ae79b791a76befc4a4.png

前端调用接口

cnpm i axios -S
5231d0d576d92a1cd1d48c73f26484f1.png
85e6588284dbcd4ecf065f85695e1827.png

  • 设置信息不匹配提示信息
    ceb7d28db027a21552adb1db08653373.png
    94bc5ab567f95aa17f295e8a8e6c7d29.png
    f72fb03f31071df723cfa4269471688a.png
    1747ab72245eac76b10561226eb5b123.png

已登录的提示
54234507f70c7e470eb104462ea13030.png

 

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

posted @ 2020-04-16 09:51  haccer  阅读(2299)  评论(0)    收藏  举报