React后台实战（react+antd）

一、项目概述

1.github地址:https://github.com/141110126/react-admin

二、项目

1.创建项目：

npx create-react-app react-admin

2.引入antd

（1）安装

cnpm i --save antd

（2）对antd进行按需引入：

安装插件：

cnpm i --save react-app-rewired customize-cra babel-plugin-import

根目录中创建config-overrides.js:

const {override, fixBabelImports} = require('customize-cra');

module.exports = override(
    fixBabelImports('import', { // 根据import进行打包（使用babel-plugin-import)
        libraryName: 'antd', // 针对antd实现按需打包
        libraryDirectory: 'es',
        style: 'css' //自动打包关联的样式
    })
)

修改package.json中的script配置：（用react-app-rewired替换react-scripts，react-app-rewired是react-scripts的扩展，会自动引用config-overrides.js）

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

改为

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

注意：修改配置后需要重新启动 npm start 。

（3）使用less和less-loader定制主题

安装：

cnpm i --save less less-loader

修改config-overrides.js:

const {override, fixBabelImports, addLessLoader} = require('customize-cra');

module.exports = override(
    fixBabelImports('import', { // 根据import进行打包（使用babel-plugin-import)
        libraryName: 'antd', // 针对antd实现按需打包
        libraryDirectory: 'es',
        style: true //自动打包关联的样式
    }),
    // 定制主题
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {
            '@primary-color': '#1DA57A' // 修改全局主色
        }
    })
)

 

3.创建路由：

（1)安装：

cnpm i --save react-router-dom

(2)在src/App.js中设置路由：

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

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

export default App;

4.创建登录页面，并对其进行校验，提交

（1）用到antd的icon组件包，要安装@ant-design/icons

npm install --save @ant-design/icons

创建src/pages/login.jsx:

import React, { Component } from 'react'
import './login.less'
import logo from './images/logo.png'
import { Form, Input, Icon, Button} from 'antd'

class Login extends Component {
    // 自定义校验
    validateMessage = {
        required: '请输入${name}',
        types:{
            string: '${name}不是字符串'
        },
        string:{
            range: '${name}长度应大于4小于12个字符'
        },
        pattern: {
            mismatch:'${name}只能包含小写字母、大写字母和下划线'
        }
    }
    // 用户名和密码设置的规则一样
    commonRules = [{required: true,type: 'string',min:4,max:12,pattern:new RegExp(/^[A-Za-z0-9_]+$/)}];
    render() {
        return ( 
            <div className="login">
                <header className="login-header">
                    <img src={logo} alt="logo" />
                    <h1>后台管理系统（React）</h1>
                </header>
                <section className="login-content">
                    <h2>登录</h2>
                    <Form className="login-form" validateMessages={this.validateMessage}>
                        <Form.Item
                            name="用户名"
                            rules={this.commonRules}>
                            <Input 
                                type="text"
                                placrholder="用户名" />
                        </Form.Item>
                        <Form.Item 
                            name="密码"
                            rules={this.commonRules}>
                            <Input
                                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,0.25)' }} />}
                                type="password"
                                placrholder="密码" />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
                        </Form.Item>
                    </Form>
                </section>
            </div>
        )
    }
}
export default Login