vue低仿知乎日报

概述

一个基于vue的仿知乎日报的前端项目。

关于知乎日报：

知乎日报是一款拥有千万用户的资讯类客户端，每日提供来自知乎社区的精选问答，还有国内一流媒体的专栏特稿。

主要功能

每天更新好文章，包括权威的时事解读、有趣的生活建议
　　更符合用户口味的「主题日报」，覆盖电影、财经、设计、体育等领域
　　长评优先展示
　　离线下载功能，及时缓存近期的 30 篇文章
　　更多贴心小细节：多图及长文预警；支持一键分享收藏；夜间模式

安装

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

技术栈

vue

vuex

vue-router

axios

mint-ui

在线演示

demo

github地址

个人博客地址

细节

API:

感谢Xiao Liang提供的API,所有 API 均由 知乎（Zhihu.Inc）提供。

跨域问题

由于浏览器的同源策略，不允许进行跨域请求，所以首先解决的就是跨域问题，以前采用的是开发时配置/config/index.js下的proxyTable选项，实际部署时采用nodejs转发，这次为了方便，采用了第三方APIJsonBird进行转发,可以避免跨域的问题，返回的是json对象。

轮播：

知乎日报在首页有5个top_stories，采用的是轮播方式展现出来的，为了实现轮播，采用的mint-ui的swipe组件，不过在使用的时候折磨了很久，最后发现原因是该组件没有设置默认的高度，需要手动设置，如果不设置，就什么都显示不出来。。。（尴尬。。。）

刷新

采用的同样是mint-ui下的组件，规定聚页面底部的距离阈值，小于阈值就触发自定义事件。

路由

vue-router的配置文件

import Vue from 'vue'
import Router from 'vue-router'
import showContent from '@/components/showContent'
import detail from '@/components/detail'
import message from '@/components/message'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/show',         //显示新闻列表
      name: 'showContent',
      component: showContent
    },
    {
        path: '/detail',　　　//显示详细信息
        name: 'detail',
        component: detail
    },
    {
      path: '/message',　　　//消息页面
      name: 'message',
      component: message
    }
  ]
})

状态管理

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state:{
        id: 9377231,      //文章id
        response: '',    
        top_stories: [],  //标题文章
        stories: '',    　//普通文章
        date: 20170425　　//日期
    },

    mutations: {
    },
    actions: {

    },

})
export default store

防盗链

知乎在图片做了防盗链处理，只需要在header中加入

即可解决

运行截图

index.png

detail.png

message.png

文件结构

.
├── build
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── dist
│   ├── index.html
│   └── static
│       ├── css
│       ├── img
│       └── js
├── index.html
├── node_modules
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   ├── components            //组件文件夹
│   │   ├── detailHeader.vue      //详细信息的头部组件
│   │   ├── detail.vue            //详细信息组件
│   │   ├── indexHeader.vue       //首页组件头部
│   │   ├── messageHeader.vue     //消息页面的头部组件
│   │   ├── message.vue           //消息页面组件
│   │   └── showContent.vue       //首页显示组件
│   ├── main.js
│   ├── router
│   │   └── index.js    //vue-router的配置文件
│   └── store
│       └── index.js    //vuex的配置文件

13 directories, 41 files