教你使用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 相关文章推荐
JavaScript 对象模型 执行模型
Oct 15 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
js实现聊天对话框
Feb 08 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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
原生JavaScript实现换肤
2021/02/19 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
python构建基础的爬虫教学
2018/12/23 Python
python实时监控logstash日志代码
2020/04/27 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
人力资源作业细则
2014/03/03 职场文书
小班下学期评语
2014/05/04 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
培养联系人考察意见
2015/06/01 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL