教你使用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 相关文章推荐
JS 判断代码全收集
Apr 28 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
详解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
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
javascript打印输出json实例
2013/11/11 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
vue实现信息管理系统
2020/05/30 Javascript
如何用itertools解决无序排列组合的问题
2017/05/18 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
西北政法大学自主招生自荐信
2014/01/29 职场文书
《春晓》教学反思
2014/04/20 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
销售个人求职信范文
2014/04/28 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
党员剖析材料范文
2014/12/18 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python