Как построить Vue Front End для CMS без головы

• Он создает экземпляр axios, который настроен для выполнения авторизованных запросов к вашей серверной части GraphCMS.
• Он содержит запросы и мутации GraphQL, используемые в этом проекте. Они отвечают за выборку постов (по категориям или по слагам), а также за создание новых комментариев. Если вы хотите узнать больше о запросах и мутациях GraphQL, обратитесь к документации GraphQL .

Вы также можете использовать проводник API на панели инструментов вашего проекта, чтобы проверить эти запросы и мутации. Для этого скопируйте запрос или мутацию из приведенного выше кода и вставьте его в верхнее окно проводника API. Введите любые переменные запроса в окне ниже этого, затем нажмите кнопку Play . Вы должны увидеть результаты в новой панели справа.

Вот пример запроса:

Вот пример мутации:

Отображение данных в шаблоне

Теперь давайте создадим наш HTML-шаблон в нашем src/components/PostList.vue который будет аккуратно отображать список сообщений. Мы также добавим код axios, который будет извлекать данные posts из нашей базы данных GraphCMS:

 <template> <section class="post-list"> <h1>{{ category }} Articles</h1> <hr/> <b-row v-if="loading"> <b-col class="text-center"> <div class="lds-dual-ring"></div> </b-col> </b-row> <div v-if="!loading" > <b-card tag="article" v-for="post in posts" :key="post.id" :title="post.title" :sub-title="post.categories.map(cat => cat.name).toString()"> <p class="card-text"> {{ post.content }} </p> <router-link class="btn btn-primary" :to="'post/' + post.slug"> Read Post </router-link> </b-card> </div> </section> </template> <script> import { ENDPOINT, apiClient, POSTS_BY_CATEGORY_QUERY } from "../graphcms.js"; export default { name: "PostList", data() { return { category: "", loading: false, posts: [] }; }, methods: { async fetchPosts() { try { this.loading = true; const response = await apiClient.post(ENDPOINT, { query: POSTS_BY_CATEGORY_QUERY, variables: { category: this.category } }); const body = await response.data.data; this.posts = await body.category.posts; this.loading = false; } catch (error) { console.log(error); } } }, created() { this.category = this.$route.name; this.fetchPosts(); }, watch: { $route() { this.category = this.$route.name; this.posts = []; this.fetchPosts(); } } }; </script> <style> h1{ margin-top: 25px !important; } .lds-dual-ring { display: inline-block; width: 64px; height: 64px; } .lds-dual-ring:after { content: " "; display: block; width: 46px; height: 46px; margin: 1px; border-radius: 50%; border: 5px solid #ccc; border-color: #ccc transparent #ccc transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> 

Давайте быстро пройдемся по основным функциям кода:

• Загрузка . Когда запрос сделан, загрузочный счетчик отображается, чтобы указать пользователю, что что-то выполняется. Когда запрос выполнен, загрузочный счетчик заменяется списком постов.
• Запрос Чтобы получить список постов по категориям, я обнаружил, что проще запросить категорию, а затем использовать отношение категории к постам, чтобы получить доступ к отфильтрованным постам.
• Создано Когда страница загружается в первый раз, fetchPosts() вызывается из created хука жизненного цикла.
• Смотреть Когда URL-адрес маршрута меняется, fetchPosts() вызывается каждый раз.

После внесения этих изменений у вас должно появиться следующее представление:

Отображение отдельной записи

Убедитесь, что верхняя основная навигация работает как положено. Давайте теперь поработаем над компонентом Post . Он будет иметь свою собственную fetchPost() , где он будет запрашивать slug . Если вам интересно, откуда slug параметр slug , позвольте мне напомнить вам об этом router.js кода, который мы поместили в router.js :

 //... { path: '/post/:slug', name: 'Post', component: Post }, //... 

Это означает, что все, что идет после /post/ в URL-адресе, доступно нам в компоненте, как this.$route.params.slug .

Компонент post является родителем компонентов CommentForm и CommentList . Данные comments будут переданы в качестве реквизита компоненту CommentList из записи Posts. Давайте сейчас src/components/CommentList.vue код для src/components/CommentList.vue :

 <template> <section class="comment-list"> <hr/> <h4 class="text-muted">Comments</h4> <b-card v-for="comment in comments" :title="comment.name" title-tag="h5" :key="comment.id"> <p class="card-text text-muted">{{ comment.message }} </p> </b-card> <p v-if="comments.length === 0" class="text-center text-muted">No comments posted yet!</p> </section> </template> <script> export default { name: "CommentsList", props: ["comments"] }; </script> 

Если вы не вводили комментарии вручную через панель управления GraphCMS, пока не ожидайте увидеть какие-либо результаты. Давайте добавим код в src/components/CommentForm.vue , который позволит пользователям добавлять комментарии к сообщению в блоге:

 <template> <section class="comment-form"> <h4 class="text-muted">Comment Form</h4> <b-form @submit.prevent="onSubmit"> <b-form-group label="Name"> <b-form-input id="input-name" type="text" v-model="name" placeholder="Enter your name" required></b-form-input> </b-form-group> <b-form-group label="Message"> <b-form-textarea id="input-message" v-model="message" placeholder="Enter your comment" :rows="3" :max-rows="6" required> </b-form-textarea> </b-form-group> <b-button type="submit" variant="primary">Submit</b-button> </b-form> </section> </template> <script> import { apiClient, ENDPOINT, CREATE_COMMENT_MUTATION } from "../graphcms.js"; export default { name: "CommentForm", props: ["post"], data() { return { name: "", message: "" }; }, methods: { async onSubmit() { const formattedComment = { name: this.name, message: this.message, post: { id: this.post.id } }; try { const response = await apiClient.post(ENDPOINT, { query: CREATE_COMMENT_MUTATION, variables: formattedComment }); const body = await response.data.data; const newComment = body.createComment; this.post.comments.push(newComment); this.name = ""; this.message = ""; } catch (error) { console.log(error); } } } }; </script> <style> .comment-form { margin-top: 35px; } </style> 

Теперь у нас есть базовая форма комментариев, позволяющая отправить новый комментарий в нашу серверную систему GraphQL. Как только новый комментарий будет сохранен, мы возьмем возвращенный объект и добавим его в массив post.comments . Это должно вызвать компонент CommentList для отображения недавно добавленного Comment .

Давайте теперь src/components/Post.vue компонент src/components/Post.vue :

 <template> <section class="post"> <b-row v-if="loading"> <b-col> <div class="lds-dual-ring text-center"></div> </b-col> </b-row> <b-row v-if="!loading"> <b-col> <h1>{{post.title}}</h1> <h4 class="text-muted">{{post.categories.map(cat => cat.name).toString()}}</h4> <hr> <p>{{ post.content }}</p> </b-col> </b-row> <!-- List of comments --> <b-row v-if="!loading"> <b-col> <CommentList :comments="post.comments" /> </b-col> </b-row> <!-- Comment form --> <b-row v-if="!loading"> <b-col> <CommentForm :post="post" /> </b-col> </b-row> </section> </template> <script> import { ENDPOINT, apiClient, POST_BY_SLUG_QUERY } from "../graphcms.js"; import CommentList from "@/components/CommentList"; import CommentForm from "@/components/CommentForm"; export default { name: "Post", components: { CommentList, CommentForm }, data() { return { loading: false, slug: "", post: {} }; }, methods: { async fetchPost() { try { this.loading = true; const response = await apiClient.post(ENDPOINT, { query: POST_BY_SLUG_QUERY, variables: { slug: this.slug } }); const body = await response.data.data; this.post = body.post; this.loading = false; } catch (error) { console.log(error); } } }, created() { this.slug = this.$route.params.slug; this.fetchPost(); } }; </script> 

Наконец, вот код для src/views/PostView.vue чтобы связать все вместе:

 <template> <div class="post-view"> <Post/> </div> </template> <script> import Post from "@/components/Post.vue"; export default { name: "PostView", components: { Post } }; </script> 

Теперь вы должны иметь следующий вид для сообщений. Обратите внимание на :slug в конце URL localhost:8080/post/fashion-post-1 :

В приведенном выше примере я добавил пару комментариев, чтобы протестировать новую функцию. Убедитесь, что вы делаете то же самое на своем.

Резюме

Я надеюсь, вы видели, как легко создать блог-сайт с помощью Vue.js и GraphQL. Если бы вы использовали обычный PHP и MySQL, вы бы написали гораздо больше кода. Даже с PHP-фреймворком вы все равно написали бы больше кода для простого блогового приложения.

Ради этого урока я должен был сделать вещи максимально простыми. Вы можете заметить, что этот блог-проект далек от минимальной настройки блога. Есть несколько вещей, которые мы не рассмотрели, такие как обработка ошибок, проверка формы и кэширование. В заключение я рекомендую Apollo Client , так как он имеет механизмы для кэширования результатов запросов GraphQL. Тогда, конечно, должна быть модель автора и надлежащая система комментариев, которая поддерживает аутентификацию и утверждение сообщений.

Если вы готовы, пожалуйста, продолжайте этот простой блог Vue.js GraphCMS еще дальше.