vue-cli中模擬數據的兩種方法

我所使用的是新版vue-cli

首先進行所需插件的安裝,vue-resource,json-server,proxyTable.vue

目錄結構如圖

在main.js中引入vue-resource模塊,Vue.use(vueResource).webpack

1.使用json-server(不能用post請求)

接下來找到build目錄下的webpack.dev.conf.js文件,在const portfinder = require('portfinder')後面引入json-server.web

/*引入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')  
})
複製代碼

如今重啓服務器後瀏覽器地址欄輸入localhost:3000能進入以下頁面則說明json server啓動成功了ajax

如今找到config文件夾下的index.js文件,在dev配置中找到proxyTable:{} 並在其中配置vue-cli

'/api':{
    changeOrigin:true, //示範容許跨域
    target:"http://localhost:3000", //接口的域名
    pathRewrite:{
        '^/api':'' //後面使用重寫的新路徑,通常不作更改
    }
}
複製代碼

如今能夠使用localhost:8080/api/apiName 請求json數據了express

在項目中經過resource插件進行ajax請求json

data (){}前使用鉤子函數created:function(){
    this.$http.get('/api/newsList')
        .then(function(res){
            this.newsList = res.data //賦值給data中的newsList
        },function(err){
            console.log(err)
        })
}
複製代碼

2.使用express(能夠使用post請求)

在項目中新建routes文件並在其中新建api.js,內容以下:api

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')
    }
})

module.exports = router
複製代碼

接下來找到build目錄下的webpack.dev.conf.js文件,在const portfinder = require('portfinder')後面引入express,以下:跨域

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

如今找到config文件夾下的index.js文件,在dev配置中找到proxyTable:{} 並在其中配置瀏覽器

'/api':{
    changeOrigin:true, //示範容許跨域
    target:"http://localhost:3000", //接口的域名
    pathRewrite:{
        '^/api':'/api' //後面使用重寫的新路徑,通常不作更改
    }
}
複製代碼

重啓以後,即可以post請求訪問數據了.

相關文章
相關標籤/搜索