基于vue2.0与追书神器api的小说阅读webapp

vue-nReader

整个项目一共14个页面（包括通用组件），主要使用了vue2.0+vue-router+vuex，主要实现了小说排行榜，小说分类，小说详情，小说阅读，搜索页面，小说阅读记录等页面。达到了可用来看小说的基本需求。

项目地址：https://github.com/zimplexing...

项目中使用的api是通过charles进行抓取的，抓取了笔趣阁和追书神器的api，但是笔趣阁的api有一个问题，就是请求的成功率太低了，时不时地就挂了，在使用这个app的时候是在不好受，所以最后使用的追书神器的api，想当年追书神器免费的时候，真的是看小说神器啊，现在也开始收费了。

• 笔趣阁api

• 追书神器api

​之前没有过开发移动端的经历，看完vue官方文档，执行完npm install vue-cli -g,然后生成项目结构之后，就懵逼了。webapp页面怎么布局？肯定不能使用px，那要用什么？直接拿一个移动端的UI组件来用？等等一些很傻的问题在我的脑海中出现了。

1. 一个比较完善的用vue2.0写的饿了么 用来参考

2. 支持vue的图标库 以及图标库的 图标展示 （后来使用了iview组件，图标也一起使用了iview集成的图标了）

3. vue-router的官方指导文档 一开始使用路由，特别是对vue还不是很熟的情况下，还是需要多看看官方的文档

4. 7个你可能不认识的CSS单位 如何在移动端使用合适的单位有疑问的，靠这篇解惑了。

5. Flex 布局教程：语法篇和Flex 布局教程：实例篇 使用flex布局，基本能够使用所有的使用场景了。

利用下班时间，写写停停，大概花了一个月的时间，终于把这个小项目搞定了。这个项目不仅仅是用来给自己练手用，也是自己打发业余时间的需要。两全其美。

这些是我在开发过程中遇到的一些疑问或者是困惑或者是还没有解决的，第一次使用vue开发，遇到的一些问题还是一些比较基础的，重在记录:

开发中的问题：

• 每次切换tab页后都重新加载数据,使用keep-alive后，排行榜页面还是会发送请求

解决方法：使用created钩子进行请求数据，使用beforeEnterRoute重复发请求

• 列表一次性全部加载，没有实现滚动加载

解决方法：使用vue-scroll获取滚动的高度，更新渲染的数据

• 使用$router.push()后使用浏览器返回会完全还原历史路径

解决方法：存在二次跳转的，最好使用重定向解决，不要使用mounted之后在进行push操作

• 有多层页面，并且上级页面不确定时，路由返回错误

解决方法：将每层的页面路径分类并放到state中（二级页面，三级页面等等）分开管理，向state提交上级路径时，排除当页面的所有下级页面路径

• 异步获取数据后渲染模板 模板会先报错再等数据返回之后再做一次渲染

解决方法1：在渲染需要用到异步获取的数据的地方都先进行判断

解决方法2：事件在data定义异步获取数据的数据格式，避免报错

• tab切换渲染加载等待加载动画效果

解决方法：使用vue-spinner组件

• 数据过滤或者是时间格式化问题

解决方法：使用filters加moment解决

• 跳转到相应路由标记active

解决方法：使用vue-router并设置exact属性即可

• api为第三方网站的，存在跨域问题

使用代理将请求进行转发

• 事件绑定都是使用的是click，在移动端火出现延迟

解决方法：使用vue-touch#next，使用tap替代click事件

预览地址

项目放在google云的虚拟主机上，访问速度看人品。代理也运行在上面，所以加载速度可能会比较慢。其中有一些小说封面会加载不出来，这个是api的问题，并不是网络的原因。

电脑端请开启开发者模式
在线预览地址

手机扫码：

屏幕截图

![]https://github.com/zimplexing...