基于VNM商城系统的设计与实现
来源:用户上传
作者:
摘要：基于最新的Vue.js+Node.js+MongoDB的前端框架，来建立一个内容丰富，操作便捷，更易于用户及商家进行交易，让买家省心、放心的商城平台便是我们希望的目标。基于当前掌握的技术，得以实现一个快捷、方便、高效的商城系统。搭建了一个基于Vue.js+Node.js+MongoDB的前端框架下的商城平台。用户可以在平台上浏览，搜索所需商品，商家可以在后台上传商品信息并实时发布到平台供用户进行购买，数据库会实时向用户展示平台上的各种商品。平台操作简单快捷，便于商家及用户的使用。
关键词：商城平台;Vue.js;Node.js;MongoDB数据库
中图分类号：TP393 文献标识码：A
文章编号：1009-3044（2019）21-0276-02
开放科学（资源服务）标识码（OSID）：
1 背景
随着互联网技术的发展与广泛应用，各类网络技术已经逐渐融入人们的生活当中，其中网上购物更是已经成为生活中必不可少的一部分。加之因为各大商业平台的建立以及对国家政策商户监管力度的加大，网上购物的安全性得到大大提高，网上购物的便利、快捷、实惠的优点逐渐被发挥出来。相比于传统的实体商业体系在未来几年里，相信网上购物的优势会得到更加充分的发挥，俗话说货比三家，在网上购物已经实现普及的当下，用户需要更全面、更多、更丰富的平台及商家来提供给供用户选择，届时网络用户对网上商城的需求量会大大增加，一些更内容丰富，更操作更便捷的网络商城势必会赢得用户的正面评价以及商家的信赖。技术上我们拆分组件，让每个组件独立化，一个不影响另一个组件，并且还能实现组件之间的通信，采用MVVM框架实现数据的双向绑定。后端只为实现接口，通过Express框架实现后端的REST接口并且以json格式输出。数据库选用MongoDB，它以最常见的json数据传输格式进行数据的存储，并可以和Node.js进行无缝的集成。
2 系统设计
2.1 需求分析
该系统是前后端分离开发，前后端功能需求完全独立，数据上却相互依靠。前端包括以下几点的核心功能模块：1）商品列表展示模块;2）登录注销模块;3）购物车模块;4）地址列表模块;5）订单详情模块;6）确认订单模块。后端主要实现的功能为：1）按要求查询商品列表功能;2）用户登录注销校验功能;3）对购物车相应数据的增加、查询、更新、删除;4）对收货地址相应数据的增加、查询、更新、删除;5）订单详情和订单确认功能。
该系统的开发工具使用的是Sublime Text 3，前端全部基于Node.js环境，使用npm包管理仓库，数据库是MongoDB。
2.2 功能模块分析
本系统前端采用SPA单页面开发，使得页面性能更优于传统的开发，内容的改变不需要重新加载整个页面，缓存较多的数据减少服务器压力。后端采用MVC架构的Node.js支撑，非常适合对于前端这种IO密集型的应用，降级运维成本，提高开发的灵活性，这一定会是一个大的趋势。这种开发模式，使得前台更注重展示逻辑，后台更注重业务逻辑，前后端开发的职责明确，形成高内聚低耦合的必然结果。可快速改变SSR模式流程，从前端-后端-数据库可快速改变为从前端-中间层-后台-数据库。
1）商品列表模块设计：实现商品列表的整体布局和组件拆分，根据mock数据实现商品列表的数据渲染功能，商品列表页面采用响应式设计，可以自适应手机、平板和电脑等多种设备。采用懒加载的加载模式，大大提高了页面的加载速度，提高用户体验，降低了后台API请求数据的压力。利用MongoDB提供的API接口实现升降序列排列功能，实现价格区间过滤选择功能。
2）登录模块设计：主要实现网站整体的登录，注销和用户校验功能，当用户未进行登录时不可以对购买商品进行操作，只能进行商品的查看，在后台中添加请求拦截可以实现此功能。用户登录后可以实现加入购物车以及购买商品等一系列操作。
3）地址模块设计：在登录成功之后，用户可以选择和管理自己的购物收货地址信息，具体可以实现新增收货地址，删除收货地址，设置默认收货地址以及查看收货地址等操作，当用户设置了默认收货地址后，下次购买商品时会默认选中该收货地址。
4）购物车模块设计：在用户登录成功之后，选择商品加入购物车，在购物车中可以查看到所选择商品的名称，商品的价格，商品购买的数量以及商品小计。可以对不想买的商品进行删除操作，可以修改商品要购买的数量，通过复选框选择要结算的商品，在选择复选框的同时也会自动计算总金额。购物车模块还提供全选功能，方便用户全选所有商品省去烦琐步骤。
5）确认订单模块设计：在用户登录成功后，经过确认地址的环节后进入确认订单模块，模块主要展示商品总计、配送费、折扣金额、税收金额和订单总额等信息，供用户确认自己购买的信息。
6）订单完成功能模块设计：当用户付款完成之后进入订单确认页。订单确认页会反馈给用户是否商品购买成功，并且建立一个订单号，这个订单号是整个订单完成功能模块的重点，为保证订单号的唯一，需要用到平台码，两位随机数以及时间和日期的组合。
2.3 数据库设计
数据是一套系统的关键，唯有数据的支持才能叫作一个完整的系统。在大前端的开发中，我选择了MongoDB数据库，众所周知数据库分为关系型数据库和非关系型数据库，而我选择的这种非关系型数据库拥有以json格式进行数据传输与存储，没有烦琐的业務关系的处理，并且与node.js兼容性非常的良好，我们采用mongoose对数据库进行操作。使用MongoDB Compass图形化管理数据。我们为本系统准备了两张表，一张表用来存放商品信息，另一张表用来存放用户信息。 3 总体设计
3.1 商城前台设计
在业务流程上，总共需要进行登录，加入购物车，购物车选择结算商品，选择收货地址，确认订单，商品付款，订单成功。
在技术上，我们采用Vue.js前端框架来实現，Vue.js是一款优秀的MVVM框架，可以独立构建SPA单一页面应用。在使用Vue.js中涉及很多内容，使用Vue-Router，这是主要针对前端页面路由的跳转，从商品列表到购物车以及地址等页面之间的转换都是通过Vue-Router实现，每个SPA都会有一台完整的路由。利用Axios用于异步接口请求，项目的Node通过提供Rest接口对接前端，前端所有的请求均通过Axios来实现数据接收和页面渲染。采用Vuex来实现状态集中管理，商城的登录状态和购物车数量等状态在每个页面都需要使用，因此使用Vuex来集中管理，大大降低我们组件开发数据传递的复杂度。
3.2 商城后台设计
后台使用的是Node.js语言，配合Express框架来一起构建成webAPI。整个商城后台通过Node.js进行实现，通过Express框架实现后端的REST接口，并以json的形式进行输出。配合与Node.js兼容性非常好的MongoDB数据库进行数据的存储。
4 结束语
该网上商城顺应了互联网时代的发展，能够满足当代人的社会生活。商城很好地将生活与互联网实际结合起来，使人们的生活更加简便，节约了在实体店购物的时间。此外该商城的商品种类齐全，还可以按价格高低等顺序排列，还能筛选不同价位的商品进行查看购买，样式新颖，能够抓住人们的眼球。由此，该网络商城的设计极大丰富了人们的生活，提高了购物的效率使购物更加便捷，是一个集美观与实用为一体的设计。
参考文献：
[1] 李鹏. Node.js 及 MongoDb 应用研究[J]. 天津科技， 2015（6）： 34-36.
[2] 高源. NoSQL非关系型数据库的发展和应用研究[J]. 计算机光盘软件与应用， 2014（5）： 136-136.
[3] 程桂花， 沈炜， 何松林， 等. Node.js中Express框架路由机制的研究[J]. 工业控制计算机， 2016， 29（8）： 101-102.
【通联编辑：谢媛媛】
转载注明来源:https://www.xzbu.com/8/view-15004998.htm
