mock 和 json-server的基础用法

最新推荐文章于 2025-05-15 17:50:14 发布

原创最新推荐文章于 2025-05-15 17:50:14 发布 · 917 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

mock 同时被 2 个专栏收录

1 篇文章

订阅专栏

json-server

1 篇文章

订阅专栏

本文介绍了MockJS和json-server的基本用法，包括安装、语法规则和实际操作。对于MockJS，讲解了如何创建数据规则，如“name|min-max”、“name|number”。在json-server部分，阐述了安装过程、运行命令以及如何通过GET、POST等请求操作数据。文中还提供了一个结合Vue的使用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mock基础用法

详细请参考文档

http://mockjs.com/0.1/

安装

首先初始化

npm init -y 初始化项目

安装

npm install mockjs

mock 的语法规则

“name|min-max”: 值重复生成值，最少min条，最多max条
“name|number”: 值生成number条值
“name|+1”: number name的值累次+1，初识值是number
“name|1”: [] name的值是 [] 中的任意一个值
“tel”: /^1[3-9]\d{9}$/ 随机生成手机号

Mock.Random

  const Mock = require('mockjs');
  const Random = Mock.Random;
  Random.date(yyyy-MM-dd) 输出年月日
  Random.cname() 随机生成汉字名字
  Random.boolean() 随机生成布尔值

// 引入 mock 
const Mock = require('mockjs');
const Random = Mock.Random;

let data = Mock.mock({
  /* 
    属性list是一个数组 100 代表的是会生成100条数据
    id|+1 属性id 是累加一次+1，后面的值1 代表的是开始数据是1
    "name|1" 属性name的值是数组中的随机一个
  */
  "list|5-10": [
    {
      'id|+1': 1,
      "name": () => Random.cname(),
      // "sex|1": ['男','女'],
      "sex": () => Random.boolean()? '女' : '男',
      "br": () => Random.date('yyyy-MM-dd'),
      "tel": /^1[3-9]\d{9}$/
    }
  ]
})

console.log(data);

json-server基础用法

安装

初始化

npm init -y 初始化项目

安装

先安装 npm i mockjs
再安装 npm i -g json-server

运行

json-server --watch data.json(要运行的json文件)
json-server --watch --port 4000 data.json(要运行的json文件) 配置端口为4000

操作

josn-server 提供了 GET POST PUT DELETE 等请求方式，可以对数据进行操作

具体操作

说明：操作的默认服务器和端口 http://localhost:3000
获取所有的列表和信息 /list

get 方式 /list

根据id获取指定信息 /list/id值

  GET 方式 /list/66

条件查询 GET /list?age=100&sex=男
条件查询

  _get 大于等于
  _lte 小于等于
  _ne 不等于
  _like 模糊查询
  q 全局查询

  // 使用方式
   /list?age_lte=40 查询年龄是小于等于40的所有数据

   /list?q=男 全局搜索含有男的字段

分页

  _page=10 访问第10页
  _limit=5 设置一页是5条数据 如果不设置，则默认一页10条
  _start=7 设置查询开始的坐标位置
  _end=10 设置查询结束的坐标位置
  _sort 设置排序的字段，本例是根据年龄排序的
  _order=asc 设定排序的方式（升序：asc；降序：desc；默认升序）

案例


const Mock = require('mockjs');
const Random = Mock.Random;

module.exports = () => {
  let obj = Mock.mock({
    "list|102": [ // 生成102条数据
      {
        "id|+1": 1, // 生成id
        "name": ()=> Random.cname(), // 随机生成中文名字
        "sex|1": ["男","女"], // 随机生成男女
        "age|18-80": 18, // 随机生成 年龄 18-80 之间的 第一个是18
        "tel": /^1[3-9]\d{9}$/, // 随机生成手机号
        "date": () => Random.date('yyyy-MM-dd') // 随机生成出生年月日
      }
    ]
  });
  return obj;
}

结合前后端一起使用

以下是我结合Vue写的一个案例

json-server --watch data.json(要运行的json文件) 运行3000 端口要常开，不要关，默认端口是3000
接着你就可以去创建你的项目请求 http://localhost:3000/ 端口

<template>
  <div class="home">
    <button @click="getData">获取数据</button>
    <table border="1" width="1000">
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>手机号</th>
        <th>性别</th>
        <th>出生日期</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in arr" :key="item.id">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.tel }}</td>
        <td>{{ item.sex }}</td>
        <td>{{ item.date }}</td>
        <td>
          <button @click="change(item)">修改</button>
          <button @click="del(item.id)">删除</button>
        </td>
      </tr>
    </table>

    <div class="page">
      <span
        v-for="item in nums"
        :class="page == item && 'active'"
        :key="item"
        @click="pages(item)"
        >{{ item }}</span
      >
    </div>
    <hr>
    <h1>用户信息</h1>
    <div>
      <input type="text" v-model="userInfo.name" placeholder="姓名"><br>
      <input type="text" v-model="userInfo.age" placeholder="年龄"><br>
      <input type="text" v-model="userInfo.tel" placeholder="手机号"><br>
      <input type="text" v-model="userInfo.date" placeholder="出生日期"><br>
      <label for="">性别</label>
      <label for=""><input type="radio" v-model="userInfo.sex" value="男">男</label>
     <label for=""><input type="radio" v-model="userInfo.sex" value="女">女</label>
     <br>
     <button @click="submintChange">提交修改</button>
      <button @click="add">添加</button>
     
    </div>
  </div>
</template>

<script>
// 使用需要线引入 axios
import axios from "axios";

export default {
  name: "Home",
  computed: {
    nums() {
      return Math.ceil(this.total / this.limit);
    },
  },
  data() {
    return {
      arr: [],
      page: 1, // 设置当前是第几页
      limit: 20, // 设置一页多少条
      total: 0, // 设置总条数
      userInfo: {}, // 用户信息
    };
  },
  components: {},
  methods: {
    async getData() {
      let data = await axios
        .get(
          `http://localhost:3000/list?_page=${this.page}&_limit=${this.limit}`
        )
        .then((res) => {
          console.log(res);
          this.total = res.headers["x-total-count"]; // 获取数据的总条数
          return res.data;
        });
      this.arr = data;
    },
    pages(n) {
      this.page = n;
      this.getData();
    },
    // 删除
    del(id) {
      axios({
        method: "DELETE",
        url: "http://localhost:3000/list/" + id,
      }).then((res) => {
        console.log(res.data);
        this.getData();
      });
    },
    // 点击修改
    change(obj) {
      this.userInfo = obj;
    },
    // 点击提交修改
    submintChange() {
      axios({
        method: 'PUT',
        url: "http://localhost:3000/list/" + this.userInfo.id,
        data: this.userInfo
      }).then((res) => {
        console.log(res.data);
        this.getData();
        this.userInfo = {};
      })
    },
    // 点击添加
    add() {
      axios({
        method: 'POST',
        url: "http://localhost:3000/list",
        data: this.userInfo,
      }).then((res) => {
        console.log(res.data);
        this.getData();
        this.userInfo = {};
      })
      
    }
  },

  async created() {
    await this.getData();
    console.log(this.arr);
    console.log(this.total);
  },
};
</script>

<style scoped>
.page {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page span {
  height: 30px;
  width: 30px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #ccc;
  margin: 0 5px;
  cursor: pointer;
}
.page .active,
.pahe span:hover {
  background: #04be02;
  color: #ff0;
  border-color: #04be02;
}
</style>