模擬數(shù)據(jù)接口

一般在項(xiàng)目的開發(fā)中拇囊,前端有的時(shí)候需要自己寫模擬數(shù)據(jù)接口進(jìn)行本地的研發(fā)和測試机隙。整個(gè)過程大概是:

  • 和后端確認(rèn)數(shù)據(jù)格式
  • 根據(jù)數(shù)據(jù)格式,前端本地模擬數(shù)據(jù)(文章介紹的就是這個(gè)過程
  • 等后端給到真正數(shù)據(jù)接口地址,替換本地模擬數(shù)據(jù)接口

本文主要記錄:1聚唐、模擬數(shù)據(jù)庆锦;2捅位、前端調(diào)用數(shù)據(jù)接口;3搂抒、demo


一艇搀、安裝json-sever環(huán)境(安裝過程可以參考json-server

npm install -g json-server

注意:

解決npm install安裝慢的問題!G缶А焰雕!

原因:npm的服務(wù)器在國外,所以安裝比較慢芳杏,我們可以切換到國內(nèi)服務(wù)器矩屁,如淘寶辟宗。
解決方案:
切換到國內(nèi)源:

npm install -gd express --registry=[http://registry.npm.taobao.org](http://registry.npm.taobao.org)

使用--registry制定鏡像服務(wù)器,為了每次安裝使用--registry吝秕,可以使用以下命令長久設(shè)置:

npm config set registry http://registry.npm.taobao.org

二泊脐、創(chuàng)建有數(shù)據(jù)的.json文件

my.json:

{
    "posts": [{
        "id": 1,
        "title": "json-server",
        "author": "typicode"
    }],
    "comments": [{
            "id": 1,
            "body": "leaf test1"
        },
        {
            "id": 2,
            "body": "leaf test2"
        },
        {
            "id": 3,
            "body": "leaf test3"
        },
        {
            "id": 4,
            "body": "leaf test4"
        }
    ],
    "profile": {
        "name": "typicode"
    }
}

注意:文件名字、數(shù)據(jù)可以自定義烁峭,但文件名以.json結(jié)尾

三容客、啟動(dòng)JSON數(shù)據(jù)服務(wù)器

1、啟動(dòng)JSON數(shù)據(jù)服務(wù)器:
json-server --watch json文件名
或json-server --watch json文件 --port 指定端口

json-server --watch my.json

json-server --watch my.json --port 9999

注意:要在.json所在的路徑開啟约郁,有時(shí)候關(guān)閉了需要再次啟動(dòng)

2缩挑、啟動(dòng)json-server之后,會(huì)返回一個(gè)接口地址鬓梅,根據(jù)目錄打開就可以訪問了调煎。


返回接口地址.png

訪問my.json數(shù)據(jù):


訪問json數(shù)據(jù).png

四、前端使用$.ajax()方法調(diào)用JSON數(shù)據(jù)

// JQuery以JSON方式提交數(shù)據(jù)到服務(wù)端
    $.ajax({
        url: "http://172.17.20.51:9000/daily/daily/test.json",//啟動(dòng)服務(wù)器后返回的借口地址
        type: "get", //接口請(qǐng)求方式get或post
        contentType: "application/json; charset=utf-8",
        success: function(data) {
           ...
        //接口返回成功之后你要調(diào)用的方法
        }
    });

五己肮、demo參考(移動(dòng)端)

可以F12調(diào)成手機(jī)模式士袄,上滑可以加載my.json數(shù)據(jù)(用的是上面提到的my.json文件,數(shù)據(jù)也是一樣的)

完整代碼:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移動(dòng)端下滑事件谎僻,上滑模擬數(shù)據(jù)</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <h1>leaf</h1>
    <script>
        var startx, starty;
        //獲得角度
        function getAngle(angx, angy) {
            return Math.atan2(angy, angx) * 180 / Math.PI;
        };

        //根據(jù)起點(diǎn)終點(diǎn)返回方向 1向上 2向下 3向左 4向右 0未滑動(dòng)
        function getDirection(startx, starty, endx, endy) {
            var angx = endx - startx;
            var angy = endy - starty;
            var result = 0;

            //如果滑動(dòng)距離太短
            if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
                return result;
            }

            var angle = getAngle(angx, angy);
            if (angle >= -135 && angle <= -45) {
                result = 1;
            } else if (angle > 45 && angle < 135) {
                result = 2;
            } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
                result = 3;
            } else if (angle >= -45 && angle <= 45) {
                result = 4;
            }

            return result;
        };
        var count = 0;
        var api_data;

        function add() {
            var newleaf = document.createElement("h1");
            // JQuery以JSON方式提交數(shù)據(jù)到服務(wù)端
            $.ajax({
                url: " http://localhost:9999/comments", //啟動(dòng)服務(wù)器后返回的借口地址
                type: "get", //接口請(qǐng)求方式get或post
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    console.log(data);
                    api_data = data;
                    var ret = api_data[count].id + api_data[count].body;
                    var newtext = document.createTextNode(ret);
                    newleaf.appendChild(newtext);
                    document.body.appendChild(newleaf);
                    count++;

                }

            });

        };
        //手指接觸屏幕
        document.addEventListener("touchstart", function(e) {
            startx = e.touches[0].pageX;
            starty = e.touches[0].pageY;
        }, false);
        //手指離開屏幕
        document.addEventListener("touchend", function(e) {
            var endx, endy;
            endx = e.changedTouches[0].pageX;
            endy = e.changedTouches[0].pageY;
            var direction = getDirection(startx, starty, endx, endy);
            switch (direction) {
                case 0:
                    // alert("未滑動(dòng)娄柳!");
                    break;
                case 1:
                    // alert("向上!")
                    add();
                    break;
                case 2:
                    // alert("向下艘绍!")
                    break;
                case 3:
                    // alert("向左赤拒!")
                    break;
                case 4:
                    // alert("向右!")
                    break;
                default:
            }
        }, false);
    </script>
</body>

</html>

本文主要是將自己以前的學(xué)習(xí)過程筆記整理記錄诱鞠,在這過程中參考了很多大神們的文章和資料挎挖,最后慢慢理解使用,文章或demo難免有錯(cuò)或不完善航夺,望其他大神可以指出糾正蕉朵,共同進(jìn)步!
參考資料:
json-server
JQuery以JSON方式提交數(shù)據(jù)到服務(wù)端

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末阳掐,一起剝皮案震驚了整個(gè)濱河市始衅,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌缭保,老刑警劉巖汛闸,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異艺骂,居然都是意外死亡诸老,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門钳恕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來别伏,“玉大人吮廉,你說我怎么就攤上這事』粒” “怎么了宦芦?”我有些...
    開封第一講書人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長轴脐。 經(jīng)常有香客問我调卑,道長,這世上最難降的妖魔是什么大咱? 我笑而不...
    開封第一講書人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任恬涧,我火速辦了婚禮,結(jié)果婚禮上碴巾,老公的妹妹穿的比我還像新娘溯捆。我一直安慰自己,他們只是感情好厦瓢,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開白布提揍。 她就那樣靜靜地躺著,像睡著了一般煮仇。 火紅的嫁衣襯著肌膚如雪劳跃。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,696評(píng)論 1 312
  • 那天浙垫,我揣著相機(jī)與錄音刨仑,去河邊找鬼。 笑死夹姥,一個(gè)胖子當(dāng)著我的面吹牛杉武,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播辙售,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼轻抱,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了圾亏?” 一聲冷哼從身側(cè)響起十拣,我...
    開封第一講書人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤封拧,失蹤者是張志新(化名)和其女友劉穎志鹃,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體泽西,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡曹铃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了捧杉。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片陕见。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡秘血,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出评甜,到底是詐尸還是另有隱情灰粮,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布忍坷,位于F島的核電站粘舟,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏佩研。R本人自食惡果不足惜柑肴,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望旬薯。 院中可真熱鬧晰骑,春花似錦、人聲如沸绊序。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽骤公。三九已至岗宣,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間淋样,已是汗流浹背耗式。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留趁猴,地道東北人刊咳。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像儡司,于是被迫代替她去往敵國和親娱挨。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361