教你使用vue-cli快速构建的小说阅读器


Posted in Javascript onMay 13, 2019

项目介绍

主要页面

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)组件

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 
   }
  })
 },

项目截图

教你使用vue-cli快速构建的小说阅读器教你使用vue-cli快速构建的小说阅读器教你使用vue-cli快速构建的小说阅读器教你使用vue-cli快速构建的小说阅读器教你使用vue-cli快速构建的小说阅读器教你使用vue-cli快速构建的小说阅读器

仓库代码

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

总结

以上所述是小编给大家介绍的使用vue-cli快速构建的小说阅读器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
微信小程序实现点击页面出现文字
Sep 21 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 #Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 #Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 #Javascript
详解async/await 异步应用的常用场景
May 13 #Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 #Javascript
JavaScript Math对象和调试程序的方法分析
May 13 #Javascript
jsonp跨域获取百度联想词的方法分析
May 13 #Javascript
You might like
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
PHP数组相关函数汇总
2015/03/24 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
微信小程序实现左滑删除效果
2020/11/18 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python版的文曲星猜数字游戏代码
2013/09/02 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Django如何使用redis作为缓存
2020/05/21 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
天网面试题
2013/04/07 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
迎国庆演讲稿
2014/09/05 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
公司晚会主持词
2019/04/17 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技