您好,登錄后才能下訂單哦!
項(xiàng)目介紹
主要頁(yè)面
1、首頁(yè)home.vue分類(lèi)展示書(shū)籍,幻燈片展示熱門(mén)推薦
2、搜索search.vue,上拉加載更多
3、書(shū)籍詳情book.vue加入書(shū)架、立即閱讀,展示評(píng)論,同類(lèi)書(shū)籍推薦
4、書(shū)籍內(nèi)容read.vue,獲取目錄,存儲(chǔ)翻閱的章節(jié)位置,
5、書(shū)架bookrack.vue,獲取加入書(shū)架的書(shū)單
技術(shù)棧
vue、vue-cli、axios、vue-router、vuex、localStorege
分成底部導(dǎo)航 跟 主視圖容器 router-view
首頁(yè)tabbar/Home
小說(shuō)樓層單獨(dú)定義了組件 components/sub/item
, home循環(huán)樓層分類(lèi)名稱(chēng),并將樓層分類(lèi)id傳給item組件 :booklistId='{id:item._id}'
, item組件用 props: ["booklistId"]
接收分類(lèi)id, 并根據(jù)分類(lèi)id獲取對(duì)應(yīng)的數(shù)據(jù)
item.vue
mouted: this.getlist(this.booklistId.id); methods: getlist(id) { //每個(gè)分類(lèi)id下對(duì)應(yīng)的數(shù)據(jù) 子組件接收父組件傳過(guò)來(lái)的id 獲取對(duì)應(yīng)的數(shù)據(jù) bootd(id).then(res => { var arrdata = res.data.data; arrdata.map(item => { this.booklist.push(item.book); }); }); }
小說(shuō)詳情頁(yè)components/book/Book.vue
加入書(shū)架/立即閱讀(yuedu.vue)組件
book.vue
computed: { ...mapState(['calbook','shuajiabook']) //書(shū)籍信息 書(shū)架數(shù)據(jù)[] }, methods:{ addbook(){ this.flag=!this.flag var book= this.calbook; // calbook 是store里存儲(chǔ)的書(shū)籍信息【 SHEFLBOOK 】 var carbook = JSON.parse(window.localStorage.getItem('book') || '{}') if(!this.flag){ //加入書(shū)架 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)入小說(shuō)章節(jié) `this.$router.push({name:'read',params:{id:this.booklinks}})`
目錄組件 components/sub/mulu.vue
點(diǎn)擊目錄時(shí),路由跳轉(zhuǎn)進(jìn)入 read.vue
頁(yè)面(小說(shuō)詳細(xì)章節(jié)),并且將默認(rèn)目錄顯示出來(lái),書(shū)籍id通過(guò)路由傳給 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)目錄隱藏,通過(guò)路由傳參決定是否顯示目錄
<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ǔ)的書(shū)籍信息 this.getbookhy(this.getBook._id); // 獲取小說(shuō)id所對(duì)應(yīng)的源 if(this.$route.params.showMulu){ //從book.vue傳過(guò)來(lái)的參數(shù) this.showMulu = true } }, // 子組件mulu.vue發(fā)送過(guò)來(lái)的事件,點(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 >{{item.isVip?'vip':null}}</em></li> getMulu(i){ this.$emit('readShow',i) //將點(diǎn)擊的章節(jié)傳給父組件 read.vue }
pinglun.vue
評(píng)論組件(pinglun.vue),獲取路由中的參數(shù)書(shū)籍id,在item.vue中 <router-link tag='li' :to="{name:'book',params:{id:item._id}}">
路由跳轉(zhuǎn)到詳情,并將書(shū)籍id傳給書(shū)籍詳情
created() { this.loadMore(); }, methods: { loadMore() { bookpl(this.$route.params.id, this.limit).then(res => { // 獲取的item組件的路由參數(shù) 書(shū)籍id if (res.status === 200) { this.pinglun = res.data.reviews; this.limit += 5; } }); this.loading = false; } }
小說(shuō)章節(jié)詳情components/read/read.vue
獲取localstorege的書(shū)籍信息SHEFLBOOK中的(id),[book.vue存儲(chǔ)了localstorege], 根據(jù)小說(shuō)id獲取 【源--目錄--內(nèi)容】 ,點(diǎn)擊目錄進(jìn)入章節(jié)詳情,將點(diǎn)擊的章節(jié)存入local,記住每次點(diǎn)擊的章節(jié)位置,供后續(xù)閱讀
read.vue
//獲取小說(shuō)資源 每本小說(shuō)有多個(gè)資源 根據(jù)小說(shuō)id獲取小說(shuō)的來(lái)源 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來(lái)獲取的 將link發(fā)給服務(wù)器,由于// / & # 服務(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)買(mǎi)VIP"]:(datas.cpContent ? datas.cpContent.split("\n") : datas.body.split("\n")), title:datas.title }) this.con = content[0] } }) },
小說(shuō)搜索頁(yè)components/read/search.vue 調(diào)用MUI的 mt-loadmore
功能,上拉加載更多,
//獲取搜索的書(shū)籍 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)建的小說(shuō)閱讀器,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。