书籍详情

本页面已浏览142次

书籍详情

我们先来看完成效果:

增加路由

Vuet是一个单文件入口应用,没有实际物理位置上的一个一个文件供我们调用访问,一切都是通过路由调度来实现的。

首先,我们修改/src/router/index.js,增加一个引用和路由分配:

{
  path: '/books/:id',
  name: 'BookDetail',
  component: BookDetail,
  props: true,
}

请注意,我们在声明这个“书籍详情”的路由时,我们增加了一个参数:id。有关路由配置的详细说明可以参见官方文档

我们这个路由因为是要显示某一本书的详细信息,所以我们用一本书的id(实际是bookid字段)作为这本书的标识。比如:http://.../books/01879就是显示bookid为01879的这本书的详细信息(如上图所示)。

特别注意:在我目前Symfony的实现以及React的实现中,我都是用/books/01879.html的URI形式,但是在Vue下多了这个.html后会有一些问题,所以就改用这个比较简单的方式。1

12.02更新:经过在Vue论坛的,2Vue还是可以用这种URI方式的,方法是修改''/build/webpack.dev.conf.js''(对于开发模式来说),加入这么一段:

  devServer: {
    ...
    historyApiFallback: {
      disableDotRule: true,
    }
  },

另外需要注意的是,这个路由的声明中我加入了一个props: true。它的作用是将路由的参数(id)作为一个“属性”传递给匹配该路由的组件并成为这个组件的属性。我们马上会看到这个属性是如何被用来获取书籍信息的。

编写BookDetail

写好路由配置后,我们来编写“书籍详情”页面。

获取URI中的参数

首先,我们要获得URI中的这个参数(id),才能进行后续的工作。

<script>
import TopNav from '@/components/TopNav';

export default {
  name: "BookDetail",
  components: {
    TopNav,
  },
  data: function() {
    return {
      book: [],
      isbn: '',
    }
  },
  methods: {
    getBookDetail(id) {
      var uri='http://api.rsywx.com/book/bookByBookId/'+id;
      fetch(uri)
        .then(res => {
          return res.json();
        })
        .then(json => {
          var book=json.out[0];
          book.cover="http://api.rsywx.com/book/cover/"+book.bookid+"/"+book.title+"/"+book.author+"/300";
          this.isbn=json.out[0].isbn;
          this.book=book;
        });
    }
  },
  created: function() {
    this.book=this.getBookDetail(this.id);
  },
  props: [
    'id',
  ]
};

除了常规的说明外,我们用props: ['id']直接获取了路径中的书籍ID。有了这个参数,我们就可以完成所有的内容获取了。

利用Tags组件获取本书的tag

图片中红框标出的第一部分是“任氏有无轩”主人(也就是我)给这本书加的tag。这一段的代码如下:

getTags(id) {
    var uri='http://api.rsywx.com/book/tagsByBookId/'+id;
    fetch(uri)
        .then(res => {
            return res.json();
        })
        .then(json => {
            this.tags=json.out;
        }); 
},

这段的实现非常简单。其对应的模板写法更为直接了当,用一个v-for循环就搞定了:

{% verbatim %}
<h3>TAG</h3>
<small><router-link :to="{name: 'BookList', params: {type: 'tag', key: tag.tag, page:'1'} }" v-for="tag in tags" :key="tag">{{tag.tag}}&nbsp;</router-link>
</small>
<a class="btn btn-info btn-sm" data-toggle="modal" href="#addtag" >增加更多TAG »</a><br/>
{% endverbatim %}

有兴趣的读者可以对照React中对应的写法,相对来说Vue的实现更简单。

增加自己的tag并跳转

在显示书籍tag的时候,我们提供了一个功能让访问者可以为这本书增加自己的tag。点击“增加更多TAG”的按钮后,会弹出如下的一个对话框:

用户可以输入由空格分割的一些tag,应用会增加那些原本还没有的tag。然后跳转回这本书的详情页面,并显示新的tag列表。

目前,我们没有针对这一跳转部分加以特别处理。

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

这实际上是一个搜索加书籍列表的处理。在我们的程序中,这一功能在“书籍列表”中完成。

获取读书评论

这一部分其实相对简单。我们只要简单地调用一个API并对返回的JSON数据集进行相应处理即可。

获取豆瓣评论(以及其他豆瓣的书籍信息)

豆瓣开放了它的API供我们调用,其搜索关键字是一本书的ISBN号。我们对不是我们开发的API没有控制,所以可能出现CORS的错误。

解决方法是:在后台API用PHP等脚本语言封装豆瓣的API,然后该后台API提供CORS支持,便于我们的JS调用。

需要注意的是,这个豆瓣API的调用需要获得书籍的ISBN号码,而当前书籍的ISBN号需要在我们的异步API完成后才能正确获得,换句话说,如果我们将“根据ISBN获取豆瓣信息”的调用和我们之前看到的所以和显示tag的组件类似,我们在BookDetail这个组件的componentDidUpdate中进行豆瓣API的操作,我们无法保证我们能获得ISBN。解决方法和我之前在React中的处理类似,就是用到组件的某个更新状态下的事件。而要充分使用这个事件,我们需要进行如下准备工作。

第一,在组件的data中声明一个变量isbn:

data: function() {
    return {
      book: [],
      isbn: '',
    ...
    }
  },

第二步,声明一个“监视”(watch)触发:

  watch:{
      isbn: function(newV, oldV) {
          if(newV!=oldV) {
              this.getDouban(this.isbn);
          }
      }
  },

当且仅当isbn原来的值和新的值(应该就是通过API获得了书籍详情后得到更新的ISBN号)不同时,我们进行豆瓣书籍信息的拉取。

详情页面的其他部分

其他部分的实现相对简单,不再赘述。

读者应该注意到,我们使用了之前编好的组件(如TopNav)。这就有点模板组合的味道了。

我们已经完成了“书籍详情”的编写。我们的站点也渐渐丰富了起来。

下一章我们来讨论“书籍列表”页面的编写。


  1. 讨论见:https://stackoverflow.com/questions/47481723/change-uri-directly-for-a-vue-app-and-caused-error 

  2. 提问和解答 

Previous Post