做网站图标的软件,用js做网站阅读量,Wordpress网格插件,淘宝客网站主机文章目录 项目地址一、侧边栏1.1 具体实现 二、Header2.1 实现 三、Orders页面3.1 分页和搜索3.2 点击箭头显示商家所有订单3.3 页码按钮以及分页 四、Category页面4.1 左侧商品添加栏目4.2 右侧商品上传栏 五、Sellers页面六、Payment Request 页面#xff08;百万数据加载百万数据加载七、Deactive Sellers/Seller Request页面7.1 Deactive7.2 Seller7.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}/spanspan{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 classNamefixed top-0 left-0 w-full py-5 px-2 lg:px-7 z-40div classNameml-0 lg:ml-[260px] rounded-md h-[65px] flex justify-between items-center justify-center bg-[#b1addf] px-5 transition-alldivonClick{() setShowSidebar(!showSidebar)}classNamew-[35px] flex lg:hiddenspanFaList //span/div/div
/divsrc/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} }三、Orders页面 项目地址 Orders页码按钮添加 前端完成
3.1 分页和搜索
实现5页10页20页分页
3.2 点击箭头显示商家所有订单
实现 点击下箭头实现商家Id下的所有订单订单状态显示 3.3 页码按钮以及分页 四、Category页面
原始网页 响应式网页 -
4.1 左侧商品添加栏目
分析左侧添加栏只是一个小的Orders页面所以可以将Orders的主结构复制
4.2 右侧商品上传栏 五、Sellers页面
和Orders页面基本一样
六、Payment Request 页面百万数据加载
使用React Window 对超大数据加载
七、Deactive Sellers/Seller Request页面
7.1 Deactive 7.2 Seller 7.3 点击绿色小眼睛可以看到seller的详情页
