react中后台管理界面

时间 2019-12-20

标签 react 后台管理界面栏目 React 繁體版

原文原文链接

dva-boot-admin 是一个用React开发的一个企业级中后台管理UI,包含经常使用的业务，组件，及数据流转方案，先后端分离的开发方式，按业务划分的目录结构，能够大大提升咱们的开发效率

下面是总体的介绍，感兴趣的同窗能够去官网详加了解。javascript

功能

封装了dva框架的数据流转，简单的请求能够不用在model和service中定义
封装了数据模模拟，能够独立于后台开发前台功能
封装了分页请求，简化并规范了分页逻辑
封装了fetch请求，适应与后台多种交互请求, body参数 parameter参数 path参数，动态请求头，请求先后拦截
扩展了antd写了许多实用的UI，经过一个配置生成便可生成，后台CRUD三件套
按业务模块划分的目录结构，尽可能作到最小耦合
一些经常使用的小部件用法
许多精心设计的页面及交互场景
dva-boot脚手架封装的功能
全局异常处理，全局请求拦截，公共配置提取

目录结构

.
├── public                   # 不参与编译的资源文件
├── src                      # 主程序目录
│   ├── index.js             # 程序启动和渲染入口文件
│   ├── components           # 全局公共组件
│   ├── layouts              # 页面结构组件
│   │   ├── BasicLayout      # 基本布局
│   │   └── OtherLayout      # 布局组件根据具体功能调整，在路由配置中引用
│   ├── routes               # 动态路由目录（每一个功能一个文件夹的MVC结构）
│   │   ├── index.js         # 路由配置文件
│   │   ├── Home             # 功能模块
│   │   │   ├── index.js     # 路由配置文件
│   │   │   ├── assets       # 单独属于这个模块的静态资源文件
│   │   │   ├── components   # 页面组件
│   │   │   ├── model        # dva model
│   │   │   ├── service      # dva service
│   │   │   └── routes **    # 子路由(目录结构与父级相同)
│   │   └── Login            # 功能模块
│   │       ├── index.js     # 路由配置文件
│   │       ├── assets       # 单独属于这个模块的静态资源文件
│   │       ├── components   # 页面组件
│   │       ├── model        # dva model
│   │       ├── service      # dva service
│   │       └── routes **    # 子路由(目录结构与父级相同)
│   ├── utils                # 工具类
│   └── assets               # 资源文件
│           ├── fonts        # 字体 & 字体图标
│           ├── images       # 图片
│           └── styles       # 全局样式

经常使用方法

modelEnhance

modelEnhance是对dva model层的简单包装函数，有时候咱们只是想要简单的fetch一下，从服务端获取数据进行展现，以前可能要专门在model中写一些effects和reducers,在service中定义请求函数，若是用modelEnhance包装一下的话能够简写成下面的形式java

// src/routes/UserInfo/model/index.js

import modelEnhance from '@/utils/modelEnhance';

// 就是普通的dva model传入modelEnhance便可，不用定义其它变量
export default modelEnhance({
  namespace: 'userInfo',
});

// src/routes/UserInfo/components/index.js

// 在组件中直接发出一个类型为`@request`的action,
// 结果会存入userInfo对应的state中，使用的key为`valueField`的值
this.props.dispatch({
  type: 'userInfo/@request',
  payload: {
    url: 'http://httpbin.org/get',
    valueField: 'httpbin',
    method: 'GET'
  }
});

// 同时请求两个
this.props.dispatch({
  type: 'userInfo/@request',
  payload: [{
    url: 'http://httpbin.org/get',
    valueField: 'httpbin',
    method: 'GET'
  }, {
    url: 'http://httpbin.org/post',
    valueField: 'httpbin'
  }]
});

// 结合分页助手使用，查询第1页10条数据
this.props.dispatch({
  type: 'userInfo/@request',
  payload: {
    valueField: 'pageData',
    url: '/api/userInfo/getList',
    pageInfo: pageData.startPage(1, 10),
  }
});

exception

全局异常处理，咱们能够在src/config.js的exceptiion中处理通用异常，这里共实就是dva的onError方法的入口，咱们通常处理如登陆超时，用户没有权限，或另种请求异常等，建议你们不一样的异常能够单独包装成一个异常类进行分类处理，这样更容易维护以及调试。git

config

工程的配置文件github

fetch mock

模拟服务端响应数据，经常用在先后端分离的项目中，咱们在开发新功能的时候，先后端是不一样步的，这时咱们就会建立一些数据原型，协商好后这时后端就能够开始开发，而咱们能够继续使用模拟数据，只有当后端完成这个接口并测试经过后，两者才会被整合。这以后若是后端由于某些缘由服务不可用时，咱们也会很方便的切换回模拟数据，这样不会由于后端的问题而影响后续的开发。npm

要新建一些模拟数据只要在__mocks__文件夹中，建立一个文件，并在文件夹中的index.js中进行声明，一些例子能够直接在文件夹下面找到。后端

全部的模拟数据是在开发环境中运行的，当您打包成生产环境的包时，会自动屏蔽全部模拟数据接口。api

// 例子: /src/__mocks__/userInfo.js
/**
 * 模拟请求数据
 * @param {FetchMock} fetchMock 当现有条件不知足时，可使用fetchMock来进行扩展
 * @param {number} delay 增长延迟时间 ms
 * @param {function} mock 使用mock生成数据，例如：

   mock({
     'string|1-10': '★' // 生成最少1颗，最多10颗星字符
   })
   // {'string': '★★★★★★'} 
 */
export default ({fetchMock, delay, mock}) => {
  // 若是现有扩展不知足需求，能够直接使用fetchMock方法
  // fetchMock.mock(/httpbin.org\/post/, {/* response */}, {/* options */});

  return {
    // 通常用法
    'GET /api/getUserInfo': {
      name: 'jonn'
    },
    // 省略 method, 模拟真实请求延迟效果
    '/api/getUsers': delay([
      { name: 'jonn' },
      { name: 'weiq' },
    ]),
    // 表格带分页
    '/api/userInfo/getList': delay(mock({
      'pageNum|+1': 1,                      // 递增长1
      'pageSize': 10,
      'size': 10,
      'total': 500,
      'totalPages': 50,
      'list|10': [{
        'name': '@cname',                   // 中文名称
        'age|1-100': 100,                   // 100之内随机整数
        'birthday': '@date("yyyy-MM-dd")',  // 日期
        'city': '@city(true)',              // 中国城市
        'phone': /^1[385][1-9]\d{8}/        // 手机号
      }],
    })),
    // 表格带分页, 写成函数形式可使用请求参数，
    // 更真实的模拟后端数据处理业务
    '/api/userInfo/getList1': (options) => {
      const body = JSON.parse(options.body);
      const pageNum = body.pageNum;
      const idbase = (pageNum - 1) * 10 + 1;
      return toSuccess(mock({
        'pageNum': pageNum,
        'pageSize': 10,
        'size': 10,
        'total': 100,
        'totalPages': 10,
        'list|10': [{
          'id|+1': idbase,
          'name': '@cname',                   // 中文名称
          'age|1-100': 100,                   // 100之内随机整数
          'birthday': '@date("yyyy-MM-dd")',  // 日期
          'city': '@city(true)',              // 中国城市
          'phone': /^1[385][1-9]\d{8}/        // 手机号
        }],
      }), 400)
    }
  } 
}

page helper (简单分页)

在作后台系统的时候，作的最多的可能就是对表格的增、删、改、查，这时咱们的页面通常是这样的，上面是对表格条件的检索框，中间是咱们的数据表格，表格下面是分页组件，还会有新增，修改时用到表单组件bash

拿对表格数据进行检索这个场景来讲，在搜索框（可能有多个）输入条件，点击搜索，检索到结果（可能很是多），咱们会点击下面的分页组件进行翻页，翻页时咱们就得带着以前的检索条件，咱们会在发送请求前手动合并这些条件，并计算下一页的页数等antd

而PageHelper分页助手就是为了简化咱们的代码量的，如使用PageHelper.create()这个方法会为咱们自动生成分页对象框架

// model.js

state: {
  pageData: PageHelper.create()
}

这时咱们能够在组件中使用这个对象很方便的进行分页，及检索，而且支持链式写法，全部条件会自动进行合并，如：

// components

const {pageData} = this.props;
// 查询第1页，每页10条，而且name为jonn的数据
pageData.startPage(1, 10).filter({name: 'jonn'}).filter(...).sortBy(...);

// 查询下一页，而且会带着以前的查询条件
pageData.nextPage();

咱们还能够结合modelEnhance来使用分页，更多用法会在例子中进行说明。

cmn-utils

脚手架使用了cmn-utils作为工具库，这里面提供了请求、存储、事件等许多实用方法

开发&运行

$ git clone https://github.com/LANIF-UI/dva-boot.git
$ cd dva-boot
$ yarn
$ yarn start
// 或使用npm
$ npm install
$ npm start