教你使用vue-cli快速構(gòu)建的小說閱讀器
項(xiàng)目介紹
主要頁(yè)面
1、首頁(yè)home.vue分類展示書籍,幻燈片展示熱門推薦
2、搜索search.vue,上拉加載更多
3、書籍詳情book.vue加入書架、立即閱讀,展示評(píng)論,同類書籍推薦
4、書籍內(nèi)容read.vue,獲取目錄,存儲(chǔ)翻閱的章節(jié)位置,
5、書架bookrack.vue,獲取加入書架的書單
技術(shù)棧
vue、vue-cli、axios、vue-router、vuex、localStorege
- 入口頁(yè)面app.vue
分成底部導(dǎo)航 跟 主視圖容器 router-view
首頁(yè)tabbar/Home
- 包含: components/sub/item 和 components/sub/search 、components/sub/header
- 結(jié)構(gòu): banner切換 與 搜索 和 小說分類樓層
小說樓層單獨(dú)定義了組件 components/sub/item , home循環(huán)樓層分類名稱,并將樓層分類id傳給item組件 :booklistId='{id:item._id}' , item組件用 props: ["booklistId"] 接收分類id, 并根據(jù)分類id獲取對(duì)應(yīng)的數(shù)據(jù)
item.vue
mouted:
this.getlist(this.booklistId.id);
methods:
getlist(id) {
//每個(gè)分類id下對(duì)應(yīng)的數(shù)據(jù) 子組件接收父組件傳過來的id 獲取對(duì)應(yīng)的數(shù)據(jù)
bootd(id).then(res => {
var arrdata = res.data.data;
arrdata.map(item => {
this.booklist.push(item.book);
});
});
}
小說詳情頁(yè)components/book/Book.vue
- 包含: components/sub/yuedu 、mulu、pinglun、
- 結(jié)構(gòu): 小說概況與簡(jiǎn)介,是否加入書架或者繼續(xù)閱讀 ,目錄、評(píng)論、同類書籍推薦
加入書架/立即閱讀(yuedu.vue)組件
book.vue
computed: {
...mapState(['calbook','shuajiabook']) //書籍信息 書架數(shù)據(jù)[]
},
methods:{
addbook(){
this.flag=!this.flag
var book= this.calbook; // calbook 是store里存儲(chǔ)的書籍信息【 SHEFLBOOK 】
var carbook = JSON.parse(window.localStorage.getItem('book') || '{}')
if(!this.flag){ //加入書架
carbook[book._id] = {
cover: book.cover,
flag:!this.flag,
title: book.title,
lastChapter:book.lastChapter,
id: book._id,
author:book.author,
chapterIndexCache: 0,
bookSource: 0,
pageIndexCache: 0,
}
this.setbook(false)
window.localStorage.setItem('book', JSON.stringify(carbook))
}else{
delete carbook[book._id]
this.setbook(true) //設(shè)置的布爾值
window.localStorage.setItem('book', JSON.stringify(carbook))
}
}
}
立即閱讀時(shí)進(jìn)入小說章節(jié) `this.$router.push({name:'read',params:{id:this.booklinks}})`
目錄組件 components/sub/mulu.vue
點(diǎn)擊目錄時(shí),路由跳轉(zhuǎn)進(jìn)入 read.vue 頁(yè)面(小說詳細(xì)章節(jié)),并且將默認(rèn)目錄顯示出來,書籍id通過路由傳給 mulu.vue
book.vue
<router-link :to="{name:'read',params:{id:this.books._id,showMulu:true}}" class="mulu" tag="p">
read.vue包含mulu組件,默認(rèn)目錄隱藏,通過路由傳參決定是否顯示目錄
<mulu :id="id" @readShow='readshows' v-show="showMulu" @closeLayer='backGo()'></mulu>
// 控制目錄顯示狀態(tài)
created() {
this.getBook = JSON.parse(window.localStorage.getItem("SHEFLBOOK")); // book/book.vue 存儲(chǔ)的書籍信息
this.getbookhy(this.getBook._id); // 獲取小說id所對(duì)應(yīng)的源
if(this.$route.params.showMulu){ //從book.vue傳過來的參數(shù)
this.showMulu = true
}
},
// 子組件mulu.vue發(fā)送過來的事件,點(diǎn)擊時(shí)跳轉(zhuǎn)到對(duì)應(yīng)的章節(jié)內(nèi)容
readshows(index){
this.showMulu = false
this.iss = index
this.getBookindex()
this.getcontent(this.booklinkss[this.iss]); //根據(jù)booklinkss顯示目錄章節(jié)
this.$refs.dvtop.scrollTop = 0;
},
mulu.vue
<li v-for="item in list" :key="item.id" @click='getMulu((item.order)-1)'>{{item.title}} <em style="color:red">{{item.isVip?'vip':null}}</em></li>
getMulu(i){
this.$emit('readShow',i) //將點(diǎn)擊的章節(jié)傳給父組件 read.vue
}
pinglun.vue
評(píng)論組件(pinglun.vue),獲取路由中的參數(shù)書籍id,在item.vue中 <router-link tag='li' :to="{name:'book',params:{id:item._id}}"> 路由跳轉(zhuǎn)到詳情,并將書籍id傳給書籍詳情
created() {
this.loadMore();
},
methods: {
loadMore() {
bookpl(this.$route.params.id, this.limit).then(res => { // 獲取的item組件的路由參數(shù) 書籍id
if (res.status === 200) {
this.pinglun = res.data.reviews;
this.limit += 5;
}
});
this.loading = false;
}
}
小說章節(jié)詳情components/read/read.vue
- 包含: components/sub/mulu 、
- 結(jié)構(gòu):上一章下一章,目錄,章節(jié)內(nèi)容
獲取localstorege的書籍信息SHEFLBOOK中的(id),[book.vue存儲(chǔ)了localstorege], 根據(jù)小說id獲取 【源--目錄--內(nèi)容】 ,點(diǎn)擊目錄進(jìn)入章節(jié)詳情,將點(diǎn)擊的章節(jié)存入local,記住每次點(diǎn)擊的章節(jié)位置,供后續(xù)閱讀
read.vue
//獲取小說資源 每本小說有多個(gè)資源 根據(jù)小說id獲取小說的來源
getbookhy(id){
bookhy(id).then(res=>{
this.bookhylist = res.data;
this.getmulu(this.bookhylist[0]._id); // 根據(jù)源 獲取目錄數(shù)據(jù) 默認(rèn)第一個(gè)源
})
},
getmulu(id){
this.booklinkss = []; //第N章內(nèi)容
this.booktitle = []; //第N章標(biāo)題 push后數(shù)據(jù)疊加 現(xiàn)將數(shù)組數(shù)據(jù)清空
var bookindexs = JSON.parse( window.localStorage.getItem("bookindex") || "{}" ); //章節(jié)位置
bookmulu(id).then(res=>{
if(res.status==200){
res.data.chapters.forEach( item => {
// 內(nèi)容是根據(jù)link來獲取的 將link發(fā)給服務(wù)器,由于// / & # 服務(wù)器是無法識(shí)別的 所以需要對(duì)link轉(zhuǎn)碼 最后服務(wù)器返回內(nèi)容
this.booklinkss.push(encodeURIComponent(item.link))
this.booktitle.push(item.title)
});
}
this.iss = bookindexs && bookindexs[this.getBook._id] ? bookindexs[this.getBook._id].bookindex : this.iss;
this.getcontent(this.booklinkss[this.iss]); // 根據(jù)目錄 獲取內(nèi)容
})
},
// 獲取內(nèi)容
getcontent(link){
var content = []
bookcontent(link).then(res => {
if(res.status == 200){
var datas = res.data.chapter;
content.push({
cpContent:datas.isVip?["vip章節(jié),請(qǐng)購(gòu)買VIP"]:(datas.cpContent ? datas.cpContent.split("\n") : datas.body.split("\n")),
title:datas.title
})
this.con = content[0]
}
})
},
小說搜索頁(yè)components/read/search.vue 調(diào)用MUI的 mt-loadmore 功能,上拉加載更多,
//獲取搜索的書籍
getList() {
booksearch(this.keyword).then(res => {
if (res.data.ok) {
this.searchList = res.data.books.slice(0, 15); //默認(rèn)展示前15條數(shù)據(jù)
}
});
},
// 上拉加載
loadBottom() {
this.allLoaded = true; //上滑時(shí)出現(xiàn)加載文字
booksearch(this.keyword).then(res=>{
if(this.searchList.length==res.data.books.length){
this.allLoaded = false
}else{
this.searchList = res.data.books.splice(0,this.count*15+15) //每次拉動(dòng)時(shí)在現(xiàn)有基礎(chǔ)上加15條 cout++
this.count++
this.allLoaded = false
}
})
},
項(xiàng)目截圖

倉(cāng)庫(kù)代碼
https://github.com/msisliao/v...
總結(jié)
以上所述是小編給大家介紹的使用vue-cli快速構(gòu)建的小說閱讀器,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
vue中實(shí)現(xiàn)監(jiān)聽數(shù)組內(nèi)部元素
這篇文章主要介紹了vue中實(shí)現(xiàn)監(jiān)聽數(shù)組內(nèi)部元素方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
vue使用$store.commit() undefined報(bào)錯(cuò)的解決
這篇文章主要介紹了vue使用$store.commit() undefined報(bào)錯(cuò)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06
vue中使用localstorage來存儲(chǔ)頁(yè)面信息
這篇文章主要介紹了vue中使用localstorage來存儲(chǔ)頁(yè)面信息,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
vue中控制mock在開發(fā)環(huán)境使用,在生產(chǎn)環(huán)境禁用方式
這篇文章主要介紹了vue中控制mock在開發(fā)環(huán)境使用,在生產(chǎn)環(huán)境禁用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
Vue中render函數(shù)調(diào)用時(shí)機(jī)與執(zhí)行細(xì)節(jié)源碼分析
這篇文章主要為大家介紹了Vue中render函數(shù)調(diào)用時(shí)機(jī)與執(zhí)行細(xì)節(jié)源碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
Vue 構(gòu)造選項(xiàng) - 進(jìn)階使用說明
這篇文章主要介紹了Vue 構(gòu)造選項(xiàng) - 進(jìn)階使用說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue3解決ElementPlus自動(dòng)導(dǎo)入時(shí)ElMessage無法顯示的問題
這篇文章主要介紹了Vue3解決ElementPlus自動(dòng)導(dǎo)入時(shí)ElMessage無法顯示的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03

