README.MD · miracle_making/iread

基于uniapp的小说在线采集阅读器

# 缘起
学习uniapp有一年多，前期做过一个同城项目，后面工作忙，没有继续深入学习。2020年由于疫情的缘故，在家搁置时间过长，期间父亲大人迷上了小说，我就去网上找各种破解版小说APP给他。刚开始还好，看着看着软件强制更新了，就又给他找其他的破解APP，看一段时间又更新了。。。周而复始，后来就想为什么不自己弄一个呢，于是就有了今天这个项目。
## 主要功能
我主张一切从简，小说阅读器的主要功能：**能看**，**能搜**。无论是三岁小孩，还是八十老妪，打开就能懂如何使用。

## 界面设计

业余前端，不追求页面的极致，能看就行。
1. 主页

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200511110833767.png)

2. 分类页

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200511110903724.png)

3. 书籍详情页

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200511110931975.png)

4. 书籍阅读页

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020051111102665.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200511111001432.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200511111050103.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NDA4NDcz,size_16,color_FFFFFF,t_70)

5. 书架页

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200511111158239.png)

6. 我的页

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200511111235911.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NDA4NDcz,size_16,color_FFFFFF,t_70)
我的页没有实质性功能，没有登录操作。

制作期间去uniapp的插件市场观摩了其他大佬做的小说阅读器，本来是不想重复造轮子的，使用过程中发现了一些BUG，我无法解决，后来不得不自己造轮子了。

## 程序开发

鉴于自己都是前端小白，努力做到页面结构划分清晰，让人看着不乱，能自己扩展。所以组件我选用了官方组件，css纯手写。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200511111733413.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200511111805169.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NDA4NDcz,size_16,color_FFFFFF,t_70)

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200511111823157.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5NDA4NDcz,size_16,color_FFFFFF,t_70)
页面内部js也有注释说明，能详尽详。
## API接口说明
页面都是异步请求加载数据的，下面列出所有界面需要的接口。
#### 首页
1. 获取分类小说总数接口
> getcategorycount

返回示例
```
{"msg":"操作成功","code":200,"cclist":[{"count":42,"category":"其他小说"},{"count":345,"category":"历史军事"},{"count":160,"category":"女生频道"},{"count":53,"category":"武侠仙侠"},{"count":391,"category":"游戏竞技"},{"count":14,"category":"玄幻奇幻"},{"count":210,"category":"科幻灵异"},{"count":102,"category":"都市言情"}]}
```

2. 搜索接口
> searchBook

返回示例

```
{"msg":"操作成功","booklist":[{"create_time":"2020-05-10 10:40:55","fiction_url":"ww.abc.com","author":"糖衣古典","description":"……","id":1252,"title":"盗墓者传奇：月夜鬼吹灯","f_type":"科幻灵异","book_img":"24340.jpg","f_status":"连载中"}],"code":200}
```
#### 小说分类页接口
1. 获取某分类下有多少本小说
> getbooklist

返回示例

```
{"msg":"操作成功","code":200,"totalpages":1,"bookList":[{"id":1360,"title":"诡秘之主","author":"爱潜水的乌贼","description":"明依旧照耀，神秘从未远离，这是一段“愚者”的传说。","updateTime":null,"createTime":"2020-05-11 11:00:18","wordNumber":null,"bookImg":"1949.gif","fictionUrl":"https://www.abcw.com/index.html","fstatus":"连载中","ftype":"玄幻奇幻"}]}
```
#### 书籍详情页接口
1. 获取书籍详情
> getbookinfo?fictionid=1351

```
{"msg":"操作成功","code":200,"bookData":{"id":1351,"title":"三国美人志","author":"最后的茄子","description":"书籍描述","updateTime":null,"createTime":"2020-05-10 17:05:15","wordNumber":null,"bookImg":"woshitupian","fictionUrl":"www.xsddss.com","fstatus":"已完结","ftype":"游戏竞技"}}
```

2. 获取章节目录
> getchapterlist

```
{"msg":"操作成功","code":200,"chapterlist":[{"id":null,"fictionId":null,"chapterTitle":"第一章 穿越成陶松","content":null,"createDate":null,"chapterUrl":"www.xxx.com","corder":1}]
```

#### 读书详情页接口
> getcontent

```
{"msg":"操作成功","code":200,"content":"我是内容"}
```

以上是运行项目所需要的API接口，各位读者可根据自己的语言的特性，开发相关的API接口。

## 结语
经过半个月的努力，一套属于我自己的小说阅读器诞生了，uniapp可以打包成H5和APP。我自己买了个服务器，部署了H5端，运行了一段时间，自我感觉还好。1M的带宽，后台还要抓小说，正式站点就不放出来了。怕崩。

## 疑问:小说从哪里来？
百度 **免费小说** 会出来一堆网站，自己选一个反应快的界面不乱的广告少的网站进行抓取。
怎么抓取？
1. 打包成APP的，可以参考uniapp插件里头的仔仔小说阅读器，直接前端抓取。
2. 打包成H5形式的，有跨域问题，不能在前端抓取，需要有自己的后台进行抓。如果你会JAVA就用Java抓，会phython就用phython抓。 抓取技术Java我用的jsoup，会jquery就能分析出来界面结构。

采集之后的小说可以保存到自己的数据库中，这样页面基本是秒加载的。当然你可以不保存到库，页面打开的时候后台动态抓取，动态返回文章内容章节内容等。这样是做的一点好处就是：后台不用跑自动任务去更新小说章节；缺点：就是有点慢。目前我采用的是动态采集，孰优孰劣，自己取舍。

## 源码地址

开源中国：[https://gitee.com/aper/iread/](https://gitee.com/aper/iread/)

miracle_making/iread

简介

发行版

贡献者

近期动态

miracle_making/iread .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

miracle_making/iread