Wie Vue Scheindaten aufruft

Dieses Mal zeige ich Ihnen, wie Vue Scheindaten aufruft. Was sind die Vorsichtsmaßnahmen, wenn Vue Scheindaten aufruft?

Initialisieren Sie Ihr Projekt

Initialisieren Sie ohne weiteres zunächst Ihr Projekt. Der einfachste Weg ist die Verwendung von vue-cli

vue init webpack

Einführung von mock.js

Installieren Mockjs

npm install --save-dev mockjs

Zur einfachen Verwendung in den Vue-Prototyp eingeführt

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

Das Obige wird in den Vue-Prototyp eingeführt, und Sie können this.$mock verwenden, um Scheindaten direkt zu generieren

Bitte schauen Sie hier Vue.prototype

Bitte schauen Sie hier Mockjs

Während der Projektentwicklung wurden Front- und Backend getrennt und gefälschte Daten erstellt. Das Projekt wurde mit vue2.0 rekonstruiert und auch das Backend wurde zurückgedrängt. Um den Entwicklungsprozess nicht zu verzögern, habe ich eine virtuelle Datenanfrage gestellt und verwendet vue-cli-Gerüst zum Erstellen. In der Projektdatei erstellt der Dev-Server eine virtuelle API-Anfrage und greift auf die gefälschten Daten seines eigenen Modells zu. Die spezifische Methode ist wie folgt:

In der Datei build/dev-server.js

Fügen Sie den folgenden Code unter der Instanz von 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)

hinzu Die Datei „mock.json“, auf die sich appData stützt, ist die gefälschte Datendatei Ihres eigenen Modells. Sie können es selbst verspotten oder „mock.js“ verwenden, um gefälschte Daten gemäß den Front- und Backend-Anforderungen zu erstellen

getBoardList ist eine Schnittstelle, var getBoardList = appData.getBoardList definiert diese Schnittstellendaten in appData.

var apiRoutes = express.Router() Es erstellt eine API-route. Diese Post-Schnittstelle verfügt über einen req- und einen res-Parameter, der die Anfrage ausführt und uns einen JSON zurückgibt. Dieser JSON enthält einen Statuscodeerrno und die zurückgegebenen Datendaten (Datenpunkte auf die Schnittstellendaten getBoardList).

Wenn wir dann die API app.use('/api', apiRoutes) aufrufen, können wir diesen Dienst normal nutzen

Hier verwende ich die von vue2.0 empfohlenen Axios-Anforderungsdaten. Der Code lautet wie folgt:

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

Öffnen Sie das Netzwerk in der Browserkonsole und Sie werden feststellen, dass eine Netzwerkanfrage generiert wurde

Gleichzeitig kamen die Daten erfreulich zurück:

Wenn Sie Schnittstellendaten hinzufügen möchten, fügen Sie diese einfach weiterhin in dev-server.js hinzu. Sie können Post, Get usw. verwenden.

Beachten Sie, dass Sie jedes Mal, wenn Sie dev-server.js ändern, npm run dev neu starten müssen.Starten Sie das Projekt.

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Informationen finden Sie auf anderen chinesischen PHP-Websites. Verwandte Artikel!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von Vorlagenzeichenfolgen in ES6

JS implementiert Millisekunden + Tage + Stunden + Minuten Konvertierung in Sekunden

Detaillierte Erläuterung der Verwendung der Formularvalidierungsfunktion von Bootstrap

Das obige ist der detaillierte Inhalt vonWie Vue Scheindaten aufruft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!