如何建一个前端项目,用来mock数据

1.下载所需的依赖,下面是package.json文件

{
  "name": "shop",
  "version": "1.0.0",
  "description": "shop mock",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"nodemon app.js"
  },
  "author": "Aimee",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "btoa": "1.1.2",
    "commander": "^2.9.0",
    "connect-busboy": "0.0.2",
    "cookie-parser": "^1.4.3",
    "cors": "2.8.5",
    "cross-env": "^7.0.2",
    "express": "^4.13.4",
    "express-session": "^1.14.2",
    "express-urlrewrite": "^1.2.0",
    "http-proxy-middleware": "^1.0.1",
    "JSONPath": "0.11.2",
    "lodash": "^4.17.15",
    "node-fetch": "^2.6.11",
    "nodemon": "^2.0.7",
    "path-to-regexp": "^6.1.0"
  }
}

2.使用案例, 需要新建一个app.js文件,然后把下面的例子放进去,例子是模拟的一些请求(get, post)。

const express = require('express');
const path = require('path');
const http = require('http');
const _ = require('lodash');
const bodyParser = require('body-parser');
const router = express.Router();
const fs = require('fs');

const cors = require('cors');
const app = express();
app.use(express.static(path.join(__dirname, '/')));
app.use(bodyParser.json({ type: ["application/json", "application/csp-report", "text/plain"] }));

//解决cors跨域问题
app.use(cors());

router.route('/api/chat').post(function (req, res) {
  console.log("sigon:req:", req);
  res.json( require('./response/angularTest.json'));

});

const sigonFile = require('./response/sigon.json');
router.route('/api/sigon').post(function (req, res) {
  console.log("sigon:req:", req);
  res.json(sigonFile);

});

router.route('/api/getUserList').get(function (req, res) {
  console.log(req.query);
  const query = req.query;
  if (query['pagenum']=='1') {
    res.json(require('./response/getUserList1.json'));
  } else if (query['pagenum']=='2') {
    res.json(require('./response/getUserList2.json'));
  } else if (query['pagenum']=='3') {
    res.json(require('./response/getUserList3.json'));
  } else {
    res.json(require('./response/getUserList.json'));
  }
});

router.route('/api/updateUserStatus/:id/status/:status').post(function (req, res) {
  console.log(req.query);
  const query = req.query;
  if (query['pagenum']=='1') {
    res.json(require('./response/getUserList1.json'));
  } else if (query['pagenum']=='2') {
    res.json(require('./response/getUserList2.json'));
  } else if (query['pagenum']=='3') {
    res.json(require('./response/getUserList3.json'));
  } else {
    res.json(require('./response/getUserList.json'));
  }
});

app.use('', router);
const port = process.env.PORT || 7878;
http.createServer(app).listen(port, '0.0.0.0', () => {
  console.log('start', `${port}`);
})

3.文件目录
在这里插入图片描述

相关推荐

  1. 如何交接一个前端项目

    2024-07-15 10:12:03       45 阅读
  2. 前端项目学习记录3:mock接口

    2024-07-15 10:12:03       31 阅读
  3. 23. 如何设计一个前端项目

    2024-07-15 10:12:03       58 阅读
  4. 如何新建一个React前端项目

    2024-07-15 10:12:03       29 阅读
  5. 如何设计与管理一个前端项目

    2024-07-15 10:12:03       27 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-15 10:12:03       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-15 10:12:03       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-15 10:12:03       58 阅读
  4. Python语言-面向对象

    2024-07-15 10:12:03       69 阅读

热门阅读

  1. 使用C++和libcurl下载指定的文件

    2024-07-15 10:12:03       25 阅读
  2. 微信小程序开发入门指南

    2024-07-15 10:12:03       21 阅读
  3. 等保测评全流程详解

    2024-07-15 10:12:03       20 阅读
  4. Writing Bazel rules: data and runfiles

    2024-07-15 10:12:03       20 阅读
  5. AcWing 667. 游戏时间

    2024-07-15 10:12:03       24 阅读
  6. 面向对象的开发方法

    2024-07-15 10:12:03       26 阅读
  7. 板级调试小助手(3)基于PYNQ的OLED视频显示

    2024-07-15 10:12:03       24 阅读
  8. 小白学习微信小程序的音频合成和语音识别技术

    2024-07-15 10:12:03       27 阅读