express+jade制作简易mock工具

简易接口mock工具(express+jade)

在这个前后端分离变成开发常态的时代,对于前端,无论是还在采取基础的原生开发还是运用日益精进的前端框架,都会面临后端没给数据就没法往下写的窘境,但还是有解决办法的。

npm mock

无论是用Vue还是Angular,都可以使用mock工具,这个工具可以通过npm install的方式集成到项目中间去,不得不说,现在公司完善的项目框架,基本上都有mock的身影,但我不会过多介绍,原因如下:

  1. mock需要集成到项目中去,虽然它的功能及其强大,但我一直还是觉得能不集成就不集成;
  2. 前几天有个“笨笨”的朋友做项目的时候被mock玩得头晕眼花,所以为了给他些便利,我给他写了一个简单的mock工具,先附上git链接

功能介绍

由于做的时间较短,所以只满足了基本功能:

  1. 配置接口,在routes/config.json中:
{
    "interface": [
    	// 在这里面配置接口
        {
        	// 接口ID,目前可不写,如果以后要开发更多类似于在网页上动态增删改查接口时才需填写
            "id": "1",
            // 接口链接 例如 http://localhost:3000/list 可在局域网内通过ip访问
            "url": "/list",
            // 接口说明
            "description": "获取测试列表",
            // 请求方式
            "method": "GET",
            // 入参
            "params": [],
            // 出参
            "output": {
                "code": 200,
                "data": [
                    {
                        "id": "1",
                        "name": "tom"
                    },
                    {
                        "id": "2",
                        "name": "nancy"
                    }
                ]
            }
        },
        {
            "id": "2",
            "url": "/edit",
            "description": "登录测试",
            "method": "POST",
            // 入参
            "params": [
                {
                	// 入参名称
                    "name": "username",
                    // 入参字段说明
                    "description": "用户名",
                    // 是否必填
                    "require": true
                },
                {
                    "name": "password",
                    "description": "密码",
                    "require": false
                }
            ],
            "output": {
                "code": 200,
                "message": "登录成功"
            }
        }
    ]
}
  1. 简易可视化接口文档:
    在这里插入图片描述
    只是粗略能看,见谅。。。。

使用

  1. npm i安装依赖
  2. nodemon startnpm start启动服务,为啥有nodemon这个命令呢,因为本来我已经写好了在页面上可以增删改查接口的操作,这样可以不用重启服务就可以更新接口,但我想大部分人也许不需要这个功能,所以暂时注释掉了
  3. 现在接口就已经启动了,如图:
    在这里插入图片描述
    在这里插入图片描述
    若缺少必填字段:
    在这里插入图片描述
  4. 局域网通过IP访问接口文档:

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值