vue-cli项目中使用mock模拟假数据

安装mockjs

npm install mockjs

生成mock假数据 data.js

var Mock=require("mockjs");

const data=Mock.mock({
  seller:{
    first:'@cname',
    middle:'@FIRST',
    last:'@LAST',
    hua:'@cword(6,10)',
    full:'@first @middle @last'
  },
  goods:{
    first:'@cname',
    middle:'@FIRST',
    last:'@LAST',
    hua:'@cword(6,10)',
    full:'@first @middle @last'
  },
  ratings:{
    first:'@cname',
    middle:'@FIRST',
    last:'@LAST',
    hua:'@cword(6,10)',
    full:'@first @middle @last'
  }
});
module.exports={data}

复制代码

在webpack.dev.config.js 形成数据接口

使用生成的mock数据

const express=require('express');
var app=express();
var appdata=require('./data.js');
appdata=appdata.data;
var seller=appdata.seller;
var goods=appdata.goods;
var ratings=appdata.ratings;
var apiRoutes=express.Router()
app.use('/api',apiRoutes);
复制代码

并形成数据接口

before(app){
      app.get('/api/seller',function (req,res) {
        res.json({
          errno:0,//表示数据请求成功,
          data:seller
        })
      })
      app.get('/api/goods',function (req,res) {
        res.json({
          errno:0,//表示数据请求成功,
          data:goods
        })
      })
      app.get('/api/ratings',function (req,res) {
        res.json({
          errno:0,//表示数据请求成功,
          data:ratings
        })
      })
    }
复制代码

常见的mock生成规则

   first:'@cname',      //生成中文名字
    middle:'@FIRST',    //占位符 和first生成的规则是一样的
    last:'@LAST',
    hua:'@cword(6,10)',   //生成6-10个汉字
    full:'@first @middle @last'
复制代码

转载于:https://juejin.im/post/5aa2665e51882555712bf451