c 抓取网页数据(Next.js新的通用JavaScript框架-NextTV节目)

　　c 抓取网页数据(Next.js新的通用JavaScript框架-NextTV节目)

　　Next.js 是一个新的通用 JavaScript 框架，它为 React 和基于服务器的 Web 应用程序提供了新的替代方案。

　　Next.js 目前是开源的，

　　现在我们知道如何创建一个非常好的 Next.js 应用程序并获得 Next.js 路由 API 的全部优势。

　　在实践中，我们通常需要从远程数据源获取数据。Next.js 有一个标准的 API 来获取页面的数据。我们使用名为 getInitialProps 的异步函数来完成它。

　　这样我们就可以通过远程数据源获取给定页面的数据，作为我们页面的一个属性。我们可以在服务器和客户端上编写 getInitialProps。因此，Next.js 既可以用于客户端，也可以用于服务器端。

　　在本课程中，我们将使用 getInitialProps 制作一个应用程序，该应用程序可以使用公共 TVmaze API 显示有关蝙蝠侠电视节目的信息。

　　

　　Paste_Image.png

　　开始吧。

　　安装

　　git clone https://github.com/arunoda/learnnextjs-demo.git

cd learnnextjs-demo

git checkout clean-urls-ssr

　　您可以执行以下命令：

　　npm install

npm run dev

　　您现在可以通过导航到：3000/ 来访问该应用程序。

　　抓住蝙蝠侠表演

　　在我们的演示应用程序中，我们在主页上有一个博客 文章 列表。现在我们将展示一组蝙蝠侠电视节目。

　　我们将从远程服务器获取这些显示，而不是对它们进行硬编码。

　　以下是我们如何使用 TVMaze API 来获取这些电视节目。

　　它是一个用于搜索电视节目信息的 API。

　　首先，我们需要安装isomorphic-unfetch。这是我们用来获取数据的库。它是浏览器获取 API 的简单实现，但它可以在客户端和服务器环境中实现。

　　npm install --save isomorphic-unfetch

　　然后将我们的 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

{props.shows.map(({show}) => (

<a>{show.name}</a>

))}

)

Index.getInitialProps = async function() {

const res = await fetch('https://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

　　上面的每个页面都很熟悉，除了Index.getInitialProps，如下所示：

　　Index.getInitialProps = async function() {

const res = await fetch('https://api.tvmaze.com/search/shows?q=batman')

const data = await res.json()

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

return {

shows: data

}

}

　　这是一个静态异步函数，您可以将它添加到应用程序的任何页面，使用它，我们可以获取数据并将它们作为我们页面的属性发送。

　　如您所见，我们现在正在抓取蝙蝠侠电视节目并将其作为我们页面上的“节目”属性输入。

　　

　　Paste_Image.png

　　正如您在上面的 getInitialProps 函数中看到的那样，它将数据量输出到控制台。

　　现在，查看浏览器控制台和服务器控制台。

　　然后重新加载页面。

　　重新加载页面后，你在哪里看到上面的消息？

　　仅在服务器上

　　在这种情况下，消息仅打印在服务器上。

　　这是因为我们在服务器上呈现页面。

　　因此，我们已经有了数据，我们没有理由在客户端再次检索数据。

　　实现帖子页面

　　现在，让我们尝试实现“/post”页面，该页面显示有关电视节目的详细信息。

　　首先打开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)

})

　　然后重新启动应用程序以应用上述代码更改。

　　早些时候，我们将标题查询参数映射到页面。现在我们需要将其重命名为 id。

　　现在将 pages/post.js 替换为以下内容：

　　import Layout from '../components/MyLayout.js'

import fetch from 'isomorphic-unfetch'

const Post = (props) => (

{props.show.name}

<p>{props.show.summary.replace(//g, '')}

<img src={props.show.image.medium}/>

)

Post.getInitialProps = async function (context) {

const { id } = context.query

const res = await fetch(`https://api.tvmaze.com/shows/${id}`)

const show = await res.json()

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

return { show }

}

export default Post

</p>

　　看看这个页面上的 getInitialProps ：

　　Post.getInitialProps = async function (context) {

const { id } = context.query

const res = await fetch(`https://api.tvmaze.com/shows/${id}`)

const show = await res.json()

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

return { show }

}

　　在这种情况下，这个函数是上下文对象中的第一个参数。它有一个查询字段，我们可以用它来获取信息。

　　在我们的示例中，我们从查询参数中选择节目 ID，并从 TVMaze API 获取其节目数据。

　　在这个 getInitialProps 函数中，我们添加了一个控制台。记录显示的标题。现在让我们看看它将被打印在哪里。

　　打开服务器控制台和客户端控制台。

　　然后访问首页：3000，点击第一部蝙蝠侠秀的标题。

　　你在哪里看到上面提到的控制台。记录消息？

　　获取客户端数据

　　在这里，我们只能在浏览器控制台中看到消息。

　　这是因为我们通过客户端导航到帖子页面。那么从客户端获取数据是最好的方式。

　　如果您只是直接访问帖子页面（例如::3000/p/975 页面），您可以看到打印在服务器上而不是客户端上的消息。

　　最后

　　现在您已经了解了 Next.js 最重要的功能。使其成为通用数据采集和服务器端渲染的理想选择。

　　我们已经学习了 getInitialProps 的基础知识，这对于大多数用例来说已经足够了。您还可以参考 Next.js 上的文档了解更多信息。

　　本文转载自：