Comment vue appelle des données fictives

Cette fois, je vais vous montrer comment vue appelle des données fictives. Quelles sont les précautions lorsque vue appelle des données fictives. Voici un cas pratique, jetons un coup d'œil.

Initialisez votre projet

Sans plus tarder, initialisez d’abord votre projet. Le plus simple est d’utiliser vue-cli

vue init webpack

. Présentez mock.js

Installer mockjs

npm install --save-dev mockjs

Introduit dans le prototype Vue pour une utilisation facile

 import mockjs from 'mockjs'
 Vue.prototype.$mock = Vue.$mock = mockjs.mock

Ce qui précède est introduit dans le prototype Vue, et vous pouvez utiliser this.$mock pour générer directement des données fictives

Veuillez regarder ici Vue.prototype

S'il vous plaît regardez ici mockjs

Pendant le développement du projet, le front-end et le backend ont été séparés et de fausses données ont été créées à l'aide de vue2.0, et le backend a également été repoussé. Afin de ne pas retarder le processus de développement, j'ai fait une demande de données virtuelles et je l'ai utilisé. échafaudage vue-cli pour le construire. Dans le fichier de projet, dev-server crée une requête API virtuelle et accède aux fausses données de sa propre simulation pour demander le mode arrière-plan. La méthode spécifique est la suivante

. Dans le fichier build/dev-server.js

Ajoutez le code suivant sous l'instance de var app = express()

// 本地json-server服务器搭建代码
// 引入数据库文件
var appData = require('../mock.json')
// 引入数据库
var getBoardList = appData.getBoardList
var apiRoutes = express.Router()
// 使用api的方法来创建连接时候的请求
apiRoutes.post('/getBoardList', function (req, res) {
 res.json({
 errno: 0 ,
 data: getBoardList
 });
})
// 调用api
app.use('/api', apiRoutes)

Le fichier mock.json sur lequel s'appuie appData est le faux fichier de données de votre propre maquette. Vous pouvez vous en moquer vous-même ou utiliser mock.js pour créer de fausses données selon les exigences du front et du backend

. getBoardList est une interface, var getBoardList = appData.getBoardList définit ces données d'interface dans appData.

var apiRoutes = express.Router() Il crée la route d'une API. apiRoutes.post crée une interface de publication. Cette interface de publication a un paramètre req et res, qui exécute la requête et renvoie respectivement. Lorsqu'elle revient, elle nous donnera un json. Ce json comprend un code de statuterrno et les données renvoyées (les données pointent vers les données d'interface getBoardList).

Ensuite quand on appelle l'api app.use('/api', apiRoutes), on peut utiliser ce service normalement

Ici j'utilise les données de requête axios recommandées par vue2.0, le code est le suivant

this.$http.post('/api/getBoardList')
 .then(function (response) {
  console.log(response.data.data);
  alert('成功了');
 })
 .catch(function (code) {
  alert('失败了');
  console.log(code);
 });

Ouvrez le réseau dans la console du navigateur et vous constaterez qu'une requête réseau a été générée

En même temps, les données revenaient joyeusement :

Si vous souhaitez ajouter des données d'interface, continuez simplement à les ajouter dans dev-server.js, post, get, etc.

Notez qu'à chaque fois que vous modifiez dev-server.js, vous devez redémarrer npm run devDémarrer le projet

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. plus d'informations intéressantes, veuillez prêter attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Explication détaillée de l'utilisation de chaînes de modèles dans ES6

JS implémente les millisecondes + jours + heures + minutes Conversion en secondes

Explication détaillée de l'utilisation de la fonction de validation de formulaire de Bootstrap

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!