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
Nach dem Login kopieren
Der zweite Schritt ist die Verwendung von mock.js
import Mock from 'mockjs'
Nach dem Login kopieren
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 ) )
Nach dem Login kopieren
Die Parameter hier sind 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'.
gibt die Art der Ajax-Anfrage an, die abgefangen werden muss. Zum Beispiel GET, POST, PUT, DELETE usw.
stellt die Datenvorlage dar, die ein Objekt oder eine Zeichenfolge sein kann. Zum Beispiel { 'data|1-10':[{}] }, '@EMAIL'.
stellt die Funktion dar, die zum Generieren von Antwortdaten verwendet wird.
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": "★"
})Nach dem Login kopieren
Ergebnis:
//星星数量为3
{
"string": "★★★"
}Nach dem Login kopieren
Kastanie 2:
// num为属性名
// 生成一个大于等于1，小于等于100 的整数，属性值100只是用来确定类型
Mock.mock({
"num|1-100": 100
})Nach dem Login kopieren
Ergebnis
{
"number": 8
}Nach dem Login kopieren
Andere Einstellungen
// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
Mock.setup({
timeout: '300-600'
})Nach dem Login kopieren
Simulierte Anmeldung
// Simulierte Anmeldunguser/loginSchnittstelle, die entsprechende Funktion istloginByUsername
Mock.mock(/\/user\/login/, 'post', loginByUsername)
Nach dem Login kopieren
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) //模拟编辑用户信息接口
Nach dem Login kopieren
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('@county(true)'),
'age|18-60': 1,
birth: Mock.Random.date(),
sex: Mock.Random.integer(0, 1)
}))
}Nach dem Login kopieren
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
}
}
}Nach dem Login kopieren
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可省略
Nach dem Login kopieren
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.jsDas 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!
