vuecli中使用express和mockjs模拟数据

首先npm安装express和mockjs

npm i express

npm i mockjs

 http://mockjs.com/

https://expressjs.com/en/5x/api.html

之后在package.json内添加启动方式

"scripts": {
    "api": "node app.js",
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint --fix"
  },

之后创建一个app.js文件

//引入express中间件
const express = require('express');
const app = express();
const path = require('path')

//指定启动服务器到哪个文件夹
app.use(express.static('./api'));

//allow custom header and CORS
// 解决跨域问题
app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

  if (req.method == 'OPTIONS') {
    res.send(200); /让options请求快速返回/
  }
  else {
    next();
  }
});

// 读取目录的内容
const fs = require('fs');
fs.readdir('api', (err, files)=>{
  if(err) {
    return;
  }
  files.forEach((file)=>{
    let fullpath = path.resolve('api/' + file);
    require(fullpath).api(app);
  });
});


//监听端口建议为3000
app.listen(3000, function () {
    console.log('Web App listening at http://localhost:%s', 3000);
});

接着创建一个api文件夹，在里面放模拟数据

const Mock = require('mockjs')

function addApi(app) {
  // 调用
  app.post('/test', function(req, res) {
    res.json({
      data: Mock.mock({
        'list|1-10': [{
          'id|+1': 1
        }]
      })
    })
  })
}

module.exports = {"api": addApi};

node可以在这里看文档：http://nodejs.cn/api/

接着在postman中调用就可以看到模拟的数据了