当点击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
底部是三个按钮:阅读、听书,是否移除书架