教你使用脚手架快速构建的小说阅读器

时间：2021-08-24 来源：互联网编辑：宝哥软件园浏览：次

项目介绍

主要页面

1、首页home.vue分类展示书籍，幻灯片展示热门推荐

2、搜索search.vue，上拉加载更多

3、书籍详情book.vue加入书架、立即阅读，展示评论，同类书籍推荐

4、书籍内容read.vue，获取目录，存储翻阅的章节位置，

5、书架bookrack.vue，获取加入书架的书单

技术栈

vue、vue-cli、axios、vue-router、vuex、localStorege

入口页面app.vue分成底部导航跟主视图容器路由器视图

首页tabbar/Home

包含：组件/子/项目和组件/子/搜索、组件/子/标题结构：横幅切换与搜索和小说分类楼层小说楼层单独定义了组件组件/子/项目，主页循环楼层分类名称，并将楼层分类编号传给项目组件：booklistId='{id:item ._id} '，项目组件用道具：[' booklistId ']接收分类id，并根据分类编号获取对应的数据

item.vue

mouted :这个。getlist(这个。booklistid。id)；methods: getlist(id) { //每个分类编号下对应的数据子组件接收父组件传过来的编号获取对应的数据bootd(id).然后(RES={ var arr data=RES . data。数据；arr数据。地图(项目={ this。书单。推送(项目。书))；});});}小说详情页组件/书籍/书籍

包含：组件/子/杜悦、木鹿、平伦、结构：小说概况与简介，是否加入书架或者继续阅读，目录、评论、同类书籍推荐加入书架/立即阅读(yuedu.vue)组件

book.vue

computed: {.mapState(['calbook '，' shuajiabook']) //书籍信息书架数据[] }，方法： { addbook(){ this。flag=！这个。标志var book=这个。calbook//calbook是商店里存储的书籍信息【SHEFLBOOK】var carbok=JSON。解析(窗口。本地存储。getitem(' book ')| ' { } ')if(！this.flag){ //加入书架卡博[书_ id]={ 0封面：书.封面，标志：这面旗帜，书名，最后一章。最后一章，id:书。_id，author:book.author，chapterIndexCache: 0，bookSource: 0，pageIndexCache: 0，} this。setbook(false)窗口。本地存储。setitem(' book '，JSON。stringify(carbok))} else { delete carbok[book ._id] this.setbook(true) //设置的布尔值窗户。本地存储。setitem(' book '，JSON。stringify(carbok))} }立即阅读时进入小说章节"这个$router.push({name:'read '，params 3360 { id : this。图书链接} })”

目录组件组件/子/mulu.vue

点击目录时，路由跳转进入read.vue页面（小说详细章节),并且将默认目录显示出来，书籍编号通过路由传给mulu.vue

book.vue

router-link : to=' { name : ' read '，params : { id : this。书籍。_ id，showmulu 3360 true } } ' class=' mulu '标记=' p ' read。某视频剪辑软件包含纳鲁薄片组件，默认目录隐藏，通过路由传参决定是否显示目录

mulu : id=' id ' @ readShow=' read shows ' v-show=' show mulu ' @ closeLayer=' back go()'/mulu//控制目录显示状态创建了(){ this。getbook=JSON。解析(窗口。本地存储。getitem(' SHEFLBOOK ')；//book/book.vue存储的书籍信息这个。getbookhy(这个。getbook。id)；//获取小说编号所对应的源如果（这个$route.params.showMulu){ //从book.vue传过来的参数this.showMulu=true } }，//子组件mulu.vue发送过来的事件，点击时跳转到对应的章节内容read show(index){ this。show mulu=false this。ISS=索引这个。getbookindex()这个。getcontent(这个。book link ss[这个。ISS])；//根据booklinkss显示目录章节这个参考文献。dvtop。滚动顶部=0；}，mulu.vue

' li v-for='列表中的项目：键=' item。id ' @ click=' GetMulu((item。订单)-1)' { { item。title } } em style=' color : red ' { item。isvip？VIP ' : null } }/em/Li GetMulu(I){这个.$emit('readShow '，i) //将点击的章节传给父组件read.vue }pinglun.vue

评论组件(pinglun.vue)，获取路由中的参数书籍id，在item.vue中路由器链路标记='li' :to='{name:'book '，params: { id:item ._id}} "路由跳转到详情，并将书籍编号传给书籍详情

创建了(){ this。load MoRE()；}，方法： { LoadMoore(){ bookpl(this .$route.params.id，this.limit).然后(res={ //获取的项目组件的路由参数书籍id if(RES . status===200){ this。ping LUN=RES . data。评论；这个。极限=5；} });this.loading=false} }小说章节详情组件/read/read.vue

包含：组件/子/mulu,结构：上一章下一章，目录，章节内容获取localstorege的书籍信息SHEFLBOOK中的(id)，[book.vue存储了本地存储)，根据小说编号获取【源-目录-内容】 ,点击目录进入章节详情，将点击的章节存入本地的，记住每次点击的章节位置，供后续阅读

read.vue

//获取小说资源每本小说有多个资源根据小说编号获取小说的来源getbookhy(id){ bookhy(id)} .然后(RES={ this。bookhylist=RES . data这个。getmulu(这个。bookhylist[0])._ id)；//根据源获取目录数据默认第一个源}) }，getmulu(id){ this。book link ss=[]；//第普通章内容这个。书名=[]；//第普通章标题推后数据叠加现将数组数据清空var bookendex s=JSON。解析(窗口。本地存储。GetItem(' bookendex ')| | ' { } ')；//章节位置布克穆鲁.然后(RES={ if(RES . status==200){ RES . data。章节。foreach(item={//内容是根据环来获取的将环发给服务器，由于///# 服务器是无法识别的所以需要对环转码最后服务器返回内容这个。书籍链接。push(encodeURIComponent(项目。链接))这个。书名。推送(项目。标题)})；}这个。ISS=bookendex s bookendex s[this。GetBook。_ id]？bookendex s[这个。GetBook。id].bookindex :这是这是这。获取内容(这。书籍链接[这个。ISS])；//根据目录获取内容}) }, //获取内容获取内容(链接){ var content=[]图书内容(链接).然后(RES={ if(RES . status==200){ var data=RES . data。章节；内容。push({ cpcontent : data as。isvip？['vip章节，请购买VIP']:(datas.cpContent？数据。cpcontent。拆分(' \ n '):个数据。尸体。拆分(' \ n ')、标题：数据。标题})这个。con=content[0]})}，小说搜索页组件/读取/搜索。某视频剪辑软件调用语言包的mt-loadmore功能，上拉加载更多，

//获取搜索的书籍getList(){ booksearch(this。关键字).然后(RES={ if(RES . data。好的){这个。搜索列表=RES . data。书籍。切片(0，15)；//默认展示前15条数据} });}, //上拉加载LoAdBottom(){ this。all LoAd=true//上滑时出现加载文字booksearch(this.keyword).然后(RES={ if(this。搜索列表。长度==RES . data。书籍。长度){这个。all loaded=false } else { this。搜索列表=RES . data。书籍。拼接(0，this.count*15 15) //每次拉动时在现有基础上加15条看看这个。数数这个。all LoAd=false } })}，项目截图