基于Web前端的移動商業購物網站

譚子攀 楊振南 潘學文

摘要：該文基于Web前端開發的移動商業購物網站采用了HTML，CSS，JS，VUE等框架;利用MVC的設計架構與軟件工程的設計思想，通過商品線上展示商品以及全新Web技術來實現前后臺交互。在通過用戶輸入信息進行驗證登錄，并且經過用戶選擇商品進行購物車的添加，最終進行交易。Web前端開發的商業購物網站解決了傳統購物的局限性，給用戶帶來良好的體驗以及優質的商品視覺感，實現了購物的方便快捷以及有更多的選擇。

關鍵詞：Web前端;商業購物網站;HTML;CSS;JS

中圖分類號：TN911-4;G434? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）13-0266-02

Abstract： This article uses the HTML， CSS， JS， VUE and other frameworks to develop the mobile commercial shopping website based on the Web front end. It uses MVC's design architecture and software engineering design ideas to achieve front-end and back-end interaction through the online display of commodities and the new Web technology. After the user enters the information to verify the login， and after the user selects the product to add the shopping cart， the transaction is finally carried out. The commercial shopping website developed by the Web front end solves the limitations of traditional shopping， brings users a good experience and a high-quality visual sense of goods， and realizes the convenience of shopping and more choices.

Key words： Web;Commercial shopping website;HTML;CSS;JS

1 引言

隨著移動互聯網技術的迅速發展，以及移動智能終端快速普及，人們獲取信息的途徑從PC端Web瀏覽逐漸轉向移動智能終端的Web瀏覽[1-2]。在互聯網未興起的實體購物模式中，用戶都是在當地或者遠行進行線下購買。購物方式主要通過實體店來實現客戶的需求，地區和商品樣式局限性很大，而且商品種類和樣式不夠齊全，用戶購物體驗不是很好。在互聯網迅速發展的時代中，我國依靠互聯網實現了線上購物，方便了用戶同時也為Web大前端這一塊的技術領域贏得了發展[3-4]。

隨著互聯網高速發展，線上購物在許多領域已經開始慢慢取代實體購物。本文基于web前端實現線上購物網站的開發。Web的交互性首先表現在它的超鏈接上，用戶的瀏覽順序和所訪問的站點完全由用戶自己決定[5-6]。本網站在VUE框架上進行網頁制作，利用經典的css對網站的外貌進行改良，然后根據后臺的json數據運行整個網站。本系統的開發在傳統的開發軟件Hbuilder-X進行操作，保障了運行環境的安全，并且能穩定提供軟件開發的相關需求[7]。

2 網站總體方案設計

本網站主要以Web前端開發為基礎，主要分為登錄系統、注冊系統、用戶信息修改和網頁主頁等模塊。前臺和后臺具體的總體設計圖如圖1所示。在總體設計完善好了之后就要逐步設計每一個小的系統從而組成整個系統。

登錄系統實現的效果就是登錄賬號的功能，在設計時考慮了四個功能的添加：判別用戶輸入的信息是否正確、用戶輸入相關信息后記錄該信息、對于新用戶可以點擊注冊按鈕跳轉到注冊頁面和老用戶如果忘記密碼該系統能提供找回功能。用戶的注冊時針對與新用戶，在沒有賬號密碼的時候通過登錄頁面的注冊按鈕點擊進入注冊頁面。系統的主頁模塊時整個項目的核心部分，它應該包括用戶需求的功能和樣式，以及快捷的交易方式和商品種類的齊全。這些都要保障在傳統的購物模式下有新時代的發展，充分利用互聯網的優勢。所以在設計方面必須嚴格按照市場調研的用戶需求和業務需求去完成相關功能。所以應該具有相關電商網站的基本功能，比如以下功能：用戶信息修改功能、商品搜索查找功能、商品的添加和購買功能、購買商品的結賬功能以及查看訂單功能和商品的售后服務功能。

3 系統實現

前臺系統模塊實現了所有商品展示，分類搜索，購物車購買，地址記錄。后臺實現了對所有數據進行增刪改查，靈活的操作數據庫，實現了數據的動態展示。本系統運用VUE組件技術，它的優勢就是很好的分離了前臺和后臺代碼，易于看懂，便于維護。對于前臺結構的設計，直接影響到客戶的體驗，客戶體驗的好壞，直接影響到商品的銷量，所以其也是至關重要的。再有，對于購物車的流程，發生了金錢交易，這個必須得保證安全，計算必須十分準確，不能使客戶有損失，自己也不能又損失，所以這個也是十分重要的，對于數據庫的設計，直接影響到數據的靈活性和動態性。

用戶注冊模塊設計及實現。新用戶在登錄本系統時需要注冊相關賬號才能進行登錄，注冊后用戶信息將會被系統記錄下來以便以后的登錄。在輸入相關信息后即可進入登錄頁面登錄。注冊模塊前端實現圖如圖2所示。

登錄系統要求新用戶在進行注冊之后即可在登錄頁面輸入賬號密碼進行登錄，老用戶可以直接輸入相關信息進行登錄。登錄系統的前端實現圖如圖3所示。

在進行注冊和登錄之后便會進入主頁面，而主頁面又包括多個可跳轉的頁面，用戶信息頁面便是其中之一，用戶信息如圖4所示。點擊用戶信息即可跳轉到用戶信息頁面，點擊修改信息即可填入信息，在未點擊時，輸入框時不能被選中的狀態，點擊確定就可以保存當前修改的內容。

購物網頁主頁頁面時集合所有頁面的精華，把用戶的需求存放在此，如商品的種類和數量，所搜相關商品等，所以該界面給用戶的體驗性一定要良好，如下未完成的項目，主頁前端樣式實現如圖5所示，頁面提供搜索框架。一個網絡商業網站在交易的時候最重要的是保證交易的安全以及購買商品的便捷性，所以在實現添加商品和購買商品的功能時，需要嚴格測試，保證不出任何錯誤，這樣才能給用戶良好的體驗性，操作流程如下：添加商品-->進購物車-->購買商品。

4 系統測試

每個項目做出來之后都不可能完全沒有錯誤，未來實現客戶的需求和提升自己能力，在完成項目后都要進行系統測試，在測試過程中不斷完善系統功能，及時發現未知的BUG以便修改，只有不斷地找尋錯誤才能在工作中有所提升，才能不斷完善項目給用戶更好的體驗性。

在使用HBuilder-X+vue組合開發Web端。調試的時候發現兩個問題。第一個問題是HBuilder-X沒有辦法在async await函數所在的行設置斷點。通過分析問題，得出解決辦法是：從babel的配置文件下手，在項目的根目錄創建一個babel.config.js 文件，重新編譯運行，即重新運行npm run dev。第二個問題是除了vue模板那幾個js文件以及.vue文件，沒有辦法在自己寫的js文件或者模塊設置斷點。解決辦法是重新配置一下項目根目錄下HBuilder-X/launch.json文件。HBuilder-X默認生成的launch.json是沒有第13行的。通過修改配置讓HBuilder-X知道webpack調試的文件對應項目的本地文件。

5 總結

本文設計并實現了基于Web前端技術的網絡購物商業網站系統，是大前端與新型線上相結合，在使用VUE框架作為開發框架的前提下對比傳統購物方式設計了系統的結構與功能，使得在互聯網發展迅速的時代線上購物成為潮流，并且大大滿足了用戶的需求與購物體驗，促進了電商的發展，是在互聯網新時代的一種嘗試。基于Web前端技術的網絡購物商業網站系統的設計與實現，對于未來實現數據驅動新型線上電商行業起了一定的幫助。

參考文獻：

[1] 周禮萍.Web前端開發技術分析與研究[J].信息記錄材料，2020，21（11）：209-210.

[2] 朱海萍，丁西，劉鏈.Web前端中基于MVVM框架的技術應用研究[J].科技資訊，2020，18（30）：8-10.

[3] 廖家莉，曹俊.web前端主流框架分析與對比[J].科技視界，2020（28）：121-122.

[4] 蒲超.基于網站制作的Web前端開發技術與優化[J].數碼世界，2020（4）：34.

[5] 高慧.Web前端開發技術和其對網站性能的影響[J].河南科技，2019（28）：47-49.

[6] 汪雁.網站制作Web前端開發技術及優化[J].電腦知識與技術，2019，15（28）：240-241.

[7] 周美玲，母軍臣.關于Web前端發展趨勢的探索[J].開封大學學報，2019，33（3）：84-85.

【通聯編輯：代影】