### 将业务中的数据分离到单个的文件
`posts_data.js`
~~~javascript
var local_database = [
{
date: "Sep 18 2016",
title: "正是虾肥蟹壮时",
imgSrc: "/images/post/crab.png",
avatar: "/images/avatar/1.png",
content: "菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，",
reading: "112",
collection: "96",
author: "林白衣",
}, {
date: "Nov 20 2016",
title: "比利·林恩的中场故事",
content: "一 “李安是一位绝不会重复自己的导演，本片将极富原创性李安众所瞩目的新片《比利林恩漫长的中场休息》，正式更名《半场无战事》。",
imgSrc: "/images/post/bl.png",
reading: 62,
collection: 92,
author: "迷的城",
avatar: "/images/avatar/1.png"
}
]
// 将数据暴露出去
module.exports = {
postList:local_database
}
~~~
`post.js`
~~~
var postsData = require('../../data/posts-data.js');
onLoad: function (options) {
console.log('load');
this.setData({
posts_key: postsData.postList
});
},
~~~
### template模版的使用
**创建模版**
`post-item-template.wxml`
~~~html
<template name="postItem">
<view class="post-container">
<view class="post-author-date">
<image class="post-author" src="{{item.avatar}}"></image>
<text class="post-date">{{item.date}}</text>
</view>
<text class='post-title'>{{item.title}}</text>
<image class="post-image" src="{{item.imgSrc}}"></image>
<text class="post-content">{{item.content}}</text>
<view class='post-like'>
<image class='post-like-image' src="../../images/icon/chat.png"></image>
<text class='post-like-font'>{{item.collection}}</text>
<image class='post-like-image' src="../../images/icon/view.png"></image>
<text class='post-like-font'>{{item.reading}}</text>
</view>
</view>
</template>
~~~
`post.wxml`
~~~html
<import src="post-item/post-item-template.wxml"></import>
<view>
<swiper indicator-dots="true" autoplay="true" interval="2000">
<swiper-item>
<image src='/images/wx.png'></image>
</swiper-item>
<swiper-item>
<image src='/images/vr.png'></image>
</swiper-item>
<swiper-item>
<image src='/images/iqiyi.png'></image>
</swiper-item>
</swiper>
<block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="ids">
<template is="postItem" data="{{item}}"/>
</block>
</view>
~~~
> 把模板对应的CSS迁移到`post-item-template.wxss`
> 在`post.wxss`引入模版中的css
~~~css
@import "post-item/post-item-template.wxss";
~~~
