用react写一个后台管理的完整项目

好的，我可以为你提供一个简单的后台管理的完整项目，使用React作为前端框架，结合Ant Design组件库，使用Mock.js模拟数据，实现增删改查等基本操作。

项目结构：

├── public
│   ├── index.html
│   └── favicon.ico
├── src
│   ├── assets // 静态资源文件夹
│   ├── components // 公用组件
│   ├── pages // 页面组件
│   ├── router // 路由配置
│   ├── services // 接口请求
│   ├── utils // 工具函数
│   ├── App.js
│   ├── index.js
│   └── index.css
├── package.json
├── README.md
└── .gitignore

首先安装必要的依赖：

npm install antd axios react-router-dom react-scripts --save
npm install mockjs --save-dev

接下来我们来实现一个简单的用户管理界面。

在src/pages下新建UserList.js，代码如下：

import React, { useState, useEffect } from 'react';
import { Table, Modal, message } from 'antd';
import { getUsers, deleteUser } from '../services/user'; // 引入接口请求

const UserList = () => {
  const [users, setUsers] = useState([]); // 用户列表数据
  const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的用户id
  const [loading, setLoading] = useState(false); // 表格加载状态

  useEffect(() => {
    // 获取用户列表
    setLoading(true);
    getUsers().then(res => {
      setUsers(res.data);
      setLoading(false);
    }).catch(err => {
      message.error('获取用户列表失败');
      setLoading(false);
    });
  }, []);

  // 删除用户
  const handleDelete = () => {
    Modal.confirm({
      title: '提示',
      content: '确定要删除选中的用户吗？',
      onOk: () => {
        setLoading(true);
        deleteUser(selectedRowKeys).then(res => {
          setSelectedRowKeys([]);
          message.success('删除成功');
          setLoading(false);
          // 重新获取用户列表
          getUsers().then(res => {
            setUsers(res.data);
          }).catch(err => {
            message.error('获取用户列表失败');
          });
        }).catch(err => {
          message.error('删除失败');
          setLoading(false);
        });
      },
    });
  };

  // 表格列配置
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '用户名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone',
    },
  ];

  // 表格行选择配置
  const rowSelection = {
    selectedRowKeys,
    onChange: (selectedRowKeys) => {
      setSelectedRowKeys(selectedRowKeys);
    },
  };

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <button onClick={handleDelete} disabled={!selectedRowKeys.length}>删除</button>
      </div>
      <Table columns={columns} dataSource={users} rowKey="id" rowSelection={rowSelection} loading={loading} />
    </div>
  );
};

export default UserList;

在src/services下新建user.js，代码如下：

import axios from 'axios';

// 获取用户列表
export function getUsers() {
  return axios.get('/api/users');
}

// 删除用户
export function deleteUser(ids) {
  return axios.delete('/api/users', { data: { ids } });
}

在src/router下新建index.js，配置路由：

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import UserList from '../pages/UserList';

const Router = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={UserList} />
    </Switch>
  </BrowserRouter>
);

export default Router;

最后在src/App.js中渲染路由组件：

import React from 'react';
import Router from './router';

function App() {
  return (
    <div className="App">
      <Router />
    </div>
  );
}

export default App;

然后在src/index.js中引入App组件并渲染到页面上：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

最后，在src/utils下新建mock.js模拟数据，代码如下：

import Mock from 'mockjs';

// 用户列表数据
const users = Mock.mock({
  'list|10': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-60': 1,
    'phone': /^1[3456789]\d{9}$/
  }]
}).list;

// 获取用户列表
Mock.mock('/api/users', 'get', () => {
  return {
    code: 200,
    data: users,
  };
});

// 删除用户
Mock.mock('/api/users', 'delete', (options) => {
  const ids = JSON.parse(options.body).ids;
  users = users.filter(user => !ids.includes(user.id));
  return {
    code: 200,
    msg: '删除成功',
  };
});

这个项目就完成了，你可以通过运行npm start启动项目进行测试。