vue-cli中模擬資料的兩種方法

學前端的小新發表於2018-06-29

Vue

我所使用的是新版vue-cli

首先進行所需外掛的安裝，vue-resource,json-server,proxyTable.

目錄結構如圖

在main.js中引入vue-resource模組，Vue.use(vueResource).

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

接下來找到build目錄下的webpack.dev.conf.js檔案，在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')  
})
複製程式碼

現在重啟伺服器後瀏覽器位址列輸入localhost:3000能進入如下頁面則說明json server啟動成功了

現在找到config資料夾下的index.js檔案，在dev配置中找到proxyTable:{} 並在其中配置

'/api':{
    changeOrigin:true, //示範允許跨域
    target:"http://localhost:3000", //介面的域名
    pathRewrite:{
        '^/api':'' //後面使用重寫的新路徑，一般不做更改
    }
}
複製程式碼

現在可以使用localhost:8080/api/apiName 請求json資料了

在專案中通過resource外掛進行ajax請求

在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,內容如下：

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)
複製程式碼