vue-cli3使用mock數(shù)據(jù)的方法分析

更新時間：2020年03月16日 08:59:47 作者：Raaabbit

這篇文章主要介紹了vue-cli3使用mock數(shù)據(jù)的方法,結合實例形式分析了vue-cli3使用mock數(shù)據(jù)的相關實現(xiàn)方法與操作注意事項,需要的朋友可以參考下

本文實例講述了vue-cli3使用mock數(shù)據(jù)的方法。分享給大家供大家參考，具體如下：

在前后端分離的開發(fā)模式中，后端給前端提供一個接口，由前端向后端發(fā)請求，得到數(shù)據(jù)后前端進行渲染。由于前后端開發(fā)進度的不統(tǒng)一，前端往往使用本地的測試數(shù)據(jù)進行數(shù)據(jù)渲染的測試。

正文開始

在vue-cli構建的項目，我們可以借助devServer開啟一個服務，然后我們可以通過路由模擬一個接口來進行測試。

在vue-cli2和vue-cli3中的配置方式是不同的。下面分別展示

##　vue-cli2

先放一張vue-cli2生成項目圖片

mock文件夾是一個我自己創(chuàng)建的用來存放模擬數(shù)據(jù)的文件夾，其中有一個json文件，下面我們要對build目錄下webpack.dev.conf.js進行配置

// 引入文件
const goodsList = require('../mock/goods.json');
// ……
// 配置devServer
devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: {
   rewrites: [
    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
   ],
  },
  hot: true,
  contentBase: false, // since we use CopyWebpackPlugin.
  compress: true,
  host: HOST || config.dev.host,
  port: PORT || config.dev.port,
  open: config.dev.autoOpenBrowser,
  overlay: config.dev.errorOverlay
   ? { warnings: false, errors: true }
   : false,
  publicPath: config.dev.assetsPublicPath,
  proxy: config.dev.proxyTable,
  quiet: true, // necessary for FriendlyErrorsPlugin
  watchOptions: {
   poll: config.dev.poll,
  },
  before(app){
   app.get('/goods/list',(req,res,next)=>{
    res.json(goodsList);
   })
  }

后面的before(app)部分就定義了可以通過向/goods/list發(fā)送get請求來得到我們要的json文件。

同事我們在vue文件中只要

// 利用了axios
axios.get("/goods/list").then(res => {
    this.goodsList = res.data.result;
   }).catch(error=>{
    console.log(error);
   });

就可以請求到數(shù)據(jù)

vue-cli3

vue-cli3主打自動化，0配置。但是我們往往需要進行一些配置，這時我們就要創(chuàng)建一個配置文件。目錄結構如下

vue.config.js就是我們手動創(chuàng)建的配置文件，完整的配置項可以在官網看到，在這里我們著重于devServer

const mockdata = require('./mock/test.json');

module.exports={
 devServer: {
  port:4000,
  before(app){
   app.get('/goods/list',(req,res,next)=>{
    res.json(mockdata);
   })
  }
 }
}

這樣就達到了相同的效果

希望本文所述對大家vue.js程序設計有所幫助。

您可能感興趣的文章: