《CMS后台系统》项目实战 详细分解（八）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。

a标签跳转

将Link标签修改为a标签

添加href

跳转新窗口 target="_blank"

<a to="/" className='table_title' href={"http://codesohigh.com:8765/article/" + props.id} target="_blank">{props.title}</a>

id的获取

先输出text，看打印内容是什么

代码显示

    render: (text, record) => {
      console.log(text)
      return (
        <Space size="middle">
        <Button type='primary' >编辑</Button>
        <Button type='danger'>删除</Button>
        </Space>
      )
    }

• 操作台显示

使用点击事件获取id值（text.key就是我们需要的id）

        <Button type='primary' onClick={()=>console.log(text.key)}>编辑</Button>
        <Button type='danger' onClick={()=>console.log(text.key)}>删除</Button>

• 实现效果图（点击按钮输出id到控制台）

封装请求文章

将useEffect内部的代码全部剪切到新定义的getArticleList的函数内部。

  // 提取请求的代码
  const getArticleList = ()=> {
      ArticleListApi().then(res=>{
        if(res.errCode === 0) {
          let newArr = JSON.parse(JSON.stringify(res.data.arr))
              /* 
                  1. 要给每个数组项加key，让key=id
                  2. 需要有一套标签结构，赋予一个属性
              */
            // 声明一个空数组
            let myarr = []
            newArr.map(item => {
              let obj = {
                  key: item.id,
                  date: moment(item.date).format("YYYY-MM-DD hh:mm:ss"),
                  mytitle: <MyTitle id={item.id} title={item.title} subTitle={item.subTitle} />
              }
              myarr.push(obj)
          })
          setArr(myarr)
        }
    })
  }


  // 请求文章列表
  useEffect(() => {
    getArticleList();
  }, []);

分页函数

• 分页传送门

ant.design/components/…

在Table标签中添加onChange事件

<Table
columns={columns} 
showHeader = {false}
 dataSource={arr}
 onChange={pageChange}
 />

书写分页函数

// 分页的函数
const pageChange = (pagination) => {
  console.log(pagination)
}

点击换页标签时，操作台会输出以下内容

• 在Table标签中pagination

使用useState设置分页

  //分页
  const [pagination,setPagination] = useState({current:1,pageSize:1,total:0})

       <Table
        columns={columns} 
        showHeader = {false}
         dataSource={arr}
         onChange={pageChange}
         pagination={pagination}
         />

• 请求十条数据

为请求函数设置参数，传入current，pageSize

设置形参

  // 提取请求的代码
  const getArticleList = (current,pageSize)=> {
      ArticleListApi({
        num:current,
        count:pageSize
      }).then(res=>{
        if(res.errCode === 0) {
          let newArr = JSON.parse(JSON.stringify(res.data.arr))
              /* 
                  1. 要给每个数组项加key，让key=id
                  2. 需要有一套标签结构，赋予一个属性
              */
            // 声明一个空数组
            let myarr = []
            newArr.map(item => {
              let obj = {
                  key: item.id,
                  date: moment(item.date).format("YYYY-MM-DD hh:mm:ss"),
                  mytitle: <MyTitle id={item.id} title={item.title} subTitle={item.subTitle} />
              }
              myarr.push(obj)
          })
          setArr(myarr)
        }
    })
  }

调用getArticleList() 传入实参

  // 请求文章列表
  useEffect(() => {
    getArticleList(pagination.current,pagination.pageSize);
  }, []);

实现效果

换页按钮变为了一页，原因没有设置总条数。

找到分页的total属性

注意：这里视频突然发现Table有total属性。这里再度尝试输出res.data，看是否返回数据有total。

        console.log(res.data)

请求数据之后更改pagination

 // 更改pagination
let { num, count, total } = res.data;
setPagination({ current: num, pageSize: count, total })

点击分页按钮后会返回一串数据

在分页函数中调用getArticleList封装请求函数（更新点击就调用getArticleList）

// 分页的函数
const pageChange = (arg) => getArticleList(arg.current, arg.pageSize);

滚动样式

想要实现的效果

实际存在的问题，内容超出

• 给面包屑设置高度

<Breadcrumb style={{height: '30px',background:'red', lineHeight: '30px'}}>

• 修改整体页面高度

在base.less中

.container_content{
    height: calc(100vh - 210px);
    overflow: hidden;
}

App组件

function App() {
    return (
        <Layout id='app'>
            <Header/>
        <div className='container'>
         <Aside />       
        <div className='container_box'>
            <Bread/>
            <div className="container_content">
            <Outlet />
          </div>
        </div>
      </div>  
       <footer>Respect | Copyright &copy; 2022 Author 你单排吧</footer>
      </Layout>
    );
}

在ListTable.less中添加滚动

.list_table{
    width: 100%;
    background: #fff;
    height: 100%;
    overflow-y: scroll;
    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px;
        height: 100%;
        background: #fff;
        border-radius: 10px;
    }
    
    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #EDEDED;
    }
    
    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #535353;
    }
    .table_title{
        color: #333;
        &:hover{
            color: #1890ff;
        }
    }
}

注意记得把那个面包屑背景颜色去掉！！！

• 最终实现效果