Vue.js开发的读书WebAPP
前言
初学Vue.js,官网的文档写的很清楚,看着不难。俗话说:光说不练假把式。程序猿学个新东西还是要敲出来看看效果比较好。最开始是想搞个音乐类的,毕竟天天都会听歌,但发现搞音乐类的太多了,我再搞个多没意思。考虑了一下,还是搞个看书的吧,这个还是很少有人搞的。找了找发现只有追书神器的api暴露出来了,起点之类的api找不到。最终效果因为api数据的限制,参考了起点中文网app、起点中文网web端,以及追书神器web端,再加上自己的一些想法搞出来的。项目中的小图标使用的是阿里巴巴的矢量图标库Iconfont。
技术栈
Vue2 + vuex + vue-router + webpack + ES6 + axios + sass
源码地址
https://github.com/XNAL/ReadMore
项目运行
git clone https://github.com/XNAL/ReadMore
cd ReadMore
npm install
npm run dev(本地运行 访问:http://localhost:8080)
npm run build (部署上线 生成的dist文件夹放到服务器中即可:需要配置代理,如使用nginx,可参考下面问题中的配置)
说明
- 目前只做了第一个版本,还存在一些需要进行优化的细节问题,后续会继续进行维护更新。如果发现什么问题,也欢迎跟我联系反馈。
- 如果觉得做的还行,对您有所帮助,欢迎“start”一下。
开发中遇到的一些问题
- 多个子组件循环,父组件如何处理加载状态(精选页面)
每个子组件加载完后是同`this.$emit`通知父组件,父组件判断所有子组件加载完成后隐藏loading。
跳转页面后active标记
最开始使用url.indexOf来处理,后来直接发现vue-router的exact属性更好用。
调用第三方api接口时跨域的问题
1. 本地使用proxyTbale
在config/index.js中添加配置:
'/api': {
target: 'http://api.zhuishushenqi.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
2. 部署服务器后通过nginx代理
nginx中配置:
location /api/ {
proxy_pass http://api.zhuishushenqi.com/;
}
3. 调用接口时只需要以`/api`开头就可以
服务器部署后vue-router的虚拟路由在刷新时出现404页面
修改nginx配置:
location / {
try_files $uri $uri/ @router; //增加的内容
root /home/don/book;
index index.html;
}
location @router { //增加的内容
rewrite ^.*$ /index.html last; //增加的内容
} //增加的内容
访问地址
- 请访问地址:http://www.tdon.site/read-more/(pc端请用chrome手机模式预览)
- 扫描下面的二维码
部分截图
我的书架
精选
分类
排行
书籍详情
看书
搜索
DON的前端分享
前端开发,也了解一些后端的开发。分享个人项目和开发经验。
被 1 篇内容引用
906 声望
42 粉丝
推荐阅读
如何让Element UI的Message消息提示每次只弹出一个
Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示,但是公司的测试人员在进行测试时会一直点,然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况(毕...
TDon赞 46阅读 33.1k评论 31
Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...
款冬赞 27阅读 13.4k评论 7
给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...
熊的猫赞 19阅读 2.5k
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等
似曾相识赞 17阅读 29.1k评论 7
一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]
jigsaw赞 16阅读 8.4k评论 3
你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!
熊的猫赞 14阅读 1.7k
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...
熊的猫赞 14阅读 1.6k
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。