专栏首页一个爱瞎折腾的程序猿vue项目实践-添加express-mockjs进行数据模拟

vue项目实践-添加express-mockjs进行数据模拟

mock-server

在新项目开始的时候,后端框架还没有,前端就有能够自己操作的模拟数据的服务是可以有的

express-mockjs 是楼教主结合 express+mock-lite 造的一个轮子,可以快速的帮助我们在本地搭建一个 mock 服务器

相关资料:

安装 express-mockjs 到项目

安装 express-mockjs(v0.4.9): npm install express-mockjs --save-dev

安装 nodemon 到项目 以监听 mock 代码修改

安装 nodemon(v1.17.4): npm install nodemon --save-dev

新建 mock-server/index.js 编写启动服务器代码

var path = require('path')
var express = require('express')
var mockjs = require('express-mockjs')

var app = express()

// 自定义路径 前缀: '/api'
var config = {
  port: 3000
}
//以/api为前缀,寻找api目录下的所有接口
app.use('/api', mockjs(path.join(__dirname, 'api')))

// 获取port参数 可通过 --port自 定义启动端口
var args = process.argv
for (let i = 0; i < args.length; i++) {
  if (args[i] === '--port' && i < args.length - 1 && args[i + 1] > 0) {
    config.port = args[i + 1]
    break
  }
}

console.log('mock-server[mockjs-lite]:http://localhost:' + config.port)
// console.log('mockjs-lite定义:http://mockjs-lite.js.org/docs/examples.html')
app.listen(config.port)

编写接口文件

在 mock-server 文件夹创建 api 文件夹,并安装 expess-mockjs 的文档编写 json/js json

/**
 * Interface function description
 *
 * @url /api-access-path
 *
 * Parameter description and other instructions.
 * uid: user ID
 * name: username
 * email: the email
 * etc.
 */

{
  "code": 0,
  "result|5": [
    {
      "uid|+1": 1,
      "name": "@name",
      "email": "@email"
    }
  ]
}

js

/**
 * home page links
 *
 * @url /home-links
 *
 * Here you can write a detailed description
 * of the parameters of the information.
 */

module.exports = {
  code: function() {
    // simulation error code, 1/10 probability of error code 1.
    return Math.random() < 0.1 ? 1 : 0
  },
  'list|5-10': [{ title: '@title', link: '@url' }]
}

运行 mock 服务器

在项目的 package.json 中添加 mock 命令并运行:npm run mock

"scripts": {
    "dev":
      "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0 --port 5555",
    //...
    "mock": "nodemon --watch mock-server node mock-server/index.js --port 6543"
  },

代码图示

  • json 定义
  • package.json 配置
  • 访问示例

相关链接

文中的实现可以在下面仓库中找到,不清楚的地方可以直接查看源码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 分享我在 vue 项目中关于 api 请求的一些实现及项目框架

    axios 默认提交格式为:application/json 可使用 qs 模块(需要安装)转换后提交格式为 application/x-www-form-u...

    易墨
  • vue 实践记录

    使用:const files = require.context(directory, useSubdirectories, regExp)

    易墨
  • express使用记录

    易墨
  • 批判性地研究马尔可夫逻辑网络在音乐信号分析中的适用性(cs AI)

    近年来,已提出马尔可夫逻辑网络(MLN)作为音乐信号分析的潜在有用范例。因为所有隐藏的Markov模型都可以重新构造为MLN,所以MLN可以提供一个包罗万象的框...

    RockNPeng
  • 无AI不智慧 无智慧不气象

    端午假期接近尾声,您的端午过的怎么样?今年是个特别的时候,“安康”是最大的主题!“粽情端午,安康永驻”,送给所有的读者朋友。昨天关于雷达应用和开发的分享引起很多...

    用户1247399
  • 经验分享:新购买移动硬盘格式化为Windows系统和Mac系统同时可以使用的方法

    经常使用硬盘的小伙伴们都知道,新买的移动硬盘,要想在Windows系统使用的话是可以直接使用的,因为一般情况下新买的移动硬盘格式是适用于Windows系统的NT...

    三掌柜
  • 裂变锁(CS OS)

    经典的测试与测试(TS)互斥锁很简单,并且在轻度竞争或无竞争的情况下,具有高性能和低延迟的所有权转移。然而,它们并没有在激烈的竞争中优雅地扩大规模,也不提供任何...

    非过度曝光
  • 在Vivado中实现ECO功能

    应用场景:如何利用Tcl 在已完成布局布线的设计上对网表或是布局布线进行局部修改,从而在最短时间内,以最小的代价完成个别的设计改动需求。 什么是ECO? ECO...

    瓜大三哥
  • 租赁行业如何使用电子合同?

    随着互联网行业的发展,租房、租车等各种租赁类业务逐渐迁移到了线上,互联网租赁平台也因此应运而生。而线上租赁业务涉及承租方、出租方、信息中介以及平台,1份租赁合同...

    法大大电子合同
  • 一篇文章带你详解 HTTP 协议之报文首部及字段详解(中)

    先来回顾一下首部字段在报文的位置,HTTP 报文包含报文首部和报文主体,报文首部包含请求行(或状态行)和首部字段。 在报文众多的字段当中,HTTP 首部字段包含...

    java进阶架构师

扫码关注云+社区

领取腾讯云代金券