हम Nuxt.js, GraphQL, Strapi और स्ट्राइप का उपयोग करके खाद्य वितरण सेवा का एक क्लोन बनाते हैं। भाग 2/7

में पिछले भाग, हम आवेदन की संरचना की स्थापना की, इस लेख में हम Strapi एपीआई की स्थापना की और रेस्तरां की एक सूची प्रदर्शित करेगा।

नोट: लेखों की पूरी श्रृंखला के लिए स्रोत कोड यहां उपलब्ध है ।

हम रेस्टोरेंट बनाते हैं

सबसे पहले, हमें अपने आवेदन में रेस्तरां की एक सूची प्रदर्शित करने की आवश्यकता है। बेशक, हम इस सूची को स्ट्रैपी एपीआई के माध्यम से प्रबंधित करेंगे, तो चलिए इसे कॉन्फ़िगर करते हैं।

Content Type

Content Type, (model). Strapi API user. , restaurant( ).

:

•  http://localhost:1337/admin/plugins/content-type-builder
• Create new content-type
•  restaurant  "Continue"
• :
  
  • name   Text
  • description   Rich Text
  • image  Media
• "Finish" "Save"

Restaurant .

! , . Restaurant .

Content Manager, , .

•   Add New Restaurant
•  name,  description   image

.

— . API . restaurant, Strapi api/restaurant. , CRUD API. find : http://localhost:1337/restaurants.

URL, 403 . : Strapi API .

, :

•   Roles & Permissions http://localhost:1337/admin/plugins/users-permissions.
•  Public
•  find  findone   Restaurant

: authenticated

•   Roles & Permissions  http://localhost:1337/admin/plugins/users-permissions.
• Authenticated
•  find  findone   Restaurant
• .

 http://localhost:1337/restaurants, .

GraphQL

API REST . , GraphQL 10 ?

.

GraphQL Strapi, /backend:

yarn strapi install graphql
# 
npm run strapi install graphql

, .

• (yarn develop  npm run develop)
•  http://localhost:1337/graphql  :

{
      restaurants {
        id #  _id    MongoDB
        name
      }
}

, :

• GraphQL @nuxt-apollo /frontend

yarn add @nuxtjs/apollo graphql
# 
npm install @nuxtjs/apollo graphql

apollo nuxt.config.js:

    ...
    modules: [ '@nuxtjs/apollo',
    ],
    apollo: { clientConfigs: { default: { httpEndpoint: 'http://localhost:1337/graphql' } }
    },
    ...

. Nuxt ? .

• ./pages/restaurants/index.vue :

<template>  
      <div>
          //  
          <form class="uk-search uk-search-large uk-align-center uk-margin">
              <span uk-search-icon></span>
              <input class="uk-search-input" v-model="query" type="search" placeholder="Search...">
          </form>

          //   
          <div class="uk-card uk-card-default uk-grid-collapse uk-child-width-1-2@m uk-margin" v-for="restaurant in filteredList" v-bind:key="restaurant" uk-grid>
              <div class="uk-card-media-left uk-cover-container">
                  <img :src="'http://localhost:1337/' + restaurant.image.url" alt="" uk-cover>
                  <canvas width="600" height="400"></canvas>
              </div>
              <div>
                  <div class="uk-card-body">
                      <h3 class="uk-card-title">{{ restaurant.name }}</h3>
                      <p>{{ restaurant.description }}</p>
                      //   
                      <router-link :to="{ name: 'restaurants-id', params: { id: restaurant.id }}" tag="a" class="uk-button uk-button-primary">See dishes
                      </router-link>
                  </div>
              </div>
          </div>

          //    
          <div class="uk-container uk-container-center uk-text-center" v-if="filteredList.length == 0">
           <img src="https://assets-ouch.icons8.com/preview/19/52de2377-696e-4194-8c63-0a81aef60b4f.png" height="800" width="800">
           <p>No restaurants found</p>
         </div>

      </div>

</template>

<script>  
    //   
    import restaurantsQuery from '~/apollo/queries/restaurant/restaurants'

    export default {  
      data() {
        return {
          //     
          restaurants: [],
          query: ''
        }
      },
      apollo: {
        restaurants: {
          prefetch: true,
          query: restaurantsQuery
        }
      },
      computed: {
        //  
        filteredList() {
          return this.restaurants.filter(restaurant => {
            return restaurant.name.toLowerCase().includes(this.query.toLowerCase())
          })
        },
      }
    }
</script>

?

— . Vue.js .

, Vue.js:

1. v-for: (restaurants ).
2. v-if: .
3. v-model: . .
4. vue-router: .

.

GraphQL

, restaurantsQuery GraphQL apollo :

...
apollo: { restaurants: { prefetch: true, query: restaurantsQuery }
},
...

Strapi API.

• /frontend/apollo/queries/restaurant/restaurants.gql :

    query Restaurants {  
      restaurants {
        id
        name
        description
        image {
          url
        }
      }
    }

! !

.