【Web书城】图书详情页开发

当点击flap-card中的Book、guess-you-like、recommend和书架中的book时，都会调用showBookDetail方法跳转到StoreDetail.vue页面

export function showBookDetail(vue, book) {
    vue.$router.push({
      path: '/book-store/detail',
      query: {
        fileName: book.fileName,
        category: book.categoryText
      }
    })
  }

在StoreDetail.vue页面中，mounted钩子函数中，先根据路由传递的参数fileName去请求后端接口获取对应图书信息

export function detail(book) {
  // console.log('detail:', book.fileName);
  return axios({
    method: 'get', 
    url: `${process.env.VUE_APP_BOOK_URL}/book/detail`,
    params: {
      fileName: book.fileName
    }
  })
}
// 2.电子书详情API开发
app.get('/book/detail', (req, res)=>{
    const conn = connect()
    const fileName = req.query.fileName
    const sql = `select * from book where fileName='${fileName}'`
    conn.query(sql, (err, results)=>{
        if(err || (results && results.length===0)){
            res.json({
                error_code: 1,
                mag: '电子书详情获取失败'
            })
        }else{
            const book = handleData(results[0])
            res.json({
                error_code: 0,
                msg: '获取成功',
                data: book
            })
        }
    })
    conn.end()
})

返回的图书格式如下：

对data的opf路径所存储的opf文件进行解析，

parseBook(url) {
        this.book = new Epub(url)
        console.log("book:", this.book)
        this.book.loaded.metadata.then(metadata => {
          this.metadata = metadata
        })
        this.book.loaded.navigation.then(nav => {
          this.navigation = nav
          if (this.navigation.toc && this.navigation.toc.length > 1) {
            const candisplay = this.display(this.navigation.toc[1].href)
            if (candisplay) {
              candisplay.then(section => {
                if (this.$refs.scroll) {
                  this.$refs.scroll.refresh()
                }
                this.displayed = true
                const reg = new RegExp('<.+?>', 'g')
                const text = section.output.replace(reg, '').replace(/\s\s/g, '')
                this.description = text
              })
            }
          }
        })
      },

• metadata：metadata.language | metadata.identifier(ISBN) | metadata.publisher | metadata.title |metadata.creator（作者）
• navigation.toc：第一个元素的href指向封面，第二个元素是总的目录汇总以及对应跳转链接
  
  将获取到的层级目录进行打平

doFlatNavigation(content, deep = 1) {
        const arr = []
        content.forEach(item => {
          item.deep = deep
          arr.push(item)
          if (item.subitems && item.subitems.length > 0) {
            arr.push(this.doFlatNavigation(item.subitems, deep + 1))
          }
        })
        return arr
      },
flatNavigation() {
        if (this.navigation) {
          return Array.prototype.concat.apply([], Array.prototype.concat.apply([], this.doFlatNavigation(this.navigation.toc)))
        } else {
          return []
        }
      },

图书详情页分为
detail-title
BookInfo：左边是封面，右边是标题和作者以及详细描述
metadata：一些图书基本信息，出版权、分类、语言、ISBN
底部是三个按钮：阅读、听书，是否移除书架