Detailliertes Beispiel für die Verwendung von Scheindaten in Vue

Dieser Artikel stellt hauptsächlich den Beispielcode von Vue vor, der Scheindaten verwendet. Der Herausgeber findet ihn ziemlich gut. Jetzt werde ich ihn mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Ohne weitere Umschweife initialisieren Sie zunächst Ihr Projekt.

vue init webpack

Mock.js einführen

Mockjs installieren

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. Sie können this.$mock verwenden, um Scheindaten direkt zu generieren

Siehe hier Vue.prototype

Bitte schauen Sie sich hier Mockjs an

Während der Projektentwicklung wurden Front- und Backend getrennt und gefälschte Daten erstellt. Das Projekt wurde mit vue2.0 umgestaltet und auch das Backend wurde zurückgedrängt Während des Entwicklungsprozesses habe ich eine virtuelle API-Anfrage erstellt. Für die Datenanforderung verwende ich den Dev-Server in der mit Vue-Cli-Gerüst erstellten Projektdatei, um eine virtuelle API-Anfrage zu erstellen, und greife im virtuellen Anforderungshintergrundmodus auf die gefälschten Daten deines eigenen Modells zu. Die spezifische Methode lautet wie folgt

in build/dev-server.js. Fügen Sie in der Datei

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)

Die Datei „mock.json“, von der appData abhängt, ist sie selbst. Um die gefälschte Datendatei zu verspotten, verspotten Sie sie selbst oder verwenden Sie „mock.js“, 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() dient zum Erstellen einer API-Route, apiRoutes.post dient zum Erstellen einer Post-Schnittstelle. Diese Post-Schnittstelle verfügt über einen req- und einen res-Parameter, der die Anforderung ausführt und Wenn zurückgegeben wird, erhalten wir einen JSON, der einen Statuscode errno und die zurückgegebenen Daten enthält (Daten zeigen 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-Anfragedaten 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 der Browserkonsole. Sie werden feststellen, dass eine Netzwerkanforderung generiert wurde

Gleichzeitig kehrten die Daten glücklich zurück:

Wenn Sie Schnittstellendaten hinzufügen möchten, fügen Sie sie einfach weiterhin in dev-server.js hinzu. posten, bekommen Sie können warten.

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

Verwandte Empfehlungen:

Node.js Serverumgebung Unten finden Sie ein Tutorial zur Verwendung von Mock.js zum Abfangen von AJAX-Anfragen

Detaillierte Erläuterung des Mock-Dateisystems im Node.js-Test

Einfaches Mock-JSON implementiert in PHP Script Sharing_PHP Tutorial

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Verwendung von Scheindaten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!