前后端分离实践—正确开启Mockjs的姿势

代码鄙视员 2019-03-19 12:59:40 ⋅ 688 阅读

Mockjs就是:造假数据。满足临时所需。

第一部分:直接使用

如果直接看GitHub或看一些文章,直接就是ajax拦截之类的。
但我们的需求就是,造一些假数据,满足使用即可
如果基本需求都没满足,别的都没用,第二部分,来整没用的东西

1.1 提前条件

1. 安装nodejs, 【没装的,找卖药的问下】。
2. npm install mockjs

1.2 罗列基本法,尽量开箱即用

基本涵盖了常用的所有字段类型

// mock.js
const Mock = require('mockjs')
const Random = Mock.Random;
const data = Mock.mock({
    // 中文名字 | 姓 | 名
    china_name: Random.cname(),
    china_first: Random.cfirst(),
    china_last: Random.clast(),
    // 英文名 | firatname | lastname | 带中间字的
    eng_name: Random.name(),
    eng_first: Random.first(),
    eng_last: Random.last(),
    eng_last: Random.name(true),
    // 长度为4的字符串
    string: Random.string(4),
    // 数字 最小1 最大100
    age: Random.integer(1100),
    // 数字 浮点数
    num: Random.float(11014),
    // 数字 字符串
    numString: Random.character('number'),
    // 日期 YYYY-MM-DD
    date: Random.date(),
    // 时间 HH:mm:ss
    time: Random.time(),
    // 日期 时间 YYYY-MM-DD HH:mm:ss
    dateTime: Random.datetime(),
    // 当前日期
    now: Random.now(),

    // 图片
    image: Random.image('200x100''#ffcc33''#FFF''png''文字'),
    // 颜色 hex  rgb
    color: Random.color(),
    // 标题
    title: Random.ctitle(),
    cword: Random.cword(),
    // 一段文本 1段-100段
    cparagraph: Random.cparagraph(12),
    // 英文 句子
    sentence: Random.sentence(),
    // 区域
    region: Random.region(),
    // 省 city zip couty 等
    province: Random.province(),

    // ip 域名 网址
    ip: Random.ip(),
    url: Random.url(),

    // 身份证
    identify: Random.id(),
    // 全局自增ID
    id1: Random.increment(),
    id2: Random.increment(),
    id3: Random.increment(),
})

console.log(data);
china_name'韩桂英',
  china_first: '陈',
  china_last: '磊',
  eng_name: 'Thomas Johnson',
  eng_first: 'Karen',
  eng_last: 'Kenneth Donald Miller',
  string: 'm&gP',
  age: 84,
  num: 10.3,
  numString: '1',
  date: '2005-07-07',
  time: '14:45:30',
  dateTime: '1977-06-17 03:30:19',
  now: '2019-03-15 22:39:51',
  image: 'http://dummyimage.com/200x100/ffcc33/FFF.png&text=文字',
  color: '#8279f2',
  title: '南被复接装',
  cword: '还',
  cparagraph: '门油头做得飞作政什影美产术已我半。',
  sentence: 'Svowsinxy xbqtap fkh yblqteul orfenvlx iynptosx aggjg memsgtpknd xxdh futhhwbye mtnkfyolin vtht zcglztvjk iispwbshwj wnkdxfzg euetgctbn.',
  region: '西南',
  province: '贵州省',
  ip: '15.33.17.63',
  url: 'news://birulyvmr.bm/kmeqktu',
  identify: '340000197902270270',
  id1: 1,
  id2: 2,
  id3: 3 
}

1.3 结合对象、数组的使用

Random.extend({
    constellationfunction() {
        const constellations = [
            '白羊座',
            '金牛座',
            '双子座',
        ];
        return this.pick(constellations);
    },
});

const objList = Mock.mock({
    id: Random.integer(),
    titile: Random.ctitle(),
    email: Random.email(),
    // 数组随机生成 2-4
    'list|2-4': [
        {

            'id|+1'10,
            incrNum() => Random.increment(),
            title() => Random.ctitle(),
            date() => Random.date('yyyy-MM-dd'),
            enum() => Random.constellation(),
        },
    ],
});
console.log(objList);

返回值

id6615749548973956,
  titile: '约布权',
  email: 'p.hbjd@wwoprnolz.ci',
  list: 
   [ { id: 10,
       incrNum: 1,
       title: '色需列流走只',
       date: '1981-09-06',
       enum: '巨蟹座' },
     { id11,
       incrNum: 2,
       title: '型关立',
       date: '1997-11-18',
       enum: '射手座' },
     { id12,
       incrNum: 3,
       title: '半我消空单高',
       date: '1997-02-12',
       enum: '摩羯座' },
     { id13,
       incrNum: 4,
       title: '才节片化',
       date: '1993-06-30',
       enum: '白羊座' } 
    ] 
}


---------------END----------------

后续的内容同样精彩

长按关注“IT实战联盟”哦





全部评论: 0

    我有话说:

    MoguBlog(蘑菇博客)v5.3发布,前后分离博客系统

    MoguBlog简介 MoguBlog(蘑菇博客),一个基于微服务架构前后分离博客系统。前台使用Vue + Element , 后使用spring boot + spring cloud

    MoguBlog v6.0 已经发布,前后分离博客系统

    MoguBlog v6.0 已经发布,这是一个前后分离博客系统。 此版本更新内容包括: fix: 解决博客详情页重复点赞时,弹出登录框情况 docs: nacos数据库中增加prod配置

    Java Web架构实战篇:聊一聊前后分离架构

    RESTful思想和Json数据标准出现,使得这种交互日益便利。Vue.js 用于构建用户界面渐进式框架

    SpringBlade v2.8.0 已经发布,SaaS 微服务开发平台

    SpringBlade微服务开发平台 采用前后分离模式,前端开源两个框架:Sword (基于 React、Ant Design)、Saber (基于 Vue、Element

    开源资讯】WinSCP 5.17.8 发布,Windows 图形化 SFTP 客户

    WinSCP 是一个 Windows 环境下使用 SSH 开源图形化 SFTP 客户,同时支持 SCP 协议,它主要功能是在本地与

    Redisson 3.13.6 发布,官方推荐 Redis 客户

    Redisson 3.13.6 已发布,这是一个 Java 编写 Redis 客户,具备驻内存数据网格(In-Memory Data Grid)功能,并获得了 Redis 官方推荐

    欣赏一下人家写API接口,那叫一个优雅!

    作者:码不动链接:https://www.jianshu.com/p/fa75acba5b07 在移动互联网,分布式、微服务盛行今天,现在项目绝大部分都采用微服务框架,前后分离方式,(题外

    滴滴开源基于 React 移动开发组件库-Pile.js

    Pile.js 是滴滴开发基于 React 移动开发组件库。 轻量,易用,包含 52 个交互功能,支持多语言与自定义皮肤。可以非常轻松创建用户交互界面,让前端开发更专注于业务逻辑实现

    SpringBoot 整合SpringSecurity示例实现前后分离权限注解+JWT登录认证

    一.说明 SpringSecurity是一个用于Java 企业级应用程序安全框架,主要包含用户认证和用户授权两个方面.相比较Shiro而言,Security功能更加强大,它可以很容易地扩展以满足

    架构实战篇(三)-Spring Boot架构搭建RESTful API案例

    之前分享了Spring Boot 整合Swagger 让API可视化和前后分离架构 受到了大家一致好评 ,本节就接着上节代码做了详细查询代码补充和完善并搭建RESTful API架构案例。

    Pulsar Manger 0.2.0 正式发布, Apache Pulsar 管理

    Pulsar Manger 是由 StreamNative 公司开源并捐献给 Apache 基金会 Apache Pulsar 管理。它是基于 Web GUI 管理工具,支持多种环境动态

    Fes.js v0.4.1 版本发布,一套优秀中后台系统前端解决方案

    Fes.js 是一套优秀中后台前端解决方案。提供初始项目、开发调试、Mock接口、编译打包命令行工具。内置布局、权限、数据字典、状态管理、存储、Api等多个模块。以约定、配置化、组件化设计思想

    为什么前后分离了,你比从前更痛苦?

    作者:谢小呆简书地址:https://www.jianshu.com/p/941825521354

    为什么说作为程序员分库分表必要性一定要掌握?

      互联网大厂程序员必须掌握海量数据和高并发问题处理技能,期望进入大厂程序员一定要仔细看这篇! MySQL 分库分表是做什么? 相信很多程序员对 MySQL 都比较熟悉了,目前国内

    微型Java开发框架Solon 1.1发布,QPS达10万+

    简介 Solon 是一个微型Java开发框架。项目从2018年启动以来,参考过大量前人作品;历时两年,2700多次commit;内核保持0.1m身材,超高Web跑分,良好使用体验

    使用分支进行开发和部署

    原文:Developing and Deploying with Branches 分支能够使开发工作更有条理,可以将正在开发代码跟那些已完成代码、已测试代码和稳定下来代码隔离开。不但使

    Spring Boot 解决跨域问题 3 种方案!

    作者:telami telami.cn/2019/springboot-resolve-cors/ 前后分离大势所趋,跨域问题更是老生常谈,随便用标题去google

    什么情况下才需要分库分表?

    我请教一下,我模拟测试,搞了几张大表都是3千万左右数据,带主键查询秒级响应,jmeter插入能够达到每秒6、700条左右,我业务量每秒就是300条左右插入,这个场景下是否不需要考虑分库分表问题?