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 条评论
登录 后参与评论

相关文章

来自专栏PhpZendo

Apache Kafka 在 Windows 系统上设置与运行教程

手把手教你在 Windows 系统安装运行 Apache Zookeeper 和 Apache Kafka 服务。

1612
来自专栏君赏技术博客

【已解决】ERROR | [iOS] unknown: Encountered an unknown error (Pod::DSLError

最新基于我的 https://github.com/josercc/Pod-Template模板创建模块库。

8882
来自专栏魏艾斯博客www.vpsss.net

解决 WordPress 主题“噢 没有这个文件 请重新检查文件名 然后再试 ”的问题

1353
来自专栏码神联盟

碎片化 | 第四阶段-Maven示例创建工程-视频

Maven创建工程 创建步骤: 工作空间->新建maven project-> 选中第一个创建示例复选框->下一步-> 完善id信息和版本信息->点击完成 ma...

3516
来自专栏Java学习之路

从初识Maven到使用Maven进行依赖管理和项目构建

前些天就安装了Maven,以备自己以后整合项目用,尤其是我们的ssh,ssm项目。想必好多人在开始的时候并不清楚Maven是什么,它能够帮助我们干什么。 所以...

3687
来自专栏Python小屋

使用Python简单模拟Linux系统的tree工具

Linux系统中有个tree工具可以用比较好看的形式来显示指定文件夹的目录结构。例如下图(来自于网络): ? 本文代码使用Python对Linux系统的tree...

3195
来自专栏Golang语言社区

详解Linux命令行下常用svn命令

1、Linux命令行下将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例如:svn checkout svn:...

3657
来自专栏小尘哥的专栏

一分钟系列----mybatis plus之逻辑删除

MP(mybatis plus)已经大大简化了我们好多的开发操作,基本的增删改查都有了,包括代码生成等等,今天想说的是它的逻辑删除功能。我们都在数据库设计时候经...

1693
来自专栏流媒体人生

mingw编译ffmpeg+x265过程记录

Ffmpeg-2.3     http://ffmpeg.org/releases/ffmpeg-2.3.3.tar.bz2

1611
来自专栏Java后端技术栈

CentOS 7中firewall防火墙详解和配置以及切换为iptables防火墙

https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/7/html/Se...

1301

扫码关注云+社区