【高效能办公】快速搭建前端Mock数据接口供后端调用

我就是我 2022-08-31 02:16 163阅读 0赞

# 配置安装 #

#全局安装
    npm i @shymean/mock-server -g
    #快速启动mock服务器
    mock -p 9999 -f ./_mock.js

## 参数说明 ##

port，服务器端口号，默认7654，简写 -p  
file，mock模板文件路径，默认./\_mock.js，简写 -f

# 模板语法 #

使用该工具只需要准备一个mock模板文件，其语法参考

内部使用@shymean/koa-mock\`，这是一个快速搭建koa的mock服务器的中间件  
mock模板使用mockjs语法，并扩展了相关的功能

// _mock.js
    // 对应的rurl会被中间件拦截，并返回mock数据
    // ANY localhost:9999/
    Mock.mock('/', { 
        data: [],
        msg: "hello mock",
        "code|1-4": 1,
    })
     
    // 可以mock指定的请求方法
    // POST localhost:9999/test
    Mock.mock('/test', 'POST', { 
        data: [],
        msg: "hello mock",
        "code|1-4": 1,
    })
     
    // 扩展rtype，支持jsonp形式，使用param传入对应的回调名
    // GET JSONP localhost:9999/test
    Mock.mock('/test', { 
        type: 'jsonp',
        param: 'callbackName'
    },{ 
        code: 0,
        msg: 'hello from mock jsonp',
        data: { 
            "id|1000-9999": 1,
        }
    })
     
    // 默认回调名称 callback
    Mock.mock("/test2", "jsonp", { 
        code: 0,
        msg: "hello from mock jsonp2",
        data: { 
            "id|1000-9999": 1,
        }
    });

参考  
[https://blog.csdn.net/weixin\_34138521/article/details/91442613][https_blog.csdn.net_weixin_34138521_article_details_91442613]

[https_blog.csdn.net_weixin_34138521_article_details_91442613]: https://blog.csdn.net/weixin_34138521/article/details/91442613

发表评论取消回复

表情：

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

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

相关阅读

相关前端如何调用后端接口

前端可以通过 Ajax，Fetch API，Axios 等方式调用后端接口。 Ajax：使用 XMLHttpRequest 对象或者使用现代浏览器提供的 fetch() AP

迈不过友情╰/ 2024年03月25日 13:46/ 0 赞/ 113 阅读

相关 Vue mock模拟后端数据方法

1、建立mock目录，添加mock.js文件 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

「爱情、让人受尽委屈。」/ 2023年06月15日 12:26/ 0 赞/ 6 阅读

相关前端-jsduck-快速搭建

最权威的手册就是官网： [https://github.com/senchalabs/jsduck][https_github.com_senchalabs_jsduck]

桃扇骨/ 2022年11月15日 11:56/ 0 赞/ 168 阅读

相关前端-jsdoc-快速搭建

由于我们使用了ES6高级语法，发现钟爱的 jsduck 不能用了。只能选择 jsdoc。环境：node14 第1步：运行 npm i jsdoc -g 第2步：

不念不忘少年蓝@/ 2022年11月15日 11:55/ 0 赞/ 138 阅读

相关前端自搭接口调用

前端自搭接口调用简单查询（搭建本地接口连接） \\首先我们需要下载安装 phpStudy 软件在安装完成后，点击进入将会看到这样的页面 ![在这里插入图片描

╰半橙微兮°/ 2022年10月30日 06:25/ 0 赞/ 124 阅读

相关 vue mock 模拟后端api接口

模拟ajax响应安装插件 axios 是对 ajax 请求的封装对于 ajax 请求，使用 mockjs 插件来模拟后端响应 npm instal

曾经终败给现在/ 2022年10月29日 11:30/ 0 赞/ 275 阅读

相关前端向后端调用接口的方式

传统方式： axios（常用）前提是安装了axios main.js中引用 > import axios from 'axios' > > Vu

野性酷女/ 2022年10月11日 00:48/ 0 赞/ 192 阅读

相关【高效能办公】快速搭建前端Mock数据接口供后端调用

配置安装全局安装 npm i @shymean/mock-server -g 快速启动mock服务器 mock -p 9999 -f .

我就是我/ 2022年08月31日 02:16/ 0 赞/ 164 阅读

相关使用阿里RAP搭建前端Mock Server

MockServer可以减少前端开发对后端的依赖，提高前端开发的效率，同时也利于团队的协作。什么是RAP？ RAP是阿里团队出的一款WEB接口管理工具，帮助开发人员更高效

骑猪看日落/ 2022年07月11日 12:20/ 0 赞/ 485 阅读

相关后端Django + 前端Vue.js快速搭建web项目

参考网上一篇文章做了点细节补充。本篇使用Vue.js作为前端框架，代替Django本身较为孱弱的模板引擎，Django则作为服务端提供api接口，使得前后端实现完

清疚/ 2022年05月22日 03:48/ 0 赞/ 187 阅读