1
import React from 'react'
2
import ReactDOM from 'react-dom/client'
3
import './index.css'
4
import reportWebVitals from './reportWebVitals'
5
// 1. 引入组件
6
import Hello from './pages/Hello'
7

8
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
9
root.render(
10
  <React.StrictMode>
11
    {/* 2. 将原来的 <App/> 改为 <Hello></Hello> */}
12
    <Hello></Hello>
13
  </React.StrictMode>
14
)
15

16
// If you want to start measuring performance in your app, pass a function
17
// to log results (for example: reportWebVitals(console.log))
18
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
19
reportWebVitals()

1
import { Student } from '../model/Student'
2
import '../css/P1.css'
3
export default function P1(props: { student: Student }) {
4

5
  function handleClick(e : React.MouseEvent){
6
    console.log(props.student)
7
    console.log(e)
8
  }
9

10
  return (
11
    <div className='student'>
12
      <div className='photo' onClick={handleClick}>
13
        <img src={props.student.photo}/>
14
      </div>
15
      <h1>{props.student.name}</h1>
16
      <h2>{props.student.id}</h2>
17
      <p>性别 {props.student.sex} 年龄 {props.student.age}</p>
18
    </div>
19
  )
20
}

1
import { Student } from '../model/Student'
2
import '../css/P1.css'
3
export default function P1(props: { student: Student; hideAge?: boolean }) {
4
  function handleClick() {
5
    console.log(props.student)
6
  }
7

8
  const ageFragment = !props.hideAge && <span>年龄 {props.student.age}</span>
9

10
  return (
11
    <div className='student'>
12
      <div className='photo' onClick={handleClick}>
13
        <img src={props.student.photo} />
14
      </div>
15
      <h1>{props.student.name}</h1>
16
      <h2>{props.student.id}</h2>
17
      <p>
18
        性别 {props.student.sex} {ageFragment}
19
      </p>
20
    </div>
21
  )
22
}

1
import { Student } from '../model/Student'
2
import '../css/P1.css'
3
export default function P1
4
({ student, hideAge = false }: { student: Student, hideAge?: boolean }) {
5

6
  function handleClick() {
7
    console.log(student)
8
  }
9

10
  const ageFragment = !hideAge && <span>年龄 {student.age}</span>
11

12
  return (
13
    <div className='student'>
14
      <div className='photo' onClick={handleClick}>
15
        <img src={student.photo} />
16
      </div>
17
      <h1>{student.name}</h1>
18
      <h2>{student.id}</h2>
19
      <p>
20
        性别 {student.sex} {ageFragment}
21
      </p>
22
    </div>
23
  )
24
}

1
import axios from 'axios'
2
let count = 0
3
export default function P5(props: { id: number }) {
4

5
  function getTime() {
6
    const d = new Date()
7
    return d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
8
  }
9

10
  async function updateStudent() {
11
    const resp = await axios.get(
12
      `http://localhost:8080/api/students/${props.id}`
13
    )
14
    Object.assign(student, resp.data.data)
15
    console.log(current, student, getTime())
16
  }
17

18
  const current = count++
19
  let student = { name: 'xx' }
20
  console.log(current, student, getTime())
21
  updateStudent()
22

23
  return <h3>姓名是：{student.name}</h3>
24
}

1
import axios from 'axios'
2
import { useState } from 'react'
3
import { Student } from '../model/Student'
4
let count = 0
5
export default function P5(props: { id: number }) {
6

7
  // ...
8

9
  async function updateStudent() {
10
    const resp = await axios.get(
11
      `http://localhost:8080/api/students/${props.id}`
12
    )
13
    Object.assign(student, resp.data.data)
14
    console.log(current, student, getTime())
15
  }
16

17
  const current = count++
18
  let [student] = useState<Student>({ name: 'xx' })
19
  console.log(current, student, getTime())
20
  updateStudent()
21

22
  return <h3>姓名是：{student.name}</h3>
23
}

1
import axios from "axios"
2
import { useEffect, useState } from "react"
3

4
/*
5
useEffect
6
  参数1：箭头函数, 在真正渲染 html 之前会执行它
7
  参数2：
8
    情况1：没有, 代表每次执行组件函数时, 都会执行副作用函数
9
    情况2：[], 代表副作用函数只会执行一次
10
    情况3：[依赖项], 依赖项变化时，副作用函数会执行
11
*/
12
export default function P6({ id, age }: { id: number, age: number }) {
13

14
  console.log('1.主要功能')
15

16
  // useEffect(() => console.log('3.副作用功能'))
17
  // useEffect(() => console.log('3.副作用功能'), [])
18
  useEffect(() => console.log('3.副作用功能'), [id])
19

20
  console.log('2.主要功能')
21

22
  return <h3>{id}</h3>
23
}

1
import axios from "axios"
2
import { useEffect, useState } from "react"
3

4
export default function P6({ id, age }: { id: number, age: number }) {
5

6
  const [student, setStudent] = useState({name:'xx'})
7

8
  useEffect(()=>{
9
    async function updateStudent() {
10
      const resp = await axios.get(`http://localhost:8080/api/students/${id}`)
11
      setStudent(resp.data.data)
12
    }
13
    updateStudent()
14
  }, [id])
15

16
  return <h3>{student.name}</h3>
17
}

1
import axios from 'axios'
2
import { createContext, useContext, useEffect, useState } from 'react'
3
import { R, Student } from '../model/Student'
4

5
/*
6
  createContext         创建上下文对象
7
  useContext            读取上下文对象的值
8
  <上下文对象.Provider>  修改上下文对象的值
9
*/
10
const HiddenContext = createContext(false)
11

12
// 给以下组件提供数据，控制年龄隐藏、显示
13
export default function P7() {
14
  const [students, setStudents] = useState<Student[]>([])
15
  const [hidden, setHidden] = useState(false)
16
  useEffect(()=>{
17
    async function updateStudents() {
18
      const resp = await axios.get<R<Student[]>>("http://localhost:8080/api/students")
19
      setStudents(resp.data.data)
20
    }
21
    updateStudents()
22
  }, [])
23

24
  function hideOrShow() {
25
    // 参数：上一次状态值，旧值
26
    // 返回值：要更新的新值
27
    setHidden((old)=>{
28
      return !old
29
    })
30
  }
31
  return <HiddenContext.Provider value={hidden}>
32
    <input type="button" value={hidden?'显示':'隐藏'} onClick={hideOrShow}/>
33
    <P71 students={students}></P71>
34
  </HiddenContext.Provider>
35
}
36

37
// 负责处理学生集合
38
function P71({ students }: { students: Student[] }) {
39
  const list = students.map(s=><P72 student={s} key={s.id}></P72>)
40
  return <>{list}</>
41
}
42

43
// 负责显示单个学生
44
function P72({ student }: { student: Student }) {
45
  const hidden = useContext(HiddenContext)
46
  const jsx = !hidden && <span>{student.age}</span>
47
  return <div>{student.name} {jsx}</div>
48
}

1
import axios from 'axios'
2
import React, { useState } from 'react'
3
import '../css/P8.css'
4

5
export default function P8() {
6

7
  const [student, setStudent] = useState({name:'', sex:'男', age:18})
8
  const [message, setMessage] = useState('')
9

10
  const options = ['男', '女']
11
  const jsx = options.map(e => <option key={e}>{e}</option>)
12

13
  // e 事件对象, e.target 事件源
14
  function onChange(e : React.ChangeEvent<HTMLInputElement|HTMLSelectElement>) {
15
    setStudent((old)=>{
16
      // 返回的新值，不能与旧值是同一个对象
17
      return {...old, [e.target.name]:e.target.value}
18
    })
19
  }
20

21
  async function onClick() {
22
    const resp = await axios.post('http://localhost:8080/api/students', student)
23
    setMessage(resp.data.data)
24
  }
25

26
  const messageJsx = message && <div className='success'>{message}</div>
27

28
  return (
29
    <form>
30
      <div>
31
        <label>姓名</label>
32
        <input type="text" value={student.name} onChange={onChange} name='name'/>
33
      </div>
34
      <div>
35
        <label>性别</label>
36
        <select value={student.sex} onChange={onChange} name='sex'>
37
          {jsx}
38
        </select>
39
      </div>
40
      <div>
41
        <label>年龄</label>
42
        <input type="text" value={student.age} onChange={onChange} name='age' />
43
      </div>
44
      <div>
45
        <input type='button' value='新增' onClick={onClick}/>
46
      </div>
47
      {messageJsx}
48
    </form>
49
  )
50
}

1
import { Table } from 'antd'
2
import { ColumnsType } from 'antd/lib/table'
3
import axios from 'axios'
4
import { useEffect, useState } from 'react'
5
import { R, Student } from '../model/Student'
6

7
export default function A3() {
8
  const [students, setStudents] = useState<Student[]>([])
9
  const [loading, setLoading] = useState(true)
10

11
  useEffect(() => {
12
    async function getStudents() {
13
      const resp = await axios.get<R<Student[]>>(
14
        'http://localhost:8080/api/students'
15
      )
16
      setStudents(resp.data.data)
17
      setLoading(false)
18
    }
19

20
    getStudents()
21
  }, [])
22

23
  // title: 列标题  dataIndex: 要关联的属性名
24
  const columns: ColumnsType<Student> = [
25
    {
26
      title: '编号',
27
      dataIndex: 'id',
28
    },
29
    {
30
      title: '姓名',
31
      dataIndex: 'name',
32
    },
33
    {
34
      title: '性别',
35
      dataIndex: 'sex',
36
    },
37
    {
38
      title: '年龄',
39
      dataIndex: 'age',
40
    },
41
  ]
42

43
  // columns: 列定义
44
  // dataSource: 数据源，一般是数组包对象
45
  // rowKey: 作为唯一标识的属性名
46
  // loading: 显示加载图片
47
  return (
48
    <Table
49
      columns={columns}
50
      dataSource={students}
51
      rowKey='id'
52
      loading={loading}></Table>
53
  )
54
}

1
import { Table } from 'antd'
2
import { ColumnsType, TablePaginationConfig } from 'antd/lib/table'
3
import axios from 'axios'
4
import { useEffect, useState } from 'react'
5
import { R, Student } from '../model/Student'
6

7
export default function A3() {
8
  const [students, setStudents] = useState<Student[]>([])
9
  const [loading, setLoading] = useState(true)
10
  const [pagination, setPagination] = useState<TablePaginationConfig>(
11
    {current:1, pageSize:5}
12
  )
13

14
  // 参数: 新的分页数据
15
  function onTableChange(newPagination: TablePaginationConfig) {
16
    setPagination(newPagination)
17
  }
18

19
  useEffect(() => {
20
    async function getStudents() {
21
      const resp = await axios.get<R<Student[]>>(
22
        'http://localhost:8080/api/students'
23
      )
24
      setStudents(resp.data.data)
25
      setLoading(false)
26
    }
27

28
    getStudents()
29
  }, [])
30

31
  // ... 省略
32

33
  // pagination: 分页数据
34
  // onChange: 当页号，页大小改变时触发
35
  return (
36
    <Table
37
      columns={columns}
38
      dataSource={students}
39
      rowKey='id'
40
      loading={loading}
41
      pagination={pagination}
42
      onChange={onTableChange}></Table>
43
  )
44
}

1
import { Table } from 'antd'
2
import { ColumnsType, TablePaginationConfig } from 'antd/lib/table'
3
import axios from 'axios'
4
import { useEffect, useState } from 'react'
5
import { PageResp, R, Student } from '../model/Student'
6

7
export default function A4() {
8
  const [students, setStudents] = useState<Student[]>([])
9
  const [loading, setLoading] = useState(true)
10
  const [pagination, setPagination] = useState<TablePaginationConfig>({
11
    current: 1,
12
    pageSize: 5,
13
  })
14

15
  function onTableChange(newPagination: TablePaginationConfig) {
16
    setPagination(newPagination)
17
  }
18

19
  useEffect(() => {
20
    async function getStudents() {
21
      // params 用来给请求添加 url 后的 ? 参数
22
      const resp = await axios.get<R<PageResp<Student>>>(
23
        'http://localhost:8080/api/students/q',
24
        {
25
          params: {
26
            page: pagination.current,
27
            size: pagination.pageSize,
28
          },
29
        }
30
      )
31
      // 返回结果中：list 代表当前页集合, total 代表总记录数
32
      setStudents(resp.data.data.list)
33
      setPagination((old) => {
34
        return { ...old, total: resp.data.data.total }
35
      })
36
      setLoading(false)
37
    }
38

39
    getStudents()
40
  }, [pagination.current, pagination.pageSize])
41
  // useEffect 需要在依赖项( current 和 pageSize ) 改变时重新执行
42

43
  const columns: ColumnsType<Student> = [
44
    {
45
      title: '编号',
46
      dataIndex: 'id',
47
    },
48
    {
49
      title: '姓名',
50
      dataIndex: 'name',
51
    },
52
    {
53
      title: '性别',
54
      dataIndex: 'sex',
55
    },
56
    {
57
      title: '年龄',
58
      dataIndex: 'age',
59
    },
60
  ]
61

62
  return (
63
    <Table
64
      columns={columns}
65
      dataSource={students}
66
      rowKey='id'
67
      loading={loading}
68
      pagination={pagination}
69
      onChange={onTableChange}></Table>
70
  )
71
}