基于VUE2.0的移動端SPA單頁應用

錢進

摘 要：基于移動端設備的類如餓了么SPA單頁應用，可以提供給客戶一個選擇多樣化功能豐富平臺。該系統嚴格按特點對商品進行分類，便于客戶快速找到自己喜愛的食物，實時更新最新的商家外賣詳情，實現24小時不間斷滿足客戶的點餐需求，向用戶展示最為齊全的商品信息，形成系統而又高效率的外賣點餐平臺。

關鍵詞：SPA單頁;外賣APP

一、課題的背景、目的與意義

隨著移動APP的發展，訂餐APP已經占領外賣市場。手機訂餐APP為用戶提供一種便捷的訂餐服務，用戶使用該APP可以快速搜索、瀏覽附近店鋪及菜品，進而下單、結算、支付。

就商家層面而言，APP設計的功能重點放在店鋪管理、菜品管理方面，商戶端管理APP的功能重點放在餐廳下單、訂單管理及制作單管理方面，用戶通過社交網絡來分享美食，一次來提高自身的客源和并擴大企業知名度;另外，商家還可以對自己下屬的門店進行全方位的移動式管理，降低自身的運營成本。就APP使用場景而言，用戶可以在辦公室、宿舍乃至家里，在用正餐時間，夜宵時間，下午茶等特定的開放的場景使用;使用商家只需將重心放在設計、推廣、運營階段引入該類訂餐APP即可。

二、國內研究現狀

科技的發展，不同軟件滿足人們的各種需求，O2O電商就是在這種新形勢下催生出的一種模式并且近年來發展越來越迅猛。

三、需求分析與總體設計

1.需求分析

需求分析將主要考察現在市面上的網頁需求和網站側重，根據用戶的體驗、功能的以及非功能的情況進行項目設計。

（1）用戶需求

在外賣點餐人群中，學生占很大比重，但是外賣平臺并沒有把學生當作核心群體。外賣平臺更加重視學生群體的潛在價值，學生工作后很可能保留點外賣的習慣，對價格也不是那么敏感，消費能力也更強，是外賣平臺不得不做的一塊。

白領群體是重點發展的對象，這一塊的利潤也更加豐厚。且這一人群，不用靠不斷燒錢補貼去刺激消費，他們更加關注的是餐品的質量以及配送的效率。該人群對服務的要求會更高。

（2）功能需求

功能需求就是確定了開發過程中需要實現的軟件功能，用戶可以通過這個軟件獲得自己想要的卒伍，因此才能滿足用戶需求。本項目由以下部分組成：商家詳情頁，商品列表頁以及評價詳情頁三個部分組成，如圖所示。

（3）非功能需求

非功能需求雖然相對于前兩項并不主要，但在實際的軟件開發過程中卻非常重要。首先SPA應用是基于web的，對于用戶來說他們使用WEB平臺進行操作，所以需要達到應用可以在多個瀏覽器上兼容的效果。其次要求用戶界面美觀大方，并且直觀簡潔，在用操作方面盡可能達到原生app的流暢度。同時，在開發層面，通過組件化的開發思想將頁面細分為一個一個的小組件，大大提高了網頁的復用性。在視覺層面采用餓了么app的主色調，給人一種很舒適的扁平化風格。在交互方面，通過框架自帶的過渡效果以及手寫實現一些動畫效果來實現原生app一樣的交互體驗[3]。

2.總體設計

需求分析是將業務需求和用戶需求歸納為一個個大致的功能點，這些功能仍舊停留在需求層面上，并未深入到軟件的結構中。下一步的工作正是要將這些功能點逐步分解，確定軟件系統應該由哪些模塊組成，各個模塊間的關系如何等。其目的是將需求逐步轉化為系統的功能模塊，并分析這些模塊的調用方式、層次關系等，最終完成軟件結構的設計，并用系統結構圖和總體類圖進行描述。

四、詳細設計與實現

1.界面交互設計

（1）商家界面頭部設計

從瀏覽器進入系統后，頁面包括以下四個部分，整個應用的header部份，顯示商家具體信息的遮罩層，顯示整個商品列表的content部分以及類似于淘寶購物車的footer部分。在應用的header部分中，將商家的店鋪圖片，商家名稱，配送方式，配送時間以及部分活動信息顯示在頭部，并且分別提供一個顯示活動數量的按鈕以及一個公告欄來控制商家具體信息的遮罩層的顯示與隱藏。

（2）商家界面的遮罩層設計

在商家界面遮罩層設計上，通過設置色域偏深背景以及調整背景的透明度，與白色字體作比較，讓其整個應用更符合移動端的material design設計風格。在material design的設計風格中有如下介紹和定義：采用獨特而又清新的UI界面，設計既遵循經典風格，還涵蓋科技創新的設計理念。

（3）商家界面的主體內容設計

首先主體內容部分的左側會展示商家的綜合評分并且將該商家與周圍商家作比較;在主體內容部分的右側則通過自定義的星型組件將服務態度和商品評分展示給用戶。

（4）商家界面的底部設計

在底部購物車的設計風格上，采用深黑色的色調作為背景色，與整個應用的風格形成比較強烈的對比。底部的購物車一共分為三種狀態：未選中商品狀態，選中部分商品但不夠最低起送價格狀態以及選中商品而且達到最低起送價格狀態。

此時購物車圖標和商品總價已經顯示為高亮狀態，并且在購物車圖標的右上角會用紅色背景來顯示此時購物車商品的總數。此時購物車圖標為可點擊的狀態，點擊購物車圖標會彈出一個遮罩層，上面包含已選中商品的列表及其對應的數量。

2.詳細設計與功能實現

（1）應用的數據傳輸

在整個SPA單頁應用中，首先通過Mockjs生成一個名為data.json格式的數據文件，數據文件的格式嚴格按照實際生產環境生成，這與在客戶端發送請求所拉取的數據是一樣的。

（2）應用的樣式設計

在設計風格上面采用的是普通SPA單頁應用的扁平化風格，色調偏柔和，界面風格偏簡潔，比較符合現代大眾的審美。在用戶體驗方面，因為是移動端設計，考慮便捷性，所以在交互方面盡可能去避免一些復雜的交互操作，盡可能通過touch事件和點擊事件來完成所有的交互。而且考慮到用戶的交互體驗，在所有的交互操作中，盡可能用Vue框架中自帶的動畫效果對交互過程進行過度，這樣有利于提高用戶的交互體驗，也能使整個應用看起來更加流暢，體驗感覺也會更舒服。

參考文獻

[1]V.Prakesh Kainthola.Principles of hotel management[M].Spenter Inc.，2013.