項目介紹
主要頁面
1、首頁home.vue分類展示書籍，幻燈片展示熱門推薦
2、搜索search.vue，上拉加載更多
3、書籍詳情book.vue加入書架、立即閱讀，展示評論，同類書籍推薦
4、書籍內容read.vue，獲取目錄，存儲翻閱的章節位置，
5、書架bookrack.vue，獲取加入書架的書單
技術棧
vue、vue-cli、axios、vue-router、vuex、localStorege
分成底部導航 跟 主視圖容器 router-view
首頁tabbar/Home
小說樓層單獨定義了組件 components/sub/item , home循環樓層分類名稱，并將樓層分類id傳給item組件 :booklistId='{id:item._id}' , item組件用 props: ["booklistId"] 接收分類id, 并根據分類id獲取對應的數據
item.vue
mouted: this.getlist(this.booklistId.id);methods: getlist(id) { //每個分類id下對應的數據 子組件接收父組件傳過來的id 獲取對應的數據 bootd(id).then(res => { var arrdata = res.data.data; arrdata.map(item => { this.booklist.push(item.book); }); }); }小說詳情頁components/book/Book.vue
加入書架/立即閱讀(yuedu.vue)組件
book.vue
computed: { ...mapState(['calbook','shuajiabook']) //書籍信息 書架數據[] }, methods:{ addbook(){ this.flag=!this.flag var book= this.calbook; // calbook 是store里存儲的書籍信息【 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) //設置的布爾值 window.localStorage.setItem('book', JSON.stringify(carbook)) } } }立即閱讀時進入小說章節 `this.$router.push({name:'read',params:{id:this.booklinks}})`
目錄組件 components/sub/mulu.vue
點擊目錄時，路由跳轉進入 read.vue 頁面(小說詳細章節)，并且將默認目錄顯示出來，書籍id通過路由傳給 mulu.vue
book.vue
<router-link :to="{name:'read',params:{id:this.books._id,showMulu:true}}" class="mulu" tag="p">read.vue包含mulu組件，默認目錄隱藏，通過路由傳參決定是否顯示目錄
<mulu :id="id" @readShow='readshows' v-show="showMulu" @closeLayer='backGo()'></mulu> // 控制目錄顯示狀態 created() { this.getBook = JSON.parse(window.localStorage.getItem("SHEFLBOOK")); // book/book.vue 存儲的書籍信息 this.getbookhy(this.getBook._id); // 獲取小說id所對應的源 if(this.$route.params.showMulu){ //從book.vue傳過來的參數 this.showMulu = true } },// 子組件mulu.vue發送過來的事件，點擊時跳轉到對應的章節內容 readshows(index){ this.showMulu = false this.iss = index this.getBookindex() this.getcontent(this.booklinkss[this.iss]); //根據booklinkss顯示目錄章節 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) //將點擊的章節傳給父組件 read.vue }pinglun.vue
評論組件(pinglun.vue),獲取路由中的參數書籍id,在item.vue中 <router-link tag='li' :to="{name:'book',params:{id:item._id}}"> 路由跳轉到詳情，并將書籍id傳給書籍詳情
created() { this.loadMore(); }, methods: { loadMore() { bookpl(this.$route.params.id, this.limit).then(res => { // 獲取的item組件的路由參數 書籍id if (res.status === 200) { this.pinglun = res.data.reviews; this.limit += 5; } }); this.loading = false; } }小說章節詳情components/read/read.vue
獲取localstorege的書籍信息SHEFLBOOK中的(id)，[book.vue存儲了localstorege], 根據小說id獲取 【源--目錄--內容】 ，點擊目錄進入章節詳情,將點擊的章節存入local,記住每次點擊的章節位置，供后續閱讀
read.vue
//獲取小說資源 每本小說有多個資源 根據小說id獲取小說的來源 getbookhy(id){ bookhy(id).then(res=>{ this.bookhylist = res.data; this.getmulu(this.bookhylist[0]._id); // 根據源 獲取目錄數據 默認第一個源 }) }, getmulu(id){ this.booklinkss = []; //第N章內容 this.booktitle = []; //第N章標題 push后數據疊加 現將數組數據清空 var bookindexs = JSON.parse( window.localStorage.getItem("bookindex") || "{}" ); //章節位置 bookmulu(id).then(res=>{ if(res.status==200){ res.data.chapters.forEach( item => { // 內容是根據link來獲取的 將link發給服務器，由于// / & # 服務器是無法識別的 所以需要對link轉碼 最后服務器返回內容 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]); // 根據目錄 獲取內容 }) }, // 獲取內容 getcontent(link){ var content = [] bookcontent(link).then(res => { if(res.status == 200){ var datas = res.data.chapter; content.push({ cpContent:datas.isVip?["vip章節，請購買VIP"]:(datas.cpContent ? datas.cpContent.split("/n") : datas.body.split("/n")), title:datas.title }) this.con = content[0] } }) },小說搜索頁components/read/search.vue 調用MUI的 mt-loadmore 功能，上拉加載更多，
//獲取搜索的書籍 getList() { booksearch(this.keyword).then(res => { if (res.data.ok) { this.searchList = res.data.books.slice(0, 15); //默認展示前15條數據 } }); }, // 上拉加載 loadBottom() { this.allLoaded = true; //上滑時出現加載文字 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) //每次拉動時在現有基礎上加15條 cout++ this.count++ this.allLoaded = false } }) },項目截圖
倉庫代碼
https://github.com/msisliao/v...
總結
以上所述是小編給大家介紹的使用vue-cli快速構建的小說閱讀器,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
