vue-cli構建的小說閱讀器

時間 2019-11-09

標籤 vue cli 構建閱讀器简体版

原文原文鏈接

項目介紹

主要頁面

一、首頁home.vue分類展現書籍，幻燈片展現熱門推薦
二、搜索search.vue，上拉加載更多
三、書籍詳情book.vue加入書架、當即閱讀，展現評論，同類書籍推薦
四、書籍內容read.vue，獲取目錄，存儲翻閱的章節位置，
五、書架bookrack.vue，獲取加入書架的書單javascript

技術棧

vue、vue-cli、axios、vue-router、vuex、localStoregevue

入口頁面app.vue

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

首頁tabbar/Home

包含： components/sub/item 和 components/sub/search 、components/sub/header
結構： banner切換與搜索和小說分類樓層java

小說樓層單獨定義了組件 components/sub/item , home循環樓層分類名稱，並將樓層分類id傳給item組件 :booklistId='{id:item._id}' , item組件用 props: ["booklistId"] 接收分類id, 並根據分類id獲取對應的數據

item.vueios

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

包含： components/sub/yuedu 、mulu、pinglun、
結構：小說概況與簡介，是否加入書架或者繼續閱讀，目錄、評論、同類書籍推薦

加入書架/當即閱讀(yuedu.vue)組件
加入書架，獲取書籍信息，並把相關書籍信息存放在書架中、存local

book.vuegit

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.vuegithub

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

book.vuevuex

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

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

<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.vueaxios

<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

包含： components/sub/mulu 、
結構：上一章下一章，目錄，章節內容
獲取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 
         }
       })
    },