在本文中,我们将研究如何使用 Gridsome创建静态网站,该静态网站生成器基于Vue.js和GraphQL,并在许多方面类似于Gatsby.js。
我们将从此获取数据 新闻API。
开始的
要开始,我们必须安装 Gridsome CLI 来创建我们的项目。
1$ npm install --global @gridsome/cli
或者用铁:
1$ yarn global add @gridsome/cli
然后我们通过运行创建我们的Gridome网站:
1$ gridsome create news-site
接下来,我们在浏览器中打开我们的新的 Gridsome 项目,通过到 http://localhost:8080。
从 REST API 获取数据
要从 REST API 获取数据,我们首先必须通过运行添加 Axios HTTP 客户端:
1$ npm i axios
接下来,我们创建一个.env 文件,然后添加我们的 API 密钥来访问新闻 API:
1GRIDSOME_NEWS_API_KEY=your_api_key
将your_api_key替换为您从新闻 API 网站获得的自己的密钥。
然后我们可以添加代码来从gridsome.server.js文件中获取数据,如下:
1[label gridsome.server.js]
2const axios = require('axios')
3
4module.exports = function (api) {
5 api.loadSource(async actions => {
6 const { data } = await axios.get(`
7 http://newsapi.org/v2/top-headlines?country=us&apiKey=${process.env.GRIDSOME_NEWS_API_KEY}`)
8 const collection = actions.addCollection({
9 typeName: 'Posts'
10 })
11
12 for (const item of data.articles) {
13 collection.addNode({
14 content: item.content,
15 title: item.title
16 })
17 }
18 })
19}
上面的代码从API中获取数据,然后将其添加到集合中,以便我们可以在任何Vue组件中获取数据。
从 .env 的环境变量被加载到 process.env 作为属性。
在我们更改代码后,我们必须重新启动应用程序,以便在 `gridsome.server.js 中的更改生效。
然后在index.vue中,我们将现有代码更改为:
1[label index.vue]
2<template>
3 <div>
4 <div v-for="edge in $page.allPosts.edges" :key="edge.node.title">
5 <h1 v-html="edge.node.title" />
6 <div v-html="edge.node.content"></div>
7 </div>
8 </div>
9</template>
10
11<page-query>
12query {
13 allPosts {
14 edges {
15 node {
16 content
17 title
18 }
19 }
20 }
21}
22</page-query>
以下是从 GraphQL 查询中返回的结果的形状:
1query {
2 allPosts {
3 edges {
4 node {
5 content
6 title
7 }
8 }
9 }
10}
这在模板中可用,所以我们可以简单地循环通过项目,因为它们从 Gridsome GraphQL API 返回。
如果您想在 GraphQL 沙盒中测试查询,我们可以到http://localhost:8080/___explore,然后在页面查询部分执行相同的查询并检查结果。
然后当我们回到http://localhost:8080/`时,我们从新闻API中获得标题和内容,因为我们在gridsome.server.js中添加了项目。
我们只使用正常的v-for来渲染来自数组的项目和v-html来显示 API 数据的原始 HTML 内容。
结论
正如你所看到的,我们可以轻松地从REST API中获取数据,使用GridSome和Axios。 数据在项目加载时被收集。 一旦我们收集了数据,我们可以从GridSome自己的GraphQL API中获取数据,以便在我们的模板中显示项目。
以下是您可能喜欢的3篇文章,如果您有兴趣了解更多关于GridSome的文章: