Zwei Methoden zur Analyse simulierter Daten in vue-cli

In diesem Artikel werden hauptsächlich zwei Methoden zur Simulation von Daten in Vue-Cli vorgestellt. Dieser Artikel stellt Sie ausführlich vor und hat einen gewissen Referenzwert.

Führen Sie das Vue-Resource-Modul in main.js ein, Vue.use(vueResource).

1. Verwenden Sie den JSON-Server (kann keine Post-Anfrage verwenden)

Suchen Sie als Nächstes die webpack.dev.conf.js-Datei im Build-Verzeichnis und importieren Sie const portfinder = require('portfinder').json-server

/*引入json-server*/
const jsonServer = require('json-server')
/*搭建一个server*/
const apiServer = jsonServer.create()
/*将db.json关联到server*/
const apiRouter = apiServer.router('db.json')
const middlewares = jsonServer.defaults()\
apiServer.use(apiRouter)
apiServer.use(middlewares)
/*监听端口*/
apiServer.listen(3000,(req,res)=>{
 console.log('jSON Server is running') 
})

nach

und starten Sie jetzt neu. Nach Eingabe von localhost :3000 in der Adressleiste des Browsers nach dem Server können Sie die folgende Seite aufrufen, was bedeutet, dass der JSON-Server erfolgreich gestartet wurde

Suchen Sie nun den Index .js-Datei im Konfigurationsordner, suchen Sie „proxyTable:{}“ in der Entwicklungskonfiguration und konfigurieren Sie

'/api':{
  changeOrigin:true, //示范允许跨域
  target:"http://localhost:3000", //接口的域名
  pathRewrite:{
    '^/api':'' //后面使用重写的新路径，一般不做更改
  }
}

Jetzt können Sie localhost:8080/api/apiName verwenden, um JSON-Daten anzufordern

Stellen Sie eine Ajax-Anfrage über das Ressourcen-Plug-in im Projekt

Verwenden Sie vorher die Hook-Funktion data (){}created:function(){

  this.$http.get('/api/newsList')
    .then(function(res){
      this.newsList = res.data //赋值给data中的newsList
    },function(err){
      console.log(err)
    })
}

2. Verwenden Sie Express (Sie können Post-Anfrage verwenden)

Erstellen Sie eine neue Routendatei im Projekt und erstellen Sie darin eine neue api.js. Der Inhalt lautet wie folgt:

const express = require('express')
const router = express.Router()
const apiData = require('../db.json')
router.post('/:name',(req,res)=>{
  if(apiData[req.params.name]){
    res.json({
      'error':'0',
      data:apiData[req.params.name]
    })
  }else{
    res.send('no such a name')
  }
})

Suchen Sie als Nächstes die Datei webpack.dev.conf.js im Build-Verzeichnis und import express auf der const portfinder = require('portfinder')后-Seite wie folgt:

const express = require('express')
 const app = express()
 const api = require('../routes/api.js')
 app.use('/api',api)
 app.listen(3000)

Suchen Sie nun die Datei index.js im Konfigurationsordner und suchen Sie in „proxyTable:{}“. die Entwicklerkonfiguration und -konfiguration

'/api':{
  changeOrigin:true, //示范允许跨域
  target:"http://localhost:3000", //接口的域名
  pathRewrite:{
    '^/api':'/api' //后面使用重写的新路径，一般不做更改
  }
}

Nach dem Neustart können Sie posten, um Zugriff auf Daten anzufordern

Das Obige ist der gesamte Inhalt davon Ich hoffe, dass er für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Wie Vue-cli ProxyTable domänenübergreifende Probleme in der Entwicklungsumgebung löst

Über vue. js vor und nach End-to-End-Dateninteraktionsvorgang zum Senden von Daten

Das obige ist der detaillierte Inhalt vonZwei Methoden zur Analyse simulierter Daten in vue-cli. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!