React+Ant Design 4.4.1登录及路由导航

最新推荐文章于 2024-04-30 09:20:11 发布
最新推荐文章于 2024-04-30 09:20:11 发布
阅读量525 收藏 1
点赞数
分类专栏： Ant Design React 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duansamve/article/details/113575366
版权

package.json：

{
  "name": "antd-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.2.1",
    "@babel/core": "7.9.0",
    "@svgr/webpack": "4.3.3",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@typescript-eslint/eslint-plugin": "^2.10.0",
    "@typescript-eslint/parser": "^2.10.0",
    "antd": "^4.7.0",
    "axios": "^0.19.2",
    "babel-eslint": "10.1.0",
    "babel-jest": "^24.9.0",
    "babel-loader": "8.1.0",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-named-asset-import": "^0.3.6",
    "babel-preset-react-app": "^9.1.2",
    "camelcase": "^5.3.1",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "css-loader": "3.4.2",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
    "echarts": "^4.9.0",
    "echarts-for-react": "^2.0.16",
    "eslint": "^6.6.0",
    "eslint-config-react-app": "^5.2.1",
    "eslint-loader": "3.0.3",
    "eslint-plugin-flowtype": "4.6.0",
    "eslint-plugin-import": "2.20.1",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.19.0",
    "eslint-plugin-react-hooks": "^1.6.1",
    "file-loader": "4.3.0",
    "fs-extra": "^8.1.0",
    "html-webpack-plugin": "4.0.0-beta.11",
    "identity-obj-proxy": "3.0.0",
    "jest": "24.9.0",
    "jest-environment-jsdom-fourteen": "1.0.1",
    "jest-resolve": "24.9.0",
    "jest-watch-typeahead": "0.4.2",
    "mini-css-extract-plugin": "0.9.0",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "pnp-webpack-plugin": "1.6.4",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "8.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.13.1",
    "react-app-polyfill": "^1.0.6",
    "react-dev-utils": "^10.2.1",
    "react-dom": "^16.13.1",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.0",
    "react-transition-group": "^4.4.1",
    "redux": "^4.0.5",
    "resolve": "1.15.0",
    "resolve-url-loader": "3.1.1",
    "sass-loader": "8.0.2",
    "semver": "6.3.0",
    "style-loader": "0.23.1",
    "terser-webpack-plugin": "2.3.5",
    "ts-pnp": "1.1.6",
    "url-loader": "2.3.0",
    "webpack": "4.42.0",
    "webpack-dev-server": "3.10.3",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "4.3.1"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "proxy": "http://localhost:9999",
  "homepage": ".",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
  },
  "devDependencies": {
    "less": "^3.12.2",
    "less-loader": "^6.2.0"
  }
}

App.js：

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Login from './pages/login/login';
import Admin from './pages/admin/admin';

class App extends React.Component {
  render() {
    return (<BrowserRouter>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/" component={Admin} />
      </Switch>
    </BrowserRouter>)
  }
}

export default App;

login.jsx：

import React, { Component } from 'react'
import './login.less'
import { Form, Input, Button, notification } from 'antd';
import { UserOutlined, KeyOutlined } from '@ant-design/icons';
import $http from '../../ajax/http.js'

const layout = {
    labelCol: {
        span: 0,
    },
    wrapperCol: {
        span: 24,
    }
};

const tailLayout = {
    wrapperCol: { offset: 0, span: 24 },
};

export default class Login extends Component {
    // 表单相关
    formRef = React.createRef(); // 定义一个表单

    onFinish = values => {
        $http({
          method: "POST",
          url: "/article/check_login_status/",
          data: JSON.stringify(values)
        })
        .then(res => {
            localStorage['token'] = 1;
            this.props.history.replace("/");
        })
        .catch(err => {
            notification["error"]({
                message: '错误提示',
                description:
                  '用户名或密码错误',
            });
        });
    }

    onFinishFailed = errorInfo => {
        notification["error"]({
            message: '错误提示',
            description:
              '用户名或密码错误',
        });
    }

    render() {
        return (
            <div className="login">
                <header className="login-header">
                    {/* <img src={logo} alt="logo"/>
                    <h1>React App管理系统</h1> */}
                </header>

                <section className="login-content">
                    <h2>React App管理系统</h2>
                    <div>
                        <Form {...layout} ref={this.formRef} name="control-ref" preserve={false} onFinish={this.onFinish} onFinishFailed={this.onFinishFailed}>
                            <Form.Item label="账号" style={{ marginBottom: 0 }}>
                                <Form.Item
                                    name="account"
                                    style={{ display: 'inline-block', width: 'calc(100%)', marginRight: 15 }}
                                    rules={[
                                        {
                                            required: true,
                                            message: "账号不能为空"
                                        },
                                        {
                                            pattern: /^[a-zA-Z0-9_()（）\u4e00-\u9fa5]{1,32}$/,
                                            message: "账号为1至32位汉字、字母、数字、下划线或中英文括号"
                                        },
                                    ]}
                                >
                                    <Input
                                        placeholder="请输入账号"
                                        prefix={<UserOutlined className="site-form-item-icon" />}
                                    />
                                </Form.Item>
                            </Form.Item>
                            <Form.Item label="密码" style={{ marginBottom: 0 }}>
                                <Form.Item
                                    name="password"
                                    style={{ display: 'inline-block', width: 'calc(100%)' }}
                                    rules={[
                                        {
                                            required: true,
                                            message: "密码不能为空"
                                        },
                                        {
                                            pattern: /^[a-zA-Z0-9_()（）\u4e00-\u9fa5]{1,32}$/,
                                            message: "密码为1至32位汉字、字母、数字、下划线或中英文括号"
                                        },
                                    ]}
                                >
                                    <Input.Password 
                                        placeholder="请输入密码"
                                        prefix={<KeyOutlined className="site-form-item-icon" />} 
                                    />
                                </Form.Item>
                            </Form.Item>
                            <Form.Item {...tailLayout}>
                                <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </section>
            </div>
        )
    }
}

admin.jsx（后台框架页）：

import React, { Component } from 'react'
import { Layout } from 'antd'
import { Route, Redirect, Switch } from 'react-router-dom'
import LeftNav from '../../components/left-nav/'
import HeaderCom from '../../components/header/'
import HomeCom from '../home/home'
import MonitorCom from '../home/monitor.jsx'
import WorkbenchCom from '../home/workbench.jsx'
import LineCom from '../charts/line'
import BarCom from '../charts/bar'
import PieCom from '../charts/pie'
import FormCom from '../data-input/form'
import TableCom from '../data-show/table'
import TabsCom from '../data-show/tabs'
import CardCom from '../data-show/card'
import TimelineCom from '../data-show/timeline'
import DescriptionsCom from '../data-show/descriptions'
import EmptyCom from '../data-show/empty'
import NotificationCom from '../feedback/notification'
import ModalCom from '../feedback/modal'
import ResultCom from '../feedback/result'
import Com403 from '../abnormal/403'
import Com404 from '../abnormal/404'
import Com500 from '../abnormal/500'
import BaseForm from '../form/base-form'
import ModalForm from '../form/modal-form'
import StepForm from '../form/step-form'
import AdvancedForm from '../form/advanced-form'
import SearchList from '../list/search-list'
import QueryTable from '../list/query-table'
import StandardList from '../list/standard-list'
import CardList from '../list/card-list'
import TreeList from '../list/tree-list'
import baseDetail from '../detail/base-detail'
import seniorDetail from '../detail/senior-detail'
import Administrator from '../webdisk/administrator'
import Log from '../webdisk/log'
import Myshare from '../webdisk/myshare'
import Usbkey from '../webdisk/usbkey'
import Baseinfo from '../firmstor/baseinfo'
import FileRecovery from '../firmstor/file-recovery'
import './admin.less'

const { Content, Sider } = Layout;

export default class Admin extends Component {
    state = {
        collapsed: false
    };

    // 控制菜单左右缩放
    onCollapse = collapsed => {
        this.setState({ collapsed });
    };

    render() {
        if (Number(localStorage['token']) === 0) {
            // 自动跳转到登陆(在render()中)
            return <Redirect to='/login' />;
        }

        // const loginOut = e => {
        //     e.preventDefault();
        //     localStorage['token'] = 0;
        //     this.props.history.replace("/login"); // this.props.history.replace("/login")写到render之外会有问题，此时组件需要用withRouter包装
        // }

        return (
            <Layout style={{ height: '100%' }}>
                <HeaderCom/>
                <Layout style={{ height: '100%' }}>
                    {/*collapsible、collapsed、onCollapse：控制整个菜单的左右收缩*/}
                    <Sider width={200} style={{ background: '#000000' }} collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
                        <LeftNav />
                    </Sider>
                    <Layout className="site-layout" style={{ paddingTop: 64 }}>
                        <Content
                            className="main-content"
                            style={{overflowX: 'hidden'}}
                        >
                            <Switch>
                                <Route path="/home" component={HomeCom}></Route>
                                <Route path="/monitor" component={MonitorCom}></Route>
                                <Route path="/workbench" component={WorkbenchCom}></Route>
                                <Route path="/line" component={LineCom}></Route>
                                <Route path="/bar" component={BarCom}></Route>
                                <Route path="/pie" component={PieCom}></Route>
                                <Route path="/form" component={FormCom}></Route>
                                <Route path="/table" component={TableCom}></Route>
                                <Route path="/tabs" component={TabsCom}></Route>
                                <Route path="/card" component={CardCom}></Route>
                                <Route path="/timeline" component={TimelineCom}></Route>
                                <Route path="/descriptions" component={DescriptionsCom}></Route>
                                <Route path="/modal1" component={ModalCom}></Route>
                                <Route path="/empty" component={EmptyCom}></Route>
                                <Route path="/result" component={ResultCom}></Route>
                                <Route path="/notification" component={NotificationCom}></Route>
                                <Route path="/403" component={Com403}></Route>
                                <Route path="/404" component={Com404}></Route>
                                <Route path="/500" component={Com500}></Route>
                                <Route path="/base-detail" component={baseDetail}></Route>
                                <Route path="/senior-detail" component={seniorDetail}></Route>
                                <Route path="/administrator" component={Administrator}></Route>
                                <Route path="/log" component={Log}></Route>
                                <Route path="/myshare" component={Myshare}></Route>
                                <Route path="/usbkey" component={Usbkey}></Route>
                                <Route path="/baseinfo" component={Baseinfo}></Route>
                                <Route path="/file-recovery" component={FileRecovery}></Route>
                                <Route path="/base-form" component={BaseForm}></Route>
                                <Route path="/modal-form" component={ModalForm}></Route>
                                <Route path="/step-form" component={StepForm}></Route>
                                <Route path="/advanced-form" component={AdvancedForm}></Route>
                                <Route path="/search-list" component={SearchList}></Route>
                                <Route path="/query-table" component={QueryTable}></Route>
                                <Route path="/standard-list" component={StandardList}></Route>
                                <Route path="/card-list" component={CardList}></Route>
                                <Route path="/tree-list" component={TreeList}></Route>
                                <Redirect to="/home" />
                            </Switch>
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        )
    }
}

home.jsx（首页）：

import React, { Component } from 'react'
import { Table, Pagination, Card, Modal, Button, Form, Input, InputNumber, Select, Checkbox, Radio, notification } from 'antd'
import { PlusOutlined } from '@ant-design/icons';
import ReactEcharts from 'echarts-for-react'
import axios from 'axios'

const { Option } = Select;
const { TextArea } = Input;

const layout = {
    labelCol: {
        span: 5,
    },
    wrapperCol: {
        span: 19,
    }
};

export default class Home extends Component {
    state = {
        chartData: [
            ['2019-10-10', 200],
            ['2019-10-11', 400],
            ['2019-10-12', 650],
            ['2019-10-13', 500],
            ['2019-10-14', 250],
            ['2019-10-15', 300],
            ['2019-10-16', 450],
            ['2019-10-17', 300],
            ['2019-10-18', 200]
        ],
        selectedRowKeys: [], // 表格选择项Keys
        selectedRows: [], // 表格选择项Rows
        tableData: [],
        total: 0, // for Pagination
        columns: [
            {
                title: 'ID',
                dataIndex: 'id',
                width: 30,
            },
            {
                title: '标题',
                dataIndex: 'title',
                width: 500,
            },
            {
                title: '内容',
                dataIndex: 'content'
            },
        ],
        addModalVisible: false
    };

    getSalesVolumeChartData = (chartData) => {
        return {
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                top: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '30%']
            },
            visualMap: {
                type: 'piecewise',
                show: false,
                dimension: 0,
                seriesIndex: 0,
                pieces: [{
                    gt: 1,
                    lt: 3,
                    color: 'rgba(0, 180, 0, 0.5)'
                }, {
                    gt: 5,
                    lt: 7,
                    color: 'rgba(0, 180, 0, 0.5)'
                }]
            },
            series: [
                {
                    type: 'line',
                    smooth: 0.6,
                    symbol: 'none',
                    lineStyle: {
                        color: 'green',
                        width: 5
                    },
                    markLine: {
                        symbol: ['none', 'none'],
                        label: { show: false },
                        data: [
                            { xAxis: 1 },
                            { xAxis: 3 },
                            { xAxis: 5 },
                            { xAxis: 7 }
                        ]
                    },
                    areaStyle: {},
                    data: chartData
                }
            ]
        };
    }

    onTableSelectChange = (selectedRowKeys, selectedRows) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        console.log('selectedRows changed: ', selectedRows);
        this.setState({ selectedRowKeys, selectedRows });
    };

    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };

    /**
     * 表格
     */

    // 获取表格数据
    getData(pageNumber, pageSize) {
        axios.get(`/article/all/?pageSize=${pageSize}&pageNumber=${pageNumber}&sortName=id&sortOrder=desc&_=1595230808893`).then((resp) => {
            let ajaxData = [];
            for (let i = 0; i < resp.data.rows.length; i++) {
                ajaxData.push({
                    key: resp.data.rows[i].id,
                    id: resp.data.rows[i].id,
                    title: resp.data.rows[i].title,
                    content: resp.data.rows[i].content,
                });
            }

            this.setState({
                tableData: ajaxData,
                total: resp.data.total
            })

        }, (err) => {
            console.log(err);
        });
    }

    onChange = (pageNumber, pageSize) => {
        this.pageNum = pageNumber;
        this.getData(pageNumber, pageSize);
    };

    /**
     * 添加modal
     */

    // for modal
    showAddModal = () => {
        this.setState({
            addModalVisible: true
        })
    }

    addModalHandleOk = e => {
        this.addModalFormRef.current.validateFields()
            .then(values => {
                this.addModalFormRef.current.resetFields();
                this.setState({
                    addModalVisible: false
                });
            })
            .catch(info => {
                console.log('Validate Failed:', info);
            });
    }

    addModalHandCancel = e => {
        this.addModalFormRef.current.resetFields();
        this.setState({
            addModalVisible: false
        })
    }

    // 表单相关
    addModalFormRef = React.createRef(); // 定义一个表单

    /**
     * 钩子函数
     */

    componentDidMount() {
        this.getData(1, 5);

        setInterval(() => {
            let chartData1 = Math.ceil(Math.random() * 100);
            let chartData2 = Math.ceil(Math.random() * 100);
            let chartData3 = Math.ceil(Math.random() * 100);
            let chartData4 = Math.ceil(Math.random() * 100);
            let chartData5 = Math.ceil(Math.random() * 100);
            let chartData6 = Math.ceil(Math.random() * 100);
            let chartData7 = Math.ceil(Math.random() * 100);
            let chartData8 = Math.ceil(Math.random() * 100);
            let chartData9 = Math.ceil(Math.random() * 100);
            let chartData = [
                ['2019-10-10', chartData1],
                ['2019-10-11', chartData2],
                ['2019-10-12', chartData3],
                ['2019-10-13', chartData4],
                ['2019-10-14', chartData5],
                ['2019-10-15', chartData6],
                ['2019-10-16', chartData7],
                ['2019-10-17', chartData8],
                ['2019-10-18', chartData9]
            ];

            this.setState({ chartData });
        }, 1000)
    }

    render() {
        // 控制表格选择
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: this.onTableSelectChange
        };

        return (<>
            <Card
                title="Smoothed Line Chart"
            >
                <ReactEcharts option={this.getSalesVolumeChartData(this.state.chartData)}></ReactEcharts>
            </Card>

            <div style={{ height: 15 }}></div>

            <Card title="Default size card" extra={<Button type="primary" ghost size="small" icon={<PlusOutlined />} onClick={this.showAddModal}>添加</Button>} style={{ width: '100%' }}>
                <Table
                    onRow={record => {
                        return {
                            onClick: event => { console.log(record) }, // 点击行
                            onDoubleClick: event => { },
                            onContextMenu: event => { },
                            onMouseEnter: event => { }, // 鼠标移入行
                            onMouseLeave: event => { },
                        };
                    }}
                    rowSelection={rowSelection}
                    columns={this.state.columns}
                    dataSource={this.state.tableData}
                    pagination={{
                        current: this.pageNum,
                        total: this.state.total,
                        pageSizeOptions: [5, 10, 20, 50, 100],
                        defaultPageSize: 5,
                        showSizeChanger: true,
                        showQuickJumper: true,
                        showTotal: (total, range) => `共 ${total} 条`,
                        onChange: this.onChange
                    }}
                    bordered
                >
                </Table>

                <Modal
                    title="创建"
                    visible={this.state.addModalVisible}
                    width={660}
                    onOk={this.addModalHandleOk}
                    onCancel={this.addModalHandCancel}
                    okText="确认"
                    cancelText="取消"
                    maskClosable={false}
                    destroyOnClose={true}
                >
                    <Form {...layout} ref={this.addModalFormRef} name="control-ref" preserve={false}>
                        <Form.Item label="账号" style={{ marginBottom: 0 }}>
                            <Form.Item
                                name="account"
                                style={{ display: 'inline-block', width: 'calc(80% - 8px)', marginRight: 15 }}
                                rules={[
                                    {
                                        required: true,
                                        message: "账号不能为空"
                                    },
                                    {
                                        pattern: /^[a-zA-Z0-9_()（）\u4e00-\u9fa5]{1,32}$/,
                                        message: "账号为1至32位汉字、字母、数字、下划线或中英文括号"
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                style={{ display: 'inline-block', width: 'calc(20% - 8px)' }}
                            >
                                <Checkbox>USBKEY</Checkbox>
                            </Form.Item>
                        </Form.Item>
                        <Form.Item label="姓名" style={{ marginBottom: 0 }}>
                            <Form.Item
                                name="name"
                                style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
                                rules={[
                                    {
                                        required: true,
                                        message: "姓名不能为空"
                                    },
                                    {
                                        pattern: /^[a-zA-Z0-9_()（）\u4e00-\u9fa5]{1,32}$/,
                                        message: "姓名为1至32位汉字、字母、数字、下划线或中英文括号"
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Form.Item>
                        <Form.Item label="个人空间配额">
                            <Form.Item
                                name="space"
                                noStyle
                                rules={[{
                                    required: true,
                                    message: "个人空间配额不能为空"
                                }, {
                                    type: 'number',
                                    min: 1,
                                    max: 100,
                                    message: "个人空间配额为1-100之间整数"
                                }
                                ]}
                            >
                                <InputNumber style={{ width: 160, marginRight: 15 }} placeholder="1-100之间整数" />
                            </Form.Item>
                        G
                </Form.Item>
                        <Form.Item label="私密空间配额">
                            <Form.Item
                                name="private"
                                noStyle
                                rules={[
                                    {
                                        required: true,
                                        message: "私密空间配额不能为空"
                                    }, {
                                        type: 'number',
                                        min: 1,
                                        max: 100,
                                        message: "私密空间配额为1-100之间整数"
                                    }
                                ]}
                            >
                                <InputNumber style={{ width: 160, marginRight: 15 }} placeholder="1-100之间整数" />
                            </Form.Item>
                        G
                </Form.Item>
                        <Form.Item label="证书级别" style={{ marginBottom: 0 }}>
                            <Form.Item
                                name="level"
                                style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
                                rules={[
                                    {
                                        required: true,
                                        message: "证书级别不能为空"
                                    },
                                ]}
                            >
                                <Select
                                    placeholder="请选择证书级别"
                                    allowClear
                                >
                                    <Option value="1">一级</Option>
                                    <Option value="2">二级</Option>
                                </Select>
                            </Form.Item>
                        </Form.Item>
                        <Form.Item label="存储服务器" style={{ marginBottom: 0 }}>
                            <Form.Item
                                name="server"
                                style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
                                rules={[
                                    {
                                        required: true,
                                        message: "存储服务器不能为空"
                                    },
                                ]}
                            >
                                <Select
                                    placeholder="请选择存储服务器"
                                    allowClear
                                >
                                    <Option value="1">服务器一</Option>
                                    <Option value="2">服务器二</Option>
                                </Select>
                            </Form.Item>
                        </Form.Item>
                        <Form.Item
                            name="share"
                            label="是否允许中心共享"
                            rules={[
                                {
                                    required: true,
                                    message: "中心共享不能为空"
                                },
                            ]}
                        >
                            <Radio.Group name="radiogroup">
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label="描述" style={{ marginBottom: 0 }}>
                            <Form.Item
                                name="describe"
                                style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
                                rules={[
                                    {
                                        pattern: /^[a-zA-Z0-9_()（），。,.\u4e00-\u9fa5]{0,128}$/,
                                        message: '描述只能为汉字、字母、数字、下划线或中英文逗号、句号和括号'
                                    }
                                ]}
                            >
                                <TextArea rows={4} />
                            </Form.Item>
                        </Form.Item>
                    </Form>
                </Modal>
            </Card>
        </>
        )
    }
}

 

duansamve
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
探索React-antd-admin：一个高效、可定制化的后台管理框架
gitblog_00070的博客
03-31 737
探索React-antd-admin：一个高效、可定制化的后台管理框架 项目地址:https://gitcode.com/chenjun1127/react-antd-admin 在构建企业级后台管理系统时，开发者往往需要面对繁杂的功能实现和UI设计。为了减轻这一负担，让我们一起走进react-antd-admin——一个基于React和Ant Design的开箱即用的后台管理模板。 项目简介 ...
react-antd-landing-page:使用React和Ant Design制作的登录页面
05-28
React Ant设计登陆页面 我尝试使用React和Ant Design重新创建引导登录页面。 您可以在查看现场演示。 原始设计属于 。
基于React和Antdesign的登录
weixin_34159110的博客
01-22 1285
不洗碗工作室-wangpeng ### 脚手架选择 选择不洗碗工作室的react脚手架 git clone https://github.com/ouxu/NEUQer-FE-Kit.git 复制代码打开其中的React-Route4在终端输入 npm install 复制代码会根据package.json安装必要的依赖 再安装Ａnt design npm install antd --sav...
使用React和Ant Design实现登录页面
momi的专栏
04-30 854
使用React和Ant Design创建一个登录页面是一个很好的实践，可以让你的界面既美观又功能齐全。
react-antd-demo:React演示
05-17
一个react后台管理框架 github上有很多优秀的框架，作者也花费了很大的精力去整理，这里感谢作者@yezihaohao 依赖模块 利用react官方推荐 create-react-app创建 react react-router-dom antd axios react-redux 根据antd官方推荐，使用 react-app-rewired对create-react-app进行配置。 如果有必要，您也可以 npm run eject暴露webpack配置文件 我自己根据自己的逻辑习惯修改了框架结构包括webpack配置，router，redux和进一步优化 按需加载优化 没有按需加载前是这样的 可以看到页面加载了一个bundle.js文件，文件大小达到1.9M，代码量是26万行，虽然是后台管理，但是对于这样把所有js全部打包到一个js里面，页面初次加载出现长时间等待的情况，是完全
react-admin：基于React + ant-design的用于后台管理项目的脚手架
02-05
React管理员 React + Ant Design脚手架，专用作后台管理系统，反复在项目中实践和优化，功能齐全，细节完善，并提供丰富的示例代码，可以直接上手和开发。 技术选型 react + redux + react-router + ant-design +不可变+获取 redux-action + redux-logger 类名+ lodash ass webpack2 + react-hot-loader 埃斯林特 实现的功能 热加载 ES6 / 7 动态路由 动作日志打印 配置生成模拟接口 本地节点服务器 ESLint 萨斯 后记 获取数据 更多特性 除了主流的技术选型
Ant-design 源码分析之数据展示（四）Card
qq_37588125的博客
11-09 2234
Ant-design 源码分析之数据展示（三）Badge 2021SC@SDUSC 一、组件结构 1、ant代码结构 2、组件结构 ant中Badge的index.tsx中引入了Meta和Grid。 二、antd组件调用关系 1、index.tsx 导入相应模块以及相应的ICON图标 import * as React from 'react'; import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; import
react+ant design实现Table的增、删、改的示例代码
01-19
本人小白一名，第一次学习react ,该资料为本人原创，采用的是react+ant design的Tabled的一个小demo,暂时只实现了增加，删除单行，多行删除有Bug,查看详情，呕心沥血耗时一周完成，禁止抄袭，转载请先留言， ...
React+webpack+redux+ant design+axios+less全家桶后台管理框架.zip
最新发布
06-12
React+webpack+redux+ant design+axios+less 这个组合是现代前端开发中的常见技术栈，用于构建高效、可维护的后台管理框架。以下是对这些技术及其在项目中的应用的详细说明： **React.js** React是Facebook开发的一...
react-antd-admin：用React和Ant Design构建的一个通用管理后台
02-04
React通用后台 目标是快速构建一个可用的后台界面，可以先看下 / ，用户名/密码：guest / guest。友情提示：这个DEMO还是有点大的，加载可能稍慢，注意网速。。。 也可以查看截图，包含一些主要特性的演示。 如果对React或Ant设计研究，但又不知如何进入手的话，也可以参考下这个项目。 需求背景 其实总结下就一句话：简化补充人员的前端开发。。。 虽然俺是个java开发，但总是难免要做一些前端的东西。诸如各种内部系统，各种操作后台，总要有个界面给人用的吧。如果是自己用的话当然命令行就可以将就下了。。。 内部系统么，公司也不会很容易认识，不会有专业的前端来搞。对准人员自己搞搞，能
React-Router-domV6 + AntdV5 导航菜单实现路由跳转
Ccc67ol的博客
12-13 3452
因为是主学后端，为了做项目学点前端。下面的代码都是，主要是，分享一下学习收获和。不足之处还请大佬多指点。附注：本文章多是参考其他文章的代码案例进行实现，主要自己的东西还是解决bug的心得。
react-antd-admin:React和Ant Design搭建后台
04-27
react-antd-admin
react-admin:基于antdesign的管理后台项目
04-22
蚂蚁设计专业版 该项目已使用初始化。 遵循是如何使用的快速指南。 环境准备 安装node_modules ： npm install 或者 yarn 提供的脚本 Ant Design Pro提供了一些有用的脚本，可帮助您快速启动和构建Web项目，代码样式检查和测试。 package.json提供的脚本。 修改或添加其他脚本是安全的： 开始项目 npm start 建立项目 npm run build 检查代码样式 npm run lint 您还可以使用脚本自动修复某些皮棉错误： npm run lint:fix 测试码 npm test 更多的 您可以在我们的上查看完整文档。 并欢迎在我们的任何反馈。
项目文档说明：react + Ant Design 的 blog-react-admin
weixin_33724059的博客
11-23 230
前言 此 blog-react-admin 项目是基于 蚂蚁金服开源的 ant design pro 之上，用 react 全家桶 + Ant Design 的进行再次开发的，项目已经开源，项目地址在 github 上。 效果预览 preview.pro.ant.design/user/login 1. 后台管理 1.1 已经实现功能 登录 文章管理（支持 MarkDown 语法） 标...
07 React+Ant Design学习（一）——快速构建一个主页
X北辰北的博客
10-19 9996
      通过对React.js一周左右的学习后，就想着自己写一个主页，在这一周的学习中虽然对react组件化开发的思想有了较深的理解，但自己还是很迫切的希望能动手结合Ant Design写出来一个主页。因为当初学react的目的就是为了学习怎样使用Ant Design，也不知道出于这样的目的去学习react是不是正确的做法。       第一次看见Ant Design时就觉得这东西好玩，有点...
React中使用Ant Design 以Menu导航菜单形式展示Tree树形结构
热门推荐
roamingcode的博客
08-15 2万+
引言 最近要做一个组织机构树的树级菜单展示，UI框架使用的是Ant Design,这不正好可以使用Tree组件，如图示 奈何领导说太丑，指明要换成类似Menu形式的树形菜单，如图示 于是乎，有两种修改方案 先考虑改造Tree控件，这其中不仅需要修改css,还要修改Tree的内部结构 不使用Tree控件直接使用Menu导航菜单，在其上添加所需要的功能 这里采用第二种方案，首先...
react+AntDesign 搭建并配置router路由
weixin_43609391的博客
02-26 1374
一、创建项目 // 这一步可以详细的看AntDesign的文档 https://ant.design/docs/react/use-with-create-react-app-cn 1、yarn create react-app ‘项目名称’ // 创建项目 2、cd ‘项目名称’ // 进入创建好的项目文件 3、yarn start // 启动项目 二、router路由配置 1、安装路由 cnpm install react-router-dom --save 2、在src目录下建立router文件
React导航栏效果（antd+react router4.0）
zfan520的博客
12-14 1万+
1、演示效果 最上面的部分为导航插件。 2、具体代码与介绍 2.1 Reactjs首次加载与路由页面    index.js首次加载 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import RouterIndex from './routers/inde
antd vue侧边导航菜单根据路由地址展开
u012914342的博客
03-31 1758
主要是利用defaultOpenKeys和selectedKeys两个API template部分： <a-menu theme="dark" mode="inline" :defaultOpenKeys="openKeys" :selectedKeys="selectedKeys" :style="{ height: '100%', borderRight: 0, minHeight: 'calc(100vh - 64px)' }" &g...
React+Ant Design设置左侧菜单导航路由的显示与隐藏（与权限无关）
06-10
在 React+Ant Design 中，实现左侧菜单导航路由的显示与隐藏可以通过以下步骤来实现： 1. 在菜单组件中添加一个 `collapsed` 属性，用于控制菜单的显示与隐藏。 ```jsx {/* 菜单项 */} ``` 2. 在菜单组件的 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值