vue项目实战火车订票系统

火车订票系统是一个非常实用的项目，下面是一个基于Vue的火车订票系统的实现方法：

1. 首先，你需要安装Vue CLI并创建一个新的Vue项目。你可以使用以下命令来安装Vue CLI：

   npm install -g @vue/cli

然后，你可以使用以下命令来创建一个新的Vue项目：

   vue create train-ticket-system

2. 接下来，你需要安装一些必要的依赖项。你可以使用以下命令来安装这些依赖项：

   npm install axios vue-router vuex element-ui --save

这些依赖项包括axios用于处理HTTP请求，vue-router用于处理路由，vuex用于状态管理，element-ui用于UI组件。

3. 然后，你需要创建一些Vue组件。你可以使用以下命令来创建这些组件：

   vue generate component Home
   vue generate component TrainList
   vue generate component TrainInfo
   vue generate component PersonalCenter
   vue generate component Admin

这些组件分别对应系统首页、车次信息、火车资讯、个人中心和后台管理等内容。

4. 接下来，你需要配置路由。你可以在src/router/index.js文件中添加以下代码：

   import Vue from 'vue'
   import Router from 'vue-router'
   import Home from '@/components/Home'
   import TrainList from '@/components/TrainList'
   import TrainInfo from '@/components/TrainInfo'
   import PersonalCenter from '@/components/PersonalCenter'
   import Admin from '@/components/Admin'

   Vue.use(Router)

   export default new Router({
     routes: [
       {
         path: '/',
         name: 'Home',
         component: Home
       },
       {
         path: '/train-list',
         name: 'TrainList',
         component: TrainList
       },
       {
         path: '/train-info',
         name: 'TrainInfo',         component: TrainInfo
       },
       {
         path: '/personal-center',
         name: 'PersonalCenter',
         component: PersonalCenter
       },
       {
         path: '/admin',
         name: 'Admin',
         component: Admin
       }
     ]
   })

这个路由配置将系统首页、车次信息、火车资讯、个人中心和后台管理等内容与相应的组件关联起来。

5. 接下来，你需要创建一些Vuex store。你可以在src/store/index.js文件中添加以下代码：

   import Vue from 'vue'
   import Vuex from 'vuex'

   Vue.use(Vuex)

   export default new Vuex.Store({
     state: {
       user: null,
       trainList: []
     },
     mutations: {
       setUser (state, user) {
         state.user = user
       },
       setTrainList (state, trainList) {
         state.trainList = trainList
       }
     },
     actions: {
       setUser ({ commit }, user) {
         commit('setUser', user)
       },
       setTrainList ({ commit }, trainList) {
         commit('setTrainList', trainList)
       }
     }
   })

这个Vuex store包括用户信息和火车列表等状态。

6. 最后，你需要创建一些API接口。你可以在src/api/index.js文件中添加以下代码：

   import axios from 'axios'

   const BASE_URL = 'http://localhost:8080'

   export function login (username, password) {
     return axios.post(`${BASE_URL}/login`, {
       username,
       password
     })
   }

   export function getTrainList () {
     return axios.get(`${BASE_URL}/trainList`)
   }

   export function getTrainInfo (trainId) {
     return axios.get(`${BASE_URL}/trainInfo/${trainId}`)
   }

   export function bookTicket (trainId, seatType, seatNumber) {
     return axios.post(`${BASE_URL}/bookTicket`, {
       trainId,
       seatType,
       seatNumber
     })
   }

   export function cancelTicket (ticketId) {
     return axios.post(`${BASE_URL}/cancelTicket`, {
       ticketId
     })
   }

这些API接口包括登录、获取火车列表、获取火车信息、预订车票和取消车票等功能。