书籍列表

14th May 2023

本页面已浏览103次

书籍列表

在“书籍列表”页面中，我们要完成如下几件事情：

分页显示书籍；
根据关键词（目前只支持书籍名称开头字符）搜索书籍；
直接输入分页页数跳转；
进行前后页跳转；

分页显示书籍

这其实是很容易实现的功能。我们的远程API接口有一个函数：listBook，它接受几个参数：

搜索类型（type）：目前支持title和tag，分别按照书籍名称的开始部分字符搜索和tag搜索。缺省为title。
搜索关键词（key）。缺省为all，即所有书籍。
第几页（page）：显示第几页。缺省为1。

为了显示这个页面，我们需要继续配置路由。

在RoutingConfig.js中加这么两行：

import BookList from './BookList';

const RoutingConfig = () => (
  <Router>
    <div>
      <Route path="/books/list/:type?/:key?/:page?" component={BookList}/>

按照react-router-dom的文档说明，一个参数如果在名字后面有一个问号，那表明这个参数是可选的。

这里我们选用了可选参数路由。

编写BookList组件

我们已经掌握了编写该组件的大部分知识和内容，需要特别指出的是获得路由中的参数，而这是通过如下代码实现的：

componentDidMount() {
        this.setState({
            type: this.props.match.params.type || "title",
            key: this.props.match.params.key || "all",
            page: this.props.match.params.page || "1",
        });
    }

同样，这里的参数都是通过路由匹配而来，所以我们用this.props.match.params来找到这些参数。

另外，数据的获取我们也还是在componentDidUpdate中实现：

componentDidUpdate(prevProps, prevState) {
        if(prevState.type!==this.state.type) {
            let URI="http://api.rsywx.com/books/list/"+this.state.type+"/"+this.state.key+"/"+this.state.page;

            fetch(URI)...

然后对返回的JSON数据集进行.map操作就可以了。

很好！只要完成这一步，这个组件的主体就基本完成了。

编写分页组件`Paginator.js`

我有很多藏书，所以需要进行分页显示。这里我采用的是比较简单的分页方式，只出现“首页”、“上一页”、“下一页”和“最后一页”这四项，而不是出现若干分页数字直接跳转（这个功能另外实现了）：

在BookList组件中，分页组件的调用是这样完成的：

<Paginator type={this.state.type} keyword={this.state.key} page={this.state.page} pages={this.state.pages}/>

分页组件必须根据当前的搜索（列表）环境构造才有意义。所以我们向该组件传递了当前URI的所有参数。

Paginator组件的编写其实比较简单，只是有一些条件控制罢了。比如，在第一页的时候，“上一页”的链接应该是不可用的：

// /src/widget/Paginator.js

if(this.props.page==="1") {
    //Now in the first page
    prev=<a className="disabled" title="上一页">
        <i className="glyphicons rewind" />
    </a>
}
else {
    prev=<a href={"/books/list/" + this.props.type + "/" + this.props.keyword + "/"+(parseInt(this.props.page,10)-1)} title="上一页">
        <i className="glyphicons rewind" />
    </a>
}

这样的话，我们在构造最后的节点时就可以很简单地这么做：

return (
    <section id="pagination" className="col-md-12">
        <a href={"/books/list/" + this.props.type + "/" + this.props.keyword + "/1"} title="首页">
            <i className="glyphicons fast_backward" />
        </a>
        {prev}
        {next}
        <a href={"/books/list/" + this.props.type + "/" + this.props.keyword + "/" + this.props.pages} title="末页">
            <i className="glyphicons fast_forward" />
        </a>
    </section>
);

关键词搜索

目前我们的应用还只支持从书籍名称开始搜索，比如在搜索框中输入“红”就会显示所有以“红”开头的书籍：

这个功能需要几个部分组合完成。

首先是HTML部分的编写，我们会创建一个HTML的表单，来处理关键词的搜索：

<section id="searchform" className="col-md-6">
    <form onSubmit={this.searchPage}
          acceptCharset="utf-8"
          className="form-inline">
        <div className="row">
            <div className="col-sm-6 form-group">
                <input className="form-control input-sm"
                       type="text"
                       id="key"
                       name="key"
                       placeholder="all" 
                       onChange={this.handleSearchChange}
                       value={this.state.key} />&nbsp;&nbsp;
                <button type="submit"
                        className="btn btn-grove-one btn-sm btn-bold">
                    搜索
                </button>
            </div>
        </div>
    </form>
</section>

需要注意的是，这个表单的处理函数是{this.searchPage}。另外，我们为表单的输入框添加了onChange的处理（调用this.handleSearchChage方法）。

接下来我们先完成这两个方法：

searchPage(e){
    let key=this.state.key;
    window.location="/books/list/title/"+key+"/1";
    e.preventDefault();
}

handleSearchChange(e){
    this.setState({
        key: e.target.value,
    });
}

好了！我们在文本框中输入搜索关键词的时候，会不断更新状态变量key，而在按下“搜索”按钮之后，我们只要简单地修改一下我们浏览的历史就可以了。JS将调用这个页面，再次渲染。

一切都似乎非常完美！但是，这样的代码无法执行。

这里牵涉到React一个很微妙的地方：this指针的指向。

JS中的函数、方法都是对象，都有自己的this，所以在HTML代码中我们写下this.searchPage时，我们不知不觉地修改了this（我们认为还是类对象本身）的指向（却指向了一个生成这个方法的环境）。

于是，在方法被调用的时候，this已经都不是类本身了，我们在这些方法的实现中采用this的时候都认为是类本身，于是出错了。

怎么解决呢？也很简单，绑定。

constructor(props) {
    super(props);
    this.state = {
        books: {},
        pages: -1,
        key: "",
    };

    this.handlePageChange = this.handlePageChange.bind(this);
    this.handleSearchChange = this.handleSearchChange.bind(this);
    this.gotoPage=this.gotoPage.bind(this);
    this.searchPage=this.searchPage.bind(this);
}

出现在构造函数中的这几行代码，目的就是将这些事件处理函数绑定到当前的类的环境下，于是不管这个函数在哪里被调用，在怎样的层次级别被调用，它都有一个正确的this指针，指向该函数被声明时所在的环境。

输入页码后跳转到某个特定页面的写法也基本类似。这里不再赘述。请读者自行完成。

我们回顾一下，我们已经完成了：

分页显示书籍；
根据关键词（目前只支持书籍名称开头字符）搜索书籍；
直接输入分页页数跳转；
进行前后页跳转；

根据一本书籍的tag选择具有该tag的书籍

在前一章“书籍详情”中，我们提到，点击一本书的某个tag，就会显示所有也被标记为那个tag的书籍。

这个功能其实很简单，因为后台的搜索API接口是类似的：

let URI="http://api.rsywx.com/books/list/"+this.state.type+"/"+this.state.key+"/"+this.state.page;

这个搜索函数的调用中，只要type为tag就代表按照tag去搜索。这时的key就是某一个特定的tag。远程的API会根据传入参数的不同，调整搜索的方向并返回相应的数据集。

Voila!我们又很快地完成了藏书列表页面！

我们最后要完成的是“书评列表”页面。

Previous Post Next Post

书籍列表

书籍列表

分页显示书籍

编写BookList组件

编写分页组件Paginator.js

关键词搜索

根据一本书籍的tag选择具有该tag的书籍

编写分页组件`Paginator.js`