四、MOCK数据设计

通过需求分析得到只需要两份基础数据：

• 联系人数据
• 初始聊天记录数据

其对应的数据表结构如下：

因此我们可以使用js构建这两份数据表作为原始数据，目录结构设计大致如下：

src
    mocks  --- mock数据目录
        users  --- 用户头像目录
            xxxx.png  --- xxxx头像
        contact.js  --- 联系人mock数据
        history.js  --- 聊天记录mock数据

src/mock/contact.js 模拟联系人数据返回，代码如下：

// 所有联系人数据
let users = [
    {id: 'jimgreen', name: 'Jim Green'},
    {id: 'hanmeimei', name: '韩梅梅'}
];
users = users.sort((a, b) => a.id.charCodeAt(0) - b.id.charCodeAt(0));

let table = users.map((v) => {
    return {
        name: v.name,
        id: v.id,
        icon: `/mocks/users/${v.id}.png`
    };
});
export default table

src/mock/history.js模拟初始聊天记录数据返回，代码如下 ：

export default [
    {'to': 'jimgrenn', 'from': 'me', 'type': 'text', 'msg': 'My name is Jim Green, nice to meet you.', 'time': 1480338091374},
    {'to': 'me', 'from': 'jimgreen', 'type': 'text', 'msg': 'Nice to meet you too', 'time': 1480338091375},
];