React实现新闻分页功能

项目目录下 键入cmd,命令行下输入npm i axios

import React, { Component } from "react";

import axios from "axios";

import "./News.css";

export default class News extends Component {
  constructor(props) {
    super(props);

    //只有state中的值发生变化时, 页面才会实时刷新
    this.state = { data: null, news: null };
  }

  //生命周期: 内容加载完毕
  componentDidMount() {
    this.getNews(1);
  }

  //时间戳的转化:
  //vue - filters  过滤     时间戳|过滤器
  //Angular - 管道 pipe    时间戳|管道
  //react  - 只能自己声明函数
  dateFromat(timestamp) {
    let ts = parseInt(timestamp);

    var t = new Date(ts); //把时间戳转日期
    var year = t.getFullYear();
    var month = t.getMonth() + 1;
    var day = t.getDate();

    return `${year}-${month}-${day}`;
  }

  // 获取数据: p代表页数
  getNews(p) {
    let url = "http://101.96.128.94:9999/mfresh/data/news_select.php";

    let params = "pageNum=" + p;

    axios
      .post(url, params)
      .then(res => {
        console.log(res);

        this.setState({
          data: res.data
        });
      })
      .catch(err => {
        console.error(err);
      });
  }

  showNews = () => {
    // 网络请求是异步的, 数据请求完毕之前 给用户一个提示, 条件渲染
    if (this.state.data) {
      return (
        <div>
          <div>
            {this.state.data.data.map((item, index) => {
              return (
                <div key={index} className="news-cell">
                  <span onClick={this.getDetail.bind(this, item.nid)}>
                    {item.title}
                  </span>
                  <span>{this.dateFromat(item.pubTime)}</span>
                </div>
              );
            })}
          </div>
          <div className="news-page">
            {this.showPrev()}
            {this.showPages()}
            {this.showNext()}
          </div>
        </div>
      );
    } else {
      return <div>数据加载中...</div>;
    }
  };

  // 中间页
  showPages() {
    if (this.state.data) {
      let pages = [];
      // 循环页数数量 次数,  从1开始
      for (var i = 1; i <= this.state.data.pageCount; i++) {
        // 如果时当前页 则为
        if (i == this.state.data.pageNum) {
          pages.push(
            <span key={i} className="cur">
              {i}
            </span>
          );
        } else {
          pages.push(
            <a key={i} onClick={this.getNews.bind(this, i)}>
              {i}
            </a>
          );
        }
      }

      return pages;
    }
  }

  //上一页
  showPrev() {
    let pageNum = this.state.data.pageNum;
    if (pageNum > 1) {
      return (
        <a onClick={this.getNews.bind(this, this.state.data.pageNum - 1)}>
          上一页
        </a>
      );
    } else {
      return <span>上一页</span>;
    }
  }

  // 条件渲染下一页
  showNext() {
    // 如果当前页>=最后一页, 不能点
    let pageNum = this.state.data.pageNum;
    let pageCount = this.state.data.pageCount;
    if (pageNum >= pageCount) {
      return <span>下一页</span>;
    } else {
      return (
        <a onClick={this.getNews.bind(this, this.state.data.pageNum + 1)}>
          下一页
        </a>
      );
    }
  }

  // 查看详情的url
  getDetail(id) {
    let url = "http://101.96.128.94:9999/mfresh/data/news_detail.php";

    let params = "nid=" + id;

    axios
      .post(url, params)
      .then(res => {
        console.log(res);

        this.setState({
          news: res.data
        });
      })
      .catch(err => {
        console.error(err);
      });
  }

  // 提供详情页相关的内容
  showDetail() {
    if (this.state.news) {
      return (
        <div>
          <h3>{this.state.news.title}</h3>
          <p>{this.dateFromat(this.state.news.pubTime)}</p>
          {/* 在vue中 html代码 需要放在 v-html中绑定才能解析 */}
          {/* 在React中不推荐直接展现服务器传递的html 有风险, 但是可以强制展示 */}
          <p dangerouslySetInnerHTML={{ __html: this.state.news.content }}></p>
        </div>
      );
    }
  }

  render() {
    return (
      <div>
        {this.showNews()}
        {this.showDetail()}
      </div>
    );
  }
}

以下是css代码

.news-cell {
  border-bottom: 1px dashed lightgray;
  display: flex;
  justify-content: space-between;
  padding: 5px;
}

.news-cell > span:first-child:hover {
  color: purple;
}

.news-page {
  text-align: center;
}

.news-page > a {
  display: inline-block;
  padding: 5px;
  border: 1px solid lightgray;
  border-radius: 3px;
  margin: 5px;
}

.news-page > a:hover {
  border-color: orange;
  color: orange;
}

.news-page > span {
  display: inline-block;
  padding: 5px;
  border: 1px solid lightgray;
  border-radius: 3px;
  margin: 5px;
  color: lightgray;
}

.cur {
  background-color: orange;
  color: white !important;
  display: inline-block;
  padding: 5px;
  border-radius: 3px;
}