mockjs+json-server

最新推荐文章于 2024-10-30 22:15:34 发布

原创最新推荐文章于 2024-10-30 22:15:34 发布

· 279 阅读

0 ·

版权

fflutter组件专栏收录该内容

31 篇文章

订阅专栏

本文档介绍了如何使用MockJS和json-server进行模拟数据的创建与管理。首先讲解了从开始安装到运行json-server的步骤，接着详细阐述了MockJS的语法规范，包括模拟数据的案例，并列举了一些常见的mock占位符，如文本、日期、时间和人名等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mock

开始 & 安装

npm install mockjs -g //-g是全局安装的如果你要单独一个文件里创建的话不需要-G 进入自定义目录 然后
//里面安装即可

使用方法

第一步桌面新建一个文件text 然后用编辑器打开（VSCODE）

第二部新建一个aaa.js 里面导入下面的代码

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
//console.log(JSON.stringify(data, null, 4)) 这个可以不要的
module.exports = ()=> {
    return data
}
//下面的意思是巴上面的data数据导出来就可以了

json-server

全局安装

npm install json-server -g

运行

json-server aaa.js//即可运行

mock.js语法规范

模拟数据案例

1.2 .准备数据，新建一个文件夹 mock，cd mock，在mock下新建test.json

    {
        "list": [
            {
                "id": 1,
                "title": "bim项目启动了",
                "date": "2018-08-12",
                "likes": 33,
                "views": 124
            },
            
        ],
        "comments": [
            {
                "id": 1,
                "news_id": 1,
                "data": [
                    {
                        "id": 1,
                        "content": "测试数据"
                    },
                    {
                        "id": 2,
                        "content": "测试数据"
                    }
                ]
            }
        ]
    }

1.3.在mock下执行如下代码 -p是指定端口

json-server -w test.json -p 8001

常用的mock占位

占用符	解释
数字
@id	身份证id
Random.increment( step? ) //step(100)从一百开始加	生成一个全局的自增整数。
人名字
@cname（）	中文人名
@name()	英文人名
文本
@csentence()	随机生成一段中文文本。
@cparagraph()	随机生成一段中文文本。
@cword()	随机生成一个汉字。
@ctitle( min?, max? )	随机生成一句中文标题。
@title() //Random.title( min, max )	随机生成一句标题，其中每个单词的首字母大写。
@city	中文城市
日期+时间
@date(‘yyyy-MM-dd’)	“1975-04-27”
@date()	“2002-10-23”
@time()	“05:06:06”
@datetime	(‘yyyy-MM-dd A HH:mm:ss’)
@now()	当前的日期和时间
@email	email
@ip	ip 地址
@url	url地址
@csentence(1,5)	生成1到5个字的中文句子
@string(11)	输出11 个字符长度的字符串
@float(0,10)	0 到 10 的浮点数
@integer(60,70)	60 到 70 之间的整数
@boolean	boolean 类型 true,false

自己整理的笔记

text

Random.paragraph()//文字长度可自定义	随机生成一段英语文本。
Random.cparagraph() ‘@cparagraph()’	随机生成一段中文文本。
Random.csentence()	随机生成一段中文文本。
Random.word()//Random.word( min, max )	随机生成一个单词。
Random.cword()	随机生成一个汉字。
Random.title() //Random.title( min, max )	随机生成一句标题，其中每个单词的首字母大写。
Random.ctitle( min?, max? )	随机生成一句中文标题。

日期+时间

1.日期	结果
Random.date(‘yyyy-MM-dd’)	“1975-04-27”
andom.date()	“2002-10-23”
2.时间
Random.time()	“05:06:06”
3.日期和时间
Random.datetime	(‘yyyy-MM-dd A HH:mm:ss’)
4.当前的日期和时间 Ranndom.now()	“2020-09-05 15:15:41”

'name':'@cword(20.50)',
        'jiahua':'@cparagraph(10,50)',
        'dongzhou':'@csentence()',
        'title':'@title()',
        'one':'@ctitle()',
        'riqi':'@date()',
        'time':'@time()',
        'zhegeriqi':'@datetime()',
        'wodeshijian':'@now()',
        // 'img':'@dataImage()'
        'img':'@dataImage()',

名称（人名）

属性	描述	案例
Random.first（）	随机生成一个常见的英文名。	随机的。first （） // =>“南希”
Random.last（）	随机生成一个常见的英文姓。	随机的。last （） // =>“马丁内斯”
Random.name（）	随机生成一个常见的英文姓名。	随机的。name （） // =>“ Larry Wilson” Random 。name （true ） // =>“ Helen Carol Martinez”
Random.cfirst（）	随机生成一个常见的中文名。	随机的。cfirst （） // =>“曹”
Random.clast（）	随机生成一个常见的中文姓。	随机的。clast （） // =>“艳”
Random.cname（）	随机生成一个常见的中文姓名。	随机的。cname （） // =>“袁军”

'user|3-10': [{
       // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1,
     	'first':'@first()',
        'last':'@last()',
        'name':'@name()',
        'cname':'@cname()',
        'clast':'@clast()',
	  }]
这是得到的结果
//{
    "id": 2,
    "first": "Robert",
    "last": "White",
    "name": "Nancy Jones",
    "cname": "钱娟",
    "clast": "丽"
  },

数字

方法	描述	结果
Random.id()	随机生成一个 18 位身份证。	Random.id() // => “420000200710091854”
Random.increment( step? )	生成一个全局的自增整数。	Random.increment() // => 1 Random.increment(100) // => 101

Random.increment()
// => 1
Random.increment(100)
// => 101
Random.increment(1000)
// => 1101

别人整理的

{
  "base": {
    "range": "@range(3, 7)",// [3,4,5,6]
    "string": "@string(7, 20)", //输出7-20个字符长度的字符串
    "character": "@character('abcde')",//随机从abcde中选一个字母
    "float": "@float(60, 100)",//60 到 100 的浮点数
    "integer": "@integer(60, 100)",//60 到 100 的整数
    "natural": "@natural(60, 100)",//60 到 100 的自然数
    "boolean": "@boolean" //boolean 类型 true,false
  },
  <!--时间类型-->
  "date": {
    "date": "@date",//1982-07-20
    "time": "@time",// 11:21:39
    "datetime": "@datetime",// 1972-12-16 02:04:24
    "now": "@now" //当前时间 2018-07-17 18:19:29
  },
  <!--图片-->
  "image": {
    "image": "@image('200x100', '#50B347', '#FFF', 'EasyMock')" // https://dummyimage.com/200x100/50B347/FFF&text=EasyMock 尺寸 背景 文字颜色 提示信息
  },
  <!--颜色系列-->
  "color": {
    "color": "@color", //16进制颜色值#79e0f2
    "hex": "@hex", // #f2e179
    "rgb": "@rgb", //rgb(189, 121, 242)
    "rgba": "@rgba",//rgba(189, 121, 242, .7)
    "hsl": "@hsl" //hsl(136, 82, 71)
  },
  <!--文案类-->
  "text": {
    "paragraph": "@paragraph(1, 3)",// 随机段落
    "sentence": "@sentence(3, 5)",// 随机句子
    "word": "@word(3, 5)",// 随机3-5个字母
    "title": "@title(3, 5)",// 随机3-5个单词的title
    "cparagraph": "@cparagraph(1, 3)",
    "csentence": "@csentence(3, 5)",
    "cword": "@cword('零一二三四五六七八九十', 5, 7)",
    "ctitle": "@ctitle(3, 5)"
  },
  <!--姓名-->
  "name": {
    "first": "@first",//姓
    "last": "@last",//名
    "name": "@name",//姓名
    "cfirst": "@cfirst",
    "clast": "@clast",
    "cname": "@cname"
  },
  <!--网站-->
  "web": {
    "url": "@url",//url地址
    "domain": "@domain",//域名
    "protocol": "@protocol",//协议
    "tld": "@tld",
    "email": "@email",//邮箱
    "ip": "@ip"//ip地址
  },
  <!--地址-->
  "address": {
    "region": "@region",//区域
    "province": "@province",//省
    "city": "@city(true)",//市
    "county": "@county(true)",//区 带true则携带上级
    "zip": "@zip"
  },
  "helper": {
    "capitalize": "@capitalize('hello')",
    "upper": "@upper('hello')",//全大写单词
    "lower": "@lower('HELLO')",//全小写单词
    "pick": "@pick(['a', 'e', 'i', 'o', 'u'])", //随机选择一个字母
    "shuffle": "@shuffle(['a', 'e', 'i', 'o', 'u'])" //打乱数组顺序
  },
  "miscellaneous": {
    "id": "@id",//身份证id
    "guid": "@guid",//生成32位的随机id
    "increment": "@increment(1)"//自增数，阶度为1
  }
}