基于Web前端的移動商業(yè)購物網(wǎng)站

譚子攀 楊振南 潘學(xué)文

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

關(guān)鍵詞：Web前端;商業(yè)購物網(wǎng)站;HTML;CSS;JS

中圖分類號：TN911-4;G434? ? ? ? 文獻(xiàn)標(biāo)識碼：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 引言

隨著移動互聯(lián)網(wǎng)技術(shù)的迅速發(fā)展，以及移動智能終端快速普及，人們獲取信息的途徑從PC端Web瀏覽逐漸轉(zhuǎn)向移動智能終端的Web瀏覽[1-2]。在互聯(lián)網(wǎng)未興起的實(shí)體購物模式中，用戶都是在當(dāng)?shù)鼗蛘哌h(yuǎn)行進(jìn)行線下購買。購物方式主要通過實(shí)體店來實(shí)現(xiàn)客戶的需求，地區(qū)和商品樣式局限性很大，而且商品種類和樣式不夠齊全，用戶購物體驗(yàn)不是很好。在互聯(lián)網(wǎng)迅速發(fā)展的時代中，我國依靠互聯(lián)網(wǎng)實(shí)現(xiàn)了線上購物，方便了用戶同時也為Web大前端這一塊的技術(shù)領(lǐng)域贏得了發(fā)展[3-4]。

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

2 網(wǎng)站總體方案設(shè)計(jì)

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

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

3 系統(tǒng)實(shí)現(xiàn)

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

用戶注冊模塊設(shè)計(jì)及實(shí)現(xiàn)。新用戶在登錄本系統(tǒng)時需要注冊相關(guān)賬號才能進(jìn)行登錄，注冊后用戶信息將會被系統(tǒng)記錄下來以便以后的登錄。在輸入相關(guān)信息后即可進(jìn)入登錄頁面登錄。注冊模塊前端實(shí)現(xiàn)圖如圖2所示。

登錄系統(tǒng)要求新用戶在進(jìn)行注冊之后即可在登錄頁面輸入賬號密碼進(jìn)行登錄，老用戶可以直接輸入相關(guān)信息進(jìn)行登錄。登錄系統(tǒng)的前端實(shí)現(xiàn)圖如圖3所示。

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

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

4 系統(tǒng)測試

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

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

5 總結(jié)

本文設(shè)計(jì)并實(shí)現(xiàn)了基于Web前端技術(shù)的網(wǎng)絡(luò)購物商業(yè)網(wǎng)站系統(tǒng)，是大前端與新型線上相結(jié)合，在使用VUE框架作為開發(fā)框架的前提下對比傳統(tǒng)購物方式設(shè)計(jì)了系統(tǒng)的結(jié)構(gòu)與功能，使得在互聯(lián)網(wǎng)發(fā)展迅速的時代線上購物成為潮流，并且大大滿足了用戶的需求與購物體驗(yàn)，促進(jìn)了電商的發(fā)展，是在互聯(lián)網(wǎng)新時代的一種嘗試?；赪eb前端技術(shù)的網(wǎng)絡(luò)購物商業(yè)網(wǎng)站系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)，對于未來實(shí)現(xiàn)數(shù)據(jù)驅(qū)動新型線上電商行業(yè)起了一定的幫助。

參考文獻(xiàn)：

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

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

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

[4] 蒲超.基于網(wǎng)站制作的Web前端開發(fā)技術(shù)與優(yōu)化[J].數(shù)碼世界，2020（4）：34.

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

[6] 汪雁.網(wǎng)站制作Web前端開發(fā)技術(shù)及優(yōu)化[J].電腦知識與技術(shù)，2019，15（28）：240-241.

[7] 周美玲，母軍臣.關(guān)于Web前端發(fā)展趨勢的探索[J].開封大學(xué)學(xué)報(bào)，2019，33（3）：84-85.

【通聯(lián)編輯：代影】