成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

使用Mock.js生成前端測(cè)試數(shù)據(jù)

impig33 / 1698人閱讀

摘要：前端工程師在做前后端分離的項(xiàng)目的時(shí)，有時(shí)候接口未開發(fā)完成，或者開發(fā)環(huán)境不允許使用接口，這時(shí)候就需要前端工程師自己模擬數(shù)據(jù)了，模擬數(shù)據(jù)的方式有很多種，今天給大家介紹一款包，。首先我們要明白的本質(zhì)是攔截請(qǐng)求，并返回約定好的數(shù)據(jù)。

前端工程師在做前后端分離的項(xiàng)目的時(shí)，有時(shí)候接口未開發(fā)完成，或者開發(fā)環(huán)境不允許使用接口，這時(shí)候就需要前端工程師自己模擬數(shù)據(jù)了，模擬數(shù)據(jù)的方式有很多種，今天給大家介紹一款npm包，Mock.js。

首先我們要明白Mock.js的本質(zhì)是攔截ajax請(qǐng)求，并返回約定好的數(shù)據(jù)。數(shù)據(jù)需要根據(jù)開發(fā)者的需求結(jié)合Mock.js的文檔來定制，下面來看一下如何使用：

引入mock.js和JQuery


創(chuàng)建模擬Api，這里需要結(jié)合需求按照文檔編寫，攔截Ajax請(qǐng)求，返回測(cè)試數(shù)據(jù)，這里面需要注意的是mock的第一個(gè)參數(shù)，指的是我們將來發(fā)送ajax要請(qǐng)求的接口地址：

//模擬后臺(tái)

Mock.mock("http://api.com", {
    "user|5-10": [{
        "name": "@cname",   //中文名稱
        "age|1-100": 100,   //100以內(nèi)隨機(jī)整數(shù)
        "birthday": "@date("yyyy-MM-dd")",  //日期
        "city": "@city(true)"   //中國(guó)城市
    }]
});

發(fā)送ajax請(qǐng)求：

//JQuery方式

$.ajax({
    url: "http://api.com",
    dataType: "json"
}).done(function(data, status, xhr) {
    console.log(
        JSON.stringify(data, null, 4)
    )
});

這里也可以用原生的ajax請(qǐng)求，只要是用XMLhttprequest的實(shí)例發(fā)送的請(qǐng)求，都會(huì)被Mock.js攔截，諸如axios、vue-resurce等等。

看一下響應(yīng)結(jié)果：

{

"user": [
    {
        "name": "鍾麗",
        "age": 17,
        "birthday": "1983-11-01",
        "city": "內(nèi)蒙古自治區(qū) 赤峰市"
    },
    {
        "name": "陳艷",
        "age": 25,
        "birthday": "1973-07-10",
        "city": "河南省 駐馬店市"
    },
    {
        "name": "馮霞",
        "age": 59,
        "birthday": "2010-10-28",
        "city": "澳門特別行政區(qū) 離島"
    },
    {
        "name": "賈秀英",
        "age": 63,
        "birthday": "1973-01-22",
        "city": "新疆維吾爾自治區(qū) 伊犁哈薩克自治州"
    },
    {
        "name": "周勇",
        "age": 34,
        "birthday": "1985-05-21",
        "city": "湖南省 衡陽市"
    }
]

}

以上便是mock的使用。

資料引用：
https://www.jianshu.com/p/845...
http://mockjs.com/

歡迎大家關(guān)注、轉(zhuǎn)發(fā)、點(diǎn)擊好看

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/109062.html

相關(guān)文章

  • 前后端開發(fā)分離之Mock

    摘要：為了使得前端減輕對(duì)后端的依賴，在后端功能尚未實(shí)現(xiàn)的情況下保證前端進(jìn)度的開發(fā)，我們一般會(huì)手動(dòng)進(jìn)行一些數(shù)據(jù)模擬，即假數(shù)據(jù)。覆蓋攔截請(qǐng)求，目前內(nèi)置支持。 序 有時(shí)候我們開發(fā)一般會(huì)分為前后端，前端負(fù)責(zé)數(shù)據(jù)顯示和UI交互，后端負(fù)責(zé)數(shù)據(jù)IO等等。因此造成前端對(duì)后端有嚴(yán)重依賴，使得前端的開發(fā)進(jìn)度普遍滯后于后端。 為了使得前端減輕對(duì)后端的依賴，在后端功能尚未實(shí)現(xiàn)的情況下保證前端進(jìn)度的開發(fā)，我們一般會(huì)手...

    phpmatt 評(píng)論0 收藏0

  • 前后端開發(fā)分離之Mock

    摘要：為了使得前端減輕對(duì)后端的依賴，在后端功能尚未實(shí)現(xiàn)的情況下保證前端進(jìn)度的開發(fā)，我們一般會(huì)手動(dòng)進(jìn)行一些數(shù)據(jù)模擬，即假數(shù)據(jù)。覆蓋攔截請(qǐng)求，目前內(nèi)置支持。 序 有時(shí)候我們開發(fā)一般會(huì)分為前后端，前端負(fù)責(zé)數(shù)據(jù)顯示和UI交互，后端負(fù)責(zé)數(shù)據(jù)IO等等。因此造成前端對(duì)后端有嚴(yán)重依賴，使得前端的開發(fā)進(jìn)度普遍滯后于后端。 為了使得前端減輕對(duì)后端的依賴，在后端功能尚未實(shí)現(xiàn)的情況下保證前端進(jìn)度的開發(fā)，我們一般會(huì)手...

    tyheist 評(píng)論0 收藏0

  • 如何根據(jù)protobuf來Mock后臺(tái)返回的數(shù)據(jù)

    摘要：簡(jiǎn)稱是公司內(nèi)部的混合語言數(shù)據(jù)標(biāo)準(zhǔn)，他們用于系統(tǒng)和持續(xù)數(shù)據(jù)存儲(chǔ)系統(tǒng)?？捎糜谕ㄓ崊f(xié)議數(shù)據(jù)存儲(chǔ)等領(lǐng)域的語言無關(guān)平臺(tái)無關(guān)可擴(kuò)展的序列化結(jié)構(gòu)數(shù)據(jù)格式。我們想要的結(jié)果是最終的返回的數(shù)據(jù)。如果當(dāng)前開發(fā)開啟，就回直接返回?cái)?shù)據(jù)。數(shù)據(jù)是與同級(jí)的文件。 Protobuf Google Protocol Buffer( 簡(jiǎn)稱 Protobuf) 是 Google 公司內(nèi)部的混合語言數(shù)據(jù)標(biāo)準(zhǔn)，他們用于 RPC ...

    shmily 評(píng)論0 收藏0

  • justreq與mock.js組合，快速打造高質(zhì)量Mock Server

    摘要：而則是主要用于接口緩存的一款。初始化完成后，將在當(dāng)前目錄生成文件。其它未在規(guī)則中的請(qǐng)求，將直接代理并緩存下來，而不進(jìn)行轉(zhuǎn)發(fā)。每條記錄包含和兩個(gè)屬性，并且也是隨機(jī)自動(dòng)生成的。 概述 搜到這篇文章之前，相信你已對(duì)Mock Server及mock.js有一定的了解。簡(jiǎn)單概括，Mock Server即模擬服務(wù)器，用于模擬后端api服務(wù)。mock.js是國(guó)內(nèi)的高云開發(fā)的一款json數(shù)據(jù)生成器，主...

    Awbeci 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<