Use mockjs to simulate back-end data in vue, vuecli, and webpack

Using mockjs can simulate data in advance, provided that the data interface and what kind of data have been agreed upon with the backend. You can use mock to generate the data you want, thereby achieving front-end and back-end separation during development. This article mainly introduces examples of using mockjs to simulate back-end data in vue+vuecli+webpack. It has certain reference value and interested friends can refer to it.

Its main function is:

1. Generate simulation data based on data template.

2. Generate simulation data based on HTML template.

3. Intercept and simulate ajax requests.

Grammar specification

The syntax specification of Mock.js includes two parts:

1. Data template definition Specification (Data Template Definition, DTD)
2. Data Placeholder Definition (DPD)

Data template definition specification DTD

Each attribute in the data template consists of 3 parts: attribute name, generation rule, attribute value:

// 属性名  name
// 生成规则 rule
// 属性值  value
'name|rule': value

Note:

1. The attribute name and the generation rule are separated by a vertical bar |.

2. Generate rules is optional.

3. There are 7 formats for generating rules:

1. 'name|min-max': value

2. 'name|count': value

3. 'name|min-max.dmin-dmax': value

4. ' name|min-max.dcount': value

5. 'name|count.dmin-dmax': value

6. 'name|count. dcount': value

7. 'name|+step': value

4. The meaning of the generated rules depends on the type of the attribute value. Sure.

5. The attribute value can contain @ placeholder.

6. Attribute value also specifies the initial value and type of the final value.

Example 1:

Mock.mock({
  'number1|1-100.1-10': 1,
  'number2|123.1-10': 1,
  'number3|123.3': 1,
  'number4|123.10': 1.123
})
// =>
{
  "number1": 12.92,
  "number2": 123.51,
  "number3": 123.777,
  "number4": 123.1231091814
}

Example 2: Based on the regular expression regexp, reversely generate a string that can match it. String used to generate a custom format:

Mock.mock({
  'regexp1': /[a-z][A-Z][0-9]/,
  'regexp2': /\w\W\s\S\d\D/,
  'regexp3': /\d{5,10}/
})
// =>
{
  "regexp1": "pJ7",
  "regexp2": "F)\fp1G",
  "regexp3": "561659409"
}

Example 3:

//string表示属性名
//3表示后面属性值重复次数
 Mock.mock({
 "string|3": "★"
})

Result:

//The number of stars is 3
{
"string": "★★★"
}

Example 4:

// num为属性名
// 生成一个大于等于1，小于等于100 的整数，属性值100只是用来确定类型
Mock.mock({
 "num|1-100": 100
})

Result:

{
"number": 8
}

Data placeholder definition specification DPD

The placeholder only occupies a position in the attribute value string and does not appear in the final attribute value.

The format of placeholder is:

@placeholder
@placeholder(parameter[, parameter])

Note:

1. Use @ to identify the following string as a placeholder.

2. Placeholder refers to the method in Mock.Random.

3. Extend custom placeholders through Mock.Random.extend().

4. Placeholders can also reference attributes in the data template.

5. Placeholders will preferentially reference attributes in the data template.

6. Placeholder supports relative paths and absolute paths.

Mock.mock({
  name: {
    first: '@FIRST',
    middle: '@FIRST',
    last: '@LAST',
    full: '@first @middle @last'
  }
})
// =>
{
  "name": {
    "first": "Charles",
    "middle": "Brenda",
    "last": "Lopez",
    "full": "Charles Brenda Lopez"
  }
}

Example of requesting fake data through jQuery ajax

1. First, introduce mockjs , introduce jquery (use jq-encapsulated ajax to send the request)

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>

2. Use mock to generate data template

//这里的第一个参数http://api.cn 就是下面ajax请求的url，mock对该url进行拦截'
//这里的第二个参数就是template数据模板，mock会返回模板生成的数据
   Mock.mock('http://api.cn', {
    'name': '@name',
    'age|1-100': 100,
    'city': '@city'
  });

3.ajax sends request and result

$.ajax({
  url: 'http://api.cn',
  dataType: 'json'
}).done(function(data, status, xhr) {
  console.log( JSON.stringify(data)); //{"name":"Mark Lee","age":4,"city":"辽阳市"}
});

Use mockjs in vuecli

First install

npm install mockjs

The structure under my project src is as follows:

I created a new mockdata.js## in scripts

#The content inside is as follows:

import Mock from 'mockjs';
const data = Mock.mock({
 // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
 'foods|10-50': [{
  'name': "@ctitle(2,10)",
  "img": "@image('600x600',#b7ef7c)",
  "brief": "@csentence(1,50)",
  "price|0-20.0-2": 1,
  "num": 0,
  "minusFlag": true,
  "time": "@time",
  "peisongfei|0-100.0-2": 1,
  "limit|0-50": 1
 }],
 "sales|10-50": [{
  // 属性 id 是一个自增数，起始值为 1，每次增 1
  'name': "@ctitle(2,10)",
  "img": "@image('600x600',#b7ef7c)",
  "brief": "@csentence(1,50)",
  "price|0-100.0-2": 1,
  "num": 0,
  "minusFlag": true,
  "time": "@time",
  "peisongfei|0-100.0-2": 1,
  "limit|0-100": 1
 }]
});

export default {
 data
}

Next, in the vue component page of the mock data that needs to be used, write like this

import mockdata from "@/scripts/mockdata.js";

To quote data, just quote the mockdata just now in your methods. For example:

new Promise((resolve, reject) => {
  that.foods =mockdata.data.foods; //直接点出你生成的假数据对象即可
  that.foodsListLen = that.foods.length;
 }).catch(err=>{
   console.log(err)
 })

Related recommendations:

Tutorial on using Mock.js to intercept AJAX requests in a Node.js server environment

Use mock.js to make front-end development and back-end independent

Sharing of simple mock json script implemented in PHP, phpmockjson script_PHP tutorial

The above is the detailed content of Use mockjs to simulate back-end data in vue, vuecli, and webpack. For more information, please follow other related articles on the PHP Chinese website!