目录
中文摘要 I
ABSTRACT II
1 绪论 1
1.1 选题背景和意义 1
1.2 药品销售的现状 1
2 关键技术的分析与抉择 2
2.1 技术路线 2
2.1.1 技术可行性分析 2
2.1.2 操作可行性分析 3
2.2 Node技术及其Vue框架介绍 3
2.3 MongoDB 数据库的介绍 5
3 系统分析 5
3.1 需求分析 5
3.1.1 功能需求 5
3.2 数据流程图 6
4 系统设计 7
4.1 系统结构设计 7
4.2 系统功能设计 8
4.3 数据库设计 9
4.3.1 数据库设计概述 9
4.3.2 数据库的选择 9
4.3.3 数据库集合设计 10
5 系统实现 11
5.1 前台页面的原型设计 11
5.2 组件化的开发思想 13
5.3 响应式布局的实现 13
5.4 购物车操作实现 13
6 结论与展望 14
参考文献 15
致 谢 16
附录1 组件化开发、全面路由主要代码 17
附录2 响应式布局设计实现代码 19
附录3 购物车功能实现代码 23
中文摘要
随着科学技术的不断发展，中国的传统行业已经受到了互联网浪潮的不断冲击，在将来很大一部分会被互联网所取代。在传统的医药行业，传统的药品销售 方式都是实体药店销售，不仅成本高，还会受到时间、空间的限制，加上药店自身经营管理手段的落后，该销售模式在将来可能退出如今的市场经济。想要有所突破，提高销售利润，将实体药店线下销售模式与互联网线上销售模式相结合是一个不错的选择。
本文以构建一套在线药品商城销售系统为最终目标，系统采用B/S 架构，开发过程遵循前后端分离开发原则，前端开发使用的是HTML+CSS+JS 三大前端技术和 VUE 框架，后端开发使用了Node.js的Express框架加MongoDB数据库组合，前后端数据交互采用的是 VUE 官方推荐的 Axios 库，主要实现的功能有：前台药品列表的展示；药品列表多条件查询；购物车中药品增删改；用户登录；后台管理员登录、后台药品信息管理、后台用户信息管理等多个功能。在用户体验方面，页面开发采取响应式布局设计[1]，完美兼容PC端和iPad、手机等移动设备。
通过本次系统开发发现，Vue + Node 组合开发的药品商城帮助实体药店开拓了一条新的销售渠道，能够高效提高实体药店的日常工作效率，节省了大量的人力、物力成本。
关键词：药品商城；Node; 响应式布局
ABSTRACT
With the continuous development of science and technology, China’s traditional industries have been constantly impacted by the wave of the Internet. In the future, a large part will be replaced by the Internet. In the traditional pharmaceutical industry, traditional drug sales are sold in physical pharmacies, which are not only costly, but also subject to time and space constraints, as well as the pharmacy's own management and management methods. The sales model cannot adapt to the current market economy. To make a breakthrough and increase sales profits, it is a good choice to combine the offline sales model of physical pharmacies with the online sales model of the Internet..
This paper aims to build an online drugstore sales system. The system adopts the B/S architecture. The development process follows the separation development principle of the front and back ends. The front-end development uses the HTML+CSS+JS front-end technology and VUE framework. Development and use of a combination of Node + MongoDB, front and back end data exchange is used by the VXI official recommended 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 user experience, the drug display module adopts a responsive layout design and is perfectly compatible with mobile devices such as PCs and iPads and mobile phones.
Through the development of this system, it was discovered that the drug store developed by Vue + Node has helped the physical pharmacy open up a new sales channel, which can effectively improve the daily work efficiency of the physical pharmacy, and save a lot of manpower and material costs.
Keyword：Drug Mall, Node, Responsive layout