【前后端】node mock.js+json-server

发布于：2025-07-30 ⋅ 阅读:(20) ⋅ 点赞:(0)

JSON-Server

一个在前端本地运行，可以存储json数据的server。前端开发可以模拟服务端接口数据，在本地搭建一个JSON服务，自己产生测试数据。

  1. 使用npm全局安装json-server ：npm install -g json-server
  2. 可以通过查看版本号，来测试是否安装成功：json-server -v
  3. 创建json数据——db.json
    在任意一个文件夹下（此处假设创建一个server文件夹），进入到该文件夹里面，执行代码 json-server --watch db.json
  4. 此时文件夹下多出一个db.json文件
  5. 启动json-server --watch db.json，访问 http://localhost:3000/
  6. 分别点击/posts /comments /profile /db链接，我们可以看到访问不同URL返回不同的json数据。其中 /db返回的是整个json文件的数据。
  • 修改端口号
    默认3000 --port 3004或者在db.json同级文件夹新建一个package.json，在script配置添加运行命令：
{
    "scripts": {
        "mock": "json-server db.json --port 3004"
    }
}
//运行时, 直接在当前文件夹下执行 npm run mock
  • 操作数据 | 增删改查
    json-server 支持 restful 风格的api，可以通过不同的请求方式，对数据进行增删改查等不同的操作。
    先修改db.json文件：
{
  "users": [
    {
      "id": 1,
      "name": "liaoyi",
      "phone": "13246566776",
      "age": 22,
      "classId": "1002"
    },
    {
      "name": "林更新",
      "age": "44",
      "id": 4,
      "classId": "1003"
    },
    {
      "name": "李响",
      "phone": "18779756778",
      "age": "26",
      "id": 5,
      "classId": "1003"
    },
    {
      "name": "陈温柔",
      "phone": "18779756000",
      "age": "22",
      "id": 6,
      "sex": "0",
      "classId": "1004"
    },
    {
      "name": "夏琪",
      "phone": "13246579999",
      "age": "22",
      "id": 7,
      "classId": "1004"
    }
  ],
  "class": [
    {
      "id": "1",
      "title": "前端",
      "staff": [
        "1002",
        "1004"
      ]
    },
    {
      "id": "2",
      "title": "后端",
      "staff": [
        "1003"
      ]
    }
  ],
  "fruits": [
    {
      "id": 1,
      "name": "苹果",
      "price": 1.28
    },
    {
      "id": 2,
      "name": "橘子",
      "price": 3.88
    },
    {
      "id": 3,
      "name": "宁夏西瓜",
      "price": 1.98
    },
    {
      "id": 4,
      "name": "麒麟西瓜",
      "price": 3.98
    },
    {
      "id": 5,
      "name": "红蛇果",
      "price": 2.5
    },
    {
      "id": 6,
      "name": "黑皮西瓜",
      "price": 0.98
    },
    {
      "id": 7,
      "name": "红心火龙果",
      "price": 2.69
    },
    {
      "id": 8,
      "name": "国产火龙果",
      "price": 1.69
    },
    {
      "id": 9,
      "name": "海南荔枝",
      "price": 9.9
    },
    {
      "id": 10,
      "name": "陕西冬枣",
      "price": 5.39
    },
    {
      "id": 11,
      "name": "软籽石榴",
      "price": 2.39
    },
    {
      "id": 12,
      "name": "蜜橘",
      "price": 1.99
    },
    {
      "id": 13,
      "name": "海南香蕉",
      "price": 1.45
    }
  ],
  "person": [
    {
      "name": {
        "firstname": "liao",
        "lastname": "yi"
      },
      "pwd": "qwerst54"
    },
    {
      "name": {
        "firstname": "wang",
        "lastname": "wu"
      },
      "pwd": "adasff11"
    }
  ]
}
  • get 获取数据
    浏览器可以直接访问GET请求，可以直接在浏览器访问就能看到返回的json数据。
    获取所有用户数据（对象数组）： http://localhost:3004/users
    获取所有水果数据：http://localhost:3004/fruits
    获取数据
    根据 id 获取 users 数据：http://localhost:3004/users/1
//get请求的query参数
http://localhost:3004/users?id=1

//传入不同的条件
// 查找名字为 'liaoyi' 的用户
http://localhost:3004/users?name=liaoyi

//多个条件 用&符号连接：
http://localhost:3004/fruits?name=橘子&price=3.88
//甚至还可以使用对象取属性值 obj.key 的方式
 http://localhost:3004/person?name.firstname=liao

//分页采用 _page 来设置页码，
// _limit 来控制每页显示条数。
//如果没有指定 _limit ，默认每页显示10条。
http://localhost:3004/fruits?_page=1&_limit=5
http://localhost:3004/fruits?_page=1&_limit=10
http://localhost:3004/fruits?_page=2&_limit=5

//排序采用 _sort 来指定要排序的字段，
// _order 来指定排序是正排序还是逆排序（asc | desc ，默认是asc）。
http://localhost:3004/fruits?_sort=price
http://localhost:3004/fruits?_sort=price&_order=desc

//获取局部数据
//_start 来指定开始位置， _end 来指定结束位置、
//或者_limit指定从开始位置起往后取几个数据。类似Array.slice() 方法
# 使用 _end
http://localhost:3004/fruits?_start=2&_end=4

# 使用 _limit
http://localhost:3004/fruits?_start=2&_limit=4

//获取符合某个范围的数据
1. 使用 _gte 和 _lte 来设置一个取值范围 :
2. 使用 _ne 来获取不包含某个值的数据
3. 采用 _like 来设置匹配某个字符串（或正则表达式）
http://localhost:3004/fruits?id_gte=4&id_lte=6
http://localhost:3004/fruits?id_ne=1&id_ne=10
http://localhost:3004/fruits?name_like=果

//搜索功能 采用 q 来设置搜索内容：
http://localhost:3004/fruits?q=瓜
  • 除get请求外，其他请求方式需要我们通过 api 调试工具或者代码的方式来使用。如apifox
<template>
  <el-button @click="add"> 发送请求 </el-button>
</template>

<script setup>
  import axios from 'axios'
  const url = 'http://localhost:3004/users'
  const add = async () => {
    const data = {
      name: '林更新',
      phone: '18779756000',
      age: '22'
    }
    const { data: res } = await axios({ method: 'post', url, data })
    console.log('res', res)
  }
</script>

<template>
  <el-button @click="deleteUser"> 删除用户 </el-button>
</template>

<script setup>
import axios from 'axios'

const userId = 3
const url = `http://localhost:3004/users/${userId}`
const deleteUser = async () => {
  const res = await axios({ method: 'delete', url })
  console.log('res', res)
}
</script>

PUT方法会更新整个资源对象，前端没有给出的字段，会自动清空。但是使用put修改后会有一个问题，只会保留提交的字段，没有提交的字段在json中将会被删除
patch 修改数据 ：只修改请求的字段，没有请求的字段将会被保留。

<template>
  <el-button @click="reviseUser"> put 修改用户 </el-button>
</template>

<script setup>
import axios from 'axios'

const userId = 4
const url = `http://localhost:3004/users/${userId}`
const reviseUser = async () => {
  const data = {
    "name": "林更新",
    "age": "44"
  }
  const res = await axios({ method: 'put', url, data })
  console.log('res', res)
}
</script>

<template>
  <el-button @click="reviseUser"> patch修改用户 </el-button>
</template>

<script setup>
import axios from 'axios'

const userId = 8
const url = `http://localhost:3004/users/${userId}`
const reviseUser = async () => {
  const data = {
    name: "陈温柔",
    age: "22",
    sex: "0"
}
  const res = await axios({ method: 'patch', url, data })
  console.log('res', res)
}
</script>
  • 多表查询 | 关联检索
  1. 向上关联
    通过 _expand 方式检索关联父级数据，多对一关系，所以条件是单数。
    这里的 _expand=class 匹配即和 users 对象中的 classId做关联，但是已经存在classId字段则写出 class, 比如检索的是 repaId 写成 repa
  2. 通过 _embed 方式检索关联子级数据
    注意: 这里_embed 需要和子表名 (要关联的子集属性名) 匹配。一对多关系,所以匹配条件是负数。
//向上关联父级数据
//class 是一个别名
http://localhost:3004/users?_expand=class
//res:
[
    {
        "id": 1,
        "name": "liaoyi",
        "phone": "13246566776",
        "age": 22,
        "classId": "1",
        "class": {
            "id": "1",
            "title": "前端",
            "staff": [
                "7",
                "6",
                "1"
            ]
        }
    },
    {
        "name": "林更新",
        "age": "44",
        "id": 4,
        "classId": "2",
        "class": {
            "id": "2",
            "title": "后端",
            "staff": [
                "4",
                "5"
            ]
        }
    },
    {
        "name": "李响",
        "phone": "18779756778",
        "age": "26",
        "id": 5,
        "classId": "2",
        "class": {
            "id": "2",
            "title": "后端",
            "staff": [
                "4",
                "5"
            ]
        }
    },
    {
        "name": "陈温柔",
        "phone": "18779756000",
        "age": "22",
        "id": 6,
        "sex": "0",
        "classId": "1",
        "class": {
            "id": "1",
            "title": "前端",
            "staff": [
                "7",
                "6",
                "1"
            ]
        }
    },
    {
        "name": "夏琪",
        "phone": "13246579999",
        "age": "22",
        "id": 7,
        "classId": "1",
        "class": {
            "id": "1",
            "title": "前端",
            "staff": [
                "7",
                "6",
                "1"
            ]
        }
    }
]
//向下关联子级数据
http://localhost:3004/classes?_embed=users
//res:
[
  {
    "id": "1",
    "title": "前端",
    "staffIds": [
      "1001",
      "1004",
      "1005"
    ],
    "users": [
      {
        "id": "1001",
        "name": "liaoyi",
        "phone": "13246566776",
        "age": 22,
        "classId": "1"
      },
      {
        "name": "陈温柔",
        "phone": "18779756000",
        "age": "22",
        "id": "1004",
        "sex": "0",
        "classId": "1"
      },
      {
        "name": "夏琪",
        "phone": "13246579999",
        "age": "22",
        "id": "1005",
        "classId": "1"
      }
    ]
  },
  {
    "id": "2",
    "title": "后端",
    "staffIds": [
      "1002",
      "1003"
    ],
    "users": [
      {
        "name": "林更新",
        "age": "44",
        "id": "1002",
        "classId": "2"
      },
      {
        "name": "李响",
        "phone": "18779756778",
        "age": "26",
        "id": "1003",
        "classId": "2"
      }
    ]
  }
]
  • 静态部署
    新增配置文件 config.json 并写入
{
  "port": "3000",   // 设置端口号
  "watch": true,   // 是否开启监听
  "static": "./public/",  // 静态资源目录
  "read-only": false,   // 是否只读
  "no-cors": true,   // 是否支持跨域
  "no-gzip": false  // 是否开启压缩
}
//启动命令
json-server --watch data.json config.json

//或者放入package.json+npm run mock
{
  "scripts": {
    "mock": "json-server --watch data.json config.json"
  }
}

mock.js

  • Mock.js + json-server 模拟数据
  1. 创建一个文件夹名为 mock_json
  2. 进入文件夹后初始化package.json 文件
  3. 下载依赖
mkdir mock_json
cd mock_json
npm init 
npm install  json-server mockjs
  1. 添加启动脚本
{
  "name": "mock_json",
  "scripts": {
    "dev": "json-server --watch db.js --port 3000"
  },
  "dependencies": {
    "json-server": "^0.17.4",
    "mockjs": "^1.1.0"
  }
}
  1. 新建 db.js 文件
const Mock = require('mockjs')

const data = Mock.mock({
  'users|10-20': [{
    'id|+1': '1',
    'name': '@name',
    'sex|1': ['男', '女'],
    'age|18-60': 1,
    'address': '@county(true)',
    'phone': /^1[34578]\d{9}$/,
    'email': '@email',
    'birthday': '@date',
    'avatar': '@image(200x200, #50B347, #FFF, #78C3FC)',
    'desc': '@cparagraph(1, 3)'
  }],
  'products|122000': [{
    'id|+1': 1,
    'name': '@word(3,5)',
    'price': '@integer(100,999)',
    'quantity': '@integer(1,50)',
    'brief': '@cparagraph(1, 3)'
  }],
})
// 想要用 json-server 识别mockjs的模拟数据内容，需要使用 module.exports 进行模块的对外暴露，并且暴露的类型必须是函数
module.exports = () => data

/* 上面👆 products 有十二万数据，不能直接打开浏览器访问http://localhost:3000/products，浏览器会奔溃的
	  需要使用查询参分页查询
	  如: http://localhost:3000/products?_page=1&_limit=10 */
  1. 启动项目
npm run dev

注意⚠️：

  1. 想要用 json-server 识别mockjs的模拟数据内容，需要使用 module.exports 进行模块的对外暴露，并且暴露的类型必须是函数。
  2. 上面 products 我们模拟了十二万条数据，启动时会有点慢，并且不能直接使用浏览器访问http://localhost:3000/products，浏览器会奔溃的。需要使用查询参分页查询, 如：http://localhost:3000/products?_page=1&_limit=10

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布