laravel-react实战打造企业级高并发分布式电商小程序（三）--权限管理的前端

laravel-react实战打造企业级高并发分布式电商小程序（三）–权限管理的前端

react

我们前端使用react来做，我们这个后台基于antd pro。使用npm创建它。

npm create umi

选择 ant-design-pro

---

Select the boilerplate type (Use arrow keys)
❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
app - Create project with a simple boilerplate, support typescript.
block - Create a umi block.
library - Create a library with umi.
plugin - Create a umi plugin.

---

Ant Design Pro 脚手架将会自动安装。

本地开发

启动完成后会自动打开浏览器访问 http://localhost:8000，你看到下面的页面就代表成功了。

用户管理

添加用户管理的增删改查，因为后台都需要一个表格展示数据，所以把表格抽出来一个组件。

在 src/components/下面添加Table文件夹，在src/components/Table/下面创建CommonTable.jsx.

src/components/Table/CommonTable.jsx文件内容如下：

import {
   
    Table } from 'antd';
import {
   
    PureComponent } from 'react';

class CommonTable extends PureComponent{
   
   
  constructor(props) {
   
   
    super(props);
  }

  render() {
   
   
    const {
   
   
      datas: {
   
    data, page },
      loading,
      columns,
      size,
    } = this.props;
    const paginationProps = {
   
   
      showSizeChanger: true,
      showQuickJumper: true,
      ...page
    }
    const scroll = {
   
   
      x:true,
      y:500,
      scrollToFirstRowOnChange:true
    }
    console.log(data)
    return <Table
            dataSource={
   
   data}
            columns={
   
   columns}
            pagination={
   
   paginationProps}
            bordered
            loading={
   
   loading}
            scroll={
   
   scroll}
            rowKey="id"
            size={
   
   size}
            />;
  }
}
export default CommonTable;

接下来在src/pages/下面新建auth文件夹和src/pages/auth/users.js。

import {
   
    PageHeaderWrapper } from '@ant-design/pro-layout';
import CommonTable from '@/components/Table/CommonTable'
import {
   
    connect } from 'dva';
import {
   
    Popconfirm, Button, message, Card, Row, Col, Form, Modal, Input, Select } from 'antd'

const ButtonGroup = Button.Group;
const {
   
    Option } = Select;

const CreateForm = Form.create()(props => {
   
   
  const {
   
    modalVisible, form, handleAdd, handleModalVisible, handleChange, roleList: {
   
    data } } = props

  const okHandle = () => {
   
   
    form.validateFields((err, fieldsValue) => {
   
   
      if (err) return
      form.resetFields()
      handleAdd(fieldsValue)
    })
  }
  return (
    <Modal
      destroyOnClose
      title="创建用户"
      visible={
   
   modalVisible}
      onOk={
   
   okHandle}
      onCancel={
   
   () => handleModalVisible()}
    >
      <Form.Item labelCol={
   
   {
   
    span: 6 }} wrapperCol={
   
   {
   
    span: 15 }} label="用户名称">
        {
   
   form.getFieldDecorator('name', {
   
   
          rules: [{
   
    required: true, message: '请输入用户名称' }],
        })(<Input placeholder="请输入用户名称" />)}
      </Form.Item>
      <Form.Item labelCol={
   
   {
   
    span: 6 }} wrapperCol={
   
   {
   
    span: 15 }} label="用户邮箱">
        {
   
   form.getFieldDecorator('email', {
   
   
          rules: [{
   
    required: true, message: '请输入用户邮箱' }],
        })(<Input placeholder="请输入用户邮箱" />)}
      </Form.Item>
      <Form.Item labelCol={
   
   {
   
    span: 6 }} wrapperCol={
   
   {
   
    span: 15 }} label="用户密码">
        {
   
   form.getFieldDecorator('password', {
   
   
          rules: [{
   
    required: true, message: '请输入用户密码' }],
        })(<Input placeholder="请输入用户密码" />)}
      </Form.Item>
      <Form.Item labelCol={
   
   {
   
    span: 6 }} wrapperCol={
   
   {
   
    span: 15 }} label="角色">
        {
   
   form.getFieldDecorator('roleIds', {
   
   
          rules: [{
   
    required: true, message: '请选择角色' }],
        })(<Select
          mode="multiple"
          style={
   
   {
   
    width: '100%' }}
          placeholder="请选择角色"
          // defaultValue={['a10', 'c12']}
          onChange={
   
   handleChange}
        >
          {
   
   data.map(t => <Option key={
   
   t.id} value={
   
   t.id} >{
   
   t.name}</Option>)}
        </Select>)}
      </Form.Item>
    </Modal>
  )
})

const EditForm = Form.create()(props => {
   
   
  const {
   
    editModalVisible, form, handleSave, handleModalVisible, values: {
   
    name, email, roleIds }, handleChange, roleList: {
   
    data } } = props

  const okHandle = () => {
   
   
    form.validateFields((err, fieldsValue) => {
   
   
      if (err) return
      form.resetFields()
      handleSave(fieldsValue)
    })
  }
  console.log('默认值', name, email, roleIds)
  return (
    <Modal
      destroyOnClose
      title="修改用户"
      visible={
   
   editModalVisible}
      onOk={
   
   okHandle}
      onCancel={
   
   () => handleModalVisible()}
    >
      <Form.Item labelCol={
   
   {
   
    span: 6 }} wrapperCol={
   
   {
   
    span: 15 }} label="用户名称">
        {
   
   form.getFieldDecorator('name', {
   
   
          rules: [{
   
    required: true, message: '请输入用户名称' }],
          initialValue: name,
        })(<Input placeholder="请输入用户名称" />)}
      </Form.Item>
      <Form.Item labelCol={
   
   {
   
    span: 6 }} wrapperCol={
   
   {
   
    span: 15 }} label="用户邮箱">
        {
   
   form.getFieldDecorator('email', {
   
   
          rules: [{
   
    required: true, message: '请输入用户邮箱' }],
          initialValue: email,
        })(<Input placeholder="请输入用户邮箱" />)}
      </Form.Item>
      <Form.Item labelCol={
   
   {
   
    span: 6 }} wrapperCol={
   
   {
   
    span: 15 }} label="角色">
        {
   
   form.getFieldDecorator('roleIds', {
   
   
          rules: [{
   
    required: true, message: '请选择角色' }],
          initialValue: roleIds,
        })(<Select
          mode="multiple"
          style={
   
   {
   
    width: '100%' }}
          placeholder="请选择角色"
          // defaultValue={['a10', 'c12']}
          onChange={
   
   handleChange}
        >
          {
   
   data.map(t => <Option key={
   
   t.id} value={
   
   t.id} >{
   
   t.name}</Option>)}
        </Select>)}
      </Form.Item>
    </Modal>
  )
})

@connect(({
   
    userList, loading, roleModel }) => ({
   
   
  userList,
  loading: loading.models.userList,
  roleModel,
  roleLoading: loading.models.roleModel,
}))
export default class Users extends React.PureComponent {
   
   
  constructor(props) {
   
   
    super(props)
    this.state = {
   
   
      pageIndex: 1,
      pageSize: 10,
      modalVisible: false,
      editModalVisible: false,
      values: {
   
   },
    }
  }

  componentDidMount() {
   
   
    this.handleSearch(this.state.pageIndex, this.state.pageSize)
  }

  // 获取列
  getColumns = () => [
      {
   
   
        title: '用户名',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
        width: 200,
      },
      {
   
   
        title: '邮箱',
        dataIndex: 'email',
        key: 'email',
        align: 'center',
        width: 300,
      },
      {
   
   
        title: '创建时间',
        dataIndex: 'created_at',
        key: 'created_at',
        align: 'center',
        width: 600,
      },
      {
   
   
        title: '操作',
        render: (text, record) => (
              <ButtonGroup>
              <Button type="primary" onClick={
   
   () => this.edit(record)}>修改</Button>
              <Popconfirm title="确定要删除嘛?" onConfirm={
   
   () => this.handleDelete(record.id)}>
                <Button type=