共计 1611 个字符,预计需要花费 5 分钟才能阅读完成。
最近想要搭建一个动态网站,动静获取数据,于是就发现了 Gridsome,后端想要应用 strapi,于是发现了,strapi+ Gridsome 的开箱即用的我的项目。
GitHub 地址:strapi-starter-gridsome-blog
一,我的项目搭建
1.1 应用如下命令,能够疾速搭建前后端。my-project 为文件夹名,可自定义批改。
# Using Yarn
yarn create strapi-starter my-project gridsome-blog
# Or using NPM
npx create-strapi-starter my-project gridsome-blog
1.2,文件构造
|--my-project
|---backend
|---frontend
backend 是寄存 strapi 的我的项目内容
frontend 是寄存 gridsome 的我的项目。
1.3,启动我的项目
进入我的项目目录,别离启动 strapi 和 gridsome
strapi 启动地址:http://localhost:1337/admin
gridsome 启动地址:http://localhost:8082/
gridsome 数据查问地址:http://localhost:8082/___explore ————能够通过这个地址,间接测试数据。
他是一个开箱即用的我的项目,也有写好的数据操作,相当方便使用。
二,我的项目根本应用
2.1,创立新的 page
能够在 gridsome.server.js 文件里,通过 createPage API 创立
module.exports = function (api) {api.createPages(async ({ graphql, createPage}) => {const { data} = await graphql(`
{
strapi {
gameInfos {slug}
}
}
`);
// Create blog articles pages.
const gameInfos = data.strapi.gameInfos;
gameInfos.forEach((gameInfos) => {
createPage({path: `/gameInfos/${gameInfos.slug}`,
component: "./src/templates/gameInfos.vue",
context: {slug: gameInfos.slug,},
});
});
});
};
gameInfos 示意,在 strapi 后盾创立的 COLLECTION TYPES
页面将通过 slug 辨别并创立新的路由。
2.2,页面数据内容
间接在 <page-query> 标签内,应用 Graphql 语法,就能够间接获取数据,
<page-query>
query($slug: String!) {
strapi {articles(where: { slug: $slug}) {
title
description
content
published_at
image {url}
author {
name
picture {url}
}
}
}
}
</page-query>
HTML:
<h1>{{$page.strapi.articles[0].title }}</h1>
注:
gridsome 中 layout 下 default.vue 文件是全局默认援用,如果不想应用,能够起别名。
引申:
这个我的项目采纳的是 Graphql。
GraphQL 是一个用于 API 的查询语言,是一个应用基于类型零碎来执行查问的服务端运行时(类型零碎由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依附你现有的代码和数据撑持。
官网地址:https://graphql.cn/learn/quer…
1,根本应用
以下是你想要查问的数据。
{
hero {name}
}
查问的后果是
{
"data": {
"hero": [
{name: "test1"},
{name: "test2"}
]
}
}