页面模拟

配置文件 ./mock.js 需要同时指定 mock 数据和页面模板的根路径:

const $path = require('path');
module.exports = {
    root: $path.resolve(__dirname),
    // mock 数据根路径
    mock: './demo',
    // 模板文件根路径
    template: './page'
};

数据文件 ./demo/entry.js:

module.exports = {
    'data|5': [{
        title: '@cword(5,10)'
    }]
};

模板文件 ./page/entry.pug:

doctype html
html
    head
        meta(charset="utf8")
        title entry
    body
        ul
            each item in data
                li.title #{item.title}

默认支持 pug 模板，可以通过配置 render 选项支持其他类型模板。

spore-mock 会比对数据文件，模板文件各自对于其根目录的相对路径，如果相对路径一致，则用对应数据文件渲染该模板。

如上面例子中，数据文件 ./demo/entry.js，对于 mock 数据根路径 ./demo 的相对路径是 /entry。

模板文件 ./page/entry.pug 对于模板文件根路径 ./page 的相对路径为 /entry ，与数据文件 ./demo/entry.js 相对路径一致。

访问地址 http://127.0.0.1:8091/entry.html 可得到渲染结果:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <title>entry</title>
</head>
<body>
    <ul>
        <li class="title">转北界张省几具利</li>
        <li class="title">以示达整自系现领快本</li>
        <li class="title">前层细加持状</li>
        <li class="title">极青约铁只题写</li>
        <li class="title">般作小里查花</li>
    </ul>
</body>
</html>

访问地址 http://127.0.0.1:8091/entry.html?fedebug=json 可查看页面随机数据:

{
    data: [
        {
            title: "解则进方据实"
        },
        {
            title: "书北按算教发"
        },
        {
            title: "九有器报件风将图者"
        },
        {
            title: "场流包同得个"
        },
        {
            title: "九高正据须法组住下"
        }
    ]
}

页面模拟

页面模拟

results matching ""

No results matching ""