基于Spring Boot的購票系統(tǒng)的設(shè)計與實現(xiàn)

趙凝

摘要：基于Spring Boot的購票系統(tǒng)的設(shè)計與實現(xiàn)，旨在借助互聯(lián)網(wǎng)技術(shù)為用戶提供文娛演出和體育賽事類商品線上購票的服務(wù)。演出賽事購票平臺是綜合類娛樂票務(wù)在線整合營銷平臺，業(yè)務(wù)覆蓋演唱會，話劇，歌劇，音樂劇，體育賽事等領(lǐng)域。系統(tǒng)采用前后端分離架構(gòu)設(shè)計，前端采用Vue框架，結(jié)合HTML5、CSS3、Axios、JSON等技術(shù)進(jìn)行前端代碼的編寫；使用Photoshop、Figma、StarUML進(jìn)行原型圖和數(shù)據(jù)庫設(shè)計；服務(wù)器端采用Spring Boot框架搭建并提供API接口，使用MyBatis框架，結(jié)合MySQL數(shù)據(jù)庫進(jìn)行數(shù)據(jù)的存儲與訪問。

關(guān)鍵詞：Spring Boot；購票系統(tǒng)；MySQL；Vue

一、前言

近年來，以計算機(jī)技術(shù)、網(wǎng)絡(luò)技術(shù)和多媒體技術(shù)為代表的信息技術(shù)革命已經(jīng)深入社會各個層面，并且逐漸改變著人們的生活方式。各種娛樂型票務(wù)系統(tǒng)也漸漸走進(jìn)大眾的視野。線上購票在給用戶帶來極大便利的同時，也為演出賽事的舉辦方提供了極大的便利。舉辦方可以通過后端系統(tǒng)統(tǒng)計銷售的票數(shù)，既節(jié)省了人力，又節(jié)省了物力。此外，演出賽事購票平臺可對各大音樂節(jié)，各體育賽事，京劇、話劇演出等進(jìn)行宣傳和售票?；诖耍疚脑O(shè)計并開發(fā)了基于Spring Boot的購票平臺。

二、購票系統(tǒng)的目的和意義

演出賽事購票平臺是對小眾文化、傳統(tǒng)文化的宣傳，也是對購票模式的創(chuàng)新，其主要目標(biāo)是實現(xiàn)演唱會、音樂會、話劇、體育比賽等多種門票在線訂購服務(wù)。此外，網(wǎng)站致力于讓更多的人了解一些小眾文化或中國傳統(tǒng)文化。

隨著社會經(jīng)濟(jì)的不斷發(fā)展，人們的娛樂活動越來越豐富，種類越來越多，觀看各類演出、各種比賽的人數(shù)占比很大。用戶可以通過本平臺查看所有的演出和比賽信息。網(wǎng)站提供給用戶不同的選擇，讓用戶實現(xiàn)足不出戶，進(jìn)行在線訂票、退票等操作。這樣既可以省時省力，又能及時收到更多的演出信息。

在移動互聯(lián)網(wǎng)與電子商務(wù)快速發(fā)展的背景下，網(wǎng)絡(luò)購票無疑成為一種新的購票模式，O2O（Online To Offline）模式也應(yīng)運而生。O2O模式是指消費者在線上進(jìn)行交易支付，再到線下享受服務(wù)的過程[1]。演出賽事購票平臺便是在O2O的基礎(chǔ)上，實現(xiàn)用戶線上購票、線下觀看演出活動的過程。此外，演出賽事購票平臺可以跟蹤網(wǎng)絡(luò)購票業(yè)務(wù)流程，實現(xiàn)購票平臺業(yè)務(wù)的多元化整合營銷。近年來，在線票務(wù)服務(wù)業(yè)發(fā)展迅猛，O2O模式的出現(xiàn)和發(fā)展促使上游供應(yīng)商為客戶提供創(chuàng)新產(chǎn)品，激發(fā)了行業(yè)整體潛力。然而，隨著人口紅利時代的逐漸遠(yuǎn)去，在線票務(wù)服務(wù)企業(yè)要想獲得長遠(yuǎn)發(fā)展，就要跟上互聯(lián)網(wǎng)時代的步伐，轉(zhuǎn)變其盈利模式[2]。

三、系統(tǒng)的可行性分析

（一）技術(shù)可行性分析

本系統(tǒng)基于Vscode開發(fā)平臺，在設(shè)計之初使用了Photoshop、Figma等繪圖工具繪制網(wǎng)站原型和logo；使用Google瀏覽器和Firefox瀏覽器檢查代碼效果；使用了Vue框架，結(jié)合ElementUI組件庫進(jìn)行前端頁面的搭建。Vue核心庫只關(guān)注可視化層，使用方便，而且很容易與第三方庫或現(xiàn)有項目集成[3]。ElementUI遵循用戶習(xí)慣的語言和概念，通過界面樣式和交互動畫效果，讓用戶可以清晰感知自己的操作，設(shè)計簡潔直觀的操作流程，可以讓用戶自由地操作[4]。本系統(tǒng)使用Spring Boot結(jié)合Mybasis框架進(jìn)行后端數(shù)據(jù)存儲。Spring Boot用來簡化新Spring應(yīng)用的初始搭建和開發(fā)過程。它簡化了開發(fā)過程、配置過程、部署過程和監(jiān)控過程[5]。當(dāng)前計算機(jī)的硬件及軟件均滿足開發(fā)需求，所有平臺均安全且可正常執(zhí)行，因此滿足技術(shù)可行性。

（二）安全可行性分析

對于網(wǎng)站的安全，可以從運行環(huán)境與網(wǎng)站程序自身兩個方面來分析。

1.網(wǎng)站運行環(huán)境安全主要包括物理安全和軟件本身的安全。物理安全是指軟件因外力等造成損害，比如機(jī)械的撞擊以及其他自然因素；軟件本身的安全是指操作系統(tǒng)、服務(wù)器及數(shù)據(jù)庫本身的安全。

2.對于網(wǎng)站程序自身的安全，應(yīng)該從以下方面考慮：首先，網(wǎng)站配置路由攔截并要求登錄用戶的輸入都應(yīng)是合法的，非法輸入的用戶禁止登錄本網(wǎng)站，游客不可查看個人中心等需登錄的頁面；其次，網(wǎng)站保護(hù)用戶的隱私，用戶的密碼只有管理員可見，網(wǎng)站的代碼、組件均安全可靠；最后，從嚴(yán)格意義上講，測試是不可能發(fā)現(xiàn)所有問題的，所以還需要對網(wǎng)站進(jìn)行后續(xù)的管理、維護(hù)以及測試。

（三）社會可行性分析

一直以來，演出市場以一二線城市為主，一線城市演出比例持續(xù)增加，越來越多的歌手開始準(zhǔn)備音樂節(jié)和演唱會，國內(nèi)演出市場年均增長率持續(xù)上漲。

此外，通過調(diào)研報告得知，演出票房近年來呈上漲趨勢，雖然許多演出采取了線上模式或演出限流模式，但在票務(wù)網(wǎng)上有時仍然一票難求，例如，在2022年5月5日舉行的地下八英里全國總決賽，售票通道剛開啟，學(xué)生票就被搶光。根據(jù)預(yù)測，演出市場將會有更大的需求量和發(fā)展空間。

四、系統(tǒng)需求與設(shè)計

（一）系統(tǒng)用例概述

1.項目功能需求分析

對同一類型的產(chǎn)品進(jìn)行調(diào)研，根據(jù)需求分析的結(jié)果，確定本軟件主要包括以下功能模塊：

（1）前端功能需求：首頁包括票務(wù)展示以及票務(wù)詳情，演唱會頁面包括總票代信息，音樂人頁面包括音樂人動態(tài)和推薦，歌手詳情頁包括演出信息等。

（2）后端功能需求：后臺首頁展示個人信息、購買菜單和圖表；用戶管理頁包括用戶信息的增、刪、改、查；粉絲管理包括粉絲新增和評論查看；演出信息包括場地入駐、音樂人入駐、發(fā)布音樂和廠牌入駐；票務(wù)管理包括人工協(xié)助、結(jié)款到賬、票務(wù)分類以及退票管理等。

2.前臺用戶的功能需求分析

根據(jù)需求調(diào)研，本系統(tǒng)的目的是為用戶和演藝部門提供一個交互平臺。它可以為用戶提供演唱會、話劇、歌劇、體育賽事、音樂節(jié)等演出信息，方便用戶及時進(jìn)行購票、退票等操作。主要功能有：顯示所有在線票務(wù)信息，能進(jìn)行登錄、注冊、購票等操作，顯示演唱會會館具體地址。普通用戶用例圖如圖1所示。

3.后端用戶功能需求分析

根據(jù)需求分析，本系統(tǒng)為管理員提供了登錄、用戶管理、粉絲管理、查看演出信息以及票務(wù)管理等功能。其中，后端只有管理員可以登錄，非管理員登錄會被系統(tǒng)攔截；在用戶管理中，管理員可以對用戶信息進(jìn)行增、刪、改、查操作，對用戶信息進(jìn)行維護(hù)；在查看演出信息功能中，管理員可以根據(jù)實時情況發(fā)布演出信息、調(diào)整場地分配，對音樂人進(jìn)行管理；在廠牌管理中，管理員可以對廠牌信息進(jìn)行增、刪、改、查操作；在票務(wù)管理功能中，管理員可以進(jìn)行票務(wù)統(tǒng)計、票據(jù)分類、退款到賬、結(jié)款到賬、人工協(xié)助等操作。后端管理員用例圖如圖2所示。

后端具體功能和功能描述如表1所示。

（二）體系結(jié)構(gòu)設(shè)計

用戶和管理員通過前端頁面的交互，瀏覽通過后端數(shù)據(jù)庫返回的數(shù)據(jù)以及頁面信息。

（三）網(wǎng)站設(shè)計規(guī)范

1.本網(wǎng)站主要使用的是三列布局和居中布局。

2.網(wǎng)站設(shè)計

網(wǎng)站前端展示頁面是面向用戶和消費者的，為To C端；后臺是面對商家和專業(yè)人士的，為To B端。

3.網(wǎng)頁設(shè)計

網(wǎng)頁寬度為1520px，高度不限，有效可視區(qū)的寬度為950px～2000px。

4.字體規(guī)范

中英文常用字體：微軟雅黑。

5.文字常用字號

導(dǎo)航文字大?。?7px；

正文內(nèi)容：12px、14px、15px、20px；

標(biāo)題、小標(biāo)題：20px、22px；

輔助信息：12px、13px、20px。

6.字體間距

相鄰兩個文字的間距、行間距，使用字體大小的1.5～2.0倍作為參考。

7.字體顏色

字體的主要顏色為黑色和深灰色，大部分采用紅色或白色，輔助信息為灰色。

（四）布局設(shè)計

頁面布局指的是頁面信息結(jié)構(gòu)布局方案，即頁面中的元素如何展示給用戶。對于產(chǎn)品而言，頁面的布局方案非常重要，一個合理的頁面布局方案，能為用戶提供更好的產(chǎn)品體驗，讓用戶在使用時清晰明了，進(jìn)而為產(chǎn)品帶來更多的正向數(shù)據(jù)。

影響頁面布局的因素有很多，如產(chǎn)品目標(biāo)需求、用戶需求等。其中，頁面與用戶之間的交互、頁面布局的評估、頁面布局的設(shè)計思路非常重要。

本網(wǎng)站布局通過對頁面進(jìn)行初步評估，理清了頁面布局設(shè)計的整體思路。本網(wǎng)站應(yīng)用了四種頁面布局方式，分別為：banner式布局（導(dǎo)航條和banner圖）；上下型布局（主要內(nèi)容、頁腳）；左右型布局（后臺管理系統(tǒng)）；標(biāo)題正文型布局（圖文混排）。

顏色搭配：紅色、藍(lán)色、黃色。藍(lán)色和紅色屬于對比色，藍(lán)色的沉靜、穩(wěn)重搭配紅色的熱情、艷麗，形成了強烈的對比，并使各自的色相更顯突出，具有強烈的視覺沖擊力。

（五）數(shù)據(jù)庫設(shè)計

根據(jù)對系統(tǒng)功能模塊的描述，該系統(tǒng)的數(shù)據(jù)庫中應(yīng)該具有如下信息：

1.用戶的基本信息包括賬號、密碼、姓名、年齡、性別、出生日期和地址。

2.管理員的信息包括管理員編號、級別、姓名、性別、聯(lián)系方式。

3.歌手的基本信息包括歌手編號、姓名、性別、演出、郵箱。

4.演出包括演唱會、歌劇話劇、體育、音樂節(jié)、音樂會。

5.演職員信息包括姓名、演出時間、演出地址、演出場館。

6.演出信息包括音樂人入駐、廠牌入駐、發(fā)布音樂、場地入駐。

7.粉絲管理包括查看粉絲人數(shù)、查看評論、粉絲新增。

8.票務(wù)管理包括人工協(xié)助、退票管理、結(jié)款到賬、票據(jù)分類。

五、系統(tǒng)功能設(shè)計與實現(xiàn)

（一）歌手頁面功能的設(shè)計與實現(xiàn)

歌手頁面介紹了歌手的基本信息，該頁面使用Tab選項卡記錄演出、場地、作品、簡介、專輯等模塊。其中，演出模塊包括歌手近期將出席的演出活動以及活動的價格、時間、地址等信息，點擊地圖圖標(biāo)可以通過百度地圖接口跳轉(zhuǎn)到對應(yīng)的位置。場地模塊記錄了歌手參加演出的場地環(huán)境。在作品模塊中，可以收聽歌手的作品，歌曲可以倍速播放，可以隨時暫停，可以下載保存至本地。

（二）后端管理功能模塊設(shè)計

后端首頁使用了Echart圖表進(jìn)行詳細(xì)的數(shù)據(jù)分析。Echart圖表可以把數(shù)據(jù)用圖表的形式清晰顯示出來。首頁使用的圖表形式包括折線圖、柱狀圖和餅狀圖等。圖表和列表中的數(shù)據(jù)存儲在數(shù)據(jù)庫中，通過GetData方法獲取數(shù)據(jù)庫中的數(shù)據(jù)。用戶列表頁可以實現(xiàn)對用戶信息的增加、編輯、刪除和查找。

六、基本功能測試

系統(tǒng)制作完成后，對本系統(tǒng)進(jìn)行了功能測試?；竟δ軠y試如表2所示。

七、結(jié)語

本購票系統(tǒng)，服務(wù)器端使用Spring Boot框架、MyBatis結(jié)合MySQL數(shù)據(jù)庫進(jìn)行開發(fā)，前端使用Vue進(jìn)行構(gòu)建。截至目前，該項目的前后端均已完成相關(guān)功能的開發(fā)和實現(xiàn)，系統(tǒng)包括演出信息和票務(wù)管理。

前端頁面實現(xiàn)了對各種演出信息的查看以及購票操作，后端頁面實現(xiàn)了對粉絲數(shù)據(jù)以及演出信息發(fā)布的數(shù)據(jù)修改和對用戶信息的增加、刪除、修改、查看等操作。

參考文獻(xiàn)

[1]劉楠.O2O經(jīng)營模式分析[D].天津：天津大學(xué)，2016.

[2]云婷.價值鏈視角下在線票務(wù)服務(wù)企業(yè)O2O盈利模式研究——以攜程網(wǎng)為例[D].呼和浩特：內(nèi)蒙古農(nóng)業(yè)大學(xué)，2021.

[3]齊洋，原變青，劉穎，等.基于Gin和Vue.js的作業(yè)管理系統(tǒng)的設(shè)計[J].信息技術(shù)與信息化，2022（10）：103-105+110.

[4]王志文.Vue+Elementui+Echarts在項目管理平臺中的應(yīng)用[J].山西科技，2020，35（6）：45-47.

[5]王丹，孫曉宇，楊路斌，等.基于SpringBoot的軟件統(tǒng)計分析系統(tǒng)設(shè)計與實現(xiàn)[J].軟件工程.2019，22（3）：40-42.

作者單位：大連東軟信息學(xué)院計算機(jī)科學(xué)與技術(shù)系