Maison > Article > interface Web > 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.
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.
npm install mockjs --save-dev
import Mock from 'mockjs'
Introduisez-le partout où il est utilisé. J'utilise src/mock/index.js
mock.js
Veuillez consulter le document officiel pour plus de détails
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.
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éeuser/login
interface, 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('@county(true)'), 'age|18-60': 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="操作成功"
.
import './mock' // simulation data 路径index.js可省略
Recommandations associées :
Comment vue.js implémente-t-il l'encapsulation des tables arborescentes ? Comment implémenter une table arborescente dans vue.jsCe 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!