精华内容
下载资源
问答
  • Mock数据

    2020-09-08 00:09:57
    Mock数据 可以通过4步进行 先进性安装 mockjs npm install mockjs 创建mock目录生成mock数据 引入:import Mock from "mockjs"; 数据模拟: //mock课程数据 var result=Mock.mock({ code: 200, msg: "操作...

    Mock数据

    可以通过4步进行
    
    1. 先进性安装 mockjs
    npm install mockjs
    
    1. 创建mock目录生成mock数据
      引入:import Mock from "mockjs";
      数据模拟:
    //mock课程数据
    var result=Mock.mock({
      code: 200,
      msg: "操作成功",
      data: {
        current_page: 1,
        last_page: 18,
        total: 178,
        "list|10": [
          {
            id: "@id",  //模拟id
            "price|100-200.1-2": 100, //模拟小数,在计算机中也称浮点数
            "has_buy|1": [0, 1], //模拟状态值,0,1,2,
            title: "@ctitle",  //模拟中文标题
            address: "@county(true)",  //模拟省市县
            "teachers_list|1": [
              {
                course_basis_id: "@id",
                id: "@id",
                teacher_avatar: "@image('150x120', '#ff0000', '1909A')",  //模拟图片
                teacher_name: "@cname"  //模拟中文姓名
              }
            ]
          }
        ]
      }
    });
    export default result;
    

    //创建入口文件,配置接口地址,提交方式,在进行返回的假数据

    import Mock from 'mockjs'
    

    //导入的模拟数据

    import courseData from "./course";
    

    /**

    • Mock.mock( rurl, rtype, template )
    • rurl:请求的地址
    • rtype:提交的方式
    • template:返回数据
      */
      Mock.mock(“http://www.1909A.com/coureslist”, “get”, courseData);
    1. 注入模拟数据到main.js
    import './mock'
    
    1. 在要请求的组件中请求数据
     axios.get('http://www.1909A.com/coureslist').then(res=>{
            console.log(res)
     })
    
    展开全文
  • mock 数据

    2020-12-26 23:01:27
    mock 数据 mock 数据的好处 团队可以并行工作 有了Mock,前后端人员只需要定义好接口文档就可以开始并行工作,互不影响,只在最后的联调阶段往来密切;后端与后端之间如果有接口耦合,也同样能被Mock解决;测试...

    mock 数据

    mock 数据的好处

    1. 团队可以并行工作 有了Mock,前后端人员只需要定义好接口文档就可以开始并行工作,互不影响,只在最后的联调阶段往来密切;后端与后端之间如果有接口耦合,也同样能被Mock解决;测试过程中如果遇到依赖接口没有准备好,同样可以借助Mock;不会出现一个团队等待另一个团队的情况。这样的话,开发自测阶段就可以及早开展,从而发现缺陷的时机也提前了,有利于整个产品质量以及进度的保证。

    2. 开启TDD模式,即测试驱动开发 单元测试是TDD实现的基石,而TDD经常会碰到协同模块尚未开发完成的情况,但是有了mock,这些一切都不是问题。当接口定义好后,测试人员就可以创建一个Mock,把接口添加到自动化测试环境,提前创建测试。

    3. 可以模拟那些无法访问的资源 比如说,你需要调用一个“墙”外的资源来方便自己调试,就可以自己Mock一个。

    4. 隔离系统 假如我们需要调用一个post请求,为了获得某个响应,来看当前系统是否能正确处理返回的“响应”,但是这个post请求会造成数据库中数据的污染,那么就可以充分利用Mock,构造一个虚拟的post请求,我们给他指定返回就好了

    5. 可以用来演示 假如我们需要创建一个演示程序,并且做了简单的UI,那么在完全没有开发后端服务的情况下,也可以进行演示。说到演示了,假如你已经做好了一个系统,并且需要给客户进行演示,但是里面有些真实数据并不想让用户看到,那么同样,你可以用Mock接口把这些敏感信息接口全部替换。

    6. 测试覆盖度 假如有一个接口,有100个不同类型的返回,我们需要测试它在不同返回下,系统是否能够正常响应,但是有些返回在正常情况下基本不会发生,难道你要千方百计地给系统做各种手脚让他返回以便测试吗?比如,我们需要测试在当接口发生500错误的时候,app是否崩溃,别告诉我你一定要给服务端代码做些手脚让他返回500 。。。而使用mock,这一切就都好办了,想要什么返回就模拟什么返回,妈妈再也不用担心我的测试覆盖度了

     

    作者:初入前端的小菜鸟 链接:https://www.jianshu.com/p/63056120fab8 来源:简书 这上面总结的挺全面的 ,我就不在累赘的叙述了 .

    如何mock数据

    Moco是一个可以轻松搭建测试服务器的框架/工具/程序库。

    缘由

    集成,尤其是基于HTTP协议的集成——web service,REST等,在我们的项目开发中被广泛应用。

    以前,我们每次都要往Jetty或Tomcat等应用服务器上部署一个新的WAR。大家都知道,开发部署一个WAR的过程是很枯燥的,即使在嵌入式服务器上也是如此。而且,每次我们做一点改动,整个WAR都要重新组装。

    **使用场景

    • 我是一个企业级软件开发人员,每次面对集成就是我头疼开始的时候,漫长集成拉锯战拖延了我们的进度。幸好有了Moco,几行配置就可以模拟一个服务,我再也不需要看集成服务团队的脸色了。

    • 我是一个移动开发人员,老板催得紧,可服务器端开发进度慢,我空有一个漂亮的iphone应用,发挥不出作用。幸好有了Moco,很快就可以搭建出一个模拟服务,我再也不用把生命浪费在无效的等待上了。

    • 我是一个前端开发人员,做Inception的时候,客户总想看到一个完整的应用演示,可哪有时间开发后端服务啊!幸好有了Moco,几下就可以弄出一个模拟服务,我做的页面一下就有了生命力。

      使用Moco

      Moco目前支持多种使用方式,最基本的方式是两种:API和独立运行。

      如果你编写的是个Java应用(或是以其它JVM上的语言编写的应用),你可以采用直接调用API;我们也可以独立运行的方式,在配置文件中,配置一个属于自己的服务器。

      如果你是Mac或是Linux用户,你还可以选择Shell的方式运行。事实上,它是最简单的方式,它会自动帮助你找到最新版本的Moco。

      如果你在用Maven,那么Moco的Maven插件你一定会喜欢。作为一个新时代的自动化用户,Gradle插件也是不可或缺的。

     

    下载moco 

    在github上可以下载到moco文件  ,moco是java编写的 

    设置mock请求和返回的mock文件  ----json文件

    运行 

    启动起来   端口是12306 

    java -jar .\moco-runner-1.1.0-standalone.jar http -p 12306 -c .\foo.json   

     

    测试 是否能够mock数据  ,使用postman进行验证 

     

     

    展开全文
  • mock数据

    2018-12-01 08:44:45
    本文主要是记录如何mock数据操作,防止我这条金鱼过几天又忘了如何操作。不涉及原理(当然写原理目前的我也写不出来,哈哈哈),只是写了操作步骤。如果有误欢迎大佬指出 一、使用GitHubpage mock数据 demo:...

    本文主要是记录如何mock数据操作,防止我这条金鱼过几天又忘了如何操作。不涉及原理(当然写原理目前的我也写不出来,哈哈哈),只是写了操作步骤。如果有误欢迎大佬指出

    一、使用GitHubpage mock数据

    demo:https://github.com/0612bamboo...

    1. 在github写一个简单的ajax请求

    clipboard.png

    1. 在html的同文件夹下写一个json文件,里面放mock的数据

    clipboard.png

    1. ajax的url地址指向该json文件,记得这里是坑,要带上仓库名/mock/home.html
    2. 设置githubpage,通过浏览器查看mock的数据

    clipboard.png

    二、通过本地开静态服务器来mock数据

    在本地同时写html,json文件,ajax的url地址指向该json文件。
    打开gitbash,通过http-server打开静态服务器,通过浏览器用返回的本机ip打开html,查看mock的数据

    三、通过easy mock网址mock数据

    1、打开网址,登陆

    clipboard.png
    2、点击右下角的+号创建项目,输入项目名,有时在url后加一个后缀。我写的是项目名game,url:music

    clipboard.png
    3、项目创建好,点击game创建接口

    clipboard.png

    4、进入创建接口页面,点击创建接口

    clipboard.png
    5、完善接口信息,左边写入mock的数据,点击完成
    clipboard.png
    6、点击复制接口链接
    clipboard.png
    最后两种方法验证
    通过easymock 创建项目,创建接口,完善接口对应的数据,并生成url。https://easy-mock.com/mock/5c...
    (1)gitbashmock数据
    打开gitbash,输入curl url对应的地址。

    clipboard.png

    (2)浏览器验证
    通过写html文件,把url更换为生成的url,通过浏览器查看
    demo:https://github.com/0612bamboo...

    clipboard.png
    我这里偷懒用githubpage查看的,都差不多
    clipboard.png

    展开全文
  • 前端Mock数据

    2021-03-01 23:18:43
    前端Mock数据 一、时常面临的尴尬 ​ 前端开发依赖于后端接口数据,但是后台人员不足或者无法立即到位,前端迟迟不能开工,或者前端小哥哥、小姐姐自己参照ui设计图,完成对应的静态页面(没有数据交互),待后台...

    前端Mock数据

    一、时常面临的尴尬

    ​ 前端开发依赖于后端接口数据,但是后台人员不足或者无法立即到位,前端迟迟不能开工,或者前端小哥哥、小姐姐自己参照ui设计图,完成对应的静态页面(没有数据交互),待后台人员到位,再进行二次开发,协助完成接口对接。

    二、mock数据

    1、什么是mock数据?

    前后端同时开发的时候,后端接口数据没有出来,前端可以mock假数据,模拟开发;

    2、mock数据的优势
    A 团队可以并行工作

    有了Mock,前后端人员只需要定义好接口文档就可以开始并行工作,互不影响,只在最后的联调阶段往来密切;后端与后端之间如果有接口耦合,也同样能被Mock解决;测试过程中如果遇到依赖接口没有准备好,同样可以借助Mock;不会出现一个团队等待另一个团队的情况。这样的话,开发自测阶段就可以及早开展,从而发现缺陷的时机也提前了,有利于整个产品质量以及进度的保证。

    B 开启TDD模式,即测试驱动开发

    单元测试是TDD实现的基石,而TDD经常会碰到协同模块尚未开发完成的情况,但是有了mock,这些一切都不是问题。当接口定义好后,测试人员就可以创建一个Mock,把接口添加到自动化测试环境,提前创建测试。
    可以模拟那些无法访问的资源
    比如说,你需要调用一个“墙”外的资源来方便自己调试,就可以自己Mock一个。

    C 隔离系统

    假如我们需要调用一个post请求,为了获得某个响应,来看当前系统是否能正确处理返回的“响应”,但是这个post请求会造成数据库中数据的污染,那么就可以充分利用Mock,构造一个虚拟的post请求,我们给他指定返回就好了

    D 可以用来演示

    假如我们需要创建一个演示程序,并且做了简单的UI,那么在完全没有开发后端服务的情况下,也可以进行演示。说到演示了,假如你已经做好了一个系统,并且需要给客户进行演示,但是里面有些真实数据并不想让用户看到,那么同样,你可以用Mock接口把这些敏感信息接口全部替换。

    E 测试覆盖度

    假如有一个接口,有100个不同类型的返回,我们需要测试它在不同返回下,系统是否能够正常响应,但是有些返回在正常情况下基本不会发生,难道你要千方百计地给系统做各种手脚让他返回以便测试吗?比如,我们需要测试在当接口发生500错误的时候,app是否崩溃,别告诉我你一定要给服务端代码做些手脚让他返回500 。。。而使用mock,这一切就都好办了,想要什么返回就模拟什么返回,妈妈再也不用担心我的测试覆盖度了

    3、最理想的模式

    - 前后端在需求分解之后,一起定义好接口api,包含:请求url(项目前缀+具体的接口名称)、请求方式、请求参数、数据响应;

    - 前端研发人员根据接口约定,模拟请求返回对应的数据,完成对应的交互;

    - 后台人员根据接口约定,完成对应的api,并完成对应的自测;

    - 待后台人员交付接口api后,前端人员直接修改接口项目前缀,切换到对应的环境,即可进入项目提测。

    三、mock数据的基础语法

    Mock.js

    不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据

    1、语法规范:

    A:数据模板定义规范:(Data Template Definition,简称DTD)

    数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值

    // 属性名   name
    // 生成规则 rule
    // 属性值   value
    'name|rule': value
    

    注意:

    • 属性名生成规则 之间用竖线 | 分隔。

    • 生成规则 是可选的。

    • 生成规则

      有 7 种格式:

      1. 'name|min-max': value //随机取min-max之间的值
      2. 'name|count': value
      3. 'name|min-max.dmin-dmax': value //随机取值,有小数点
      4. 'name|min-max.dcount': value //随机取出,有确定几位小数点
      5. 'name|count.dmin-dmax': value
      6. 'name|count.dcount': value
      7. 'name|+step': value //自增的值
    • 生成规则 的 含义 需要依赖 属性值的类型 才能确定。

    • 属性值 中可以含有 @占位符

    • 属性值 还指定了最终值的初始值和类型。

    生成规则和示例:

    1. 属性值是字符串 String
    1. 'name|min-max': string

      通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max

    2. 'name|count': string

      通过重复 string 生成一个字符串,重复次数等于 count

    2. 属性值是数字 Number
    1. 'name|+1': number

      属性值自动加 1,初始值为 number

    2. 'name|min-max': number

      生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型。

    3. 'name|min-max.dmin-dmax': number

      生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmindmax 位。

    Mock.mock({
        'number1|1-100.1-10': 1,
        'number2|123.1-10': 1,
        'number3|123.3': 1,
        'number4|123.10': 1.123
    })
    // =>
    {
        "number1": 91.9158375,
        "number2": 123.315478278,
        "number3": 123.745,
        "number4": 123.1232246324
    }
    
    3. 属性值是布尔型 Boolean
    1. 'name|1': boolean

      随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。

    2. 'name|min-max': value

      随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)

    4. 属性值是对象 Object
    1. 'name|count': object

      从属性值 object 中随机选取 count 个属性。

    2. 'name|min-max': object

      从属性值 object 中随机选取 minmax 个属性。

    5. 属性值是数组 Array
    1. 'name|1': array

      从属性值 array 中随机选取 1 个元素,作为最终值。

    2. 'name|+1': array

      从属性值 array 中顺序选取 1 个元素,作为最终值。

    3. 'name|min-max': array

      通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max

    4. 'name|count': array

      通过重复属性值 array 生成一个新数组,重复次数为 count

    6. 属性值是函数 Function
    1. 'name': function

      执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 'name' 所在的对象。

    7. 属性值是正则表达式 RegExp
    1. 'name': regexp

      根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

    Mock.mock({
        'regexp1': /[a-z][A-Z][0-9]/,
        'regexp2': /\w\W\s\S\d\D/,
        'regexp3': /\d{5,10}/
    })
    // =>
    {
        "regexp1": "pJ7",
        "regexp2": "F)\fp1G",
        "regexp3": "561659409"
    }
    
    B:数据占位符定义规范(Data Placeholder Definition,简称DPD)

    占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。

    占位符 的格式为:

    @占位符
    @占位符(参数 [, 参数])
    

    注意:

    1. @ 来标识其后的字符串是 占位符
    2. 占位符 引用的是 Mock.Random 中的方法。
    3. 通过 Mock.Random.extend() 来扩展自定义占位符。
    4. 占位符 也可以引用 数据模板 中的属性。
    5. 占位符 会优先引用 数据模板 中的属性。
    6. 占位符 支持 相对路径绝对路径
    Mock.mock({
        name: {
            first: '@FIRST',
            middle: '@FIRST',
            last: '@LAST',
            full: '@first @middle @last'
        }
    })
    // =>
    {
        "name": {
            "first": "Betty",
            "middle": "Nancy",
            "last": "Lewis",
            "full": "Betty Nancy Lewis"
        }
    }
    

    2、Mock.mock( )

    根据数据模板生成模拟数据。

    Mock.mock( template )

    根据数据模板生成模拟数据。

    Mock.mock( url, template )

    记录数据模板。当拦截到匹配 url 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。

    Mock.mock( url, function( options ) )

    记录用于生成响应数据的函数。当拦截到匹配 url 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。

    Mock.mock( url, type, template )

    记录数据模板。当拦截到匹配 urltype 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。

    Mock.mock( url, type, function( options ) )

    记录用于生成响应数据的函数。当拦截到匹配 urltype 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。

    url

    可选。

    表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/'/domian/list.json'

    type

    可选。

    表示需要拦截的 Ajax 请求类型。例如 GETPOSTPUTDELETE 等。

    template

    可选。

    表示数据模板,可以是对象或字符串。例如 { 'data|1-10':[{}] }'@EMAIL'

    function(options)

    可选。

    表示用于生成响应数据的函数。

    options

    指向本次请求的 Ajax 选项集,含有 urltypebody 三个属性,参见 XMLHttpRequest 规范

    从 1.0 开始,Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求,不再依赖于第三方 Ajax 工具库(例如 jQuery、Zepto 等)。

    3、Mock.setup( settings )

    配置拦截 Ajax 请求时的行为。支持的配置项有:timeout

    settings

    必选。

    配置项集合。

    timeout

    可选。

    指定被拦截的 Ajax 请求的响应时间,单位是毫秒。值可以是正整数,例如 400,表示 400 毫秒 后才会返回响应内容;也可以是横杠 '-' 风格的字符串,例如 '200-600',表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'

    Mock.setup({
        timeout: 400
    })
    Mock.setup({
        timeout: '200-600'
    })
    

    目前,接口 Mock.setup( settings ) 仅用于配置 Ajax 请求,将来可能用于配置 Mock 的其他行为。

    4、Mock.Random

    一个工具类,用于生成各种随机数据。

    Mock.Random 的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数]) 。

    var Random = Mock.Random
    Random.email()  // => "n.clark@miller.io"
    
    Mock.mock('@email')  // => "y.lee@lewis.org"
    
    Mock.mock( { email: '@email' } )  // => { email: "v.lewis@hall.gov" }
    

    注意

    方法

    Mock.Random 提供的完整方法(占位符)如下:

    TypeMethod
    Basicboolean, natural, integer, float, character, string, range, date, time, datetime, now
    Imageimage, dataImage
    Colorcolor
    Textparagraph, sentence, word, title, cparagraph, csentence, cword, ctitle
    Namefirst, last, name, cfirst, clast, cname
    Weburl, domain, email, ip, tld
    Addressarea, region
    Helpercapitalize, upper, lower, pick, shuffle
    Miscellaneousguid, id
    // Basic
    // 1、boolean
    Random.boolean()
    Mock.mock('@boolean')
    Mock.mock('@boolean()')
    
    Random.boolean(1, 9, true) // 结果为true的概率为 min/(min + max)
    Mock.mock('@boolean(1, 9, true)')
    
    // 2、natural
    Random.natural() //默认返回一个大于等于0的正整数
    Random.natural( min ) //指示随机自然数的最小值。默认值为 0。
    Random.natural( min, max ) //指示随机自然数的最小值、最大值。
    
    // 3、integer
    Random.integer() // 返回一个随机的整数。
    Random.integer( min ) // 指示随机整数的最小值。
    Random.integer( min, max ) // 指示随机整数的最小值、最大值。
    
    // 4、float
    // min:整数部分的最小值  max:整数部分的最大值
    // dmin:小数部分位数的最小值,默认值为 0  dmax:小数部分位数的最大值,默认值为 17
    Random.float() // 返回一个随机的浮点数
    Random.float( min ) // 
    Random.float( min, max )
    Random.float( min, max, dmin )
    Random.float( min, max, dmin, dmax )
    
    // 5、Random.character( pool )
    Random.character() // 没填字符池时,返回一个随机字符
    Random.character( 'lower/upper/number/symbol' ) // 多个字符池时用“/”分隔
    
    pool 字符串。表示字符池,填写时将从中选择一个字符返回。
    {
        lower: "abcdefghijklmnopqrstuvwxyz",
        upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
        number: "0123456789",
        symbol: "!@#$%^&*()[]"
    }
    
    // 6、Random.string( pool, min, max ) pool表示字符池,同上
    // min:随机字符串的最小长度  max:随机字符串的最大长度
    Random.string()
    Random.string( length )
    Random.string( pool, length )
    Random.string( min, max )
    Random.string( pool, min, max )
    
    // 7、Random.range( start, stop, step )  返回一个整型数组。
    //start:数组中整数的起始值(包含) stop:数组中整数的结束值(不包含) step:数组中整数之间的步长。默认为1。
    Random.range(1, 10, 3) // [1,4,7]
    
    //8、date
    Random.date( format )  //format 需要的时间格式
    Mock.mock('@date("yyyy-MM-dd")')  // "2006-10-18"
    Mock.mock('@date("yyyy yy y MM M dd d")') // "2010 10 10 11 11 28 28"
    
    // 9、time
    Random.time()  // "02:57:26"
    Random.time('A HH:mm:ss') //"AM 07:08:25"
    Random.time('a HH:mm:ss') //"am 00:30:14"
    Random.time('HH:mm:ss') //"06:20:13"
    Random.time('H:m:s') //"5:53:17"
    
    // 10、datetime
    Random.datetime('yyyy-MM-dd A HH:mm:ss') // "2010-02-01 PM 19:52:01"
    Random.datetime('yy-MM-dd a HH:mm:ss') //"98-11-02 am 09:39:25"
    Random.datetime('y-MM-dd HH:mm:ss') //"07-02-01 00:50:23"
    Random.datetime('y-M-d H:m:s') //"03-1-1 4:55:48"
    
    // 11、now
    Random.now( unit, format )
    Random.now() // "2020-02-10 22:31:42"
    Random.now('year') // "2020-01-01 00:00:00"
    Random.now('month') // "2020-02-01 00:00:00"
    Random.now('week') // "2020-02-09 00:00:00"
    Random.now('day') // "2020-02-10 00:00:00"
    Random.now('hour') // "2020-02-10 22:00:00"
    Random.now('minute')  //"2020-02-10 22:31:00"
    Random.now('second') //"2020-02-10 22:31:42"
    
    Random.now('yyyy-MM-dd HH:mm:ss SS') // "2020-02-10 22:31:42 757"
    Random.now('day', 'yyyy-MM-dd HH:mm:ss SS') // "2020-02-10 22:38:14 000"
    
    // Image图片
    //1、Random.image( size?, background?, foreground?, format?, text? )生成一个随机的图片地址。
    size
    可选。
    指示图片的宽高,格式为 '宽x高'。默认从下面的数组中随机读取一个:
    
    [
        '300x250', '250x250', '240x400', '336x280', 
        '180x150', '720x300', '468x60', '234x60', 
        '88x31', '120x90', '120x60', '120x240', 
        '125x125', '728x90', '160x600', '120x600', 
        '300x600'
    ]
    background
    可选。
    指示图片的背景色。默认值为 '#000000'。
    
    foreground
    可选。
    指示图片的前景色(文字)。默认值为 '#FFFFFF'。
    
    format
    可选。
    指示图片的格式。默认值为 'png',可选值包括:'png''gif''jpg'。
    
    text
    可选。
    指示图片上的文字。默认值为参数 size。
    Random.image('200x100', '#02adea', 'Hello')
    // => "http://dummyimage.com/200x100/02adea&text=Hello"
    
    //2、Random.dataImage( size?, text? )
    // 生成一段随机的 Base64 图片编码。
    
    // color
    Random.color()  // => "#3538B2"
    Random.hex()  // => "#3538B2"
    Random.rgb()  //=>"rgb(242, 198, 121)"
    Random.rgba() // => "rgba(242, 198, 121, 0.13)"
    Random.hsl()  // => "hsl(345, 82, 71)"
    
    // text
    Random.paragraph( min?, max? )  // 随机生成一段文本
    Random.cparagraph( min?, max? )  // 随机生成一段中文文本
    Random.sentence( min?, max? )  //随机生成一个句子,第一个单词的首字母大写。
    Random.csentence( min?, max? )  //随机生成一段中文文本
    Random.word( min?, max? )  //随机生成一个单词。
    Random.cword( pool?, min?, max? )  //随机生成一个汉字。
    Random.title( min?, max? )  // 随机生成一句标题,其中每个单词的首字母大写。
    Random.ctitle( min?, max? )  // 随机生成一句中文标题。
    
    // name
    Random.first() //随机生成一个常见的英文名。
    Random.last() //随机生成一个常见的英文姓。
    Random.name( middle? )  //随机生成一个常见的英文姓名。middle可选,布尔值,指示是否生成中间名。
    Random.cfirst() //随机生成一个常见的中文姓。
    Random.clast() // 随机生成一个常见的中文名。
    Random.cname()  // 随机生成一个常见的中文姓名。
    
    // web
    Random.url( protocol?, host? )  
    // 随机生成一个 URL。protocol:指定 URL 协议。例如 http。host指定 URL 域名和端口号。如nuysoft.com。
    Random.protocol() 
    // 随机生成一个 URL 协议。返回以下值之一:'http'、'ftp'、'gopher'、'mailto'、'mid'、'cid'、'news'、'nntp'、'prospero'、'telnet'、'rlogin'、'tn3270'、'wais'。
    Random.domain() // 随机生成一个域名。
    Random.tld() // 随机生成一个顶级域名(Top Level Domain)。
    Random.email( domain? ) //随机生成一个邮件地址。
    Random.ip() // 随机生成一个 IP 地址。
    
    // address
    Random.region()  // 随机生成一个(中国)大区。
    Random.province() // 随机生成一个(中国)省(或直辖市、自治区、特别行政区)。
    Random.city( prefix? )
    /*
    Random.city()
    Random.city( prefix )
    随机生成一个(中国)市。
    prefix
    可选。
    布尔值。指示是否生成所属的省。
    Random.city()
    // => "唐山市"
    Random.city(true)
    // => "福建省 漳州市"
    */
                
    Random.county( prefix? )
    /*
    Random.county()
    Random.county( prefix )
    随机生成一个(中国)县。
    prefix
    可选。
    布尔值。指示是否生成所属的省、市。
    Random.county()
    // => "上杭县"
    Random.county(true)
    // => "甘肃省 白银市 会宁县"
    */
                
    Random.zip()
    //随机生成一个邮政编码(六位数字)。
    Random.zip()
    // => "908812"
    
    // helper
    Random.capitalize( word )  // 把字符串的第一个字母转换为大写。
    Random.upper( str ) // 把字符串转换为大写。
    Random.lower( str ) //把字符串转换为小写。
    Random.pick( arr ) // 从数组中随机选取一个元素,并返回。
    Random.shuffle( arr ) // 打乱数组中元素的顺序,并返回。
    
    // Miscellaneous 混杂的
    Random.guid()  // 随机生成一个 GUID。
    Random.id()  // 随机生成一个 18 位身份证。
    Random.increment( step? ) // 生成一个全局的自增整数。
    

    扩展

    Mock.Random 中的方法与数据模板的 @占位符 一一对应,在需要时还可以为 Mock.Random 扩展方法,然后在数据模板中通过 @扩展方法 引用。例如:

    Random.extend({
        constellation: function(date) {
            var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
            return this.pick(constellations)
        }
    })
    Random.constellation()
    // => "水瓶座"
    Mock.mock('@CONSTELLATION')
    // => "天蝎座"
    Mock.mock({
        constellation: '@CONSTELLATION'
    })
    // => { constellation: "射手座" }
    

    5、Mock.valid( template, data)

    校验真实数据 data 是否与数据模板 template 匹配。

    template

    必选。

    表示数据模板,可以是对象或字符串。例如 { 'list|1-10':[{}] }'@EMAIL'

    data

    必选。

    表示真实数据。

    var template = {
        name: 'value1'
    }
    var data = {
        name: 'value2'
    }
    Mock.valid(template, data)
    // =>
    [
        {
            "path": [
                "data",
                "name"
            ],
            "type": "value",
            "actual": "value2",
            "expected": "value1",
            "action": "equal to",
            "message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2"
        }
    ]
    

    6、Mock.toJSONSchema( template )

    把 Mock.js 风格的数据模板 template 转换成 JSON Schema

    template

    必选。

    表示数据模板,可以是对象或字符串。例如 { 'list|1-10':[{}] }'@EMAIL'

    var template = {
        'key|1-10': '★'
    }
    Mock.toJSONSchema(template)
    // =>
    {
        "name": undefined,
        "path": [
            "ROOT"
        ],
        "type": "object",
        "template": {
            "key|1-10": "★"
        },
        "rule": {},
        "properties": [{
            "name": "key",
            "path": [
                "ROOT",
                "key"
            ],
            "type": "string",
            "template": "★",
            "rule": {
                "parameters": ["key|1-10", "key", null, "1-10", null],
                "range": ["1-10", "1", "10"],
                "min": 1,
                "max": 10,
                "count": 3,
                "decimal": undefined,
                "dmin": undefined,
                "dmax": undefined,
                "dcount": undefined
            }
        }]
    }
    var template = {
        'list|1-10': [{}]
    }
    Mock.toJSONSchema(template)
    // =>
    {
        "name": undefined,
        "path": ["ROOT"],
        "type": "object",
        "template": {
            "list|1-10": [{}]
        },
        "rule": {},
        "properties": [{
            "name": "list",
            "path": ["ROOT", "list"],
            "type": "array",
            "template": [{}],
            "rule": {
                "parameters": ["list|1-10", "list", null, "1-10", null],
                "range": ["1-10", "1", "10"],
                "min": 1,
                "max": 10,
                "count": 6,
                "decimal": undefined,
                "dmin": undefined,
                "dmax": undefined,
                "dcount": undefined
            },
            "items": [{
                "name": 0,
                "path": ["data", "list", 0],
                "type": "object",
                "template": {},
                "rule": {},
                "properties": []
            }]
        }]
    }
    

    四、在项目中使用mock.js

    // category.vue文件
    <template>
        <div>
            <div class="add">
                <input type="number" v-model="obj.id">
                <input type="text" v-model="obj.name">
                <input type="text" v-model="obj.content">
                <button @click="addList">添加</button>
                <button @click="updateList">修改</button>
            </div>
            <br>
            <br>
            <ul>
                <li v-for="(item,index) in list" :key="index" >
                    <span>{{item.id}}:{{item.name}}:{{item.content}}</span>
                    <span>------</span>
                    <button @click="deleteList(item.id)">删除</button>
                </li>
            </ul>
        </div>
    </template>
    
    <script>
    import axios from 'axios'
    export default {
        data() {
            return {
                list: [],
                obj: {
                    //将添加的数据存到obj对象中
                    id: 0,
                    name: "",
                    content: ""
                }
            };
        },
        mounted() {
            // 获取id、名字、内容的列表
            this.getData();
        },
        methods: {
            // 查询列表数据
            getData() {
                axios.get("/list").then(res => {
                    // console.log(res);
                    this.list = res.data.data;
                });
            },
    
            // 删除列表数据
            deleteList(id) {
                axios
                    .post("/list", {
                        params: {
                            id: id
                        }
                    })
                    .then(res => {
                        this.list = res.data.data;
                    });
            },
    
            // 增加列表数据
            addList() {
                // console.log("****"+this.obj);
                axios
                    .post("/listAdd", {
                        params: {
                            obj: this.obj
                        }
                    })
                    .then(res => {
                        // console.log("请求成功"+res.data.data);
                        this.list = res.data.data;
                    });
            },
    
            // 修改列表数据
            updateList() {
                var that = this;
                // console.log(this.obj)
                axios
                    .post("/listUpdate", {
                        params: {
                            obj: this.obj
                        }
                    })
                    .then(function (res) {
                        // console.log("请求的数据"+res.data.data);
                        that.list = res.data.data;
                    });
            }
        }
    }
    </script>
    
    <style lang="less" scoped >
      * {
            padding: 0;
            margin: 0;
        }
    
        li {
            list-style: none;
            padding: 10px;
            border: 1px solid rgba(0, 0, 0, 0.2);
        }
    </style>
    
    // category.js文件
    import Mock from 'mockjs'
    // 模拟数据列表
    var arr = [];
    for (let i = 0; i < 10; i++) {
        let newArticleObject = Mock.mock({
            name: '@cname',
            content: '@title(1, 3)',
            id: i
        })
        arr.push(newArticleObject); //将模拟的数据放到数组中
    }
    
    // 数据的 获取 和 删除 操作
    let list = function (options) {
        let rtype = options.type.toLowerCase(); //获取请求的类型并转换为小写
        console.log('请求类型===>',rtype);
        switch (rtype) {
            case 'get':
                break;
            case 'post':
                let id = parseInt(JSON.parse(options.body).params.id); // 获取请求的id,将options.body转换为JSON对象
                arr = arr.filter(function (val) {
                    return val.id != id; // 过滤掉前台传过来的id对应的相应数据,并重新返回
                });
                break;
            default:
                break;
        }
        return {
            data: arr
        }
    }
    Mock.mock('/list', /get|post/i, list);
    
    // 数据的添加操作
    let listAdd = function (options) {
        //  console.log("传过来的数据===>",JSON.parse(options.body).params.obj);
        let obj = JSON.parse(options.body).params.obj;
        // console.log("数据获取"+ obj);
        arr = arr.concat(obj); // 将前台返回来的数据,拼接到数组中。
        return {
            data: arr
        }
    }
    Mock.mock('/listAdd', 'post', listAdd);
    
    // 数据的修改操作
    let listUpdate = function (options) {
        let obj = JSON.parse(options.body).params.obj;
        // console.log(JSON.parse(options.body).params);
        // let id = parseInt(JSON.parse(options.body).params.obj.id);
        arr = arr.map(val => { // 将需要替换的数据替换掉
            // console.log(val)
            return val.id == obj.id ? obj : val;
        });
        return {
            data: arr
        }
    }
    Mock.mock('/listUpdate', 'post', listUpdate);
    
    // main.js文件,引入category.js文件
    import Vue from 'vue'
    import App from './App.vue'
    import store from './store/index'
    import router from './router/index'
    import axios from 'axios'
    
    if (process.env.NODE_ENV === 'development') {
      require('./category.js') 
    }
    
    axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded'
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App),
    }).$mount('#app')
    

    效果图:
    效果图

    上面这种要在main.js中引入每一个mock数据的相关js文件,如:

    if (process.env.NODE_ENV === ‘development’) {
    require(’./category.js’)
    }

    但一般我们习惯统一管理所有相关的mock数据的js文件,所以这里还可以建一个Mock文件夹,里面可以创建一个入口主文件index.js,然后将所有其它mock数据文件都引入这里来注册:

    如:

    // category.js
    import Mock from 'mockjs'
    // 模拟数据列表
    var arr = [];
    for (let i = 0; i < 10; i++) {
       let newArticleObject = Mock.mock({
           name: '@cname',
           content: '@title(1, 3)',
           id: i
       })
       arr.push(newArticleObject); //将模拟的数据放到数组中
    }
    
    // 数据的 获取 和 删除 操作
    let list = function (options) {
       console.log(options)
       // data body: "{"data":{"id":1}}"
       // params body: "{"params":{"id":1}}"
       let rtype = options.type.toLowerCase(); //获取请求的类型并转换为小写
       switch (rtype) {
           case 'get':
               break;
           case 'post':
               let id = parseInt(JSON.parse(options.body).params.id); // 获取请求的id,将options.body转换为JSON对象
               arr = arr.filter(function (val) {
                   return val.id != id; // 过滤掉前台传过来的id对应的相应数据,并重新返回
               });
               break;
           default:
               break;
       }
       return {
           data: arr
       }
    }
    
    // 数据的添加操作
    let listAdd = function (options) {
       //  console.log("传过来的数据===>",JSON.parse(options.body).params.obj);
       let obj = JSON.parse(options.body).params.obj;
       arr = arr.concat(obj); // 将前台返回来的数据,拼接到数组中。
       return {
           data: arr
       }
    }
    
    // 数据的修改操作
    let listUpdate = function (options) {
       let obj = JSON.parse(options.body).params.obj;
       let id = parseInt(JSON.parse(options.body).params.obj.id);
       arr = arr.map(val => { // 将需要替换的数据替换掉
           return val.id == obj.id ? obj : val;
       });
       return {
           data: arr
       }
    }
    // 这里导出定好的请求方式、接口、返回数据
    export default {
       'get|/list': list,
       'post|/list': list,
       'post|/listAdd': listAdd,
       'post|/listUpdate': listUpdate
    }
    
    // index.js
    // 首先引入Mock
    // const Mock = require('mockjs');
    import Mock from 'mockjs'
    
    // 设置拦截ajax请求的相应时间
    Mock.setup({
     timeout: '200-600'
    });
    
    let configArray = [];
    
    // 使用webpack的require.context()遍历所有mock文件
    const files = require.context('./', true, /\.js$/);
    files.keys().forEach((key) => {
     if (key === './index.js') return;
     configArray = configArray.concat(files(key).default);
    });
    // 注册所有的mock服务
    configArray.forEach((item) => {
     for (let [path, target] of Object.entries(item)) {
       let protocol = path.split('|');
       Mock.mock(protocol[1], protocol[0], target);
     }
    });
    
    // main.js  在项目入口文件里面只需引入mock文件的入口文件即可
    if (process.env.NODE_ENV === 'development') {
     require('./Mock/index.js')
    }
    
    展开全文
  • vue mock数据

    千次阅读 2019-11-29 19:55:37
    mock数据(模拟后台数据)
  • 本文介绍了vue 运用mock数据的示例代码,分享给大家,具体如下: 初始化你的项目 话不用啰嗦,首先初始化你的项目,最简单的就是使用vue-cli啦 vue init webpack 引入mock.js 安装 mockjs npm install --save...
  • 什么是MOCK数据

    2021-03-23 10:47:22
    什么是MOCK数据?什么是mock数据?什么是mock开发?模拟真实接口虚拟业务场景mock特点mock数据工具 什么是mock数据mock数据其实就是模拟真实接口,虚拟业务场景,有助于前后台同时开发的虚拟、虚假数据。 什么是...
  • Mock数据:模拟数据

    2020-09-07 23:40:10
    MOCK具体使用方法 ... ...第二步 创建一个mock目录生成mock数据 第三步:将模拟的数据注入到main.js // 注入mock import ‘./mock’ 第四步:在要请求的组件中请求数据 axios.get(‘http:/
  • 使用Charles mock数据

    2020-12-22 18:34:04
    使用Charles mock数据 背景 在测试过程中,会遇到app场景涉及各个业务造数据的问题。有些可避免走完整流程即可造数据。如广告弹窗、课程提醒弹框。 一、如何利用Charles mock数据 1、Charles 连接手机(已设置好代理...
  • 如何mock数据

    千次阅读 2018-09-27 16:19:31
    如何mock数据 在之前前后端不分离的情况下,很多时候都要等到后端写好接口,前端很多功能才 能开发,而前后端分离,前端无需等待,可以与后端并行开发,前端需要的数据 可以mock出来,利用nodejs再生成接口,可以...
  • 前端 mock 数据

    2019-11-13 20:37:06
    前端 mock 数据 Easy Mock 由于easy mock线上服务基本打不开的情况,所以有能力的还是做一下本地部署(参考) 在easymock创建一个项目,并将项目的 Base URL 配置到axios的 baseURL,easymock不需要解决跨域的问题。 ...
  • 如果后端接口尚未开发完成,前端开发一般使用mock数据。 mock方法有多种多样,这里给出两种: 方法一: 使用express搭建静态服务 mock数据写在json文件中,proxyTable 里将接口代理到具体mock数据json文件上。 ...
  • MOCK数据容器

    2017-03-27 20:03:16
    MOCK数据容器
  • 主要介绍了vue-cli3使用mock数据的方法,结合实例形式分析了vue-cli3使用mock数据的相关实现方法与操作注意事项,需要的朋友可以参考下
  • 谈一谈mock数据

    2020-07-09 21:19:56
    Mock数据什么是Mock数据?Mock数据有什么作用?我们如何使用Mock数据?如何自己编辑Mock文件? 什么是Mock数据? 约定 /mock 文件夹下所有文件为 mock 文件,mock文件中定义的数据称作mock数据。 如alita项目中的...
  • 主要介绍了详解Vue CLI 3.0脚手架如何mock数据,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 前段时间写了一篇前端vue项目实现mock数据方式的文章,主要是在vue项目里使用mock数据,数据和项目耦合在一起,不太优雅,作为一个有追求的前端,怎么能容忍这种方法呢?特以此篇,记录利用koa2搭建服务端,提供mock...
  • postman创建mock数据

    2020-02-06 15:26:04
    postman 创建 mock 数据并且前端使用模拟数据 创建 collection 文件夹 创建 collection 的时候输入对应的 collection 的名字’ 创建完成 colletion 后点击 collection 右边的三角其中有 mock 选项点击创建 mock。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 57,755
精华内容 23,102
关键字:

mock数据