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.
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.
npm install mockjs --save-dev
import Mock from 'mockjs'
Führen Sie es überall dort ein, wo es verwendet wird. Ich verwende src/mock/index.jsmock.js
Einzelheiten finden Sie in der offiziellen Dokumentation
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.
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 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('@county(true)'),
'age|18-60': 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="操作成功".
import './mock' // simulation data 路径index.js可省略
Verwandte Empfehlungen:
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!
