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

来源：互联网发布：java redis作用编辑：程序博客网时间：2024/06/06 03:45

接上篇项目构建：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>

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

0 0