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>
网友评论