成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

學(xué)習(xí) Next.js: 獲取數(shù)據(jù)

NotFound / 631人閱讀

摘要:原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署為頁面獲取數(shù)據(jù)得益于路由的優(yōu)點我們知道了如何創(chuàng)建一個具有簡介的應(yīng)用程序?qū)嶋H上我們通常需要從遠程數(shù)

原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來.

學(xué)習(xí) Next.js: 入門
學(xué)習(xí) Next.js: 頁面之間的導(dǎo)航
學(xué)習(xí) Next.js: 使用共享組件
學(xué)習(xí) Next.js: 創(chuàng)建動態(tài)內(nèi)容
學(xué)習(xí) Next.js: 使用路由掩碼創(chuàng)建干凈的URL
學(xué)習(xí) Next.js: 干凈URL的服務(wù)器支持
學(xué)習(xí) Next.js: 獲取數(shù)據(jù)
學(xué)習(xí) Next.js: 部署

為頁面獲取數(shù)據(jù)

得益于 Next.js 路由API的優(yōu)點, 我們知道了如何創(chuàng)建一個具有簡介URL的 Next.js 應(yīng)用程序.

實際上, 我們通常需要從遠程數(shù)據(jù)源獲取數(shù)據(jù). Next.js 提供了一個標準API用于為頁面獲取數(shù)據(jù). 我們使用一個 async 函數(shù) getInitialProps 來達到獲取數(shù)據(jù)的目的.

以此為基礎(chǔ), 我們能夠給以頁面從遠程數(shù)據(jù)源獲取數(shù)據(jù), 然后把數(shù)據(jù)穿給我們的一個頁面組件的屬性. 我們可以編寫getInitialProps函數(shù)讓他能夠同時在客戶端和服務(wù)器端運行.

在這節(jié)課中, 使用 getInitialProps, 我們將使用 TVmaze API構(gòu)造一個顯示Batman TV Shows 相關(guān)信息的應(yīng)用程序.

現(xiàn)在開始!

設(shè)置

下載需要的示例程序:

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout clean-urls-ssr

用下面的命令運行:

npm install
npm run dv

然后, 訪問 http://localhost:3000

獲取 Batman Shows

在我們的演示程序中, 顯示了一個博客列表, 現(xiàn)在我們改造演示程序以要顯示一個Batman TV shows列表.

和之前博客列表的硬編碼方式不同, 這次我們從遠程服務(wù)器獲取列表數(shù)據(jù)

這里我們使用 TVMaze API 獲取電視節(jié)目信息. 它是一個搜索電視節(jié)目信息的API.

首先, 我們需要按照 isomorphic-unfetch. 我們使用這個庫來獲取數(shù)據(jù). 它是一個瀏覽器 fetch 的簡單實現(xiàn), 并且可以同時工作在客戶端和服務(wù)器端環(huán)境中.

譯注: 這類能夠同時在客戶端和服務(wù)器運行的應(yīng)用程序, 我們稱之為同構(gòu)應(yīng)用程序

然后, 用下面的代碼, 替換 pages/index.js 文件:

import Layout from "../components/MyLayout.js"
import Link from "next/link"
import fetch from "isomorphic-unfetch"

const Index = (props) => (
  
    

Batman TV Shows

) Index.getInitialProps = async function() { const res = await fetch("http://api.tvmaze.com/search/shows?q=batman") const data = await res.json() console.log(`Show data fetched. Count: ${data.length}`) return { shows: data } } export default Index

到現(xiàn)在, 上面的代碼一切看來都是很熟悉了, 除了 Index.getInitialProps:

Index.getInitialProps = async function() {
  const res = await fetch("http://api.tvmaze.com/search/shows?q=batman")
  const data = await res.json()

  console.log(`Show data fetched. Count: ${data.length}`)

  return {
    shows: data
  }
}

這是一個靜態(tài)的 async, 可以把它添加到應(yīng)用程序中的任何頁面. 使用它, 我們可以獲取數(shù)據(jù), 并且作為頁面組件的屬性使用.

如你所見, 現(xiàn)在, 我們要獲取 Batman TV 電視節(jié)目信息, 并且把獲取的節(jié)目信息, 作為頁面組件的 shows 屬性進行訪問.

如你所見, 上面的 getInitialProps 函數(shù), 它打印一系列獲取到的數(shù)據(jù)到控制臺.

現(xiàn)在, 看一下瀏覽器的控制臺和服務(wù)器的控制臺輸出. 然后重新加載頁面.

僅服務(wù)器

本來我們預(yù)想的, 客戶端和服務(wù)器都能輸出同樣的信息, 但實際上, 在這種情況下, 輸出信息只顯示在了服務(wù)器端的控制臺上. 這是因為, 我們的頁面是在服務(wù)器端進行渲染的. 我們在服務(wù)器上已經(jīng)獲取到了電視節(jié)目的數(shù)據(jù), 沒有理由在客戶端再獲取一次.

實現(xiàn)信息展示頁面

現(xiàn)在我們要實現(xiàn)一個 /post 頁面來展示電視節(jié)目的詳細信息.

首先, 打開 server.js 文件, 用下面的代碼修改路由 /p/:id:

server.get("/p/:id", (req, res) => {
    const actualPage = "/post"
    const queryParams = { id: req.params.id }
    app.render(req, res, actualPage, queryParams)
})

然后, 重啟應(yīng)用程序

先前, 我們映射了 title 查詢參數(shù)到頁面, 現(xiàn)在我們重命名為 id.

現(xiàn)在, 用下面的代碼替換 pages/post.js 的內(nèi)容:

import Layout from "../components/MyLayout.js"
import fetch from "isomorphic-unfetch"

const Post =  (props) => (
    
       

{props.show.name}

{props.show.summary.replace(/<[/]?p>/g, "")}

) Post.getInitialProps = async function (context) { const { id } = context.query const res = await fetch(`http://api.tvmaze.com/shows/${id}`) const show = await res.json() console.log(`Fetched show: ${show.name}`) return { show } } export default Post

我們再來看一下 getInitialProps 函數(shù):

Post.getInitialProps = async function (context) {
  const { id } = context.query
  const res = await fetch(`http://api.tvmaze.com/shows/${id}`)
  const show = await res.json()

  console.log(`Fetched show: ${show.Title}`)

  return { show }
}

現(xiàn)在這個函數(shù)的第一個參數(shù)為一個 context 對象, 其中包含了我們用于獲取信息的查詢字段.

在我們這個例子中, 我們從查詢串中獲取電視節(jié)目ID, 然后通過它來從 TVMaze API 獲取數(shù)據(jù).

getInitialProps函數(shù)中, 我們添加了一個 console.log 調(diào)試輸出來顯示電視節(jié)目的標題. 下面我們來驗證我們的程序是否能夠正確運行.

打開服務(wù)器和客戶端控制臺, 訪問 http://localhost:3000, 點擊第一個電視節(jié)目標題.

輸出顯示在客戶端還是服務(wù)器控制臺?

從客戶端獲取數(shù)據(jù)

這里, 我們只在客戶端的控制臺上看到了調(diào)試輸入. 這是因為我們是通過客戶端進行導(dǎo)航的. 因此從客戶端獲取數(shù)據(jù)是更好的方式.

如果你直接訪問Post頁面(例如: http://localhost:3000/p/975), 你將會看到調(diào)試輸出顯示在了服務(wù)器端而非客戶端.

最后

現(xiàn)在你學(xué)到了 Next.js 最為關(guān)鍵的特性: 通用數(shù)據(jù)獲取服務(wù)器端渲染(SRR).

我們了解了 getInitialProps, 在大多數(shù)情況下, 就足夠了. 如果你要了解關(guān)于數(shù)據(jù)獲取的更加深入的信息, 參考data fetching 文檔.

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/83269.html

相關(guān)文章

  • 學(xué)習(xí) Next.js: 創(chuàng)建動態(tài)內(nèi)容

    摘要:原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署創(chuàng)建動態(tài)頁面現(xiàn)在我們知道了如何使用多個頁面創(chuàng)建一個基本的應(yīng)用程序為了創(chuàng)建頁面我們需要在磁盤上創(chuàng)建 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: ...

    caohaoyu 評論0 收藏0
  • 學(xué)習(xí) Next.js: 清潔URL的服務(wù)器支持

    摘要:原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署干凈的服務(wù)器支持在前面的課程中我們學(xué)習(xí)了如何為我們的應(yīng)用程序創(chuàng)建干凈的基本上我們讓像這樣但是 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: 頁面...

    Lionad-Morotar 評論0 收藏0
  • 學(xué)習(xí) Next.js: 使用共享組件

    摘要:原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署使用共享組件我們知道是和頁面相關(guān)的通過導(dǎo)出一個組件創(chuàng)建一個頁面然后把它放到目錄中基于這個文件名存 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: ...

    Steve_Wang_ 評論0 收藏0
  • 學(xué)習(xí) Next.js: 入門

    摘要:原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署哪位分高的幫忙創(chuàng)建一個的標簽謝謝現(xiàn)暫時放在標簽下面了新建文章有時間限制一會全部發(fā)上來這是最近兩天 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: ...

    Miracle 評論0 收藏0
  • 學(xué)習(xí) Next.js: 使用路由掩碼創(chuàng)建干凈的URL

    摘要:原始文檔在現(xiàn)在搬過來學(xué)習(xí)入門學(xué)習(xí)頁面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署使用路由掩碼創(chuàng)建干凈的在前面的課程中我們學(xué)到了如何使用查詢串創(chuàng)建動態(tài)頁面一次為基礎(chǔ)我們一篇博客的 原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學(xué)習(xí) Next.js: 入門學(xué)習(xí) Next.js: ...

    silenceboy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<