背景
工作十余年，作为资深打工人，工作有点累，最近打算离职，所以有点空闲时间了。这两天读了个小说《大奉打更人》，还挺长的，如果一直用手机摸鱼，则太明显了，总不能一直玩手机。所以想着在电脑上看，这样可以更从容的摸鱼，反正都在看电脑嘛。
又不想在起点等看正版的小说网站看(绝不是因为花钱)，所以只能在笔趣阁等网站看。但是这些盗版网站存在以下问题：
- 公司能检测你流量，如果一直在小说网站也不好
- 可能会有广告
- 无法很好记住阅读的位置
- 有时候网络慢会比较卡顿，且一章内容会分为好几页
- 看久了想换个背景颜色、文字大小等不好调整
基于上面的问题，想着反正也是闲来无事，就把小说下载到本地，然后自己写一个网页阅读器，这样想要的功能，可以自己动手，丰衣足食。
技术选型
由于小说动不动就大几Mb、十几Mb，所以单纯在前端页面来上传、解析不太好，所以打算用一套同构的框架来实现，最终选择了比较火的 Nuxtjs，官网地址，github 地址。
产品功能
自己只是一个程序员的料，产品设计真的很拉，反正也是自己看的，就简化处理，只写功能，样式上可以先忽略。由于产品服务于自己，所以就看自己需要什么功能，就做什么功能。最后整体功能如下：
1. 上传解析
目前只支持 txt 文件上传，支持不同编码的文件，后端最后会转换为 utf-8 编码。然后解析整个文件，生成目录已经每个章节内容，保存到项目目录中。如：
2. 切换书籍
可以上传多本书籍，然后切换想看的书，功能很简单，就是一个 Select 下拉选择，会读取项目中上传的所有书籍。
3. 目录
一般网络小说都很长，动辄一千多章，所以为了切换章节方便，增加了快捷定位到当前章节的功能，双击调整到对应的章节。由于是本地服务，切换章节速度很快。
4. 设置
这块儿功能比较多，不过原理很简单，就是把设置的值放到全局 state 中，然后读取即可。虽然功能简单，但比较实用，比如想换背景色、想调节页面宽度、文字大小、行高等等。演示如下：
字体、背景等设置
5. 自动阅读
有时候不想用鼠标或键盘向下滚动来看，自动阅读可以使页面自动往上滚动，并且可以调节滚动的速度。开启自动阅读后，由于整个页面向上滚动，为了在阅读过程中调节速度，把这块儿的按钮设置了吸顶。
自动阅读
6. 翻页
翻页，其实就是翻章节。支持键盘操作，左箭头切换上一章、右箭头切换下一章，速度很快。
7. 记录阅读位置
简单起见，就把信息存储到浏览器的 localStorage 了，当前阅读的章节、设置都会记录下来，所以刷新页面或者下次再次进入后，之前的设置都还在。
7. 回到顶部
这个功能更简单了，考虑到一章节比较长，有的上万字，所以增加了一键回到顶部的功能，此处不再演示。
项目地址
整个项目代码不算多，但是也有几千行，代码就不放在文章里了，大家感兴趣或者想二次开发的可以去这个 git 仓库拉代码就行。git 地址：github.com/89466598946…
总结
本来想着会很简单，而且看起来也很简单，但是实际开发过程中还是遇到不少问题，如文件编码问题、特殊字符导致保存文件错误、vue 太久没用生疏等问题，硬生生写了两天才完事。
最后，希望大家工作都没那么卷，有时间自己摸摸鱼，学点技术，比闷头写业务收获可能还大。
