Vue and Mock.js work together to simulate login and implement addition, deletion, modification and query of tables

This article introduces you to the article about Vue and Mock.js working together to simulate login and implement addition, deletion, modification and query of tables. It has a good reference value and I hope it can help friends in need.

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可省略

Related recommendations:

vue.js How to introduce Baidu Map’s jsApi? Two methods of introducing Baidu Map’s jsApi

How does vue.js implement the encapsulation of tree tables? How to implement tree table in vue.js

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