Vue und Mock.js arbeiten zusammen, um die Anmeldung zu simulieren und das Hinzufügen, Löschen, Ändern und Abfragen von Tabellen zu implementieren

Dieser Artikel stellt Ihnen den Artikel über die Zusammenarbeit von Vue und Mock.js vor, um die Anmeldung zu simulieren und das Hinzufügen, Löschen, Ändern und Abfragen von Tabellen zu implementieren. Er hat einen guten Referenzwert und ich hoffe, er kann Freunden in Not helfen.

Vorwort

Über Mockjs wird es auf der offiziellen Website wie folgt beschrieben:

1. Trennung von Front- und Back-End

2 Ändern des vorhandenen Codes, Rückgabe simulierter Antwortdaten.

3. Umfangreiche Datentypen

4. Simulieren Sie verschiedene Szenarien durch Zufallsdaten.

5 Das Projekt trägt nicht die Schuld (Sie können die Schuld auf sich nehmen, wenn Sie darauf warten, dass das Backend Schnittstellen bereitstellt)

Und noch weitere Vorteile, den letzten habe ich hinzugefügt.

Der erste Schritt ist die Installation von mock.js

npm install mockjs --save-dev

Der zweite Schritt ist die Verwendung von mock.js

import Mock from 'mockjs'

Führen Sie es überall dort ein, wo es verwendet wird. Ich verwende src/mock/index.jsmock.js

im Projekt

Einzelheiten finden Sie in der offiziellen Dokumentation

Wichtiger Punkt 1: Mock.mock()

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

Die Parameter hier sind optional:

• rurl (optional).

stellt die URL dar, die abgefangen werden muss. Dabei kann es sich um eine URL-Zeichenfolge oder eine URL-Regelmäßigkeit handeln. Zum Beispiel //domain/list.json/, '/domian/list.json'.

• rtype (optional).

gibt die Art der Ajax-Anfrage an, die abgefangen werden muss. Zum Beispiel GET, POST, PUT, DELETE usw.

• Vorlage (optional).

stellt die Datenvorlage dar, die ein Objekt oder eine Zeichenfolge sein kann. Zum Beispiel { 'data|1-10':[{}] }, '@EMAIL'.

• Funktion(Optionen)(optional).

stellt die Funktion dar, die zum Generieren von Antwortdaten verwendet wird.

• Optionen: Verweist auf den Ajax-Optionssatz für diese Anfrage.

Wichtiger Punkt 2: Syntax der Vorlagengenerierung:

• Jedes Attribut in der Datenvorlage besteht aus 3 Teilen: Attributname, Generierungsregeln, Attribut Wert:

• // Attributname name

• // Regelregel generieren

• // Attributwertwert

• 'name|rule': value

• Verwenden Sie einen vertikalen Balken zwischen dem Attributnamen und dem Generationsregel |.

• Generierungsregeln sind optional.

• Es gibt 7 Formate zum Generieren von Regeln:

• 'Name|Min-Max': Wert

• 'name|count': Wert

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

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

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

• 'name|count .dcount': value

• 'name|+step': value`

• Die Bedeutung der generierten Regel hängt von der ab Typ des Attributwerts Um sicher zu sein.

• Der Attributwert kann einen @-Platzhalter enthalten.

• Der Attributwert gibt auch den Anfangswert und den Typ des Endwerts an.

Zum Beispiel:
Kastanie 1:

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

Ergebnis:

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

Kastanie 2:

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

Ergebnis

{
  "number": 8
}

Andere Einstellungen

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

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

Simulierte Anmeldung

// Simulierte Anmeldunguser/loginSchnittstelle, die entsprechende Funktion istloginByUsername

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

beim Aufruf der Anmeldeschnittstelle user/loign entspricht automatisch der Funktion loginByUsername zum Ausführen dieser Funktion.
Diese Funktion gibt Daten zurück, ob die Anmeldung erfolgreich ist. Die Rückgabe erfolgreicher Daten bedeutet, dass die Anmeldung erfolgreich war, andernfalls ist das Gegenteil der Fall.

Mock simulierte Anmeldung ok

Der nächste Schritt besteht darin, das Hinzufügen, Löschen, Ändern und Abfragen des simulierten Formulars einzuführen.
Tatsächlich ist es fast dasselbe.

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

ist nur eine Sammlung gefälschter Daten, die nach einer bedingten Abfrage zurückgegeben werden.

Zuerst 60 gefälschte Benutzer in einer Schleife hinzufügen

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

Sehen wir uns getUserList diese Funktion an, die gefälschte Daten für die Paging-Bedingungsabfrage zurückgibt.

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

Zum Hinzufügen, Löschen und Ändern müssen Sie nur ein Datum zurückgeben message="操作成功".

Der dritte Schritt besteht darin, die src/mock/index.js einzuführen, die wir gerade in main.js geschrieben haben

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

Verwandte Empfehlungen:

vue.js Wie die jsApi von Baidu Map vorstellen? Einführung in zwei Methoden zur Einführung der jsApi von Baidu Map

Wie implementiert vue.js die Baumtabellenkapselung? So implementieren Sie eine Baumtabelle in vue.js

Das obige ist der detaillierte Inhalt vonVue und Mock.js arbeiten zusammen, um die Anmeldung zu simulieren und das Hinzufügen, Löschen, Ändern und Abfragen von Tabellen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!