基于SSM的前后端分離電商網(wǎng)站的設(shè)計(jì)與實(shí)踐

戈家龍 吳紅亞 楊保華

摘要：21世紀(jì)互聯(lián)網(wǎng)處處是機(jī)遇，誰(shuí)能夠把握機(jī)會(huì)，將產(chǎn)品快速上線，誰(shuí)就有可能獲得領(lǐng)先地位。論文基于SSM三大框架javaEE框架spring、springMVC、Mybatis，設(shè)計(jì)完成了電商網(wǎng)站。首先分析了基于前后端分離的電商網(wǎng)站的必要性和優(yōu)勢(shì)，然后對(duì)電商網(wǎng)站進(jìn)行了需求分析和程序設(shè)計(jì)，探討了前后端網(wǎng)站開(kāi)發(fā)的技術(shù)實(shí)現(xiàn)。論文設(shè)計(jì)了基于SSM框架的前后端分離的電商網(wǎng)站，實(shí)現(xiàn)了一些電商網(wǎng)站的基本功能，如登錄注冊(cè)、加入購(gòu)物車(chē)、提交訂單、付款。

關(guān)鍵詞：電商網(wǎng)站；架構(gòu)；前后端分離；測(cè)試

中圖分類(lèi)號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）13-0276-02

Design of the Frontend and Backend Separation E-commerce Website Based on SSM

GE Jia-long， WU Hong-ya，YANG Bao-hua

（Changzhou Vocational Institute of Mechatronic Technology，Changzhou 213164， China）

Abstract： The Internet is everywhere in twenty-first Century. If the opportunity and the product can grasped and launched quickly， the leading position will be wined by the company. The e-commerce website is designed based on the three major frameworks of SSM which are javaEE framework spring， springMVC and Mybatis. Firstly， the necessity and advantages of the e-commerce website based on the separation of the front end and the end are analyzed. Then， the demand analysis and program design of the e-commerce website are carried out， and the technology implementation of the front end website development is discussed. Finally，an e-commerce website is implemented based on the SSM framework， and the basic functions is realized， such as registration， shopping cart， order and payment.

Key words： e-commerce website； framework； Separation of frontend and Backend； test

1 背景

隨著互聯(lián)網(wǎng)的高速發(fā)展，電子商務(wù)也日新月盛，人們?cè)诰W(wǎng)上購(gòu)買(mǎi)商品已經(jīng)是非常平常的事情，電商網(wǎng)站正是其中的核心[1]。如何高效，快速地開(kāi)發(fā)網(wǎng)站，成為企業(yè)的制勝關(guān)鍵[2]。前端、后端和數(shù)據(jù)庫(kù)組成了一個(gè)完整的網(wǎng)站[3]。傳統(tǒng)的開(kāi)發(fā)方式將前端代碼和后端代碼混雜在一起，如ASP、JSP技術(shù)等，這種開(kāi)發(fā)模式需要在前端穿插后端工作或在后端穿插前端工作，導(dǎo)致代碼可讀性差，開(kāi)發(fā)效率低等問(wèn)題。基于以上原因，前后端分離的開(kāi)發(fā)架構(gòu)孕育而生[4-5]，提高了網(wǎng)站的開(kāi)發(fā)效率、代碼邏輯更加清晰，更加容易應(yīng)對(duì)變化不斷的需求，更容易維護(hù)，綜合減少開(kāi)發(fā)成本。

該論文采用前后端分離和模塊化相結(jié)合的開(kāi)發(fā)方式，IDE選擇IntelliJ Idea，與當(dāng)下最流行的三大javaEE框架spring、springMVC、Mybatis相結(jié)合，服務(wù)器采用tomcat，數(shù)據(jù)庫(kù)選取Mysql。

2 電商網(wǎng)站的分析與設(shè)計(jì)

2.1 電商網(wǎng)站的需求分析

分為門(mén)戶部分和后臺(tái)管理部分。

2.1.1 門(mén)戶部分

由以下部分組成：用戶模塊、商品模塊、購(gòu)物車(chē)模塊、支付模塊、訂單模塊、收貨地址模塊組成，門(mén)戶部分如圖1所示。

2.1.2 后臺(tái)管理部分

由以下幾個(gè)模塊組成，商品模塊、品類(lèi)模塊、訂單模塊、用戶模塊。

2.2 電商網(wǎng)站的架構(gòu)設(shè)計(jì)

2.2.1 前端架構(gòu)設(shè)計(jì)

選擇較為穩(wěn)妥的Jquery和Css，，而后臺(tái)管理系統(tǒng)則追求快速且無(wú)SEO要求，所以選擇AngularJS。

2.2.2 后端架構(gòu)和技術(shù)選型

后端采用最經(jīng)典的MVC模型，但不要View層，因?yàn)轫?xiàng)目是前后分離的，后端只需要為前端提供數(shù)據(jù)即可。框架選擇時(shí)下流行的spring+springmvc+mybatis的組合，數(shù)據(jù)庫(kù)采用mysql。

2.2.3 電商網(wǎng)站數(shù)據(jù)庫(kù)實(shí)現(xiàn)

數(shù)據(jù)庫(kù)表的結(jié)構(gòu)包括用戶表（user）、商品表（product）、收貨地址表（shipping）、購(gòu)物車(chē)表（cart）、品類(lèi)表（category）、訂單表（order）、訂單詳情表（order_item）和支付信息表（pay_info）。以商品表為例，用來(lái)記錄商品的信息，ID為主鍵，如表1所示。

3 電商網(wǎng)站的實(shí)現(xiàn)

3.1 后端接口的實(shí)現(xiàn)

后端有用戶模塊、產(chǎn)品模塊、購(gòu)物車(chē)模塊、收貨地址模塊、訂單模塊和支付模塊，以產(chǎn)品模塊為例。

3.1.1 產(chǎn)品模塊

1）產(chǎn)品搜索及動(dòng)態(tài)排序

參數(shù)keyword、categoryId、pageNum、pageSize、orderBy，其中關(guān)鍵字和產(chǎn)品Id非必要，即可以通過(guò)關(guān)鍵字或產(chǎn)品Id搜索產(chǎn)品。pageNum默認(rèn)為1，pageSize默認(rèn)為10，即默認(rèn)分頁(yè)為1頁(yè)，每頁(yè)10條產(chǎn)品信息，orderBy默認(rèn)為升序。

2）產(chǎn)品詳情

查看產(chǎn)品詳情需要提供產(chǎn)品的id，成功則返回產(chǎn)品的詳細(xì)信息。如圖2所示：

4 電商網(wǎng)站的測(cè)試

電商網(wǎng)站采用的是模塊化的開(kāi)發(fā)方式，所以，軟件測(cè)試也可以用模塊化的方式。經(jīng)測(cè)試，前端、后端和后臺(tái)管理測(cè)試數(shù)據(jù)正常顯示，功能完整。

5 結(jié)束語(yǔ)

該文首先完成了電商網(wǎng)站的系統(tǒng)需求分析；其次，前端技術(shù)、javaEE技術(shù)以及數(shù)據(jù)庫(kù)等技術(shù)進(jìn)行綜合應(yīng)用，實(shí)現(xiàn)了前后端分離和模塊化相結(jié)合的開(kāi)發(fā)方式，完成了SSM框架前后端分離的電商網(wǎng)站及其基本功能的設(shè)計(jì)；最好順利通過(guò)了測(cè)試。

參考文獻(xiàn)：

[1] 張夏恒. 跨境電商類(lèi)型與運(yùn)作模式[J].中國(guó)流通經(jīng)濟(jì)，2017， 31（1）： 76-83.

[2] 曾志明. 網(wǎng)站開(kāi)發(fā)技術(shù)的比較研究[J].電腦知識(shí)與技術(shù)，2010， 6（5）： 1075-1078.

[3] 陽(yáng)小蘭， 羅明. 基于Spring+SpringMVC+MyBatis網(wǎng)上論壇的設(shè)計(jì)與實(shí)現(xiàn)[J]. 科學(xué)技術(shù)創(chuàng)新， 2016（36）： 279-280.

[4] Selakovic M， Pradel M. Performance issues and optimizations in JavaScript： an empirical study[C]// Ieee/acm， International Conference on Software Engineering. IEEE， 2017： 61-72.

[5] 白蕾， 郭清菊， BAILei， 等. HTML5與CSS3的設(shè)計(jì)模式[J]. 智能計(jì)算機(jī)與應(yīng)用， 2016（2）： 104-105.