如何在uniapp中实现菜谱推荐和食谱分享

<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>

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