基于前后端分离技术的在线商城的设计与实现

邹瑞 段华琼

摘要：随着移动终端的多样化，各种各样的终端涌现出了新的需求。为了满足这些需求，Web应用选择了一种分离式开发——前后端分离技术，提升了项目的扩展性和维护性。该文研究了一个在线商城的设计，并通过前后端分离架构来实现，包括前后端的分离、nginx服务器的配置、mongoDB数据库。

关键词：前后端分离;在线商城;Vue.js技术;Node.js技术

中图分类号：TP311        文献标识码：A

文章编号：1009-3044（2020）26-0231-02

1系统概述

当今是移动互联的时代，各种终端的使用，Web应用要适用在多终端上，用户对Web应用有了更高的要求。开发人员在编写程序的过程之中，如果采用传统的前后端耦合在一起的方式进行开发，会使得代码冗杂，可读性和可重用性下降。前后端分离的开发模式可以减少这些问题的产生。前后端分离后，代码的可读性、可重用性增强。而且因为是分别部署，系统的性能也会有所提升。在前后端分离的开发模式中，开发者只需各司其职，后端程序员只负责业务逻辑，向前端程序员提供API接口。前端人员负责将API接口上获得的数据渲染到HTML页面上[1]。前后端分离实现了项目的可扩展性、维护性以及分工的明确性。

本在线商城系统采用前后端分离的开发模式，包括三个方面：首先通过ajax实现代码分离;然后部署分離，即前后端分别部署在不同的服务器上，通过不同的IP和端口对外提供服务;最后是开发分离，即开发人员分离为前端开发和后端开发。前端采用Vue.js、ElementUI、axios、BooStrap框架实现Web网页显示内容，后端采用Node.js、express技术和mongoDB作为后台数据库实现数据库的读写、调用等，并使用Nginx服务器的反向代理技术完成在线商城的设计与开发。

2 系统设计

2.1 系统功能设计

2.1.1前端功能设计

在线商城的用户包括访客、用户（会员用户+非会员用户）。其中，访客只能够浏览、搜索站内的商品，不能将产品加入购物车并购买。登录用户可以浏览商品、查看商品、查看购物车、购买商品以及对已购买的商品做出评价。会员用户可以享受未包邮的商品提供包邮的权利，而且对于部分商品的购买有折扣力度。用户通过登录前端的页面管理和操纵前端的模块。

1）商品搜索：用户可以根据分类栏的“商品类别”来查找对应的商品，并跳转到只有该类商品的页面，商品种类的区分是为了帮助用户在挑选商品的针对性、高效性。

2）添加购物车：用户挑选好商品后，通过加入购物车的操作，实现欲购买的商品的统一收集，在购物车页面进行最后的结算。

3）用户登录注册：用户通过注册后登录该在线商城，登陆成功后跳转到商城的首页。

4）修改用户信息：用户登录后，在“我的”页面进行账号信息的修改，如：密码、手机号、账号名称、地址管理等。

2.1.2后端功能设计

以管理员身份登录系统后，可以实现商品的管理功能。如：商品上架、删除商品、更改商品价格、发送优惠券福利、商品分类等。

2.2数据库设计

本系统采用高性能的mongoDB的数据库，mongoDB将数据存储成为一个文档，类似于.json文件。本系统设计了以下数据表：

1）用户表：存放用户信息，包括用户ID、用户昵称、用户手机号、用户密码，是不可省略并且默认值为null的类型;

2）商品表：存放商品信息，包括商品ID、商品名称、商品价格、商品类别和商品数量，是不可省略并且默认值为null的类型;

3）购物车表：存放购物车信息，包括商品ID、商品数量、商品价格以及商品的移入/移出购物车的操作，是不可省略并且默认值为null的类型;

4）管理员表：存放管理员的账号信息，包括管理员账号ID、管理员密码，是不可省略并且默认值为null的类型，是由商城系统初始构建时设定。

3 相关技术

3.1前端技术

前端采用Vue.js框架，它是前端开发的主流框架之一，主要用来制作页面效果。前端将视图层划分成了MVVM（Model-View-View Model），它是MVC（Model-View-Controller）改进的模式。不同的是MVVM是前端视图层的思想，而MVC是后端分层开发的概念，可以将视图层更好的分离。Vue.js与其他重量级框架不同的是，它是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计方式，是更加灵活、开放的解决方案，架构也更加简单，还便于与第三方库或既有项目整合[2]。通过ajax实现代码分离，Vue.js本身不支持发送ajax请求，需要通过安装axios插件来实现代码的分离。

3.2 nginx服务器

Nginx软件是一个开源、高性能、可靠的HTTP中间件和反向代理服务器， 也是一个IMAP/POP3/SMTP代理服务器。相较于Apache和lighttpd，其具有占用内存少、稳定性高等优势，并且以并发能力强、丰富的模块库以及友好灵活的配置而闻名[3]。nginx服务器的配置是通过nginx.conf配置文件来实现的，其中有全局设置、主机设置、上游服务器设置、URL匹配特定位置后的设置。server虚拟主机中的监听端口需要设置和前后端相对应的端口号，location中的proxy_pass http：//ip：port是转向ip地址为port定义的一个服务器的列表即反向代理。运行nginx即完成了nginx服务器的配置。

3.3后端技术

后端采用Node.js框架和express。Node.js 基于 Chrome V8 引擎的 JavaScript 运行，使用高效、轻量级的事件驱动、非阻塞 I/O 模型，它的包生态系统 npm 是目前世界上最大的开源库生态系统[4]。npm（node package manager）是Node的包管理器，允许开发人员在Node.js应用程序中创建、共享并重用模块。可以通过npm命令在Node.js上安装、卸载、升级、查询第三方的软件包来完成。通过npm init来初始化项目目录，安装express和其他相关模块并引用，express是基于Node.js中http模块和Connect组件的Web框架，提供了一个类似于MVC的架构，为Web应用提供了一个良好的结构（视图、路由、模型）。创建后端接口与mongoDB的数据库进行连接，代码如下。

4系统部分功能实现

4.1商城主页

商城的主页是商品页面，有导航栏、分类栏、商品栏三大模块。导航栏通过elementUI组件结合“v-if”的条件渲染、全局路由的配置、“v-on事件绑定”配合函数来实现页面之间的跳转，路由通过API实现动态改变页面的url，减少http请求。分类栏是通过elementUI组件和“v-on事件绑定”配合函数选择一特定的商品种类从而来实现区分不同商品种类，提高选购效率。商品栏是通过elementUI组件和“v-for”封装成为商品的组件从而在商城首页之中显示。

4.2登录/注销页面

用户输入注册账号信息进行登录。登录时，用户名或密码错误都无法登陆成功。登录失败只显示首页商品，不能对商品进行其他操作，包括加入購物车、结算商品、加入心愿单等。登录后可对商品进行加入购物车、修改账户信息等操作。登录、注册、注销需进行一个“v-if”是否登录的判断，若登录，则不显示登录页面路由;若未登录，则显示登录页面路由。此外，注销的“@click”监听与函数共同实现注销功能，退出登录、提示注销并跳转到商城主页页面，显示注册和登录页面路由。

4.3购物车页面

购物车界面可以增加/减少商品的数量、对商品进行删除操作，通过查询商品的名称来指定显示购物车中商品的名称、价格、数量等。如：搜索“炸鸡”，会搜索出加入购物车之中的炸鸡信息，而不会出现购物车中所有的商品。查询商品通过“v-model”实现数据的双向绑定，实现关键字的搜索。商品数量的增减通过选择“商品数量”单元格设置点击绑定事件，并将修改后的数据发送到数据库中，此外还添加了jQuery的键盘事件“keyup（）”方法，便于用户修改完成后，通过“回车键”即可修改商品数量的操作。删除商品通过“@click.prevent”结合函数来选择ID删除指定商品，并将修改后的数据发送到数据库中。

4.4用户管理页面

管理员通过“用户管理页面”进行管理用户信息的操作。管理员进入管理页面可查看所有已注册的用户信息。通过用户账号昵称/ID条件进行搜索用户信息;对用户账号进行删除和修改操作。查询商品通过“v-model”实现数据的双向绑定，实现用户昵称/ID的搜索;删除操作通过@click结合函数来删除指定用户;修改操作通过选择欲修改的单元格设置绑定事件，还添加了jQuery的键盘事件“keyup（）”，便于管理员修改完成后，通过“回车键”修改用户信息的操作。

5总结

前后端分离式开发有效地提高了开发的效率，同时模块化的开发方式也让分工更明确，同时也让项目有了更高的复用性和可扩展性，使得编程的质量得到了很大的提升，减少了不必要的开发时间。本文从系统概述、系统设计、相关技术、系统部分功能实现这四个方面阐述了本在线商城的设计与开发工作。前端的Vue.js框架，后端的Node.js框架，mongoDB数据库三者有效结合实现了该在线商城的系统的开发。主体功能实现较为完整，参与在线商城的开发人员经验不丰富，本平台的界面美观、交互体验有待提升。

参考文献：

[1] 迟殿委.前后端分离的Web架构解决方案[J].智慧工厂，2019（6）：37-38.

[2] 朱二华.基于Vue.js的Web前端应用研究[J].科技与创新，2017（20）：119-121.

[3] 王文选.巧用Nginx反向代理解决监管机构与被监管单位间多点接入问题[J].金融科技时代，2019（4）：33-36.

【通联编辑：朱宝贵】