Skip to main content

Vue.js 入门

¥Getting Started with Vue.js

🧹 删除了集成指南

Strapi 文档团队专注于改进 Strapi 5 核心体验的文档。我们将在未来 6 个月内发布许多更改，请密切关注👀。

¥The Strapi Documentation team focuses on improving the documentation for Strapi 5's core experience. We will release many changes in the next 6 months, so please keep an eye out 👀.

因此，当前页面现在仅处于维护模式，可能未完全与 Strapi 5 保持同步，并且很快将从 docs.strapi.io 中删除并移至 Strapi 的 集成页面。

¥As a result, the present page is now in maintenance mode only, might not be fully up-to-date with Strapi 5, and will soon be removed from docs.strapi.io and moved to Strapi's integrations page.

同时，如果你想帮助我们改进此页面，请随时 contribute 到文档的 GitHub 存储库。

¥In the meantime, if you want to help us improve this page, please feel free to contribute to the documentation's GitHub repository.

本集成指南遵循 快速入门指南。你应该能够通过浏览 URL http://localhost:1337/api/restaurants 使用该 API。

¥This integration guide follows the Quick Start Guide. You should be able to consume the API by browsing the URL http://localhost:1337/api/restaurants.

如果你尚未阅读快速入门指南，则使用 Vue.js 请求 Strapi API 的方式将保持不变，只是你不获取相同的内容。

¥If you haven't gone through the Quick Start Guide, the way you request a Strapi API with Vue.js remains the same except that you do not fetch the same content.

创建一个 Vue.js 应用​

¥Create a Vue.js app

使用 Vue CLI 创建一个基本的 Vue.js 应用。

¥Create a basic Vue.js application using Vue CLI.

vue create vue-app

使用 HTTP 客户端​

¥Use an HTTP client

许多 HTTP 客户端都可用，但在本文档中我们将使用 Axios 和 拿来。

¥Many HTTP clients are available but in this documentation we'll use Axios and Fetch.

yarn add axios

GET 请求你的集合类型​

¥GET Request your collection type

对 restaurant 集合类型执行 GET 请求以获取所有餐厅。

¥Execute a GET request on the restaurant collection type in order to fetch all your restaurants.

确保你激活了 restaurant 集合类型的 find 权限。

¥Be sure that you activated the find permission for the restaurant collection type.

Example GET request with axios
import axios from 'axios';

axios.get('http://localhost:1337/api/restaurants').then(response => {
  console.log(response);
});
Example response
[
  {
    "id": 1,
    "name": "Biscotte Restaurant",
    "description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
    "created_by": {
      "id": 1,
      "firstname": "Paul",
      "lastname": "Bocuse",
      "username": null
    },
    "updated_by": {
      "id": 1,
      "firstname": "Paul",
      "lastname": "Bocuse",
      "username": null
    },
    "created_at": "2020-07-31T11:37:16.964Z",
    "updated_at": "2020-07-31T11:37:16.975Z",
    "categories": [
      {
        "id": 1,
        "name": "French Food",
        "created_by": 1,
        "updated_by": 1,
        "created_at": "2020-07-31T11:36:23.164Z",
        "updated_at": "2020-07-31T11:36:23.172Z"
      }
    ]
  }
]

示例​

¥Example

./src/App.vue

<template>
  <div id="app">
    <div v-if="error">
      {{ error }}
    </div>
    <ul v-else>
      <li v-for="restaurant in restaurants" :key="restaurant.id">
        {{ restaurant.attributes.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data () {
    return {
      restaurants: [],
      error: null
    }
  },
  async mounted () {
    try {
      const response = await axios.get('http://localhost:1337/api/restaurants')
      this.restaurants = response.data.data
    } catch (error) {
      this.error = error;
    }
  }
}
</script>

POST 请求你的集合类型​

¥POST Request your collection type

对 restaurant 集合类型执行 POST 请求以创建餐厅。

¥Execute a POST request on the restaurant collection type in order to create a restaurant.

确保你激活了 restaurant 集合类型的 create 权限和 category 集合类型的 find 权限。

¥Be sure that you activated the create permission for the restaurant collection type and the find permission for the category Collection type.

在此示例中，已创建 japanese 类别，其 ID 为：3.

¥In this example a japanese category has been created which has the id: 3.

Example POST request with axios
import axios from 'axios';

axios
  .post('http://localhost:1337/api/restaurants', {
    name: 'Dolemon Sushi',
    description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
    categories: [3],
  })
  .then(response => {
    console.log(response);
  });
Example response
{
  "id": 2,
  "name": "Dolemon Sushi",
  "description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
  "created_by": null,
  "updated_by": null,
  "created_at": "2020-08-04T09:57:11.669Z",
  "updated_at": "2020-08-04T09:57:11.669Z",
  "categories": [
    {
      "id": 3,
      "name": "Japanese",
      "created_by": 1,
      "updated_by": 1,
      "created_at": "2020-07-31T11:36:23.164Z",
      "updated_at": "2020-07-31T11:36:23.172Z"
    }
  ]
}

示例​

¥Example

./src/App.vue

<template>
<div id="app">
  <div v-if="error">
    {{ error }}
  </div>

  <form id="form" v-on:submit="handleSubmit" v-else>
    <label for="name">Name</label>
    <input id="name" v-model="modifiedData.name" type="text" name="name">

    <label for="description">Description</label>
    <input id="description" v-model="modifiedData.description" type="text" name="description">

    <div>
      <br />
      Select categories
      <div v-for="category in allCategories" :key="category.id">
        <label>{{ category.name }}</label>
        <input
          type="checkbox"
          :value="category.id"
          v-model="modifiedData.categories"
          name="categories"
          :id="category.id"
        />
      </div>
    </div>

    <input type="submit" value="Submit">
  </form>

</div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      allCategories: [],
      modifiedData: {
        name: '',
        description: '',
        categories: [],
      },
      error: null
    }
  },
  async mounted() {
    try {
      const response = await axios.get('http://localhost:1337/api/categories')
      this.allCategories = response.data;
    } catch (error) {
      this.error = error;
    }
  },
  methods: {
    handleSubmit: async function(e) {
      e.preventDefault();

      try {
        const response = await axios.post('http://localhost:1337/api/restaurants', this.modifiedData)
        console.log(response);
      } catch(error) {
        this.error = error;
      }
    }
  }
}
</script>

PUT 请求你的集合类型​

¥PUT Request your collection type

对 restaurant 集合类型执行 PUT 请求以更新餐厅的类别。

¥Execute a PUT request on the restaurant collection type in order to update the category of a restaurant.

确保你激活了 restaurant 集合类型的 put 权限。

¥Be sure that you activated the put permission for the restaurant collection type.

我们认为你的餐厅 ID 是 2。你的类别 ID 是 2。

¥We consider that the id of your restaurant is 2. and the id of your category is 2.

Example PUT request with axios
import axios from 'axios';

axios
  .put('http://localhost:1337/api/restaurants/2', {
    categories: [2],
  })
  .then(response => {
    console.log(response);
  });
Example response
{
  "id": 2,
  "name": "Dolemon Sushi",
  "description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
  "created_by": null,
  "updated_by": null,
  "created_at": "2020-08-04T10:21:30.219Z",
  "updated_at": "2020-08-04T10:21:30.219Z",
  "categories": [
    {
      "id": 2,
      "name": "Brunch",
      "created_by": 1,
      "updated_by": 1,
      "created_at": "2020-08-04T10:24:26.901Z",
      "updated_at": "2020-08-04T10:24:26.911Z"
    }
  ]
}