React（二）——Admin主页/Orders页面/Category页面-EW帮帮网

文章目录

项目地址
一、侧边栏
- 1.1 具体实现
二、Header
- 2.1 实现
三、Orders页面
四、Category页面
- 4.1 左侧商品添加栏目
- 4.2 右侧商品上传栏
五、Sellers页面
六、Payment Request 页面（百万数据加载）
七、Deactive Sellers/Seller Request页面

项目地址

教程作者：
教程地址：

代码仓库地址：

所用到的框架和插件：

dbt 
airflow

一、侧边栏

在这里插入图片描述
实现功能：
1.根据权限动态加载sideBar，内容和图标
2. 高亮当前路由的侧边栏

项目地址：SideBar

1.1 具体实现

src/layout/Sidebar.jsx：通过useSate获取所有导航，并且通过useEffect加载getNav方法，通该方法获取admin的菜单

const Sidebar = () => {

  //1.获取所有的导航栏
  const [allNav, setAllNav] = useState([]);
  useEffect(() => {
    const navs = getNav("admin");
    setAllNav(navs);
  }, []);
  console.log(allNav);

在src/navigation/index.js 里创建getNav方法

import { allNav } from "./allNav";

export const getNav = (role) => {
  const finalNavs = [];
  for (let i = 0; i < allNav.length; i++) {
    if (role === allNav[i].role) {
      finalNavs.push(allNav[i]);
    }
  }
  return finalNavs;
};

src/navigation/allNav.js: 创建所有的侧边栏的内容
点击侧边栏高亮显示

//1.获取当前的路由地址
const { pathname } = useLocation();

//2.添加样式
{allNav.map((n, i) => (
  <li key={i}>
    <Link
      to={n.path} // 路由地址
      className={`${
        pathname === n.path //当前路由和循环出来的路由相同的化，添加高亮，不用则正常
          ? "bg-blue-600 shadow-indigo-500/50 text-white duration-500"
          : "text-[#030811] font-bold duration-200 "
      } px-[12px] py-[9px] rounded-sm flex justify-start items-center gap-[12px] hover:pl-4 transition-all w-full mb-1 `}
    >
      <span>{n.icon}</span>
      <span>{n.title}</span>
    </Link>
  </li>
))}

二、Header

在这里插入图片描述

响应式按钮：

2.1 实现

src/layout/MainLayout.jsx：添加显示和隐藏SideBar的useState存储状态，并且添加样式

//存储sidebar状态
const [showSidebar, setShowSidebar] = useState(false);

//给两个组件里传递初始值和设置方法
 <Header showSidebar={showSidebar} setShowSidebar={setShowSidebar} />
 <SideBar showSidebar={showSidebar} setShowSidebar={setShowSidebar} />

src/layout/Header.jsx ：小屏幕下出现三个按钮，用来显示和隐藏侧边栏

<div className="fixed top-0 left-0 w-full py-5 px-2 lg:px-7 z-40">
  <div className="ml-0 lg:ml-[260px] rounded-md h-[65px] flex justify-between items-center justify-center bg-[#b1addf] px-5 transition-all">
    <div
      onClick={() => setShowSidebar(!showSidebar)}
      className="w-[35px] flex lg:hidden"
    >
      <span>
        <FaList />
      </span>
    </div>
  </div>
</div>

src/layout/Sidebar.jsx：添加sidebar样式，显示和隐藏功能

<div
  onClick={() => setShowSidebar(false)}
  className={`flex duration-200 ${
    !showSidebar ? "invisible" : "visible"
  } w-screen h-screen bg-[#8cbce780] top-0 left-0 z-10`}
></div>
<div
  className={`w-[260px] fixed bg-[#e6e7fb] z-50 top-0 h-screen shadow-[0_0_15px_0_rgb(34_41_47_/_5%)] transition-all ${
    showSidebar ? "left-0" : "-left-[260px] lg:left-0"
  } `}
>