基于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组件来用?等等一些很傻的问题在我的脑海中出现了。
一个比较完善的用vue2.0写的饿了么 用来参考
支持vue的图标库 以及图标库的 图标展示 (后来使用了iview组件,图标也一起使用了iview集成的图标了)
vue-router的官方指导文档 一开始使用路由,特别是对vue还不是很熟的情况下,还是需要多看看官方的文档
7个你可能不认识的CSS单位 如何在移动端使用合适的单位有疑问的,靠这篇解惑了。
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...
基于vue2.0与追书神器api的小说阅读webapp相关推荐
- Android小说阅读器,追书神器API接口
追书神器API接口 注:(所有的接口都是Get请求) 所有地址前要加上 api.zhuishushenqi.com 1. 获取所有分类 类型 值 接口地址 /cats/lv2/statistics ...
- vue仿追书神器,vue小说项目源码 1
vue-reader 一点阅读器!API源自追书神器,免费使用!目前已初步开发完成! Github项目地址:https://github.com/AntonySufer/vue-readle 欢迎is ...
- 安卓追书神器1.3.7(清爽版)
软件简介: 追书神器,专注免费阅读小说的追新更神器 .全网小说光速追更提醒,全站免费阅读无广告,多维推荐送好书,更有集吐槽书评交友等多位一体的高能社区,超好用的网文小说电子书追更神器! 软件截图: 下 ...
- 追书神器的api接口写的微信小程序
@这是我基于追书神器的api接口写的微信小程序 这是我小程序的二维码
- React+Redux仿Web追书神器
引言 由于 10 月份做的 React Native 项目没有使用到 Redux 等库,写了一段时间想深入学习 React,有个想法想做个 demo 练手下,那时候其实还没想好要做哪一个类型的,也看了 ...
- 我用几行Java代码撸了一个追书神器,真的是技术改变生活!老同学:艾玛真香!
大家好,我是Spring小杨,一个有梦想的Java司机. 前不久,有个老同学找到我,问有没有什么靠谱的追书神器? 我想着这玩意无非用爬虫,但是还是得尽量低调,不然牢底坐穿! 正版网站的资源很难爬下来的 ...
- 基于vue2.0的一个豆瓣电影App
1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...
- Muse UI — 基于 Vue2.0 的 Material Design UI 库
Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场. 先睹为快 Muse UI 主要用于 ...
- 基于 Vue2.0 的移动端 / PC 端验证码输入组件.
vue-input-code 基于Vue2.0的移动端验证码输入组件. 功能预览 输入回调 完成回调 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 ...
- 基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进 ...
最新文章
- conda 常用操作 镜像管理
- 基于matlab/simulink的PMSM直接转矩控制和bangbang控制
- Segmentation fault到底是何方妖孽
- db2 删除schema中所有表_常用SQL系列之(六):删除方式、数据库、表及索引元信息查询等...
- 怎么查看页面跳转过程_faststonecapture注册码在哪?怎么获取?
- Condition总结-await和signal的总结
- Android学习–Android app 语言切换功能
- 动手实操丨基于随机森林算法进行硬盘故障预测
- android应用开发(27)---Fragment
- C++进阶教程之模板
- ASP.NET通用房屋租赁管理系统源码
- 自研DCI网络路由交换协议DCIP-白牌交换机时代的企业网络
- 2022苹果AppStore应用商店上传与APP上传流程必看(基础篇)
- Android MTK log分析
- 我的梦想是成为一名计算机程序员英语怎么说,英语作文。我的梦想、我的梦想是成为电脑程序员。。80词...
- JavaScript实现语音助手核心代码
- Win10中无法加载 .iso文件的问题一例
- 如何清除 iPhone 上的其他存储来释放空间
- 数据库实验4 SQL语言-SELECT查询操作
- 程序员,怎么就成了一碗青春饭?
热门文章
- 网站的动静分离实践(动静分离)
- json文件_ajax
- 开发错误记录5-Failed to sync Gradle project ‘HideTitleDemo’
- PHP-表单提交(form)
- 解决在jenkins中无法打开robot framework report.html log.html的问题
- 房间WIFI信号不好怎么办?——无线路由桥接(WDS)
- js 控制 head 元素 隐藏与显示
- SQLPLUS SPOOL命令使用
- poj 1276 Cash Machine(多重背包)
- .Net中数据绑定控件应用小技巧