介绍

使用 react，mobx 和 antd 构建的管理后台，使用 mobx 代替了 redux。 希望开发一个简单可以快速开发，专注于业务的管理后台。

运行

cd react-admin
# or npm install
yarn

yarn start # or npm run start
yarn build # or npm run build

配置

菜单

在 config 目录下

const menu = [
  {
    name: '用户',
    path: '/user',
    icon: 'user',
    permissions: ['admin'], // 权限
    childrend: [
      {
        name: '列表',
        path: '/user/list',
        permissions: ['admin'],
      },
      {
        name: '用户',
        path: '/user/detail/:id',
        permissions: ['admin'],
        hide: true, // 不在菜单中显示，为了在用户详情页面可以打开对应的菜单
      },
    ],
  },
]

权限配置

API

代理

设置代理,只需在 package.json 中更改 proxy 字段,所有为匹配请求都会被重定向到该路径

{
  "proxy": "https://api.com/v1/admin"
}

request 使用

import { request } from '../util/request'

// get
const query = {
  page: 1,
  pageSize: 10,
}
request('/user', 'get', query) // GET /user?page=1&pageSize=10

// post
const body = {
  name: 'xiaoming',
  passowrd: '66666',
}
request('/user', 'post', body)

// header
const header = {
  version: '0.1.0',
}
request('/user', 'get', query, header)

全局设置 header,在 src/util/request.js 可以设置

路由

在 src/config/route.js 中配置

import { lazy } from 'react'

// import WithAuth from '../component/WithAuth'

const Home = lazy(() => import('../views/Home'))
const Login = lazy(() => import('../views/Login'))
const UserList = lazy(() => import('../views/User/List'))

const routes = [
  {
    path: '/home',
    component: Home,
  },
  {
    path: '/login',
    component: Login,
  },
  {
    path: '/user/list',
    component: UserList,
  },
  {
    path: '/user/:id/detail',
    component: UserList,
  },
  {
    path: '/profile',
    component: UserList,
    permissions: ['permissions'],
  },
]

export default routes

配置

在 src/config/app.js 中可以配置一些基本信息

export default = {
  // 应用名称
  name: '管理后台',
  footer: {
    // 备案号
    IPC: '管理后台',
  },
}

登陆/登出

在 src/view/Login/index.js 中设置如下代码：

import { setLoginUser, setToken } from '../../util'
// 登陆接口
import { login } from '../../api'

const res = await login()
const { token, user } = res
// user 必须有 name 字段
setLoginUser(user)
setToken(token)

其中 setLoginUser 是为了在 header 中显示登陆用户的名称(user.name)

Query

页面筛选条件放到 URL 的 query 中 获取 URL 中的 page 参数

import { getUrlPage, setUrlPage } from 'src/util'
setUrlPage(1) // ?page=1
const page = getUrlPage() // page=1

获取 URL 中到其他参数

import { getUrlQuery, setUrlQuery } from 'src/util'
const query = {
  status: 1,
  name: 'xiaoming',
}
setUrlQuery(query) // ?status=1&name=xiaoming

const { status, name, sex: 1 } = getUrlQuery()
// status = 1
// name = xiaoming
// sex = 1

验证

验证使用 joi 如何新增一个验证 在 validation 中新增一个 login.js,

import Joi from '@hapi/joi'
import validate from '../util/validate'

const schema = Joi.object().keys({
  user: Joi.string().alphanum().min(3).max(30).required().label('用户名不合法'),
  password: Joi.string().min(8).required().label('密码不合法'),
})

export default function validateLogin(auth) {
  // validate 会验证，如果有错误信息会通过 message 提示 label 到内容
  return validate(auth, schema)
}

使用

import validateLogin from '../../validation/login'
const { user, password } = this.state
const data = {
  user,
  password,
}
// validationLogin 会返回 error 和 data, 可以接收并判断错误
const { error } = validateLogin(data)
if (error) return
const params = {
  data,
}
const res = await login(params)