React（二）——Admin主页/Orders页面/Category页面

文章目录

项目地址
一、侧边栏
- 1.1 具体实现
二、Header
- 2.1 实现
三、Orders页面
- 3.1 分页和搜索
- 3.2 点击箭头显示商家所有订单
- 3.3 页码按钮以及分页
四、Category页面
- 4.1 左侧商品添加栏目
- 4.2 右侧商品上传栏
五、Sellers页面
六、Payment Request 页面（百万数据加载）
七、Deactive Sellers/Seller Request页面
- 7.1 Deactive
- 7.2 Seller
- 7.3 点击绿色小眼睛可以看到seller的详情页

项目地址

教程作者：
教程地址：

代码仓库地址：

所用到的框架和插件：

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}><Linkto={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"><divonClick={() => setShowSidebar(!showSidebar)}className="w-[35px] flex lg:hidden"><span><FaList /></span></div></div>
</div>

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

<divonClick={() => setShowSidebar(false)}className={`flex duration-200 ${!showSidebar ? "invisible" : "visible"} w-screen h-screen bg-[#8cbce780] top-0 left-0 z-10`}
></div>
<divclassName={`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"} `}
>