(一) 好大夫后台管理系统项目搭建

后台管理系统搭建

使用技术:

vite + react + antd + reactRouteV6

构建思路：

  vite构建项目（速度很快）：第三方依赖包需要单独下载；构建了项目框架后，直接使用antd提供的布局，将宽度vw和高度vh按铺满全屏；

  配置路由：最外面的main.tsx 配置 登陆路由 和 主菜单路由； 然后在App.tsx 下 实现嵌套路由（v6不需要使用useLocation 获取pathname父级路径拼接成完整子路由地址)；
 注意路由菜单与url联动:
  刷新页面时，1. 路由菜单需要根据url内容进行默认展示；<Menu defaultSelectedKeys defaultOpenKeys/>配置; 2. 配置面包屑与路由联动

主要代码：

main.tsx:

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<Router>
  <ConfigProvider locale={zhCN}>
    <Routes>
      <Route path="/" element={<Login />} />
      <Route path="/admin/*" element={<App />} />
    </Routes>
  </ConfigProvider>
</Router>

)

App.tsx(嵌套路由):

<MyLayout> 
    <Routes>
      <Route path="dashBroad" element={<DashBroad />} />
      <Route path="vipUser" element={<VipUser />} />
      <Route path="medicine/Categories" element={<MedicineCategories />} />
      <Route path="medicine/Info" element={<MedicineInfo />} />
      <Route path="articles/Categories" element={<ArticleCategories />} />
      <Route path="articles/Info" element={<ArticleList />} />
    </Routes>
  </MyLayout>

我学习参考项目链接