Cara melaksanakan pengesyoran resipi dan perkongsian resipi dalam uniapp

Cara melaksanakan cadangan resipi dan perkongsian resipi dalam uniapp

Memandangkan orang ramai memberi perhatian yang lebih kepada pemakanan sihat, permintaan untuk mendapatkan cadangan resipi dan perkongsian resipi juga semakin meningkat. Dalam uniapp, kami melaksanakan pengesyoran resipi dan fungsi perkongsian resipi dengan menggunakan fungsi seperti pembangunan awan, permintaan antara muka dan komponen. Artikel ini akan memperincikan cara melaksanakan kedua-dua fungsi ini dalam uniapp dan memberikan contoh kod khusus.

1. Pelaksanaan fungsi pengesyoran resipi

1. Mencipta pangkalan data pembangunan awan

Dalam projek uniapp, kita perlu mencipta pangkalan data pembangunan awan untuk menyimpan data resipi. Dalam alat pembangun, pilih "Pembangunan Awan" dan ikut gesaan untuk mencipta persekitaran pembangunan awan.

2. Tambah data resipi dalam pangkalan data pembangunan awan

Dalam konsol pembangunan awan, buat koleksi bernama "resipi" dan tambah data resipi dalam koleksi. Setiap data resipi termasuk medan seperti nama hidangan, gambar, ramuan dan kaedah.

3. Buat halaman untuk memaparkan cadangan resipi

Dalam projek uniapp, buat halaman bernama "syor" untuk memaparkan resipi yang disyorkan. Dalam fail vue halaman ini, data resipi dalam pangkalan data awan diperoleh melalui permintaan API pembangunan awan dan dipaparkan pada halaman.

Contoh kod: recommend.vue

<template>
  <view>
    <view v-for="(recipe, index) in recipeList" :key="index">
      <image :src="recipe.image"></image>
      <text>{{recipe.name}}</text>
      <text>{{recipe.ingredients}}</text>
      <text>{{recipe.steps}}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recipeList: []
    }
  },
  async created() {
    const db = uniCloud.database()
    const res = await db.collection('recipes').limit(5).get()
    this.recipeList = res.data
  }
}
</script>

<style>
/* 样式 */
</style>

2. Pelaksanaan fungsi perkongsian resipi

1. Buat halaman untuk berkongsi resipi

Dalam projek uniapp, buat halaman bernama "kongsi" untuk berkongsi resipi . Dalam fail vue pada halaman ini, pengguna boleh memasukkan maklumat yang berkaitan tentang resipi, termasuk medan seperti nama hidangan, gambar, ramuan dan kaedah.

Contoh kod: share.vue

<template>
  <view>
    <input v-model="recipe.name" type="text" placeholder="菜名"></input>
    <input v-model="recipe.image" type="text" placeholder="图片"></input>
    <input v-model="recipe.ingredients" type="text" placeholder="食材"></input>
    <input v-model="recipe.steps" type="text" placeholder="做法"></input>
    <button @click="shareRecipe">分享食谱</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recipe: {
        name: '',
        image: '',
        ingredients: '',
        steps: ''
      }
    }
  },
  methods: {
    async shareRecipe() {
      const db = uniCloud.database()
      await db.collection('recipes').add(this.recipe)
      uni.showToast({
        title: '分享成功',
        duration: 2000
      })
    }
  }
}
</script>

<style>
/* 样式 */
</style>

Di atas ialah contoh kod khusus untuk melaksanakan pengesyoran resipi dan fungsi perkongsian resipi dalam uniapp. Melalui kod di atas, kami boleh melaksanakan pengesyoran resipi mudah dan platform perkongsian dalam uniapp, di mana pengguna boleh menyemak imbas resipi yang disyorkan dan berkongsi resipi mereka sendiri. Sudah tentu, mengikut keperluan sebenar, kita boleh menambah baik lagi fungsi dan mencantikkan serta mengoptimumkan antara muka. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci Cara melaksanakan pengesyoran resipi dan perkongsian resipi dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!