react初学(三)结合antd搭建管理后台

结合上篇文章开始学习使用antd

1.在routes文件夹中创建Index.js文件写一个路由配置文件

exact是路由严格匹配

根据下面引入目录创建pageNotFound文件路径创建一个展示404的页面

import Login from "../pages/js/Login";
import List from "../pages/js/admin/List";
import Edit from "../pages/js/admin/Edit";
import pageNotFound from "../pages/js/pageNotFound";


export const mainRoutes = [
    {
        path:'/login',
        component:Login
    },{
        path:'/404',
        component:pageNotFound
    }
]

export const adminRoutes = [
    {
        path:'/admin/list',
        component:List,
        title:'商品管理',
        exact:true,
        isShow:true,
    },
    {
        path:'/admin/edit/:id?',
        component:Edit,
        title:'商品编辑',
        exact:true,
        isShow:false,
    },
]

2.在index.js文件添加路由配置

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {HashRouter as Router,Switch,Route,Redirect} from 'react-router-dom'
import {mainRoutes} from './routes'
ReactDOM.render(
  
      
         }>
           //当输入为/admin开始的路径跳转到App组件
        {
          mainRoutes.map(route => {
            return 
          })
        }
           //这里循环出login/404页面的路由
         //没有匹配路径时重定向到404页面
      
    ,
  document.getElementById('root')
);

serviceWorker.unregister();

3.在App.js中

import React from 'react';
import {Switch,Route,Redirect} from 'react-router-dom'
import './App.css';
import {adminRoutes} from './routes'


function App() {
  return (
    
      {
        adminRoutes.map(route=>{
          return {
                return  
              }
          }/>
        })   
      }
      
        //当为admin的时候重定向到adminRoutes数组中的第一个页面
      
    
  );
}

export default App;

以上基本路由配合完成，开始使用antd

在index.js中引入

import 'antd/dist/antd.css';

改造login.js文件

import React from 'react'
import {Form,Input,Button,Card} from 'antd'
import '../css/login.css'
function Login(props) {
    const layout ={
        labelCol:{span:4},
        wrapperCol:{span:18}
    }
    const tailLayout = {
        wrapperCol: { offset: 4, span: 18 },
    };
    const onFinish = values => {
        console.log('success:', values);
    };
    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    return (
        
            

                
                     
                
                
                    
                
                
                    登录
                
            
          
    )
}

export default Login

login.css中

.login-form{
    width:480px;
    position: relative;
    left:50%;
    top:50%;
    transform: translate3d(-50%,-50%,0)
}

重置index.css中的内容

.login-form{
    width:480px;
    position: relative;
    left:50%;
    top:50%;
    transform: translate3d(-50%,-50%,0)
}

此时运行我们已经可以得到页面

后面在记录关于登录以及登录后的页面展示