Strapi——渲染产品

上一篇已经准备好了端点，接下来让我们创建客户机来使用在服务器上准备的数据并向客户展示这些产品。

Vue app setup

为此，我们将使用Vue CLI工具构建一个新的Vue项目。如果您还没有安装Vue CLI，运行以下命令:

npm install -g @vue/cli-service-global
#OR
yarn global add @vue/cli-service-global

创建并启动新的Vue项目，请运行以下命令:

//create a new Vue project:
vue create vue-strapi

Styling

根据个人情况选择样式，这里我以Bootstrap为例：

• 安装

  npm i bootstrap bootstrap-vue
  

• 引入

  在main.js引入Bootstrap：

  import "bootstrap/dist/css/bootstrap.css";
  import "bootstrap-vue/dist/bootstrap-vue.css";
  import BootstrapVue from "bootstrap-vue";
  Vue.use(BootstrapVue);
  

Fetch the products

在前面创建的vue项目中新增Meals.vue文件，其内容如下：

• 获取数据

  <script>
  export default {
    data() {
      return {
        meals: [],
      };
    },
    mounted() {
      fetch("http://localhost:1337/products")
        .then((res) => res.json())
        .then((data) => {
          this.meals = data;
          console.log(this.meals);
        });
    }
  };
  </script>
  

  

• UI组件展示产品

  <template>
    <b-container>
      <div v-if="meals.length">
        <b-row>
          <div v-bind:key="meal.index" v-for="meal in meals">
            <b-col l="4">
              <b-card :img-src="'http://localhost:1337' + meal.image[0].formats.thumbnail.url" v-bind:title="meal.title" img-alt="Image" img-top tag="article" style="max-width: 20rem;" class="mb-2">
                <b-card-text>{{ `${meal.description}` }}b-card-text>
                <span>
                  <strong>Price: ${{ `${meal.price}` }} strong>
                span>
                <b-button variant="primary">Order mealb-button>
              b-card>
            b-col>
          div>
        b-row>
      div>
      <div v-else>
        <h5>Fetching meals . . .h5>
      div>
    b-container>
  template>
  

此时访问:http://localhost:8080/,即可看见以下界面：

为了尽可能像电商网站，我们可以加个navbar，如下所示：

• 新建navbar.vue文件，内容如下：

  <template>
    <div>
      <b-navbar toggleable="lg" type="dark" variant="info">
        <b-navbar-brand href="#">MealsHubb-navbar-brand>
        <b-navbar-toggle target="nav-collapse">b-navbar-toggle>
        <b-collapse id="nav-collapse" is-nav>
          <b-navbar-nav class="ml-auto">
            <b-nav-form>
              <b-form-input
                size="sm"
                class="mr-sm-2"
                placeholder="Search"
              >b-form-input>
              <b-button size="sm" class="my-2 my-sm-0" type="submit"
                >Searchb-button
              >
            b-nav-form>
            <b-nav-item-dropdown right>
              <template v-slot:button-content>
                <em>Userem>
              template>
              <b-dropdown-item href="#">Profileb-dropdown-item>
              <b-dropdown-item href="#">Sign Outb-dropdown-item>
            b-nav-item-dropdown>
          b-navbar-nav>
        b-collapse>
      b-navbar>
    div>
  template>
  

• 在Meals.vue文件引入以上文件，其效果如下：

  
  大概流程就这样了，更详细内容请参考官网：https://strapi.io/documentation/v3.x/