umi+dva+antd后台管理系统(2)---初始化界面布局，实现路由嵌套

1. 拉框架设置布局

我选了antd的响应式布局
在这里插入图片描述
效果如下：

我换了导航，如图：

下一步我要实现路由嵌套导航功能，umi自动生成路由，在此之前我要把配置改成哈希路由，不用浏览器历史记录路由。还是在.umirc里：
用哈希路由
写之前，我又改了一下样式：
PC端：

我没有合适的Logo图片。。。将就用吧。。。
手机端：

pad端：
iPad

2. 约定式路由失效

奇怪，我在pages里写的页面没有自动生成路由，又仔细看了下官网，发现：
在这里插入图片描述
那也就是说，我的约定式路由变成了配置式路由，改了配置如下：

// ref: https://umijs.org/config/
export default {
  treeShaking: true,
  history:'hash',
  plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html
    ['umi-plugin-react', {
      antd: true,
      dva: true,
      dynamicImport: false,
      title: 'React-MangoStore',
      dll: false,
    }],
  ],
}

3. 路由嵌套

我直接用了全局layouts写了整体布局，下一步就是往content里填内容，约定式路由也配置好了，直接在pages里写组件导出，再在布局里用router指向我想显示的对应页面就好啦，pages里的创建我就不举例了，这里下我是怎么用router指向页面的把：

import router from 'umi/router';
···
    	<Menu.Item
            key="1"
            onClick={() => {
              router.push('/');
            }}
          >
            nav 1
          </Menu.Item>

页面之间有交流了，那么继续完善界面布局，身为一个管理系统，缺管理员登录是不能忍的，缺列表也是不能忍的，决定先写登录，毕竟逻辑从头开始嘛~

4. 登录按钮、界面初始化布局

哇，之前犯过的错我又一次犯了，自定义组件引入的时候起名一定要起大写！！！
是的，我自定义了一个登陆按钮填进了Header，：

在这里插入图片描述
效果图：

5. 设置了一个抽屉登陆界面

因为我没找到antd的模态框，看看效果：
在这里插入图片描述

此处用了一个按钮模块，引入之前的按钮的子按钮，这是antd官方的注册界面，准备改成登录界面。这是管理系统，只需要一个登陆就行啦，不需要注册 ~
修改好了：

但是响应式中，手机端出现问题，等明天我再看看把。

虽然我没有强调模块化，但是实际上我都在分块写组件再导入，因为这样对下次、下下次写项目真的非常友好，而且也能让代码可读性更强，不会让一个页面代码一大堆，有这个有那个！每天还有别的事要做，写的有点慢，勿嫌弃~

咱们后台做响应式的不多，主要是俺想多玩一下antd的各种功能，我就没细调，但尽力好看点把~ 还是pc端为主把…

还有一个问题，界面的跳转用router.push报了错，换了router.replace，毕竟我们的界面没换，现在的版面是这样的，准备开始写管理员登录逻辑了。

 		<Menu.Item
            key="1"
            onClick={() => {
              router.replace('/');
            }}
          >

如图：
在这里插入图片描述

来源：CSDN

作者：Cheryl Wang

链接：https://blog.csdn.net/qq_38188709/article/details/103872914

标签

后台管理系统

路由