/vue-ebook

基于vue做的一个epub电子书商城的展示WebApp,技术栈是vue+vuex+vue-router+axios+vue-i18n+node

Primary LanguageJavaScript

vue-imooc-ebook

项目概述

这个项目实现了书城首页、电子书详情页、电子书阅读界面的跳转。主要的技术栈是vue+vuex+vue-router;vue-i18n实现 国际化;vue-transition实现一些元素过度动画;sass编写样式;大部分布局采用flex弹性布局;nodejs做路由匹配,向前台发送 数据;MySql存储了电子书的相关信息;所有的静态资源都放入了nginx服务器中;最后购买了阿里云的服务器,但由于学生党没钱, 只买了带宽1M的服务器,所以网页加载速度很慢,特别是阅读界面先下载电子书时需要几十秒才能展示电子书内容。

书城首页

书城首页最上方含有中英文切换与一个随机推荐的效果。内容是先弹出一个烟花绽放的动画,再弹出随机推荐的对话框,点击 立即阅读即可进入详情页面。在搜索框中输入字符即可显示书名中包含该字符的所有图书,至于下面的搜索记录与热门搜索纯粹是 我自己在组件中写死了数据,并没有与后台进行交互。
下面的猜你喜欢与热门推荐的数据也不是真实的,实际上我就是在nodejs中连接了数据库,写了随机函数从数据库中随机挑选 几本书传到前台,并没有真实的推荐算法,搜索量作支撑。这个项目中的后台接口也不是官方提供的接口,所以数据也就没有真实 性。

电子书阅读界面

这个项目的主体功能在于阅读界面。在详情页面点击阅读就会跳转至阅读界面。跳转后,浏览器会下载epub格式的电子书,需要 等待几十秒。加载过程中,界面右下方会显示加载中,点击目录的话也会显示加载中。加载完毕后,就可以使用了。
点击屏幕中间,会显示上下两个悬浮窗口。上面的功能没有实现,因为导师现在天天催我研究什么BBR,搞得没有时间在这个练习 上拓展功能.....心累。下方的窗口分为四个功能,第一个是目录。目录包含了所有级别的目录和缩进,点击相应章节名称会跳转至相 应页面。目录上方有一个全文检索功能,在输入框中搜索会显示包含该关键词的所有段落,点击进去后会跳转到页面,并对关键词高亮 显示。目录下方还有一个书签选项卡,进去后会显示该电子书中所有添加的书签。添加书签的方法是在阅读界面下拉添加书签,再次下 拉会删除书签。
第二个功能是进度查看。会有一个进度条,显示阅读的百分比。进度条两边是跳转至上一个章节与下一个章节,以及显示当前阅读 的章节名称。
第三个功能是主题切换。有四个主题样式可供选择,分别是默认、护眼、黑夜、雅致主题。
第四个功能是字体切换以及字号大小的设置。默认大小是14px。
电子书阅读还采用了localStorage缓存,保存当前阅读的电子书的相关信息,比如用户设置的字体、字号、阅读进度、书签等,保 证用户良好的阅读体验。

总结

其实这个练习有仿照微信读书的一些功能,本来还想给练习加上书架、听书等功能,奈何导师每天都要开会汇报BBR项目的进展,暂 时没办法花太多时间在喜爱的前端上面了,连面试的准备时间都没有了...真是心累。