前端vue3、mock-serve的搭建

前端开发时，前后端分离，大多数都是同时开发。前端此时测试接口往往会mock数据，但是mock的数据在浏览器调试时，network往往看不到网络请求。为了更好的分工合作，让前端能在不依赖后端环境的情况下进行开发，其中一种手段就是为前端开发者提供一个web容器，这个本地环境就是 mock server。

json-server概述

        模拟服务端接口数据本地环境，一般用在前后端分离后，前端人员可以不依赖API开发，而在本地搭建一个JSON服务，自己产生测试数据。

        顾名思义，json-server就是个存储json数据的server~​。

        json-server网址：https://www.npmjs.com/package/json-server

下载安装

使用npm全局安装json-server：

npm install -g json-server

  可以通过查看版本号，来测试是否安装成功：

json-server -v

文件架构：

 

server.js

const jsonServer = require('json-server');

const port = 9100;

const server = jsonServer.create();
module.exports = server;

require('./data/index')();

server.listen(port, () => {
  console.log('JSON Server is running');
});

index.js

module.exports = () => {
  require('./3dBuilding');
  require('./3dBuildingData');
};

模块化的index.js：

const server = require('../../server');

const getVirtualRoomList = require('./getVirtualRoomList');
const getVirtualDeviceList = require('./getVirtualDeviceList');
const getVirtualDecorationList = require('./getVirtualDecorationList');
const getVirtualChildSceneList = require('./getVirtualChildSceneList');

server.get('/3dBuilding/getVirtualDeviceList', (req, res) => {
  res.json(getVirtualDeviceList());
});

server.get('/3dBuilding/getVirtualRoomList', (req, res) => {
  res.json(getVirtualRoomList());
});

server.get('/3dBuilding/getVirtualDecorationList', (req, res) => {
  res.json(getVirtualDecorationList());
});

server.get('/3dBuilding/getVirtualChildSceneList', (req, res) => {
  res.json(getVirtualChildSceneList());
});

module.export = server;

任意一个接口文件：

const modleJsonPathList = ['./json/childScene.json'];
const vChildSceneData = modleJsonPathList.map((path) => require(path)).flat();

const getVirtualChildSceneList = () => ({
  code: 0,
  message: '成功',
  data: vChildSceneData
});

module.exports = getVirtualChildSceneList;

最后使用node命令启动即可