基于SSM的前后端分离电商网站的设计与实践

戈家龙 吴红亚 杨保华

摘要：21世纪互联网处处是机遇，谁能够把握机会，将产品快速上线，谁就有可能获得领先地位。论文基于SSM三大框架javaEE框架spring、springMVC、Mybatis，设计完成了电商网站。首先分析了基于前后端分离的电商网站的必要性和优势，然后对电商网站进行了需求分析和程序设计，探讨了前后端网站开发的技术实现。论文设计了基于SSM框架的前后端分离的电商网站，实现了一些电商网站的基本功能，如登录注册、加入购物车、提交订单、付款。

关键词：电商网站；架构；前后端分离；测试

中图分类号：TP393 文献标识码：A 文章编号：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 背景

随着互联网的高速发展，电子商务也日新月盛，人们在网上购买商品已经是非常平常的事情，电商网站正是其中的核心[1]。如何高效，快速地开发网站，成为企业的制胜关键[2]。前端、后端和数据库组成了一个完整的网站[3]。传统的开发方式将前端代码和后端代码混杂在一起，如ASP、JSP技术等，这种开发模式需要在前端穿插后端工作或在后端穿插前端工作，导致代码可读性差，开发效率低等问题。基于以上原因，前后端分离的开发架构孕育而生[4-5]，提高了网站的开发效率、代码逻辑更加清晰，更加容易应对变化不断的需求，更容易维护，综合减少开发成本。

该论文采用前后端分离和模块化相结合的开发方式，IDE选择IntelliJ Idea，与当下最流行的三大javaEE框架spring、springMVC、Mybatis相结合，服务器采用tomcat，数据库选取Mysql。

2 电商网站的分析与设计

2.1 电商网站的需求分析

分为门户部分和后台管理部分。

2.1.1 门户部分

由以下部分组成：用户模块、商品模块、购物车模块、支付模块、订单模块、收货地址模块组成，门户部分如图1所示。

2.1.2 后台管理部分

由以下几个模块组成，商品模块、品类模块、订单模块、用户模块。

2.2 电商网站的架构设计

2.2.1 前端架构设计

选择较为稳妥的Jquery和Css，，而后台管理系统则追求快速且无SEO要求，所以选择AngularJS。

2.2.2 后端架构和技术选型

后端采用最经典的MVC模型，但不要View层，因为项目是前后分离的，后端只需要为前端提供数据即可。框架选择时下流行的spring+springmvc+mybatis的组合，数据库采用mysql。

2.2.3 电商网站数据库实现

数据库表的结构包括用户表（user）、商品表（product）、收货地址表（shipping）、购物车表（cart）、品类表（category）、订单表（order）、订单详情表（order_item）和支付信息表（pay_info）。以商品表为例，用来记录商品的信息，ID为主键，如表1所示。

3 电商网站的实现

3.1 后端接口的实现

后端有用户模块、产品模块、购物车模块、收货地址模块、订单模块和支付模块，以产品模块为例。

3.1.1 产品模块

1）产品搜索及动态排序

参数keyword、categoryId、pageNum、pageSize、orderBy，其中关键字和产品Id非必要，即可以通过关键字或产品Id搜索产品。pageNum默认为1，pageSize默认为10，即默认分页为1页，每页10条产品信息，orderBy默认为升序。

2）产品详情

查看产品详情需要提供产品的id，成功则返回产品的详细信息。如图2所示：

4 电商网站的测试

电商网站采用的是模块化的开发方式，所以，软件测试也可以用模块化的方式。经测试，前端、后端和后台管理测试数据正常显示，功能完整。

5 结束语

该文首先完成了电商网站的系统需求分析；其次，前端技术、javaEE技术以及数据库等技术进行综合应用，实现了前后端分离和模块化相结合的开发方式，完成了SSM框架前后端分离的电商网站及其基本功能的设计；最好顺利通过了测试。

参考文献：

[1] 张夏恒. 跨境电商类型与运作模式[J].中国流通经济，2017， 31（1）： 76-83.

[2] 曾志明. 网站开发技术的比较研究[J].电脑知识与技术，2010， 6（5）： 1075-1078.

[3] 阳小兰， 罗明. 基于Spring+SpringMVC+MyBatis网上论坛的设计与实现[J]. 科学技术创新， 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的设计模式[J]. 智能计算机与应用， 2016（2）： 104-105.