Vue et Mock.js travaillent ensemble pour simuler la connexion et implémenter l'ajout, la suppression, la modification et l'interrogation de tables

Cet article vous présente l'article sur Vue et Mock.js travaillant ensemble pour simuler la connexion et implémenter l'ajout, la suppression, la modification et l'interrogation de tables. Il a une bonne valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.

Avant-propos

À propos de mockjs, le site officiel le décrit comme :

1 La séparation des extrémités avant et arrière

2. en modifiant le code existant. Demande, renvoie des données de réponse simulées.

3. Types de données riches

4. Simulez divers scénarios grâce à des données aléatoires.

5 Le projet n'assume pas la responsabilité (vous pouvez en assumer la responsabilité si vous attendez que le backend fournisse les interfaces)

Et d'autres avantages, j'ai ajouté le dernier.

La première étape consiste à installer mock.js

npm install mockjs --save-dev

La deuxième étape consiste à utiliser mock.js

import Mock from 'mockjs'

Introduisez-le partout où il est utilisé. J'utilise src/mock/index.jsmock.js

dans le projet

Veuillez consulter le document officiel pour plus de détails

Point clé 1 : Mock.mock()

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

Le. paramètres ici Tous sont facultatifs :

• rurl (facultatif).

représente l'URL qui doit être interceptée, qui peut être une chaîne d'URL ou une régularité d'URL. Par exemple //domain/list.json/, '/domian/list.json'.

• rtype (facultatif).

indique le type de requête Ajax qui doit être interceptée. Par exemple GET, POST, PUT, DELETE, etc.

• modèle (facultatif).

représente le modèle de données, qui peut être un objet ou une chaîne. Par exemple { 'data|1-10':[{}] }, '@EMAIL'.

• fonction(options)(facultatif).

représente la fonction utilisée pour générer des données de réponse.

• options : pointe vers l'option Ajax définie pour cette requête.

Point clé 2 : Syntaxe de génération du modèle :

• Chaque attribut du modèle de données se compose de 3 parties : nom de l'attribut, règles de génération, attribut valeur :

• // Nom de l'attribut nom

• // Générer une règle

• // Valeur de l'attribut value

• 'name|rule': value

• Utilisez une barre verticale entre le nom de l'attribut et le règle de génération | séparée.

• Les règles de génération sont facultatives.

• Il existe 7 formats pour générer des règles :

• 'nom|min-max' : valeur

• 'nom|compte' : valeur

• 'nom|min-max.dmin-dmax' : valeur

• 'nom|min-max.dcount' : valeur

• 'nom|count.dmin-dmax' : valeur

• 'nom|compte .dcount': value

• 'name|+step': value`

• La signification de la règle générée dépend de la type de la valeur de l'attribut Pour être sûr.

• La valeur de l'attribut peut contenir @ placeholder.

• La valeur d'attribut spécifie également la valeur initiale et le type de la valeur finale.

Par exemple :
Châtaigne 1 :

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

Résultat :

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

Marron 2 :

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

Résultat

{
  "number": 8
}

Autres paramètres

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

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

Connexion simulée

//Connexion simuléeuser/logininterface, la fonction correspondante estloginByUsername

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

Lorsque l'interface de connexion user/loign est appelée, elle correspondra automatiquement à la fonction loginByUsername pour exécuter cette fonction
Cette fonction renverra des données indiquant si la connexion est réussie. Renvoyer des données réussies signifie que la connexion est réussie, sinon c'est le contraire.

Connexion simulée simulée ok

Ensuite, nous présenterons l'ajout, la suppression, la modification et l'interrogation de la table simulée.
En fait, c'est presque la même chose.

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

est juste un ensemble de fausses données renvoyées après une requête conditionnelle. Les fausses données sont simulées par mock.js.

Ajoutez d'abord 60 faux utilisateurs dans une boucle

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)
  }))
}

Regardons la fonction getUserList, qui renvoie de fausses données pour la requête de condition de pagination.

  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
      }
    }
  }

Concernant l'ajout, la suppression et la modification, il vous suffit de renvoyer une seule donnée message="操作成功".

La troisième étape consiste à introduire le src/mock/index.js que nous venons d'écrire dans main.js

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

Recommandations associées :

vue. Comment introduire le jsApi de Baidu Map sous js ? Introduction à deux méthodes d'introduction du jsApi de Baidu Map

Comment vue.js implémente-t-il l'encapsulation des tables arborescentes ? Comment implémenter une table arborescente dans vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!