当点击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 = https://www.it610.com/article/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 []
}
},
【前端|【Web书城】图书详情页开发】图书详情页分为
detail-title
BookInfo：左边是封面，右边是标题和作者以及详细描述
metadata：一些图书基本信息，出版权、分类、语言、ISBN
底部是三个按钮：阅读、听书，是否移除书架
推荐阅读
- 前端|【CSS3】动画详解
- 前端|科大讯飞语音合成WebApi
- WordPress Bootstrap Handburger菜单无法打开
- 读《你不知道的javascript》(中)部分东西记录-第二部分
- [JavaScript 笔记] 最全的 this 判断方法
- SpringBoot|SpringBoot+Vue从零开始做网站8-全局异常处理和使用mybatis-plus分页插件
- vue.js|Java毕业设计（基于SpringBoot+Vue前后分离的社区健康疫情防控系统）
- es6新增语法|数据新增的常用方法（es6-es12）-今天一定要学会
- 在wordpress中检测主页有哪些不同的方法（）