中奖播报 - 基于Vue3+Vant3打造的类掘金App项目

2023-12-26 20:35:36

前言

掘金是一个面向程序员的中文技术社区，深受广大程序员的喜爱。在这个项目中，我们将使用Vue3和Vant3构建一个类掘金App。该App将具有中奖播报功能，允许用户查看最新中奖信息。

项目环境设置

首先，我们需要设置项目环境。请确保您已安装了Node.js和npm。然后，使用以下命令创建一个新的Vue3项目：

npx create-vue-app my-app

进入项目目录，安装Vant3：

npm install vant

项目搭建

1. 创建项目结构

首先，我们需要创建项目的目录结构。在src目录下创建以下目录：

components
pages
store

2. 创建组件

在components目录下，创建LotteryBroadcast.vue组件。该组件将用于显示中奖信息。

<template>
  <div class="lottery-broadcast">
    <div class="lottery-broadcast-item" v-for="item in lotteryBroadcastList" :key="item.id">
      <div class="lottery-broadcast-item-title">{{ item.title }}</div>
      <div class="lottery-broadcast-item-content">{{ item.content }}</div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { getLotteryBroadcastList } from '../api/lottery'

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

    getLotteryBroadcastList().then(res => {
      lotteryBroadcastList.value = res.data
    })

    return {
      lotteryBroadcastList
    }
  }
}
</script>

<style>
.lottery-broadcast {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lottery-broadcast-item {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #eee;
  border-radius: 5px;
}

.lottery-broadcast-item-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.lottery-broadcast-item-content {
  font-size: 14px;
  color: #666;
}
</style>

3. 创建页面

在pages目录下，创建Lottery.vue页面。该页面将包含中奖播报组件。

<template>
  <div class="lottery">
    <LotteryBroadcast />
  </div>
</template>

<script>
import LotteryBroadcast from '../components/LotteryBroadcast.vue'

export default {
  components: {
    LotteryBroadcast
  }
}
</script>

<style>
.lottery {
  padding: 20px;
}
</style>

4. 创建 Store

在store目录下，创建lottery.js文件。该文件将用于管理中奖信息。

import { ref } from 'vue'
import { getLotteryBroadcastList } from '../api/lottery'

export default {
  state: {
    lotteryBroadcastList: ref([])
  },
  actions: {
    fetchLotteryBroadcastList({ commit }) {
      getLotteryBroadcastList().then(res => {
        commit('setLotteryBroadcastList', res.data)
      })
    }
  },
  mutations: {
    setLotteryBroadcastList(state, lotteryBroadcastList) {
      state.lotteryBroadcastList.value = lotteryBroadcastList
    }
  }
}

5. 注册 Store

在main.js文件中，注册 Store。

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)

app.use(store)

app.mount('#app')

实现中奖播报功能

1. 获取中奖信息

在LotteryBroadcast.vue组件中，使用getLotteryBroadcastList函数获取中奖信息。

import { getLotteryBroadcastList } from '../api/lottery'

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

    getLotteryBroadcastList().then(res => {
      lotteryBroadcastList.value = res.data
    })

    return {
      lotteryBroadcastList
    }
  }
}

2. 渲染中奖信息

在LotteryBroadcast.vue组件中，使用v-for指令渲染中奖信息。

<template>
  <div class="lottery-broadcast">
    <div class="lottery-broadcast-item" v-for="item in lotteryBroadcastList" :key="item.id">
      <div class="lottery-broadcast-item-title">{{ item.title }}</div>
      <div class="lottery-broadcast-item-content">{{ item.content }}</div>
    </div>
  </div>
</template>