用vue+webpack+es6+sass实现Cnode网站(一)

写在文章前：最近把官网的vue文档过了一遍，准备写个项目来巩固下自己对vue的学习。因为cnode网站有开放的api，所以我决定用vue+webpack+es6+sass的技术栈去实现这个网站(单页面的形式)。这篇系列的文章我主要是分享下自己怎么开发还有怎么实现一个个vue组件去构建整个网站。关于webpack配合vue的使用可以关注我的另外一篇博文webpack+vue配置,感谢Cnode网站提供的开放API。

建议阅读前准备内容

• 单页面应用

• 路由vue-router文档

• webpack+vue配置

1. 构建我们的项目目录

├── README.md          
├── index.html         // 项目入口文件
├── package.json       // 项目配置文件
├── src                // 生产目录
│   ├── vue            // 组件
│   |    ├──about.vue
│   |    ├──artlist.vue
│   |    ├──article.vue
│   |    ├──login.vue
│   |    ├──loading.vue
│   |    ├──search.vue
│   ├── components     // 各种子组件
│   |    ├──header.vue
│   |    ├──returnTop.vue
│   |    ├──menu.vue
│   ├── js             // 外部引入的js文件
│   ├── scss           //scss文件
│   ├── img           //图片文件
│   ├── filters.js     //过滤器
│   └── main.js        // Webpack 预编译入口    
└── webpack.js          // Webpack 配置文件

2.今天要实现的一个效果

在上面的gif动画中我们总共看到了几个页面

• loading.vue(首页过渡加载)

• artlist.vue(列表展示页)
  几个组件

• header.vue(头部)

• meun.vue(菜单栏)

• returnTop.vue(返回顶部)

在正式内容开始前先简单的说下，我们看到的一个页面是由各个组件组成的，而我们可以把页面拆分成一个各个组件，每个组件单独一个文件，组件的结构是这样的，避免内容过多下面讲到的组件我都不写style，具体代码开源在了 github上，有兴趣的可以去看下。

3.具体页面开发

3.1首页过度也难loading.vue

我们要实现的是一个loading图等待2秒进入artlist列表页

3.1主题列表页artlist.vue

我们的列表页的结构是这样的：

tab主题导航的渲染
我们把列表的导航加载进来，官方API的有主体分类ask，share，job，good
所以得出我们的数据itemTab。

itemTab : [
      {'title' : '全部', 'type' : 'all'},
      {'title' : '精华', 'type' : 'good'},
      {'title' : '分享', 'type' : 'share'},
      {'title' : '问答', 'type' : 'ask'},
      {'title' : '招聘', 'type' : 'job'}
]

然后在定义一个输出请求接口的对象：

searchKey : {
     page : 1,
     limit : 20, //每页加载20条
     tab : 'all' //主题 有all ask share job good
}

顺便再定义哥artilist[]空数组来存放等下取出来的数据。

我们要先定义拉取数据的方法函数，我们把拉取到的数据列表放在我们先前定义的artlist[]数组里面，利用vue的双向绑定的特性配合v-for我们就可以把我们的列表页的主题内容渲染出来了。

//获取数据方法
gerArtlist : function() {
    let rqdata = $.param(this.searchKey);
    $.get('https://cnodejs.org/api/v1/topics?' + rqdata, (data) => {
         if(data.success){
              this.artlist = data['data'];
              this.scroll = true;
         }
    })

}
页面刚打开的时候我们要去取第一次的数据

ready : function() {
   this.gerArtlist(this.initIndex);
 });

切换主题的时候我们要给每个item绑定一个事件changeTab($index)，利用$index这个索引，改变我们this.searchKey.tab在去请求数据

// 标签tab切换方法
changeTab : function(index) {
    this.initIndex = index;
    this.searchKey.tab = this.itemTab[index].type;
    this.artlist = [];
    this.searchKey.limit = 20;
    this.gerArtlist(this.initIndex);
}

我们设置的是当前页面打开的时候加载了20条数据，现在我们要实现下拉，超过了一定的区域在去请求下一个20条的内容，就是改变searchKey.limit，每次触发下拉条件就叠加20.

// 超过滚动获取数据方法
scrollArtlist : function() {
    if(this.scroll){
         let totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
         if ($(document).height() <= totalheight + 200) {
             this.scroll = false;
             this.searchKey.limit += 20;
             this.gerArtlist();
         }
    }
}

在ready里面绑定下scroll

ready : function() {
       $(window).on('scroll',() => {
        this.scrollArtlist();
 });

3.2返回顶部组件
在我们的列表页引入返回顶部组件和头部组件作为子组件

components : {
    'nv-header' : require('../components/header.vue'),
    'nv-top' : require('../components/returnTop.vue')
}

返回顶部组件returnTop.vue

3.3头部组件

在我们的header组件中我们引入了一个menu组件，props : ['showm']利用父子组件间的通信，给meun绑定了个:class="{'showMeun':showm}"利用css3来实现过渡

结束语

由于是空闲的时间做的，所以只实现了部分功能，后面会继续完善，源码已经放在github