Posts 前端MOCK数据
Post
Cancel

前端MOCK数据

前端 Mock 数据最佳实践。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
// 文档:https://github.com/nuysoft/Mock/wiki

// 后台定义的数据格式
let raw = {
  data: {
    eid: 27149, // 试卷ID
    title: "", // 试卷标题
    intro: "", // 试卷介绍
    imgs: "", // 试卷介绍用的图片
    cost: 0, // 答题所需消耗的分数
    answered: 0, // 当前用户是否已答过题,0=未答,1=已答。对于访客或get_answer=0时,不返回该项
    questions: [
      {
        id: "4927",
        theme: "董先生连任好不好啊?",
        imgs: "", // 问题附带的图片
        opt_limit: 1, // 允许提交的答案个数
        options: [
          {
            id: 111, // 选项ID
            text: "无可奉告", // 选项的文字描述
            img: "tokyohot.jpg", // 选项的附图,如有多张图,以|隔开
            selected: 0, // 当前用户是否选择了该项,0为未选,1位已选。对于访客或get_answer=0时,不返回该项
            count: 50, // 总共多少人选了该项。对于访客或get_answer=0时,不返回该项
          },
          {
            id: 112, // 选项ID
            text: "吼哇",
            img: "tokyohot.jpg",
            selected: 1,
            count: 650,
          },
        ],
      },
    ],
  },
  errcode: 0,
  msg: "OK",
  success: "true",
};

// mock的数据格式
let template = {
  data: {
    eid: "@integer(1,10000)", // 试卷ID
    title: "@cparagraph(1)", // 试卷标题
    intro: "@csentence(5,20)", // 试卷介绍
    imgs: "@dataImage(500x200)", // 试卷介绍用的图片
    cost: "@integer(0,20)", // 答题所需消耗的分数
    answered: "@integer(0,1)", // 当前用户是否已答过题,0=未答,1=已答。对于访客或get_answer=0时,不返回该项
    "questions|2-10": [
      {
        id: "@integer(1,10000)",
        theme: "@csentence(5,20)",
        "imgs|0-1": ["@dataImage"], // 问题附带的图片
        opt_limit: "@integer(1,4)", // 允许提交的答案个数
        "options|3-5": [
          {
            id: "@integer(1,10000)", // 选项ID
            txt: "@csentence(3,5)", // 选项的文字描述
            "img|0-3": ["@dataImage"], // 选项的附图,如有多张图,以|隔开
            selected: "@integer(0,1)", // 当前用户是否选择了该项,0为未选,1位已选。对于访客或get_answer=0时,不返回该项
            count: "@integer(0,500)", // 总共多少人选了该项。对于访客或get_answer=0时,不返回该项
          },
        ],
      },
    ],
  },
  errcode: 0,
  msg: "OK",
  success: "true",
};
let data = Mock.mock(template);

// 常用的mock格式
let mock = {
  "material|1-5": [
    {
      img: "@dataImage(200x200)", // 图片:https://github.com/nuysoft/Mock/wiki/Image
      name: "@cname()", // 中文姓名:https://github.com/nuysoft/Mock/wiki/Name
      num: "@integer(0,100)", // 数字(0-100):https://github.com/nuysoft/Mock/wiki/Basic
      date: "@date()", // 日期(2002-10-23):https://github.com/nuysoft/Mock/wiki/Date
      cword: "@cword(2,7)", // 中文汉字(设过证全争听):https://github.com/nuysoft/Mock/wiki/Text
      idCard: "@id()", // 18位身份证号码:https://github.com/nuysoft/Mock/wiki/Miscellaneous
      tel: "@integer(13000000000,18999999999)", // 电话号码
    },
  ],
};
This post is licensed under CC BY 4.0 by the author.
Trending Tags

Trending Tags