Vue+Vux学习案例(三)—构建开源中国微信版(添加网络通信)

本文链接：https://blog.csdn.net/iuoon/article/details/52998235

接上篇项目构建：Vue+webpack+Vux学历案例(二)—构建开源中国微信版(开篇)

首先新建通信api.js

/**
 * Created by mwuyz on 2016/10/28.
 */
import "whatwg-fetch"
import promise from "es6-promise"

/*
 *获取资讯列表
 */
export let getList = async (page, tag) => {
  let response = await fetch(`http://192.168.1.107:8081/news_list?pageIndex=${page}&pageSize=20&catalog=${tag}`, {
    method: 'GET',
    mode: 'cors',
  }).catch((error) => {
    console.log(error)
  })
  return await response.json().catch((error) => {
    console.log(error)
  })
}

因为开源中国的api并不只支持跨域，所以本外另外在本地起了一层转发服务，这层服务只做转发，支持跨域请求，解决了这个，就可以正常访问开源中国的信息了

这里目前只做了一个获取资讯，后面再添加其他功能。

这次修改了主页home.vue

<template>
  <div>
    <app-header></app-header>

    <tab :line-width="2" >
      <tab-item :selected="tag === item" v-for="item in taglist" @click="tag = item">{{item}}</tab-item>
    </tab>
    <news-list></news-list>
    <app-footer></app-footer>
  </div>
</template>
<style>
@import '~vux/dist/vux.css';
body{
line-height: 1.2;
}
</style>
<script>
  import Tab from 'vux/dist/components/tab'
  import TabItem from 'vux/dist/components/tab-item'
  import Scroller from 'vux/dist/components/scroller'
  import Cell from 'vux/dist/components/cell'
  import Group from 'vux/dist/components/group'
  import AppHeader from './Header'
  import AppFooter from './Footer'
  import NewsList from './NewsList'
  import ScrollerDemo from './scrollerdemo'

  export default {
    data () {
      return {
        tag: '资讯',
        taglist: ['资讯', '博客', '问答', '活动'],
    }
  },
  components: {
      Tab,
      TabItem,
      AppHeader,
      AppFooter,
      Scroller,
      Cell,
      Group,
      NewsList,
      ScrollerDemo
  },
  ready () {

  },
  methods:{

  }

}
</script>

增加获取资讯页NewsList.vue

<template>
  <div>
  <scroller v-show="ishow" lock-x scrollbar-y height="360px">
    <div >
    <cell v-for="x in Objlist"  :title="x.title" link="demo/wechat" :inline-desc='x.body'>
      <img class="ic_img"  slot="icon" src="../assets/image/ic_label_today.png">
      <div>
        <span></span>
      </div>
    </cell>
    </div>
  </scroller>
  </div>
</template>
<style>
.ic_img{
position:absolute; top:10px; left: 5px;
width:15px;
height:15px;
}
.weui_cell_bd>p{
 font-size:15px;
}
.vux-label-desc{
 padding-right:15px;
}
.weui_cell_bd.weui_cell_primary{
padding-left:5px;
}

</style>
<script>
    import Scroller from 'vux/dist/components/scroller'
    import Cell from 'vux/dist/components/cell'
    import Group from 'vux/dist/components/group'
    import { getList } from '../utils/api'

    export default{
        data(){
            return{
                ishow:true,
                Objlist:[],
                title:'111',
                body:'1111',
                comment_count:2,
                pub_date:'2016-11-01 07:21:39',
                pageIndex:1,
                catalog:0,
            }
        },
        components:{
            Scroller,
            Cell,
            Group
        },
        ready () {
          this.getList()
         // this.suaDate()
        },
        methods:{
            async getList() {
				       let data =await getList(this.pageIndex, this.catalog)
				       console.log(data)
				       if(data.obj_list.length>0){
				          this.ishow=true
				          this.title=data.obj_list[0].title
				          this.body=data.obj_list[0].body
				          for(var i=0;i<data.obj_list.length;i++){
                      var bngDate = new Date(data.obj_list[i].pub_date);
                      var endDate = new Date();
                      var minutes = (endDate.getTime()-bngDate.getTime())/60/60/1000;
                      var minute=parseInt(minutes);
                      if(minute>=48){
                         data.obj_list[i].pub_date='2天前'
                      }else if(minute>=24){
                         data.obj_list[i].pub_date='昨天'
                      }else{
                         data.obj_list[i].pub_date=minute+'小时以前'
                      }
                      this.Objlist.push(data.obj_list[i]);
				          }

				       }
				       this.locked = false
				       this.loading = false
			},
			suaDate(){

			}

  }
    }
</script>

到这里就可以初见成果了，后面功能下期介绍（未完待续）源码下载点这里。