ディレクトリ構造
| ___router | | __index.js | | __newsdata.json | | __routerMethods.js | | ___src | | __index.html | | __index.js | | ___ index.js
1.入場index.js
HTTP =が必要としましょう（ 'HTTP' ） サービスましょう =（」./サービス/ index.js'が必要です） // 1.ファイル名を指定して実行ルータ/オブジェクトのインポートをルーティングindex.jsは、 ルータを聞かせて=必要（」./ルータ/ index.js' ） // 2.構成ルーティング方法が使用使用して router.useを（ '/のgetData' 、router.getdata） サーバLET = http.createServer（（REQ、RES）=> { // 3送信要求 ルーター（REQ、RES） }）。（リッスン）8888を
2.router / index.js
URL =は（ 'URL'を必要としましょう） クエリ文字列ましょう =（「クエリ文字列を」必要） 要求をしましょう =（「リクエスト」を必要） FS LET =（ 'FS'必要） //のルーティング方法、分離を導出し、設計をルーティングする LETのrouterMethodsを=（」./ routerMethods.js'が必要） // 3.1ルーティング設計コンセプト module.exportsは=（REQ、RES）=> { 聞かせてurlObj = url.parse（req.url） 聞かせてquerystringObj = querystring.parse（urlObj.query） せメソッド = module.exportsは[urlObj.pathname.substr（1 ）] req.querystringObj = querystringObj IF （メソッド）メソッド（REQ、RES）は 、他の{ // 静的ルーティングリソースがホストされた fs.readFileを（dirnameの+ __ '/../src' + urlObj.pathname、（ERR、データ）=> { res.end（データ） }） } } // ES6は文法オブジェクト合わせ // 分離された設計の実装2.2 Object.assign（module.exportsは、routerMethods） // 2.1ルーティング構成 > = module.exports.use =（URL、コールバック）{ 聞かせてurlProp = url.substr（1 ） module.exportsは[urlProp] = コールバック }
3.router / routerMethods.js
// のルーティング方法を実装し てみましょう必要がFS =（「FS」） 始めましょう = 5 module.exportsはを = { 函（REQ、RES）{ 数ましょう = req.querystringObj.count fs.readFile（__ DIRNAME + '/newsdata.json'、（ERR、データ）=> { データ = JSON.parse（データ） の場合（カウント&&カウント！= 5 ）{ 聞かせて終了 =（数（カウント）+ スタート） res.end（JSON.stringify（data.slice（開始、終了））） 起動 + = 2 } 他 res.end（JSON.stringify（data.slice（0,5 ））） }） } }
4.newsdata.json
[{ 「上記ID」：「0001」、 「IMG」：「https://p3.pstatp.com/list/190x124/pgc-image/6278c4e87c7445ecadc687714e589711」、 「タイトル」：「郡の電力企業の私達の全廃」ジェネレーションパイプ「システム」、 「詳細」：「中国の電力ニュース政治コメント⋅⋅382 33分前に」 }、{ 「上記のid」：「0002」、 「IMG」：「https://p3.pstatp.com/list/190x124/pgc-image/RsKTsENA98VCW4」、 「タイトル」：「ティーチへつらう害カーペンターにアメリカ帝国主義」、 「詳細」：「メディア・ウェブコメント⋅⋅40 20分前。」 }、{ 「上記のid」：「0003」、 「IMG」：「https://p1.pstatp.com/list/190x124/pgc-image/RsA9sUaCBjDIlv」、 「タイトル」：狂気「の杭州の少年で3日間、毎晩」「！お母さんのことができのみ非表示単位を怖がっ：ネットには3つのコースの悪夢の家族「になった、 「：」」詳細。中国青年ネットワーク社会のコメント⋅⋅456 49分前に」 }、{ 「言及したID上記の」：「0004」、 「IMG」：「https://p1.pstatp.com/list/190x124/pgc-image/24d23182556449f38634d2000abc4340」、 「タイトル」：「イタリアは、他の国を侮辱回します」、 「詳細」：「国際グローバル・タイムズ⋅1684件のコメント⋅57分前。」 }、{ 「上記のid」：「0005」、 「IMG」：「https://p9.pstatp.com/list/190x124/pgc-image/39ac6fcc7efb4f2787bba47fdfc92fd3」、 「タイトルは」：「彼は前後に1日4時間だった、その後解散しますちょうど私の側「を参照するには、 「：」」詳細。ライフ・ウィークの物語のコメント⋅⋅224 1時間前に」 }、{ "上記のID"： "0006" 、 "IMG"： "https://p9.pstatp.com/list/190x124/pgc-image/RsFxNEQ3reP1EU" 、 "タイトル"： "レイセオン山の壁、火" 、 「詳細「：」ソーシャル・中国青年網のコメント⋅1時間前7178⋅」。 }、{ 「上記のid」：「0007」、 「IMG」：「https://p3.pstatp.com/list/190x124/pgc-image/2c1ad4cd170746399d8f522e972ad0ce」、 「タイトル」：「ヒュー・キジン：最近の中国の人々の経験、講演について「中国とロシアの関係の実際の外観、 」詳細「：」1時間前国際グローバル・タイムズ⋅272件のコメント⋅」。 }、{ 「上記のID」：「0008」、 「IMG」：「https://p1.pstatp.com/list/190x124/pgc-image/RrPOLxP9rVxgsc」、 「タイトル」：「衛星は、中国の外国人専門家が砂漠を驚かせている掃引" "詳細"："科学のWebコメント⋅⋅332 1時間前"。 }、{ 「上記のid」：「0009」、 「IMG」：「https://p1.pstatp.com/list/190x124/pgc-image/RsM9OKXIW9qlr7」、 「タイトル」：「36年の患者の死の後は新しい王冠、王のGFを排出しました。再発は結論「にジャンプすべきではない、 「：」498時間前に健康北京ニュース⋅⋅1件のコメント"」詳細 }、{ 「上記のID」：「0010」、 「IMG」：「https://p1.pstatp.com/list/190x124/pgc-image/RrqzoRW2Woiyc2」、 「タイトル」：「疫病は彼女のボーイフレンドの家に閉じ込められたので、私の将来の母とほとんどの姉妹「などで、 「：」」ディテール。1331件のコメント⋅1時間前の話新華クライアント⋅」 }、{ 「上記のid」：「0011」、 「IMG」：「https://p1.pstatp.com/list/190x124/pgc-image/R6cefahHX9doHC」、 「タイトル」：「あなたは女性に良い印象を持って、仲良くなりますいくつかのボディランゲージは、「知らない愚かなことはありません、 「7時間前に感情的な光明⋅⋅2件のコメント：「」」の詳細を }、{ 「上記のid」：「0012」、 「IMG」：「https://p9.pstatp.com/list/190x124/pgc-image/bf35da78f8334e6c8fd49f2d8327929c、」、 「タイトル」：338万たくさんの価格肉屋」「魔法の紛争！」 Jingdongは破れ、どのようにドラマを最後までこの「相互ギャング」「？ 、 ディテール」：旧「グローバルピープル誌テクノロジーのコメント⋅⋅193 2時間、」 " }、{ 「上記のid」：「0013」、 「IMG」：「https://p1.pstatp.com/list/190x124/pgc-image/RsJlLTNGJpHoc2」、 「タイトル」：「？カニカマあなたがそれを食べるべきか、」、 「詳細」：「グルメ中国経済ネット⋅10件のコメント⋅2時間前。」 }、{ 「上記のid」：「0014」、 「IMG」：「https://p1.pstatp.com/list/190x124/pgc-image/R6gvn63BhYjmsE」、 「タイトル」：「？火鍋の実験から、それは安全ではあなたを教えて。」、 「詳細」：「社会光明⋅7件のコメント⋅2時間前。」 }、{ 「上記のid」：「0015」、 「IMG」：「https://p3.pstatp.com/list/190x124/pgc-image/12800b57142d4d62b3716cbeac28f43a」、 「タイトル」：「一緒に積み重ね男性と女性兵士のノルウェー軍共学寮内部被ばく「で、 「：」軍事グローバルタイムズ⋅2033件のコメント⋅2時間前"」の詳細。 }、{ 「上記のid」：「0016」、 「IMG」：「https://p3.pstatp.com/list/190x124/pgc-image/bdb2ee48eefa4cfc97ea873a2faf886b」、 「タイトル」：台湾独立「ハードコアサポーターになりました、「彼がいました」 「緑」に台南は「旗を上げ、 詳細」「：」政治政協委員のネットワーク⋅209件のコメント⋅2時間前に」。 }、{ 「上記のid」：「0017」、 「IMG」：「https://p1.pstatp.com/list/190x124/pgc-image/Rqw40HXFGgGYUy」、 「タイトル」：「中国の古代図書100の古典的な引用符」、 「詳細"："明るいWebが⋅⋅216 2時間前コメント」。 }、{ 「上記のid」：「0018」、 「IMG」：「https://p3.pstatp.com/list/190x124/pgc-image/Rrgh96rCzFdkJ3」、 「タイトル」：「リリース権限が|新しいクラウン肺炎の患者がリハビリテーションプログラムに排出しました「」詳細「：」健康健康ニュース⋅コメント⋅2時間前に」。 }、{ 「上記ID」：「0019」、 「IMG」：「https://p3.pstatp.com/list/190x124/pgc-image/RrsrYQtD4ZRhH9」、 「タイトル」：「すべての中小零細企業@：状態のサポートは、来リアルマネー「は、 」詳細「：」2745⋅2時間前財務人々のコメント⋅」。 }、{ 「上記のid」：「0020」、 「IMG」：「https://p1.pstatp.com/list/190x124/pgc-image/RmqmgpaAQqiQK8」、 「タイトル」：「ボーイズマイクロ手紙はあなたを聞いて：」やって"高いEQの女の子がで答えている「」詳細「：」3時間前感情的な光明⋅14件のコメント⋅ " }]
5.src / index.htmlを
<！DOCTYPE HTML> <HTML LANG = "EN"> <ヘッド> <メタ文字セット= "UTF-8"> <タイトル>ドキュメント</ TITLE> <リンクのrel = "スタイルシート" のhref = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> ます。<script type = "text / javascriptの" SRC = "index.js"> </ SCRIPT> </ head>の <身体> <H1>今日のニュースの見出し</ H1> <DIV ID = "アプリケーション" クラス= "コンテナ"> </ div> </ BODY> ます。<script type = "text / javascriptの"> window.onload =（）=> { myRequest（ "GET"、 'のhttp：// localhostを：8888 /函数= 5？'、handleUpdata） window.onscroll =（EV）=> { 聞かせてscrollTopスプライト= document.documentElement.scrollTop scrollHeight = document.documentElement.scrollHeightてみましょう windowHeight = document.documentElement.clientHeightてみましょう。 console.log（scrollTopスプライト） もし（scrollTopスプライト+ windowHeight == scrollHeight）myRequest（ "GET"、 'のhttp：// localhostを：8888 /函数= 2？'、handleUpdata） } } 関数handleUpdata（データ）{ {（I ++; I <data.length I = 0せて）のために app.innerHTML + = ` <DIVクラス= "行"> <DIVクラス= "COL-XS-4 COL-MD-3"> <HREF = "javascriptの:;" クラス=「サムネイル」> <IMG SRC = "$ {DATA [i]は.IMG}"> </a>の </ div> <DIVクラス= "COL-XS-8 COL-MD-9"> <H2> <a href="javascript:;"> $ {データ[I] .TITLE} </a>の</ H2> <P> <a href="javascript:;"> $ {DATA [i]が.detail} </a>の</ P> </ div> </ div> ` } } </ SCRIPT> </ HTML>
6.src / index.js
関数myRequest（メソッド、URL、CB）{ 聞かせてXHR = 新しいXMLHttpRequestを（） xhr.open（メソッド、URL） xhr.send（） xhr.onreadystatechange =（）=> { 場合（xhr.readyState == 4 ）{ せステータス = xhr.status 場合（ステータス> = 200の&&ステータス<300の||ステータス== 304 ）{ CB（JSON.parse（xhr.responseText）） } } } }