### 將業務中的數據分離到單個的文件
`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";
~~~
