vue.js仿追书神器

Fakin-Reader(v2.0)

v2.0升级

• 删除对大佬api接口的依赖
• 优化阅读器代码
• 增加用户阅读设置（字体、阅读模式）
• 左右滑动翻页增加阅读记录（加入书架的书籍，打开会加载到上次退出前的阅读记录）
• 阅读器对于首次打开用户增加引导页

之前只支持上下滑动翻页，现在多了左右翻页和更多的阅读模式以及字体大小设置

1、前言

此项目，陆陆续续写了一个多礼拜，项目不是很大，但是五脏俱全。
github地址：Fakin-Readerr
原文：阅读原文

实现页面包括：

• 小说排行榜
• 小说分类
• 小说详情
• 小说阅读
• 搜索页面
• 书架
• 书单

实现功能包括：

• 换源
• 搜索
• 阅读历史记录

api地址我用的是大佬（xiadd）封装好了的，当然你也可以不用封装好了的，可以参考下我第一篇文章里面有api说明（api） (v2.0删除了对大佬api项目的依赖)

2、技术栈

vue2.0+vuex+axios+mint-ui（其实我都觉得可以不上vuex的，而且我项目中用vuex的地方很少很少）

3、目录结构

4、遇到的问题和坑

• 在使用keep-alive实现缓存的时候，有些页面需要缓存有些页面不要缓存
  解决方案:在router配置文件里面。给不需要缓存的页面加上 meta: {keepAlive: false}，然后在app.vue里面，根据meta.keepAlive的值来确定是否需要缓存

• 覆盖mint-ui默认的样式
  解决方案：在资源文件夹style文件夹里面新建一个css文件，然后在每个组件的style标签下面import这个css文件即可

• mint-ui中的infinite-scroll无限加载的时候，滚动到底部一次多次执行loadmore函数
  解决方案：这个问题，我没有太好的解决方案，应该是infinite-scroll-distance的问题，导致loadmore执行的时候会认为滚条和滚动元素的底部距离还是小于infinite-scroll-distance的数值，所以infinite-scroll又会执行一次loadmore函数。我自己倒是解决了，但是并不能完美解决，为了不误导别人，这里就不说了！

• 换源的时候get方法出现500错误的时候，导致阅读器页面一直显示加载中
  解决方案：我的方案是在axios>get>catch里面增加回调函数捕获状态码，然后根据状态码去关闭加载中组件，然后显示换源按钮！

5、gif演示