基于Vue + Node + MongoDB的响应式药品商城系统的分析与设计

Hydra

发布日期: 2018-11-17 17:26:53 浏览量: 1631
评分:
star star star star star star star star star_border star_border
*转载请注明来自write-bug.com

摘要

随着科学技术的不断发展,中国的传统行业已经受到了互联网浪潮的不断冲击,在将来很大一部分会被互联网所取代。在传统的医药行业,传统的药品销售方式都是实体药店销售,不仅成本高,还会受到时间、空间的限制,加上药店自身经营管理手段的落后,该销售模式在将来可能退出如今的市场经济。想要有所突破,提高销售利润,将实体药店线下销售模式与互联网线上销售模式相结合是一个不错的选择。

本文以构建一套在线药品商城销售系统为最终目标,系统采用B/S 架构,开发过程遵循前后端分离开发原则,前端开发使用的是HTML+CSS+JS 三大前端技术和 VUE 框架,后端开发使用了Node.js的Express框架加MongoDB数据库组合,前后端数据交互采用的是 VUE 官方推荐的 Axios 库,主要实现的功能有:前台药品列表的展示;药品列表多条件查询;购物车中药品增删改;用户登录;后台管理员登录、后台药品信息管理、后台用户信息管理等多个功能。在用户体验方面,页面开发采取响应式布局设计,完美兼容PC端和iPad、手机等移动设备。

通过本次系统开发发现,Vue+ Node 组合开发的药品商城帮助实体药店开拓了一条新的销售渠道,能够高效提高实体药店的日常工作效率,节省了大量的人力、物力成本。

关键词:药品商城;Node; 响应式布局

ABSTRACT

With the continuousdevelopment of science and technology, China’s traditional industries have beenconstantly impacted by the wave of the Internet. In the future, a large partwill be replaced by the Internet. In the traditional pharmaceutical industry,traditional drug sales are sold in physical pharmacies, which are not onlycostly, but also subject to time and space constraints, as well as thepharmacy’s own management and management methods. The sales model cannot adaptto the current market economy. To make a breakthrough and increase salesprofits, it is a good choice to combine the offline sales model of physicalpharmacies with the online sales model of the Internet..

This paper aims tobuild an online drugstore sales system. The system adopts the B/S architecture.The development process follows the separation development principle of thefront and back ends. The front-end development uses the HTML+CSS+JS front-endtechnology and VUE framework. Development and use of a combination of Node +MongoDB, front and back end data exchange is used by the VXI officialrecommended Axios library, the main functions are: front drug list display;drug list multi-condition query; shopping cart drugs add or delete changes;user login ; Background administrator login, background drug information management,back-end user information management and other functions. In terms of userexperience, the drug display module adopts a responsive layout design and isperfectly compatible with mobile devices such as PCs and iPads and mobilephones.

Through thedevelopment of this system, it was discovered that the drug store developed byVue + Node has helped the physical pharmacy open up a new sales channel, whichcan effectively improve the daily work efficiency of the physical pharmacy, andsave a lot of manpower and material costs

Keyword:Drug Mall, Node, Responsive layout

1 绪论

1.1 选题背景和意义

当下的中国,各个行业都受到了互联网的抨击与挑战,都已经掀起了向互联网发展的浪潮。在这样的发展趋势下, 优胜劣汰,竞争将日趋激烈。药品行业作为传统行业,关系着中国百姓的基本生活,也在寻求突破与发展。在国家不断推进医疗改革的影响之下,大部分药品企业将网络销售作为他们产品的第一销售渠道,同时结合信息化的管理系统对日常的销售工作进行合理的统计与安排。

在中国市场经济体制确定后,实体药房如雨后春笋,纷纷出现在大众视野,紧随其后的是管理制度的不规范,销售方式不合理。很多中小型药店或者社区门诊药房并没有突破传统,还是手工管理药品信息和单一的实体店销售。在中国现有的条件和大环境下,实体药店要充分与互联网相结合,借助互联网进行日常管理,销售。相比于大的医院、药厂,在实体药店这片市场领域,还存在着较大的空缺与市场,实体药店药品管理销售系统正好可以添补空缺、占领市场,实现日常药品管理的智能化,减少工作人员的成本与劳动量,提高日常的工作效率和药品的销售利润。

1.2 药品销售的现状

在进入21世纪后,国家逐渐重视起老百姓的民生问题,在药品行业,国家始终在不断尝试与创新,为人们提供最基本的医疗保障证,不再让老百姓看不起病,买不起药,为药品市场增添了活力。

古代药铺门前都会挂上一副对联: 但愿世间人无病,何愁架上药生尘,然而在如今的信息社会,各大药商为了提高药品销售利润,打着铺天盖地的宣传广告。往往在广告中药品疗效被夸大其词,肆意炒作,及其误导消费者,更进一步,有些药房的销售人员,为了提高业务销量,更是做起了“购药满88送鸡蛋10个”等促销活动,而有些医生,一个很常见的感冒发烧,能开出几百块钱的药给病人,一味地想赚钱,而未树立正常的医生形象、医德品质,会让顾客慢慢去而远之,最后形成生病就去大医院的局面,小诊所无人问津,严重导致社会资源使用不均匀。

2 关键技术的分析与抉择

2.1 技术路线

使用的技术路线是 Vue + Node + MongoDB ,采用前后端分离的方式开发基于MVVM 模式的药品在线销售系统。

MVVM(Model, View, ViewModel)架构是在MVC框架的基础上衍生出来的一种新的架构,Model用于逻辑处理,View负责页面展示,ViewModel用可比二者之间的桥梁、纽带,View与Model的变化,都会通过ViewModel 传递到对方身上,这就是MVVM架构所实现的双向数据绑定,其通信方式如图 2-1 MVVM 通信。

2.1.1 技术可行性分析

所使用的技术都是最几年比较流行,用户使用量大的编程语言,在各大公司的真正开发业务中也广泛使用,在全球最大的代码开源网站Github 上已经有十几万的点赞数,各大语言的交流社区活跃,在实际开发过程中,遇到的技术难题,也会有很多教程和朋友提供帮助。

2.1.2 操作可行性分析

该系统在操作使用上,用户无需进行任何程序的安装,只需要使用手机、平板、电脑等设备上安装的浏览器,即可访问和使用该系统,简单而不单一的页面设计更加方便用户的使用。

2.2 Node技术及其Vue框架介绍

2.2.1 Node.js的介绍

Node.js相比于其他后端语言,算是非常年轻了,诞生于2009年,它是一个能在Service端运行 JavaScript 的平台[3],同时Node.js 基于全球最大的包管理器 NPM, 使得Node得到广泛的传播和使用。在实际开发Node.js过程中,更有不同集成好的框架可供选择。

2.2.2 Vue.js的介绍

Vue.js 前端框架作为MVVM架构的一个代表,是中国技术牛人尤雨溪在2014年首次发布的个人开源项目,相比于无所不能的 JQuery库和同MVVM架构的React、Angular框架,Vue.js 提供简单的API,上手简单,学习曲线平缓使得发展迅猛,其主要特点体现在响应式编程、组件化、模块化、前端路由、稳定性等方面。

本系统由于前后端逻辑分离,所以页面的跳转需要在前台进行路由设定,用到了 Vue-Router 路由框架, 只需将组件与路由一一映射,在路由变化的同时,组件也会发生变化,从而实现了页面之间的跳转。

Vue 组件是组成页面的重要元素,不同页面页面的相同部分可以提取成一个组件,组件是以 .vue 结尾的文件,一个 Vue 组件的基本格式和内容组成如下。

  1. <template>
  2. <div class="test-container">
  3. </div>
  4. </template>
  5. <script>
  6. export default {
  7. name: 'test',
  8. data () {
  9. return {
  10. }
  11. }
  12. }
  13. </script>
  14. <style scoped>
  15. .test-container{
  16. width: 100%;
  17. height: 100%;
  18. background-color: #f5f5f5;
  19. }
  20. </style>

如上代码,一个名为text的Vue组件会将整个组件的样式、行为代码写进一个文件,更加方便了代码的维护。

如何使用这个text 组件,只需要在页面,或路由配置文件中引入即可,页面引入方式如下代码展示:

  1. <template>
  2. <div id="app">
  3. <test></test>
  4. </div>
  5. </template>
  6. <script>
  7. import Text from './test'
  8. export default {
  9. name: 'test',
  10. components: {Text},
  11. data () {
  12. return {
  13. }
  14. }
  15. }
  16. </script>
  17. <style>
  18. #app{
  19. width: 100%;
  20. height: 100%;
  21. background-color: #f5f5f5;
  22. }
  23. </style>

2.3 MongoDB 数据库的介绍

本次系统开发过程及其存储数据所使用的是MongoDB 数据库,MongoDB数据库也被称之为 NoSQL 数据库,相比于MySQL数据库,不需要编写复杂的SQL查询语句,其最大亮点是使用JSON风格语法。同时前后端的数据交互也都使用的JSON形式来传输,大大方便了数据的存储与查询。

3 系统分析

3.1 需求分析

需求分析作为软件工程中的一个关键的部分,主要任务是确定系统所要完成的功能,对整个系统提出完整、准确、规范、清晰、具体的要求。需求分析师和软件工程师需要从用户提出的需求出发,分析提炼,挖掘用户内心真实想要的,并将其转换为产品需求。必要的需求分析有利于提早发现错误,避免在系统开发过程中需求不断变化,提高技术人员的开发效率,降低开发成本,保证软件质量。

3.1.1 功能需求

本系统在功能设计上遵循模块化开发实现,将整体系统分为六大的功能模块,如图所示。

根据需求分析,系统在大体上分为前、后台两大部分,具体 功能可分为药品展示、药品信息管理、用户操作、用户信息管理、购物车管理和订单信息管理六个模块。具体如图3-1所示:

3.1.2 性能需求

本系统作为实体药店的管理销售系统,在用户、访问量将不断增加等情况下,高并发、系统安全、加载速度慢等一系列性能问题随之而来,确保系统运行在一个安全、平稳、可靠的环境下,需要做到如下几点:

  • 信息安全:在大数据环境下,个人信息的安全行无比重要,系统做到最基本的安全保障是让用户使用系统的前提。对于药品商城系统而言,更是尤为重要

  • 及时稳定性:在多用户同时访问、使用系统时,对服务器带来巨大的压力,往往会导致页面无法加载、数据不刷新、出错等一系列高并发问题

  • 健壮性:人们访问系统所使用的终端设备各不相同,想要做到完美的用户体验,系统代码必须具有健壮性,使其能在不同分辨率的设备上、不同厂商的高低版本上都有很好的页面展示及其功能的实现。在开发过程中。应尽量采用模块化开发,提供数据、程序模块的独立性

3.2 数据流程图

数据流程图以图形化方式反映出系统所要完成的功能。利用数据流程图能方便用户更加清晰地阐述系统需求、有利于开发人员更好的开发等。具体如图3-2所示:

4 系统设计

系统设计也称物理设计,起着承上启下的重要作用,在系统分析的基础上,将分析阶段反应用户需求的逻辑模型装换为可以具体实施的物理模型[6],在经过系统分析后,将得到系统新的逻辑模型。

4.1 系统结构设计

在技术日益更新的网络时代,用户需求不断变化,相应的信息系统的规模和复杂性也在随之改变。不同需求、功能的信息系统对系统所使用的体系结构有着不一样的要求,对于开发人员而言,在开发使用了不同的体系结构的系统时,所需要使用到的技术、开发周期以及系统在实际应用等方面都存在区别。选择合理正确的系统体系结构对整个系统起着关键作用。

本次系统开发所采用的体系结构是B/S架构,即浏览器/服务器架构,它是在WEB 不断发展的背景下,在C/S 架构(客户机/服务器架构)的基础上变化和改进后的一种新型架构模式。同C/S 架构相比,客户端无需安装制定的软件,只需要通过使用浏览器与WEB服务器通信实现数据交互。可以在不同的操作系统和终端设备下工作,而且具有统一的UI设计和逻辑交互。B/S 架构大大方便了客户端的工作,所有的数据的处理、存储、更新等都在服务器端,这样保证了用户无需升级更新,始终访问的是最新的数据。

系统的结构设计如图4-1所示:

用户使用本系统时,页面首次加载、页面跳转、登录退出等等操作都会触发浏览器发送请求给服务器,服务器中的WEB服务器将处理解析这些请求,服务器中的应用层部分调用业务逻辑与数据库进行交互,将请求到的数据处理后传回WEB层进行数据渲染后反馈给客户。

4.2 系统功能设计

功能设计是在最初的需求分析基础上,对系统因具备的功能进行概念性构建的创造活动。为了让整个开发流程更加清晰、高效,系统的功能设计应该分不同的模块进行,各个模块功能应采用一致的设计思路,简化设计的难度,提高代码的可读性与可维护性。

本系统的功能设计分成商品展示、用户操作、后台管理三大模块。如图4-2所示:

4.3 数据库设计

4.3.1 数据库设计概述

数据库相当于系统的仓库,存储着重要数据。用户所有的操作最终都是在同数据库进行数据交互,想要高效处理数据,好的用户体验,规范化的数据库设计是前提条件。

规范化数据库设计通常会有以下两个基本原则:

规范性:数据库规范设计是指使用正确的数据结构、字段类型来存储数据,确保在操作、维护数据库时,能对数据进行正常的处理;

数据冗余:在数据库设计中,应避免数据的冗余,过多的数据冗余不仅会占用更多的存储空间,对后期数据库的维护和检查带来不必要的麻烦。

4.3.2 数据库的选择

数据库的读写速度直接影响系统的用户体验,所以从一开始选择合适本系统的数据库尤为重要。从目前主流的数据库来看,莫过于MySQL和MongoDB,MySQL属于关系型数据库,而MongoDB被称为NoSQL 的数据库,二者在数据存储的方式上有很大差别,代表着不同的设计思路。

本系统选择的是MongoDB 数据库,主要考虑到以下几点:

  • MongoDB 使用了以JSON(JS对象表示法)为基础的文档存储模式,前后端数据交互通常也采用JSON数据格式,所以在数据存储、读取方面,MongoDB无需进行数据格式的转换等,更加直观

  • MongoDB相比于MySQL数据库而言,对于那些不懂后端开发的前端开发人员来说更加友好,在短时间内能快速学习、掌握并应用的实际的开发中

4.3.3 数据库集合设计

本系统数据库包含两个数据集合:Drugs 药品数据集和User 用户数据集,数据集字段表如表4-1所示:

Drugs 药品数据集
序号 字段名 类型 备注
1 drugId String 药品ID
2 drugName String 药品名称
3 salePrice Number 药品售价
4 drugImage String 药品图片
5 drugType Number 药品类别
6 drugCount Number 药品数量
7 checked String 是否选中
8 isHot Boolean 是否热销
9 isSee Boolean 是否可见
序号 字段名 类型 备注
User 用户数据集
1 userId String 用户ID
2 userName String 用户名
3 userPwd String 用户密码
4 orderList Array 订单信息
5 cartList Array 购物车信息
6 addressList Array 地址信息

5 系统实现

5.1 前台页面的原型设计

系统的前台是与用户进行交互的平台,前台页面效果相当于系统的外衣,决定着用户对系统的第一印象,好的前台体验效果才能吸引用户使用,在存在竞争对手时,用户往往会选择体验更好的产品。

“一图胜千言”,在系统正式开发之前,需要讨论需求和技术实现,设计好页面原型,避免在后面开发中的大规模修改,减少不必要的工作。

本系统前台主要用于商品的展示和用户选购商品,在编程实现上没有采用传统的Table页面布局方式,而是引入一种功能更强的、灵活性更好的 DIV+CSS 页面布局。前台一共包括首页、药品列表页、购物车页、生成订单页等四个页面。首页原型图和药品列表页原型图分别如图5-1和5-2所示:

5.2 组件化的开发思想

上面展示出系统首页和药品列表页的简单原型设计图,不难发现两个页面有相同的部分,头部 Header 导航和底部 Footer 信息,对于这些每个页面都相同的部分,为了减少重复工作和后期代码维护,需要将其从页面代码中抽离出来,形成单独的组件,只需在页面中引入即可,后期维护时,也只需修改单独组件。正因如此,本系统完全采用组件化的开发思想,页面是由大小组件组合而成,最小的按钮都可提取成组件。

正因为每个页面由组件组成,所以说页面之间的切换其实就是组件之间的切换。本系统开发所使用的前端技术Vue正好符合开发需求,Vue 常用于开发SPA单页面应用,单页面应用就是基于组件和路由,Vue-Router设定好路由与组件之间的映射,从何实现页面的切换。

5.3 响应式布局的实现

响应式布局是一种网络页面设计布局,能将PC桌面设备上的网页内容在移动设备上进行优化排版,使用户能够在移动设备上更方便使用和操作。

何时选择响应式布局开发?正如上面所提到,响应式布局开发是将PC 端的项目更好的展示在移动端,PC、移动端二者共用一个项目,因此,当系统的PC端页面和移动端页面十分相似,可以选择响应式布局开发。但对于那些内容复杂、使用量多的系统网站来说,为了追求更好的用户体验,PC端和移动端完全分开,分成两个不同项目开发,独立开发管理,更加科学高效。

如何实现响应式开发?首先介绍系统开发所使用到的一套响应式栅格布局,它预设5个响应尺寸:xs、sm、md、lg和xl , 代表着设备的不同屏幕尺寸,其底层实现思想借用的是媒体查询( @media )来创建不同屏幕尺寸的关键分界点阀值。

5.4 购物车操作实现

从日常网上购物体验流程:打开网站 > 搜索、浏览商品 > 加入购物车 > 生成、确定订单并支付来看,购物车算是本次系统的最为关键之处,跟用户、药品、订单、库存、促销等其它模块都挂钩。

购物车功能的用户体验好坏直接会影响用户是否直接消费,在设计购物车功能时我们需要考虑到以下几点:

  • 购物车的入口在哪?本系统在头部导航头提供了直接进入购物车入口,同时在用户浏览商品时,可直接添加商品到购物车

  • 购物车有哪些基本的展示和操作? 由于移动端、电脑端的屏幕尺寸不同,在移动端展示时会隐藏不常用的信息,但基本的信息都不可缺少,同时需要提供的基本操作包括药品数量的增,减、单件药品移除、多选框的选中取消、动态计算单件商品的总价和所有勾选商品的总价等

  • 有哪些细节应该考虑?在进入购物车之前我们应该判断用户是否登录,登录后方可进入购物车页面,并将展示用户之前加入到购物车的商品,在进行商品数量改变时,需要设定一个阀值,就是在商品数量仅剩一时,应该禁用减少按钮的操作,只能通过删除来移除商品

6 结论与展望

本系统在技术实现上使用了当下流行的技术和框架,功能方面能够满足小型的实体药店正常的工作使用,能够极大提高工作人员的开发效率和药店的营业额,能够帮助药店在实现全自动管理的道路上更进一步。

同时,本系统也有不少的遗憾与不足,由于个人独自开发,开发周期短,所考虑的肯定无法很全面,可能很多用户需求没考虑到,同时页面现实效果太过普通,同时整个开发流程缺少了代码编程规范和代码测试。

对于系统的展望,希望能以本系统为基础,向微信公众号、小程序靠拢,让用户能直接通过微信访问本系统。

参考文献

[1]祥保玉. 响应式内容管理系统的设计与实现[D].哈尔滨工业大学,2017.

[2]曾德强.中国之痛:医疗行业内幕大揭秘[M],2016(1)

[3] 李兴华. 基于WebSocket的移动即时通信系统[D]. 重庆大学, 2013.

[4] 沈姝. NoSQL数据库技术及其应用研究[D]. 南京信息工程大学, 2012.

[5] 魏桂梅. 面向医学院的医疗低值易耗品管理系统设计与实现[D]. 中国海洋大学, 2010.

[6] 慎东峰. 邮政储蓄中间业务管理信息系统及实施策略研究[D]. 吉林大学, 2006.

[7] 冯永祥,杨寒,李雷孝. 基于云计算平台的药品经营监督管理系统的研究与设计[J]. 内蒙古工业大学学报(自然科学版),2015,14(03):10-15

[8] 康文靖.医院药库管理信息系统分析[J]. 基层医学论坛, 2015,24(12):34

[9] 赵清华,林学华.基于DIV+CSS的网页布局技术应用研究[J].现代计算机(专业版),2010(05):140-142.

[10] 邢希,田兴彦,王世运.响应式Web设计方法的研究[J].琼州学院学报,2013,20(02):36-38.

[11] 王世明,李丹丹. 药品销售管理系统的设计与实现[J].产业与科技论坛,2015,05(05):23-25

网站界面截图

上传的附件 cloud_download 基于VUE和NODE的药品商城系统.7z ( 8.88mb, 46次下载 )
error_outline 下载需要13点积分

发送私信

希望从来不会放弃你,是你放弃了希望

15
文章数
23
评论数
最近文章
eject