Vue3 + Vant3 构建类掘金 Web 应用程序：打造完善的圈子功能

2023-10-25 06:26:50

前言

在上一篇文章中，我们完成了圈子详情页面的基本信息展示和圈子下沸点的列表展示。现在，我们将进一步完善圈子功能，实现用户加入和创建圈子的功能，打造一个完整的圈子生态系统。

圈子列表页

在圈子列表页，我们将展示所有可用的圈子，并允许用户快速浏览并加入感兴趣的圈子。

数据请求

首先，我们需要从后端获取圈子列表数据。这可以通过发送一个 GET 请求到 /api/circles 端点来完成。

import { ref } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const circles = ref([])

    const fetchCircles = async () => {
      try {
        const response = await axios.get('/api/circles')
        circles.value = response.data
      } catch (error) {
        console.error(error)
      }
    }

    fetchCircles()

    return {
      circles
    }
  }
}

列表展示

有了圈子列表数据后，我们就可以使用 Vant 的 Cell 组件来展示圈子列表了。

<van-cell-group v-for="circle in circles" :key="circle.id">
  <van-cell :title="circle.name" :label="circle.description" is-link to={`/circles/${circle.id}`} />
</van-cell-group>

圈子详情页

在圈子详情页，我们将展示圈子的详细信息，包括名称、、成员列表以及加入或创建按钮。

数据请求

首先，我们需要从后端获取圈子的详细信息。这可以通过发送一个 GET 请求到 /api/circles/:id 端点来完成，其中 :id 是圈子的 ID。

import { ref } from 'vue'
import axios from 'axios'

export default {
  setup(props) {
    const circle = ref({})

    const fetchCircle = async () => {
      try {
        const response = await axios.get(`/api/circles/${props.id}`)
        circle.value = response.data
      } catch (error) {
        console.error(error)
      }
    }

    fetchCircle()

    return {
      circle
    }
  }
}

页面展示

有了圈子详细信息后，我们就可以使用 Vant 的 Card、Button 和 Tag 组件来展示圈子详情页了。

<template>
  <van-card>
    <template #title>
      <h1>{{ circle.name }}</h1>
      <van-tag type="success" plain>{{ circle.type }}</van-tag>
    </template>
    <van-card-description>{{ circle.description }}</van-card-description>
    <van-button v-if="!circle.isMember" type="primary" @click="joinCircle">加入</van-button>
    <van-button v-else @click="quitCircle">退出</van-button>
    <van-cell-group title="成员">
      <van-cell v-for="member in circle.members" :key="member.id" is-link>{{ member.username }}</van-cell>
    </van-cell-group>
  </van-card>
</template>

<script>
import { ref } from 'vue'
import { joinCircle, quitCircle } from '@/api/circles'

export default {
  setup() {
    const circle = ref({})

    const joinCircle = async () => {
      try {
        await joinCircle(circle.value.id)
        circle.value.isMember = true
      } catch (error) {
        console.error(error)
      }
    }

    const quitCircle = async () => {
      try {
        await quitCircle(circle.value.id)
        circle.value.isMember = false
      } catch (error) {
        console.error(error)
      }
    }

    return {
      circle,
      joinCircle,
      quitCircle
    }
  }
}
</script>

用户操作

加入圈子

当用户点击加入按钮时，我们需要发送一个 POST 请求到 /api/circles/:id/join 端点，其中 :id 是圈子的 ID。

import { ref } from 'vue'
import { joinCircle } from '@/api/circles'

export default {
  setup(props) {
    const circle = ref({})

    const joinCircle = async () => {
      try {
        await joinCircle(circle.value.id)
        circle.value.isMember = true
      } catch (error) {
        console.error(error)
      }
    }

    return {
      circle,
      joinCircle
    }
  }
}

退出圈子

当用户点击退出按钮时，我们需要发送一个 DELETE 请求到 /api/circles/:id/quit 端点，其中 :id 是圈子的 ID。

import { ref } from 'vue'
import { quitCircle } from '@/api/circles'

export default {
  setup(props) {
    const circle = ref({})

    const quitCircle = async () => {
      try {
        await quitCircle(circle.value.id)
        circle.value.isMember = false
      } catch (error) {
        console.error(error)
      }
    }

    return {
      circle,
      quitCircle
    }
  }
}