Mocker.js的使用

最新推荐文章于 2025-11-16 12:54:27 发布

原创最新推荐文章于 2025-11-16 12:54:27 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

平时使用专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Mocker.js的用途，它允许前端开发者通过执行脚本来生成模拟数据，便于在开发过程中快速获取所需模型数据。示例中展示了如何结合FreeMarker模板语言来根据指定的字段类型生成随机数据，如ID、字符串、布尔值、整数、浮点数和日期等。这对于无后端或接口未完成的前端开发工作流特别有用。

1.什么是mocker.js?
前端可通过执行mocker.js得到想要的模型数据（造数据的过程）
2.mocker.js语法
在这里插入图片描述

freemark生成mocker.js（产生随机的数据）

let Mock=require('mockjs');//引入mockjs模块
let Random = Mock.Random;
module.exports = function() {
    var data = {//定义等下要返回的json数据
        news: []
    };
     data.news.push({
           <#list table.columns as column>
               <#if (column.columnNameLower == 'id')>${column.columnNameLower}: Random.id(),
               <#elseif (column.javaType == 'String')>${column.columnNameLower}: Random.cword(2,5),
               <#elseif (column.javaType == 'Boolean' || column.javaType == 'boolean')>${column.columnNameLower}:Random.boolean(),
                 <#elseif (column.javaType == 'Integer' || column.javaType == 'int' || column.javaType == 'Long' || column.javaType == 'long')>${column.columnNameLower}: Random.integer(100,5000),
               <#elseif (column.javaType == 'Float' || column.javaType == 'float' || column.javaType == 'Double' || column.javaType == 'double')>${column.columnNameLower}: Random.float(0, 100000, 0, 2),
               <#elseif (column.javaType == 'Date')>${column.columnNameLower}: Random.date('yyyy-MM-dd'),</#if>
           </#list>
       })
        return data;
}

freemark+mocker的基本语法
在这里插入图片描述