Vue.js 入门
本集成指南遵循 快速入门指南，并假设您已完全完成“动手”路径。您应该能够通过浏览 URL http://localhost:1337/api/restaurants 来使用该 API。
如果您尚未阅读快速入门指南，使用 Vue.js 请求 Strapi API 的方式保持不变，只是您不会获取相同的内容。
创建 Vue.js 应用
使用 Vue CLI 创建基本的 Vue.js 应用。
bash
vue create vue-app
使用 HTTP 客户端
有许多 HTTP 客户端可用，但在本文档中我们将使用 Axios 和 Fetch。
bash
axios
bash
yarn add axios
GET 请求您的集合类型
对 restaurant 集合类型执行 GET 请求以获取您的所有餐厅。
确保您已激活 restaurant 集合类型的 find 权限。
js
axios
js
import axios from 'axios'
axios.get('http://localhost:1337/api/restaurants').then((response) => {
console.log(response)
})
Example response
json
[
{
"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
axios
vue
<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>
<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>
fetch
vue
<script>
export default {
name: 'App',
data() {
return {
restaurants: [],
error: null,
headers: { 'Content-Type': 'application/json' }
}
},
async mounted() {
try {
const response = await fetch('http://localhost:1337/api/restaurants', {
method: 'GET',
headers: this.headers,
}).then(this.checkStatus)
.then(this.parseJSON)
this.restaurants = response
}
catch (error) {
this.error = error
}
},
methods: {
parseJSON(resp) {
return (resp.json ? resp.json() : resp)
},
checkStatus(resp) {
if (resp.status >= 200 && resp.status < 300) {
return resp
}
return this.parseJSON(resp).then((resp) => {
throw resp
})
}
}
}
</script>
<template>
<div id="app">
<div v-if="error">
{{ error }}
</div>
<ul v-else>
<li v-for="restaurant in restaurants" :key="restaurant.id">
{{ restaurant.name }}
</li>
</ul>
</div>
</template>
POST 请求您的集合类型
对“restaurant”集合类型执行“POST”请求以创建餐厅。
确保您已激活“restaurant”集合类型的“create”权限和“category”集合类型的“find”权限。
在此示例中，已创建“japanese”类别，其 ID 为：3。
js
axios
js
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
json
{
"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
axios
vue
<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: {
async handleSubmit(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>
<template>
<div id="app">
<div v-if="error">
{{ error }}
</div>
<form v-else id="form" @submit="handleSubmit">
<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
:id="category.id"
v-model="modifiedData.categories"
type="checkbox"
:value="category.id"
name="categories"
>
</div>
</div>
<input type="submit" value="Submit">
</form>
</div>
</template>
fetch
vue
<script>
export default {
name: 'App',
data() {
return {
allCategories: [],
modifiedData: {
name: '',
description: '',
categories: [],
},
error: null,
headers: { 'Content-Type': 'application/json' }
}
},
async mounted() {
try {
const allCategories = await fetch('http://localhost:1337/api/categories', {
method: 'GET',
headers: this.headers,
}).then(this.checkStatus)
.then(this.parseJSON)
this.allCategories = allCategories
}
catch (error) {
this.error = error
}
},
methods: {
parseJSON(resp) {
return (resp.json ? resp.json() : resp)
},
checkStatus(resp) {
if (resp.status >= 200 && resp.status < 300) {
return resp
}
return this.parseJSON(resp).then((resp) => {
throw resp
})
},
async handleSubmit(e) {
e.preventDefault()
try {
const response = await fetch('http://localhost:1337/api/restaurants', {
method: 'POST',
headers: this.headers,
body: JSON.stringify(this.modifiedData)
}).then(this.checkStatus)
.then(this.parseJSON)
console.log(response)
}
catch (error) {
this.error = error
}
}
}
}
</script>
<template>
<div id="app">
<div v-if="error">
{{ error }}
</div>
<form v-else id="form" @submit="handleSubmit">
<h3>Restaurants</h3>
<br>
<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>
<b>Select categories</b>
<br>
<div v-for="category in allCategories" :key="category.id">
<label>{{ category.name }}</label>
<input
:id="category.id"
v-model="modifiedData.categories"
type="checkbox"
:value="category.id"
name="categories"
>
</div>
</div>
<br>
<input type="submit" value="Submit">
</form>
</div>
</template>
::
PUT 请求您的集合类型
对 restaurant 集合类型执行 PUT 请求，以更新餐厅的类别。
确保您已为 restaurant 集合类型激活 put 权限。
我们认为您的餐厅的 ID 为 2。
您的类别的 ID 为 2。
js
axios
js
import axios from 'axios'
axios
.put('http://localhost:1337/api/restaurants/2', {
categories: [2],
})
.then((response) => {
console.log(response)
})
Example response
json
{
"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"
}
]
}