Vue+Mock.js implements detailed steps to simulate addition, deletion, modification and query of tables

Regarding mockjs, the official website describes 1. Separation of front and rear ends 2. You can intercept Ajax requests and return simulated response data without modifying existing code. 3. Rich data types 4. Simulate various scenarios through random data.

Preface

About mockjs, the official website describes

1. Front-end and back-end separation

2. Ajax can be intercepted without modifying the existing code Request, return simulated response data.

3. Rich data types

4. Simulate various scenarios through random data.

5 The project does not take the blame (you may take the blame if you wait for the backend to provide an interface)

and other advantages, I added the last one.

The first step is to install mock.js

npm install mockjs --save-dev

The second step is to use mock.js

import Mock from 'mockjs'

Introduce it wherever you use it. I use mock.js in project src/mock/index.js

Please see the official documentation for details

Key point 1: Mock .mock()

Mock.mock( rurl?, rtype?, template|function( options ) )

The parameters here are all optional:

• rurl (optional).

represents the URL that needs to be intercepted, which can be a URL string or a URL regular pattern. For example //domain/list.json/, '/domian/list.json'.

• rtype (optional).

indicates the type of Ajax request that needs to be intercepted. For example GET, POST, PUT, DELETE, etc.

• template (optional).

represents the data template, which can be an object or a string. For example { 'data|1-10':[{}] }, '@EMAIL'.

• function(options)(optional).

represents the function used to generate response data.

• options: Points to the Ajax option set for this request.

Key point 2: Template generation syntax:

• Each attribute in the data template consists of 3 parts: attribute name, generation rules, Attribute value:

• // Attribute name name

• ##// Generate rule rule

• //Attribute value value

• 'name|rule': value

• Use a vertical bar between the attribute name and the generated rule | separated.

• Generation rules are optional.

• There are 7 formats for generating rules:

• 'name|min-max': value

• 'name|count': value

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

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

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

• 'name|count. dcount': value

• 'name| step': value`

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

• The attribute value can contain @ placeholder.

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

Give a chestnut:

Chestnut 1:

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

Result:

//星星数量为3
{
  "string": "★★★"
}

Chestnut 2:

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

Result

{
  "number": 8
}

Other settings

//  设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留

Mock.setup({
  timeout: '300-600'
})

Simulated login

// Simulated login

user/login interface, the corresponding function is loginByUsername

Mock.mock(/\/user\/login/, 'post', loginByUsername)

When the login interface

user/loign is called, it will automatically correspond to the loginByUsername function to execute this function. This function will return data on whether the login is successful. Returning successful data means that the login is successful, otherwise it is the opposite.

mock simulated login ok

Next, we will introduce the addition, deletion, modification and query of the simulated table.

In fact, it’s almost the same.

// 用户相关
Mock.mock(/\/user\/listpage/, 'get', getUserList) //模拟分页查询用户信息接口
Mock.mock(/\/user\/remove/, 'get', deleteUser)   //模拟删除用户信息接口
Mock.mock(/\/user\/add/, 'get', createUser)     //模拟添加用户信息接口
Mock.mock(/\/user\/edit/, 'get', updateUser)   //模拟编辑用户信息接口

It just returns a collection of fake data after conditional query. The fake data is simulated by mock.js.

First add 60 fake users in a loop

let List = []
const count = 60

for (let i = 0; i < count; i++) {
  List.push(Mock.mock({
    id: Mock.Random.guid(),
    name: Mock.Random.cname(),
    addr: Mock.mock(&#39;@county(true)&#39;),
    &#39;age|18-60&#39;: 1,
    birth: Mock.Random.date(),
    sex: Mock.Random.integer(0, 1)
  }))
}

Let’s look at the function

getUserList, which returns fake data for paging condition query.

  getUserList: config => {
    const { name, page = 1, limit = 20 } = param2Obj(config.url)

    const mockList = List.filter(user => {
      if (name && user.name.indexOf(name) === -1) return false
      return true
    })

    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))

    return {
      code: 0,
      data: {
        total: mockList.length,
        users: pageList
      }
    }
  }

Regarding adding, deleting and modifying, you only need to return one piece of data

message="Operation successful".

The third step is to introduce the src/mock/index.js we just wrote into main.js

import './mock' // simulation data 路径index.js可省略

The integration is now completed

Related articles:

MVC mode realizes login and addition, deletion, modification and query login

XML addition, deletion, modification and query example

Related videos ：

PHP user registration and login system video tutorial

The above is the detailed content of Vue+Mock.js implements detailed steps to simulate addition, deletion, modification and query of tables. For more information, please follow other related articles on the PHP Chinese website!