項目介紹

主要頁面

1、首頁home.vue分類展示書籍，幻燈片展示熱門推薦

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

3、書籍詳情book.vue加入書架、立即閱讀，展示評論，同類書籍推薦

4、書籍內容read.vue，獲取目錄，存儲翻閱的章節(jié)位置，

5、書架bookrack.vue，獲取加入書架的書單

技術棧

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

分成底部導航 跟 主視圖容器 router-view

首頁tabbar/Home

小說樓層單獨定義了組件 components/sub/item , home循環(huán)樓層分類名稱，并將樓層分類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))   }  } }

立即閱讀時進入小說章節(jié) `this.$router.push({name:'read',params:{id:this.booklinks}})`

目錄組件 components/sub/mulu.vue

點擊目錄時，路由跳轉進入 read.vue 頁面(小說詳細章節(jié))，并且將默認目錄顯示出來，書籍id通過路由傳給 mulu.vue

book.vue

<router-link :to="{name:'read',params:{id:this.books._id,showMulu:true}}" class="mulu" tag="p">

read.vue包含mulu組件，默認目錄隱藏，通過路由傳參決定是否顯示目錄