vue实现社区集市

Vue 实现社区集市功能

社区集市功能通常包括商品展示、搜索、发布、购买、评论等模块。以下是基于 Vue 的实现方案：

技术栈选择

• Vue 3（Composition API）
• Vue Router 管理路由
• Pinia/Vuex 状态管理
• Axios 处理 HTTP 请求
• Vant/Element UI 组件库（可选）
• 后端接口：RESTful API 或 GraphQL

核心功能实现

商品列表展示

<template>
  <div class="goods-list">
    <van-card
      v-for="item in goodsList"
      :key="item.id"
      :price="item.price"
      :desc="item.description"
      :title="item.title"
      :thumb="item.coverImage"
      @click="goDetail(item.id)"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getGoodsList } from '@/api/market'

const goodsList = ref([])

onMounted(async () => {
  goodsList.value = await getGoodsList()
})

const goDetail = (id) => {
  router.push(`/detail/${id}`)
}
</script>

商品搜索功能

<template>
  <van-search
    v-model="searchText"
    placeholder="搜索商品"
    @search="onSearch"
  />
</template>

<script setup>
import { ref } from 'vue'
import { searchGoods } from '@/api/market'

const searchText = ref('')
const searchResult = ref([])

const onSearch = async () => {
  searchResult.value = await searchGoods(searchText.value)
}
</script>

商品发布功能

<template>
  <van-form @submit="onSubmit">
    <van-field
      v-model="form.title"
      name="title"
      label="商品名称"
      placeholder="请输入商品名称"
      :rules="[{ required: true }]"
    />
    <van-field
      v-model="form.price"
      type="number"
      name="price"
      label="价格"
      placeholder="请输入价格"
    />
    <van-field
      v-model="form.desc"
      rows="2"
      autosize
      name="desc"
      label="商品描述"
      type="textarea"
      placeholder="请输入商品描述"
    />
    <van-button block type="primary" native-type="submit">
      发布商品
    </van-button>
  </van-form>
</template>

<script setup>
import { ref } from 'vue'
import { postGoods } from '@/api/market'

const form = ref({
  title: '',
  price: 0,
  desc: ''
})

const onSubmit = async () => {
  await postGoods(form.value)
}
</script>

状态管理设计

使用 Pinia 管理全局状态：

// stores/market.js
import { defineStore } from 'pinia'

export const useMarketStore = defineStore('market', {
  state: () => ({
    cartItems: [],
    favorites: []
  }),
  actions: {
    addToCart(item) {
      this.cartItems.push(item)
    },
    addToFavorites(item) {
      this.favorites.push(item)
    }
  }
})

路由配置

// router/index.js
import { createRouter } from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/market',
    component: () => import('@/views/Market.vue')
  },
  {
    path: '/detail/:id',
    component: () => import('@/views/Detail.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

性能优化建议

• 使用 Vue 的 keep-alive 缓存页面
• 实现图片懒加载
• 分页加载商品列表
• 使用防抖处理搜索输入
• 按需加载组件

安全注意事项

• 对用户输入进行验证和过滤
• 实现权限控制（如未登录不能发布商品）
• 敏感操作需要二次确认
• 接口请求需要身份验证

以上方案可根据实际需求进行调整和扩展，建议配合后端接口实现完整功能。对于更复杂的场景，可以考虑加入 WebSocket 实现实时通讯功能。