Vue新手实战小项目,知乎日报SPA

Vue学习的第二个实战项目,一个知乎日报的SPA,数据采用了http://www.huangxizhou.com/2017/04/29/zhihu-dailyAPI/ 提供的API,代码比较凌乱,在这里记录一下自己这次开发过程中踩过的坑。
项目地址: https://github.com/Harrison94pxxxxx/zhihu-daily-vue ,欢迎各位Issue、Fork、Star😄。
效果预览:
1.png
2.png
3.png
4.png
项目依赖:

<pre>"dependencies": {
"vue": "^2.2.6",
"vue-router": "^2.3.1", //前端路由
"vuex": "^2.3.1", //状态管理器
"vue-material": "^0.7.1", //UI组件
"stylus": "^0.54.5", //css预处理框架
"stylus-loader": "^3.0.1",
"axios": "^0.16.1", //http请求
"vue-awesome": "^2.3.1", //font-awesome
"vue-awesome-swiper": "^2.4.0" //swiper
} </pre>

项目安装:

<pre>
1、将项目clone或下载到本地
2、install dependencies 安装依赖
npm install
3、serve with hot reload at localhost:8080 开启服务
4、npm run dev
build for production with minification 编译打包
npm run build</pre>

1.关于防盗链的问题,图片防盗链问题使用以下meta标签解决。

http协议中如果从一个网页跳到另一个网页,http头字段里面会带个referer,图片服务器通过检测referer是否来自规定域名,来进行防盗链。如果没有referer,服务器会认为是浏览器直接打开了文件,所以可以正常显示。
<meta name="referrer" content="never">

2.路由跳转时的过渡动画的实现
watch: {
  $route () {
    this.$store.commit('setShowTransition', 1)
    var that = this
    setTimeout(function () {
      that.$store.commit('setShowTransition', 0)
    }, 1000)
  }
}

我的解决方案是在App.vue中watch路由跳转,一旦跳转就将路由跳转的信息通过Vuex传递给Transition组件,Transition组件使用V-if来决定该组件是否渲染。(这里我是讲过渡动画展示的时间固定为1s,其实可以在跳转后组件渲染完成后立即停止过渡组件渲染)

3.首页下拉刷新的实现

在组件created时给他设置一个setInterval函数监测当前窗口位置,一旦<pre>window.screen.height + document.body.scrollTop === document.body.clientHeight</pre>
则表示现在用户已经将滚动条拖到了最底部,之后通过Vuex给loading组件传递一个参数,loading组件开始渲染,同时开始ajax请求,再将返回结果中的stories数组push进初始stories数组中,然后Vue会自动监测数据的变动,自动将dom里面的stories刷新,最后再给loading传递参数,停止loading组件渲染。(注意这里有一个问题,就是在我切换进其他页面时,监测高度的setInterval函数还是会不断运行,我的解决方法是在home页面watch router的进入和离开,然后通过设置一个参数在进入和离开时判断是否执行监测高度的函数)

4. 切换夜间模式的坑

我对于夜间模式的解决方案本来是在toolbar组件中给模式切换按钮绑定一个点击事件,然后通过Vuex来储存主题代号参数,这样可以在每次路由切换或者跳转时通过主题代号的参数来确定当前所选择的主题。一开始所有的颜色都被正常修改了,但是当路由跳转时,有时候会出现某些元素不能成功应用当前主题的情况。后来发现是由于新页面dom元素未加载完毕,就已经执行了监测主题代号参数并应用主题的函数,所以新挂载的dom元素并没有改变css。后来发现在Vue中有一个自带的API:
<pre>vm.$nextTick( [callback] )

参数:
{Function} [callback]
用法:
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this
自动绑定到调用它的实例上。</pre>
我在路由跳转后加上了$nextTick函数,基本所有元素都可以正常改变css,但是唯独home页面的list列表子元素还是不能正常修改css,最后不得已还是使用了setTimeout函数解决。

5.API拿到的Html解析

http://www.huangxizhou.com/2017/04/29/zhihu-dailyAPI/ 这个API所提供的文章详情里面,返回的Html数据是可以直接用<pre><div v-html="rawHtml"></div></pre>进行绑定的,它还提供了当前所返回Html的Css,可以直接在Ajax请求之后,渲染文章详细信息之前将其加入Head里面。
<pre>
loadCss () {
var head = document.getElementsByTagName('head')[0]
var linkTag = document.createElement('link')
linkTag.href = this.articles.css[0].slice(0, 4) + 's' + this.articles.css[0].slice(4) //因为要将页面放在gitpage上,所以将Http修改为Https
linkTag.setAttribute('rel', 'stylesheet')
linkTag.setAttribute('media', 'all')
linkTag.setAttribute('type', 'text/css')
head.appendChild(linkTag)
}</pre>

谢谢浏览😄
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容