前端超简单写mock（使用express）

短命女 2024-03-23 13:27 60阅读 0赞

个人自己研究的mock写法，不需要做增删改，只需要返回值的情况，这样的写法可以极速实现mock

npm i -D express

index.js

const express = require('express');
    const router = require('./router');
    const app = express();
    
    // 允许跨域
    app.all('*', (req, res, next) => {
        
      res.header('Access-Control-Allow-Origin', '*');
      res.header('Access-Control-Allow-Headers', 'Content-Type');
      res.header('Access-Control-Allow-Methods', '*');
      res.header('Content-Type', 'application/json;charset=utf-8');
      next();
    });
    
    app.use(router);
    
    app.listen(80, () => {
        
      console.log('serve running at http://127.0.0.1');
    });

把api文件夹下的所有js文件，注册路由

const express = require('express')
    const router = express.Router()
    
    function routerPost(url) {
        
      const pathArr = url.split('/')
      const lastPathName = pathArr[pathArr.length - 1]
      router.post(url, (req, res) => {
        
        res.send(require('./api/' + lastPathName))
      })
    }
    routerPost('/heloworld/a')
    routerPost('/heloworld/b')
    routerPost('/heloworld/c')
    routerPost('/heloworld/d')
    routerPost('/heloworld/e')
    module.exports = router

api文件夹下的js，比如a.js

module.exports = {
        
      msg: "操作成功",
      code: 200,
      data: ["1", "2", "3", "4"],
    }

则axios.post(‘/heloworld/a’)返回

{
        
      msg: "操作成功",
      code: 200,
      data: ["1", "2", "3", "4"],
    }

package.json加入脚本，npm run mock后启动express

"scripts": {
         ...
        "mock": "npx nodemon ./mock/src/index.js"
      },

发表评论取消回复

表情：

评论列表（有 0 条评论，60人围观）

还没有评论，来说两句吧...

相关阅读

相关前端超简单写mock（使用express）

个人自己研究的mock写法，不需要做增删改，只需要返回值的情况，这样的写法可以极速实现mock npm i -D express index.js con

短命女/ 2024年03月23日 13:27/ 0 赞/ 61 阅读

相关 nodejs 使用express 搭建简单前端demo

Express是基于Ndejs的前端框架，使用其可以简洁快速的创建健壮友好的API服务。在前端或移动端的开发过程中，可以借助Express的这项功能模拟API数据，方便开发调试

电玩女神/ 2023年10月17日 13:47/ 0 赞/ 21 阅读

相关一个超简单的 RestFUL API 接口 Mock 工具，建议各位前端同学来使用哦！

一个超简单的 RestFUL API 接口 Mock 工具，建议各位前端同学来使用哦！在我们前端的开发工作中，如果与后端做好了前后端并行开发的安排，那么我们肯定是少不了

灰太狼/ 2023年07月23日 05:55/ 0 赞/ 97 阅读

相关使用mock.js生成前端测试数据

![format_png][] image.png 概述： Mock.js是一个模拟数据生成器，可以让前端独立于后端进行开发。如果你正在开发一个前端页面，可是后台还没

末蓝、/ 2023年07月22日 04:58/ 0 赞/ 16 阅读

相关一个超简单的接口 Mock 工具升级版介绍，各位前端同学记得收藏哦！

一个超简单的接口 Mock 工具升级版介绍，各位前端同学记得收藏哦！这是一个我自己发起的项目，Github 地址是 [https://github.com/fengcm

秒速五厘米/ 2023年02月11日 03:28/ 0 赞/ 6 阅读

相关前端--mock

原文网址：[前端--mock\_IT利刃出鞘的博客-CSDN博客][--mock_IT_-CSDN] 其他网址 > [浅谈mock][mock] > [Mock 模

朱雀/ 2022年12月19日 03:51/ 0 赞/ 141 阅读

相关 Express简单路由使用

Express简单路由使用 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

喜欢ヅ旅行/ 2022年08月29日 05:55/ 0 赞/ 216 阅读

相关前端mock数据

作为前端经常需要模拟后台数据，我们称之为mock。通常的方式为自己搭建一个服务器，返回我们想要的数据。项目中遇到的请求链接是类似这样子的：www.abc.com/user/

叁歲伎倆/ 2022年08月18日 11:46/ 0 赞/ 189 阅读

相关前端使用MOCK平台提高研发效率

前端使用MOCK平台提高研发效率 > 解决问题：在过往开发的过程中，前端与后端接口对接是不可或缺的一环，这一环往往需要前端后端两个角色一起参与，一起连调并且解决问题，这样

柔光的暖阳◎/ 2022年01月09日 18:11/ 0 赞/ 267 阅读

相关 vue关于mock的简单使用

阅读目录 [一、mock][mock] [1、简介][1] [2、vue直接使用mock][2_vue_mock] 一、m

拼搏现实的明天。/ 2021年07月26日 19:57/ 0 赞/ 380 阅读