当前位置：首页 > VUE

vue实现订票

2026-02-10 08:44:12VUE

Vue实现订票功能

要实现一个基于Vue的订票功能，可以按照以下步骤进行开发。以下是一个完整的实现方案，包括前端页面、数据管理和交互逻辑。

页面结构设计

使用Vue的单文件组件（SFC）组织页面结构。主要组件包括：

票务列表：展示可预订的票务信息。
订单表单：填写订票信息。
订单确认：显示订单详情和支付选项。

<template>
  <div class="booking-app">
    <TicketList :tickets="tickets" @select="handleSelect" />
    <OrderForm v-if="selectedTicket" :ticket="selectedTicket" @submit="handleSubmit" />
    <OrderConfirmation v-if="order" :order="order" />
  </div>
</template>

数据管理

使用Vue的响应式数据管理票务和订单状态。可以通过Vuex或Composition API管理全局状态。

import { ref } from 'vue';

export default {
  setup() {
    const tickets = ref([
      { id: 1, name: '演唱会门票', price: 100, available: true },
      { id: 2, name: '电影票', price: 50, available: true }
    ]);
    const selectedTicket = ref(null);
    const order = ref(null);

    const handleSelect = (ticket) => {
      selectedTicket.value = ticket;
    };

    const handleSubmit = (formData) => {
      order.value = {
        ...formData,
        ticket: selectedTicket.value,
        status: 'pending'
      };
    };

    return { tickets, selectedTicket, order, handleSelect, handleSubmit };
  }
};

表单验证

使用Vuelidate或VeeValidate进行表单验证，确保用户输入的数据符合要求。

<template>
  <form @submit.prevent="submitForm">
    <input v-model="form.name" placeholder="姓名" />
    <span v-if="v$.form.name.$error">姓名不能为空</span>
    <button type="submit">提交</button>
  </form>
</template>

<script>
import { required } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';

export default {
  setup() {
    const form = ref({ name: '' });
    const rules = { form: { name: { required } } };
    const v$ = useVuelidate(rules, { form });

    const submitForm = async () => {
      const isValid = await v$.value.$validate();
      if (isValid) {
        emit('submit', form.value);
      }
    };

    return { form, v$, submitForm };
  }
};
</script>

后端交互

通过Axios或Fetch API与后端API交互，提交订单数据并获取响应。

import axios from 'axios';

const submitOrder = async (orderData) => {
  try {
    const response = await axios.post('/api/orders', orderData);
    return response.data;
  } catch (error) {
    console.error('订单提交失败:', error);
    throw error;
  }
};

状态管理

对于复杂应用，使用Vuex或Pinia管理订单状态和票务数据。

import { defineStore } from 'pinia';

export const useBookingStore = defineStore('booking', {
  state: () => ({
    tickets: [],
    orders: []
  }),
  actions: {
    async fetchTickets() {
      const response = await axios.get('/api/tickets');
      this.tickets = response.data;
    },
    async submitOrder(order) {
      const response = await axios.post('/api/orders', order);
      this.orders.push(response.data);
    }
  }
});

路由管理

使用Vue Router管理页面导航，实现页面间的跳转。

import { createRouter, createWebHistory } from 'vue-router';
import TicketList from './components/TicketList.vue';
import OrderForm from './components/OrderForm.vue';

const routes = [
  { path: '/', component: TicketList },
  { path: '/order', component: OrderForm }
];

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

export default router;

样式设计

使用CSS或SCSS设计页面样式，确保界面美观且用户友好。

.booking-app {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.ticket-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

通过以上步骤，可以实现一个完整的Vue订票功能，包括页面展示、数据管理、表单验证和订单提交。根据实际需求，可以进一步扩展功能，如支付集成、订单历史查询等。

vue实现订票