使用 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, // 不在菜单中显示,为了在用户详情页面可以打开对应的菜单
},
],
},
]
权限配置
设置代理,只需在 package.json
中更改 proxy
字段,所有为匹配请求都会被重定向到该路径
{
"proxy": "https://api.com/v1/admin"
}
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
)
页面筛选条件放到 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)