校园购物网站设计中对web前端技术和Mysql数据库技术的应用

　　摘要：大学生已成为最大的上网群体，也是新思想接受最快、资讯传播最快的群体，因而成为网上购物的主要消费群体。针对大学生购物的需求，设计了校园购物网站，主要功能有个人登录，商品详情，购物车，订单信息，结账等功能。该设计基于VUE框架，Express框架，使用了web前端技术和Mysql数据库技术。经测试证明网站基本功能完善，对于类似网站的建设具有一定的参考价值。

　　关键词：校园购物； Express; Mysql;

　　1 引言

　　高等教育与网络普及相结合，导致大学生已成为网上购物的主要消费群体[1].当今在校大学生中上网比例已经非常高，他们是强大的消费群体，涉及电子、时尚、影像、数码、文化等产品，也是现在及将来中国网上购物的主要消费群体[2,3,4].同时，大学生的消费大量集中在校园周边，具有供应距离近，商品种类集中，单一物品消费量大的特点。然而对于如此庞大的消费市场，现今却少有专注于校园领域的高校网上购物网站。本文将使用web前端技术开发一个校园购物网站。

　　2 需求分析及系统架构设计

　　2.1 需求分析及设计思路

　　本系统是一个简易线上购物平台，为学校师生提供一个良好的校园购物环境。根据校园购物的需求进行分析，整个系统分为两个角色，一个是平台管理员角色，一个是平台用户角色。管理员管理平台的正常运行，负责购物商品的添加，修改，删除等其他功能管理，以及平台所有的购物订单的集中管理，并根据用户订单，及时安排人员配送商品。用户为平台的消费者，可以在平台上进行浏览商品，线上购物，根据购物商品的配送对订单进行签收管理。

　　基于上述需求，系统前端采用当下用户量最大的VUE框架，通过轻便简洁的Express框架开发后端架构，最后连接到MySQL数据库进行数据统一管理。前端通过设计直观简单的购物模块给用户提供一个良好的购物环境，用户通过选择商品，输入支付密码，设置收货地址，发送一次购物请求到Express搭建的后端系统对数据进行分析，处理完正确的数据，存储在数据表中，这样一次完整的购物就完成了。

　　2.2 系统设计架构

　　系统架构是系统最核心的一个部分，是系统运行的关键，是系统的最牢固的支持。根据本系统的需求分析，对系统的架构进行了详细的搭建，系统架构图见图1所示。

　　图1 系统架构设计图 

　　系统一共分为三大模块，前台系统，后台系统，数据库存储。前台系统是针对用户单独使用的一个系统，用户可以在前台进行购物等其他相关操作；后台系统是管理员单独使用的一个系统，对用户，购物商品和订单进行统一管理，后端系统包括多个后端业务模块是处理前台系统数据的一个核心模块，后端的业务模块不仅连接前后台系统，而且还连接数据库，对数据的处理起着至关重要的功能；数据库模块主要用来存储系统中所有数据，对不同的数据进行不同的管理，避免数据出现混乱和重复[5,6].

　　3 子模块设计与实现

　　3.1 前台系统模块

　　3.1.1用户登录模块

　　用户在平台输入登录账号和密码，系统判断账号是否存在，如果账号存在则继续判断密码是否正确。如果账号不存在，则跳转到注册页面，提醒用户注册。当账号和密码都验证通过后，系统登录成功。用户可以进行下一步操作。

　　3.1.2个人信息模块

　　个人信息模块主要功能为：用户登录后，对自己个人详细信息进行填写，包括设置自己的支付密码，用户昵称，用户头像，收货地址等个人信息。个人的登录密码也在这个模块进行管理。用户在输入旧登录密码后，可以设置新的登录密码。当忘记密码后，还可以通过手机验证的方式修改登录密码。

　　3.1.3商品展示模块

　　商品展示模块用来在平台上展示商品信息，实现用户在平台上浏览和查询商品。商品展示有两种方式。第一种是系统自动推荐模式，这种模式是进入系统后的默认模式，在系统的首页显示所有商品，用户可以向下翻页。商品默认根据销售量大小进行排序，此外，用户还可以选择根据价格高低，发布日期等进行排列显示。第二种方式是根据商品类别进行显示。商品的类别有由系统管理者在后台进行设置，用户查看时，通过点击侧边栏选项卡进行类别选择。常用的类别包括：热门，零食，水果，日用品等等。

　　在任何模式下，用户通过点击商品，进入商品详情展示页面，获取商品的进一步的信息，然后用户可以根据自己的喜爱浏览商品进行购物。

　　3.1.4购物车模块设计

　　购物车用于对用户需要购买的商品进行统一管理和统一下单。用户在平台将自己准备购买的商品添加到自己的购物车，然后进入购物车再次对商品进行筛选，并决定是否下单。购物车的实现可以方便用户进行商品的选购，提高用户购物效率。

　　3.1.5订单管理模块

　　订单管理模块实现用户对自己所有订单的管理，包括已完成订单，未收货订单和未发货订单等。已完成订单按照订单生成日期排列，并显示用户所有已经完成的订单，用户可以点击查看订单的详细信息，也可以手动删除选中的订单；未收货订单显示已经发货，但是用户没有确认收货的订单，这些订单，用户可以选择退货，换货，投诉等功能；未发货订单是用户已经付款，商家没有发货的订单，用户可以选择取消订单，提醒发货等功能。

　　3.2 后台系统模块

　　后台系统包括用户管理、商品管理、类别管理和订单管理四个模块。系统管理员打开系统后台网址，输入管理员用户名和密码后，则可以进行系统的后台操作。各模块的功能设计如下。由于篇幅限制，仅展示订单管理模块的实现结果，见图2所示。

　　图2 订单管理   

　　3.3 数据库模块

　　本设计使用Mysql来进行数据库的设计。根据系统的基本功能与系统架构分析，设置了基本的数据模型，然后设置系统的数据库的E-R图，设置E-R图的实体以及属性，根据实体之间的关系进行数据表的设计。通过对不同的数据实体设置了数据表，对不同的数据属性设置不同数据表的数据字段，来规范和管理数据信息[7,8].

　　4 结语

　　本文设计的基于VUE框架，Express框架与MySQL数据库的校园购物系统。其主要目标就是满足校园师生日常需要的线上购物，具有操作简单明了，设计人性化，符合大学生需求的优点。但是由于时间紧迫，系统也存一些不足，后续将继续更新完善，以期达成一个完整的购物系统。

　　参考文献

　　[1]周立东。校园购物网的设计与实现[J].电脑知识与技术，2006（36）：104-105.

　　[2]刘利琴。校园购物网站下用户体验模型设计与实现[J].赤峰学院学报（自然科学版），2017（6）：20-21.

　　[3]杨毅。Web前端开发技术探讨[J].电脑知识与技术，2014（23）：5458-5459.

　　[4]聂常红。Web前端开发技术：HTML、CSS、JavaScript[M].第3版。北京：人民邮电出版社，2013:346.

　　[5]王赫。Web前端开发技术以及优化方向分析[J].科技传播，2016（8）：70,77.

　　[6]储久良。Web前端开发技术[M].第3版。北京：清华大学出版社，2018:411.

　　[7]王健，李华阳，施德群。中外百货公司购物网站之综合比较分析[J].长春理工大学学报：社会科学版，2013（2）：128-130.

　　[8]吴江，黄晟青，蔡骏。互联网购物网站用户体验设计研究[J].包装工程，2012,33（8）：68-71.