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

短命女 2024-03-23 13:27 44阅读 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 条评论，44人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关前端--mock

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

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

相关前端 mock 数据实践

在项目中一般使用 [Mock][] 创建假数据，Mock 有提供拦截请求响应数据的功能 [Mock.mock()][Mock.mock] ，但是 Mock 拦截就导致在 `Ne

待我称王封你为后i/ 2022年10月17日 01:47/ 0 赞/ 204 阅读

相关 Express简单路由使用

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

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

相关前端mock数据

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

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

相关浅谈前端mock

引言前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用mock方式来避免这个问题。本人参考了大量文章，结合自己的经验，给出自己在mock上的一些理解。

梦里梦外;/ 2022年03月07日 03:30/ 0 赞/ 487 阅读

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

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

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

相关 vue关于mock的简单使用

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

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