乐趣区

vuecli构建的小说阅读器

jiezi

项目介绍

主要页面

1、首页 home.vue 分类展示书籍，幻灯片展示热门推荐
2、搜索 search.vue，上拉加载更多
3、书籍详情 book.vue 加入书架、立即阅读，展示评论，同类书籍推荐
4、书籍内容 read.vue，获取目录，存储翻阅的章节位置，
5、书架 bookrack.vue，获取加入书架的书单

技术栈

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

入口页面 app.vue

  • 分成底部导航 跟 主视图容器 router-view

首页 tabbar/Home

  • 包含：components/sub/item 和 components/sub/search、components/sub/header

  • 结构：banner 切换 与 搜索 和 小说分类楼层

    小说楼层单独定义了组件 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

  • 包含：components/sub/yuedu、mulu、pinglun、
  • 结构：小说概况与简介，是否加入书架或者继续阅读，目录、评论、同类书籍推荐

加入书架 / 立即阅读 (yuedu.vue) 组件
加入书架，获取书籍信息，并把相关书籍信息存放在书架中、存 local

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

  • 包含：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 
         }
       })
    },

项目截图

仓库代码

https://github.com/msisliao/v…

退出移动版