VUE基于mockjs模拟后台数据

VUE基于mockjs模拟后台数据Demo

• 使用Mock.js
• 支持的数据类型丰富
• 项目实例
• 直接调用和效果图

使用Mock.js

众所周知Mock.js因为两个重要的特性风靡前端:

数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

拦截 Ajax 请求
不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。安全又便捷

支持的数据类型丰富

引用官网

项目实例

• 工程目录结构

• node.js

import Mock from 'mockjs';

const Nodes = [];

for (let i = 0; i < 86; i++) {
  Nodes.push(Mock.mock({
    id: Mock.Random.id(),
    code:/[a-z][A-Z][0-9]/,
    name: Mock.Random.province(),
    address: Mock.Random.ip(),
    'domain|2-3': 2,
    'version|1-10': 1,
    type: Mock.Random.integer(0, 1),
    status: Mock.Random.integer(0, 9),
    nodeConfig: Mock.Random.integer(0, 9),
    updateTime: Mock.Random.date(),
    createTime: Mock.Random.date(),
  }));
}

export { Nodes };

• user.js

import Mock from 'mockjs';
const LoginUsers = [
  {
    id: 1,
    username: 'admin',
    password: '123456',
    avatar: 'https://github.com/humingfeng',
    name: '御前提笔小书童'
  }
];

const Users = [];

for (let i = 0; i < 86; i++) {
  Users.push(Mock.mock({
    id: Mock.Random.guid(),
    name: Mock.Random.cname(),
    addr: Mock.mock('@county(true)'),
    'age|18-60': 1,
    birth: Mock.Random.date(),
    sex: Mock.Random.integer(0, 1)
  }));
}

export { LoginUsers, Users };

• mock.js

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { LoginUsers, Users } from './data/user';
import { Nodes } from './data/node';
let _Users = Users;
let _Nodes = Nodes;

/**
     * 方法实现说明
     * @method      mockjs模拟后台数据返回
     * @author      胡铭锋
     * @version     1.0
     * @exception   
     * @date        2019/4/4 16:33
     */
export default {
  /**
   * mock bootstrap
   */
  bootstrap() {
    let mock = new MockAdapter(axios);

    // mock success request
    mock.onGet('/success').reply(200, {
      msg: 'success'
    });

    // mock error request
    mock.onGet('/error').reply(500, {
      msg: 'failure'
    });

    //登录
    mock.onPost('/login').reply(config => {
      let {username, password} = JSON.parse(config.data);
      return new Promise((resolve, reject) => {
        let user = null;
        setTimeout(() => {
          let hasUser = LoginUsers.some(u => {
            if (u.username === username && u.password === password) {
              user = JSON.parse(JSON.stringify(u));
              user.password = undefined;
              return true;
            }
          });

          if (hasUser) {
            resolve([200, { code: 200, msg: '请求成功', user }]);
          } else {
            resolve([200, { code: 500, msg: '账号或密码错误' }]);
          }
        }, 1000);
      });
    });

    //获取节点列表（分页）
    mock.onPost('/node/listPage').reply(config => {

      let {curPage, pageSize,name} = JSON.parse(config.data);
      let mockNodes = _Nodes.filter(node => {
        if (name && node.name.indexOf(name) == -1) return false;
        return true;
      });
      let total = mockNodes.length;
      mockNodes = mockNodes.filter((u, index) => index < pageSize * curPage && index >= pageSize * (curPage - 1));

      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200, {
            total: total,
            nodes: mockNodes
          }]);
        }, 1000);
      });
    });

    //获取用户列表
    mock.onGet('/user/list').reply(config => {
      let {name} = config.params;
      let mockUsers = _Users.filter(user => {
        if (name && user.name.indexOf(name) == -1) return false;
        return true;
      });
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200, {
            users: mockUsers
          }]);
        }, 1000);
      });
    });

    //获取用户列表（分页）
    mock.onGet('/user/listpage').reply(config => {
      let {page, name} = config.params;
      let mockUsers = _Users.filter(user => {
        if (name && user.name.indexOf(name) == -1) return false;
        return true;
      });
      let total = mockUsers.length;
      mockUsers = mockUsers.filter((u, index) => index < 20 * page && index >= 20 * (page - 1));
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200, {
            total: total,
            users: mockUsers
          }]);
        }, 1000);
      });
    });

    //删除用户
    mock.onGet('/user/remove').reply(config => {
      let { id } = config.params;
      _Users = _Users.filter(u => u.id !== id);
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200, {
            code: 200,
            msg: '删除成功'
          }]);
        }, 500);
      });
    });

    //批量删除用户
    mock.onGet('/user/batchremove').reply(config => {
      let { ids } = config.params;
      ids = ids.split(',');
      _Users = _Users.filter(u => !ids.includes(u.id));
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200, {
            code: 200,
            msg: '删除成功'
          }]);
        }, 500);
      });
    });

    //编辑用户
    mock.onGet('/user/edit').reply(config => {
      let { id, name, addr, age, birth, sex } = config.params;
      _Users.some(u => {
        if (u.id === id) {
          u.name = name;
          u.addr = addr;
          u.age = age;
          u.birth = birth;
          u.sex = sex;
          return true;
        }
      });
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200, {
            code: 200,
            msg: '编辑成功'
          }]);
        }, 500);
      });
    });

    //新增用户
    mock.onGet('/user/add').reply(config => {
      let { name, addr, age, birth, sex } = config.params;
      _Users.push({
        name: name,
        addr: addr,
        age: age,
        birth: birth,
        sex: sex
      });
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200, {
            code: 200,
            msg: '新增成功'
          }]);
        }, 500);
      });
    });

  }
};

直接调用和效果图

package.json