Vue2开发的读书WebAPP
前言
初学vue.js,官网的文档写的很清楚,看着不难。俗话说:光说不练假把式。程序猿学个新东西还是要敲出来看看效果比较好。最开始是想搞个音乐类的,毕竟天天都会听歌,但发现搞音乐类的太多了,我再搞个多没意思。考虑了一下,还是搞个看书的吧,这个还是很少有人搞的。找了找发现只有追书神器的api暴露出来了,起点之类的api找不到。最终效果因为api数据的限制,参考了起点中文网app、起点中文网web端,以及追书神器web端,再加上自己的一些想法搞出来的。项目中的小图标使用的是阿里巴巴的矢量图标库Iconfont。
http://www.jianshu.com/p/bc019939d046
技术栈
vue2 + vuex + vue-router + webpack + ES6 + axios + sass
源码地址
https://github.com/XNAL/ReadMore
项目运行
git clone https://github.com/XNAL/ReadMore
cd ReadMore
npm installnpm 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.qdnote.com(pc端请用chrome手机模式预览)
- 扫描下面的二维码
部分截图
我的书架
精选
分类
排行
书籍详情
看书
搜索
作者:TDon
链接:http://www.jianshu.com/p/bc019939d046
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
Vue2开发的读书WebAPP相关推荐
- JAVA WEB整合开发王者归来 -- 读书笔记 by CZF 完整版
JAVA WEB整合开发王者归来 -- 读书笔记 目录 第1章 概述. 1 第2章 搭建web开发环境. 1 第3章 Servlet技术. 1 第4章 深入JSP技术. 7 第5章 会话跟踪. 12 ...
- iPhone与iPad开发实战读书笔记
iPhone开发一些读书笔记 手机应用分类 1.教育工具 2.生活工具 3.社交应用 4.定位工具 5.游戏 6.报纸和杂志的阅读器 7.移动办公应用 8.财经工具 9.手机购物应用 10.风景区相关 ...
- 【webapp】开发手机版WEBAPP MOBILE APP
其实开发手机版WEBAPP 要解决的事: 1. respond自适应不同屏幕的手机,ipad 2. 一些漂亮的 ui 3.一些特效:比如 菜单,滚动,触摸等 jquery mobile 做了上面3件事 ...
- javascript设计模式(javascript设计模式与开发实践读书笔记)
javascript设计模式(javascript设计模式与开发实践读书笔记) 单例模式 策略模式 代理模式 迭代器模式 发布-订阅模式 命令模式 组合模式 模板方法模式 享元模式 职责链模式 中介者 ...
- vue2开发中$emit 、$on 、$once 、$off 的使用, vue中$root、$refs、$parent 的使用
一.vue2开发中$emit .$on .$once .$off 的使用 简单概述: 1.vm.$emit(eventName,callback) 和 $on(eventName,callback) ...
- Asp.net+Vue2构建简单记账WebApp之六(vue.js构建记账统计页面)
Asp.net+Vue2构建简单记账WebApp之一(设计) Asp.net+Vue2构建简单记账WebApp之二(使用ABP迅速搭建.Net后台) Asp.net+Vue2构建简单记账WebApp之 ...
- 《HTML5 Canvas核心技术 图形、动画与游戏开发》 读书笔记
<HTML5 Canvas核心技术 图形.动画与游戏开发> 读书笔记 文章目录 <HTML5 Canvas核心技术 图形.动画与游戏开发> 读书笔记 第1章 基础知识 第2章 ...
- 软件腐化的七个特征之僵化性和脆弱性(设计模式原则的反面) (《敏捷软件开发》读书总结第一篇)
文章目录 前言 僵化性(Rigidity) 原文 我的理解 脆弱性(Fragility) 原文 我的理解 前言 最近读Robert C. Martin(Bob大叔)的书<敏捷软件开发>,准 ...
- 软件腐化的七个特征之牢固性和粘滞性(设计模式原则的反面) (《敏捷软件开发》读书总结第二篇)
文章目录 前言 牢固性(Immobility) 原文 我的理解 粘滞性(Viscosity) 原文 我的理解 前言 最近读Robert C. Martin(Bob大叔)的书<敏捷软件开发> ...
最新文章
- Scala基础:定义变量和逻辑判断语句以及方法和函数
- oracle初始安装大小
- 怎么下载安装激活Adobe After Effects CC 2019教程
- 视觉检测无脊椎机器人或vipir_机器人视觉引导系统原理及解决方案
- 涨薪关键之反射机制,引得项目经理对你的看重,加薪触手可及!!!!
- linux 计划任务 实例,计划任务 cron 的配置和实例
- 解决模拟MOSS用户调用WebService打开个人站点进行操作
- 配置 Docker 加速器
- 在SpringBoot中使用slf4j与logbak
- 野火开发版屏幕_鸿蒙2.0手机开发者版发布,华为多数自研设备明年升级鸿蒙
- cut point and bridge总结
- python操作数据库的几种方法_python对mysql数据库操作的三种不同方式
- 服务器是怎样进行中断的,企业如何减少服务器中断风险
- js 中{},[]中括号,大括号使用详解
- matlab位图矢量化,位图矢量化的处理算法研究
- !!!python 100行代码编写【Google 图片搜索爬取工具】多线程
- RNA-seq:最长转录本提取
- mt6761平台 源码内置APK报错“/lib/xxxx.so“ not found
- mysql 以什么结尾查询_MySQL查询选择以某些字符/数字结尾的列值?
- 2013 年国产开源软件 10 大年度热门项目
热门文章
- android opengl 简书,Android OpenGL入门
- matlab求两向量夹角_高考数学解题技巧:专题21 平面向量中最值、范围问题高中数学黄金解题模板...
- zabbix_sender安装和使用
- 产品经理需要了解的概念【职位篇】
- vue2.0模板的三种写法
- python overflowerror_Python中的OverflowError:(34,'结果太大')
- 蓝桥杯——摔手机 动态规划
- 奥比中光深度摄像头_奥比中光展示智能深度3D摄像头技术解决方案
- 京淘项目实战开发-01
- 第十章 标准模板库STL