练手项目

1
2
3
4
5
6
7

 npx create-react-app  test_system_backend   
 cd test_system_backend
 yarn
 yarn add react-router-dom
 
 npm start
 

1
2
3
4
5
6
7

yarn add antd
yarn add react-router
yarn add react-router-dom

yarn add react-redux
yarn add redux
yarn add axios

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

import React from "react";

import {HashRouter,Route, Switch,Redirect} from 'react-router-dom'
import Login from "../views/Login/Login";
import Error404 from "../views/Error/Error404";
import FirstPage from "../views/FirstPage/firstPage";
export default function IndexRouter() {
  const f1 = ()=>{
    alert("请登录")
  }
  function PermissionExample() {
    if(localStorage.getItem('tokenX')) {
      //如果有 token 或者判断 可以的话，就返回 firstPage
      return <FirstPage />
    }
     
    // alert("没有登录")
    return <div>
         {console.log("hello wolrd")}
         {alert("对不起，你没有这个权限")}
         {f1()}
      <div>
        请登录----
      </div>
    </div>

  }
  
  return (
      <div>
        <HashRouter  >
          <Switch>
              <Route path="/login" exact component={Login}/>
              
              
              <Route path="/404" exact component={Error404}/>

              <Route  path="/backend" component={FirstPage}  />
             

              <Route
                path="/" exact
                component={FirstPage}
              />

              
            
          </Switch>
        </HashRouter>
        <HashRouter  >
          <Route path="/myadmin" exact component={()=> <div>对不起，你没有管理员权限</div>}/>
          <Route path="/myadmin2" exact component={()=> PermissionExample()}/>
        </HashRouter>
        <HashRouter  >
          <Route path="/admin3" exact component={()=> <div>这个版本3</div>}/>
          <Route path="/admin3/test" exact component={()=> localStorage.getItem("token")? <div>token:{localStorage.getItem('token')}</div>:<div>你没有token admin3</div>}/>
        </HashRouter>
      </div>
  )
}

1

yarn add react-redux

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

import React, { useEffect, useReducer, useState } from "react";
import { Table, Tag, Space } from 'antd';

const mockList = (page,size)=> {
  let json = {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  }
  let idata = []
  let preName = json.name;
  for (let i=0;i<size;i++) {
    json.key = i;
    json.name =  `${preName+i}-${page}-${size}`
    idata.push({ ...json})
  }
  return idata
  
}
const mock = (page,size)=> {
  let total = 200;//假设200条
  let req = new Promise((resolve, reject)=>{
    resolve({
      
      list:mockList(page,size),
      total
    })
  })
  return req
  
}


const InnerTable = (props) => {
  
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: 'Tags',
      key: 'tags',
      dataIndex: 'tags',
      render: tags => (
        <>
          {tags.map(tag => {
            let color = tag.length > 5 ? 'geekblue' : 'green';
            if (tag === 'loser') {
              color = 'volcano';
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <a>Invite {record.name}</a>
          <a>Delete</a>
        </Space>
      ),
    },
  ];

  // const[list,setList] = useReducer((pre,payload)=>{
  //   console.log(payload)
  //   if(payload.list?.push)
  //      return payload.list
  //   return pre;
  // },[])
  const [list,setList] = useState([])
  //pageSize -> 请求 5页
  const [pageInfo,setPageInfo] = useState({
    pageSize:5,
    current:1,
    total:200,
    
  })
  useEffect(()=>{
    mock(1,5).then(q=> {
      console.log('mock',q);
      let { list} = q;
      setList(list)
      setPageInfo({
        ...q
      })
    })
  },[])

  const RequestPage = (p) => {
    let {
      current,pageSize
    } = p;
    console.log(p)
    mock(current,pageSize).then(q=> {
      // console.log('mock',q);
      let {page,size , list} = q;
      setList(list)
      setPageInfo({
        ...q
      })
    })
  }
  
  // ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);
  return (
    <Table columns={columns} dataSource={list} {...props}
      pagination={
        {
          ...pageInfo,
          pageSizeOptions:[5,10,15]
        }
        
        
      }
     
      onChange={RequestPage}
      
      
     
    />
  )
}



const  TableExample = (props) => {
  console.log('table=> props',props)
  return (
    <div className={"admin_table"}>
       <InnerTable {...props} />
    </div>
  )
}



export default TableExample

1

npm install jquery