【《基于Web的呼伦贝尔特产销售系统设计与实现》7900字】

基于Web的呼伦贝尔特产销售系统设计与实现摘要随着社会发展、科技进步，互联网在各个领域中都得到了更为广泛的应用。现如今的社会已经逐渐走向信息化，伴随互联网的诞生我们的生活也正在潜移默化的改变，购物方式也随之更迭，以往的生活我们只能在商城里购物，而现如今随着互联网的发展，我们已经习惯地享受在网上商城购物所带来的乐趣。网上商城应用凭借着快捷的优势迅速发展,而现如今已融入大家当下的生活，也越来越受到大家的欢迎与追捧。由综上所诉，故本文想要实现一个网上的商城，一个基于Web的呼伦贝尔特产销售系统。一个小孩和老人都会使用的手机移动端呼伦贝尔特产销售系统。之所以做成手机移动端而不是电脑端是想要给顾客呈现出一个想买随时买的销售系统。本文将采用JS技术和HTML、CSS为主要编程语言，使用VisualStudioCode软件为开发环境,利用Web工具设计进行开发网上特产销售系统,开发实现出简单易操作并且种类多种多样的网上特产系统。现在这个高速发展的时代网上购物几乎成了大多数人每天都需要做的事情，不管你任何时间、任何地点、想要任何物品，网上销售系统都能帮你实现到，并且价格优惠、正品保障、种类多种多样。所以，实现一个网上销售系统是很必要的，而我国作为舌尖上的中国，一个盛产美食的国度，所以实现出一个特产销售系统也是非常必要的。故，本课题具有广泛的研究意义和一定的应用价值。关键词：Web；网上商城；特产销售系统；呼伦贝尔目录TOC\o"1-2"\h\u25372基于Web的呼伦贝尔特产销售系统 页）一、引言现如今社会科学技术发展迅速，尤其是互联网技术在所有科技中一马当先。当下几乎所有商品、服务、旅游、娱乐等人类所需服务都可以在网上商城中得到实现，互联网在未来也将拥有不可替代的地位[1]。现在伴随互联网技术的快速发展，人们都逐渐偏爱在网上商城上购物。而本文就是实现一个网上商城，基于Web的呼伦贝尔特产销售系统；本文所开发的特产销售系统种类、规格、口味都多种多样，对于全国各地想要购买呼伦贝尔特产的顾客是非常方便的，尤其是远在外地思念家乡呼伦贝尔特产的朋友；且网上特产销售系统不需要花费租用或购买门店的费用，这也给商家节约了一部分开支；呼伦贝尔特产的单价不高，即使在现有网络信用机制还不健全的情况下，也不会造成太大损失。因此人们逐渐倾向于网上销售。对于网上特产商城而言来说，互联网的普及带来大量来自全国各地的客户，且成本低廉[2]。对于买家来说，网上购物选择范围更广，而且不用受时间、地点限制，这大大节省了许多用户的精力和时间[3]。综上，基于Web的网上特产销售系统拥有极大的发展空间。本文将采用JavaScript和jQuery编辑语言，使用VisualStudioCode软件为开发环境，利用Vue高级框架、路由跳转、Axios数据处理等Web工具设计和开发呼伦贝尔特产销售系统[4]，具体开发模块包括：首页详情模块、分享购物模块、购物车模块、我的模块等。基于Web的特产销售系统实现了用户登录和退出、用户上传头像、浏览和收藏商品、管理购物车、发布和删除评价等功能，是一个简单易懂的特产销售系统。基于Web的呼伦贝尔特产销售系统是按照现在流行的购物软件制作而成，通过一系列需求分析、系统设计、系统功能实现和系统测试开发呼伦贝尔特产销售系统，呼伦贝尔特产销售系统的成功开发，为想要购买呼伦贝尔特产的顾客提供便捷与正品保障，使大众进一步了解呼伦贝尔的特产和文化。（一）选题意义本文主要所写呼伦贝尔的特产销售系统，之所以想要在网上卖特产，是因为当下社会互联网的发展是非常有前景的，现如今有很多的年轻人都是靠网上卖货而发家；而且无论你想要买什么东西都能够在网上商城买到，并且不仅价格便宜还有正品保障；所以在网上卖特产是一种非常明智的选择。之所以卖呼伦贝尔的特产，一是因为内蒙古的人们是十分好客的，有远道而来的朋友来拜访都会拿出极具当地特色的美食来热情地招待朋友，因此呼伦贝尔的特产也是由此出名的；二是呼伦贝尔有着最大的草原，每年有旅客来旅游都会夸赞当地的美食口味是非常棒的。为了充分利用互联网的优势实现一种网上特产购物的方式，本文通过构建网上呼伦贝尔特产销售系统，方便广大网友购物，让网友足不出户就可以买到呼伦贝尔的特产。（二）国内外销售系统现状进入21世纪以后，不管是国内还是国外网上的销售现状都是非常活跃的。现如今就连农村也有非常多的快递站点，可想而知，网上的销售系统已经贯彻到人们的生活当中，与人们的生活息息相关[5]。更有些国内和国外的网购群体仅购买本国的商品已经满足不了他们了，好多网上销售系统已经实现了跨国域的买卖商品，正因此好多国外的朋友通过网购了解到中国的美食和文化，对中国的美食和文化连连称赞。故，不管是国内还是国外实现一个网上销售系统是非常必要的。（三）系统开发目的和意义现如今不管是淘宝还是京东甚至是微商上面都会买到呼伦贝尔特产，那为什么还会想开发一款呼伦贝尔特产的销售系统呢？相信不管是在淘宝、京东还是微商上买到的呼伦贝尔特产都是非常贵的而且还不一定是真正的呼伦贝尔的特产，有时候特产的种类还非常少不齐全等等一系列的弊端；而呼伦贝尔特产销售系统是种类非常齐全的，而且还会有呼伦贝尔特产的认证，品质是有保障的。第二个目的就是现在市面上很少有专卖呼伦贝尔的特产系统，所以作为第一个专卖呼伦贝尔特产的销售系统还是很有销售水平的[6]。目前虽有很多关于特产网站的销售系统，但是多数销售系统功能太过复杂，以至于顾客很难找到所需要的功能，这对用户来说显然是不方便的[7]。甚至有些商城的系统功能基本很少或者从未被使用[8]。本文旨在开发一种功能简单、容易使用的系统，对网上购物的常用功能进行简化，使系统的操作更加方便用户使用。（四）发展趋势网上销售系统已经深入我们的生活，融入了生活的各行各业当中；越来越多的人选择网上销售来创业，原因就是网上销售能够给商家带来一些便捷的服务[9]，包括减少不必要人员数量，因为许多都可以用计算机来快速的完成，这大大的减少一笔费用开支，还有计算机能够为网上销售系统提供免费的宣传方式，包括微博宣传、微信宣传和抖音宣传等；网上销售系统充分利用这些便捷的条件就可以带来非常多的效益，所以网上特产销售系统的发展方向还是很好的。二、相关技术（一）Vue介绍Vue是一个前端的框架，只有把这个框架搭建好，本次的毕设才能顺利的进行下去，Vue的版本有很多，本次毕设所下载的是简版的Vue；Vue也是最火的前端框架，有易操作、配套的等三方库等优点；简单的来说，使用Vue简化了不必要的代码，提高了开发效率。（二）npm介绍npm是node.js内置的软件包管理器,简单的来说，npm就是用来管理软件包的。也是目前最大的软件注册表，每周都有很高的下载量。（三）Webpack、ElementUI组件库介绍Webpack是前端资源加载和打包工具，它的功能非常强大，并且支持很多模块系统。能够对静态资源进行统一的管理以及打包发布[10]，同时Webpack也受到大多数开发者的喜爱。本次特产系统多次使用到ElementUI组件，ElementUI组件代码清晰逻辑简单，使用它可以减少许多的代码量，并且可以轻松的实现出想要的网页效果。（四）路由介绍路由就是实现跳转的一个工具，本次特产销售系统所有的点击跳转都由路由来完成的，只要根据所写的目的地址就可以跳转到想要跳转的页面；它的写法也非常有逻辑，即时没学过也能很快的上手。（五）Axios介绍Axios就是一个基于Promise的HTTP库，发送http请求的一个工具库，简单的讲就是可以发送get、post请求。其特点有拦截请求和响应，可以过滤请求参数，可以处理响应异常取消请求。（六）JavaScript、jQuery介绍JavaScript是一种脚本语言,也是本人毕设当中最重要的一个技术，它的功能非常强大，开发者使用它的几率也非常的多，对开发页面来说也是必不可少的一个技术。而jQuery是一个轻量级的、兼容多浏览器的JavaScript库。（七）HTML、HTML5介绍HTML是一门超文本标记语言，通常也将它称为标签语言。因为它通过标签来显示网页中的各个部分。HTML对开发环境没有特别的要求，我们甚至可以直接用记事本来进行网页开发。而HTML5是最新标准的HTML。HTML5增加了许多新特性，简化了代码量。（八）CSS、CSS3介绍CSS是层叠样式表，简单来说就是装饰和优化页面的，使页面更加美观漂亮；它的写法也是非常简单，特别容易上手；它和HTML是很好的搭档，在网站开发中，HTML显示网页的内容，而CSS则负责对其网页内同进行渲染。CSS3是CSS的升级版本。三、系统分析（一）需求分析1.需求分析：开发特产销售系统首先要了解特产销售系统最基本的需求，然后严格定义需求说明书。2.功能需求：由于特产销售系统是一个用来供使用者消费的销售软件。设计者通过对销售过程中所涉及到的商品、订单、信息等资料的录入，便可以实现特产销售的管理。所以,特产销售系统必须向使用者提供一些基本功能:特产销售系统必须向使用者提供用户登录页面，即，用户名和密码；并且能够退出登录；特产销售系统必须向使用者提供商品的种类、分类、详情页等；特产销售系统必须向使用者提供评价功能；特产销售系统必须向使用者提供查看信息、帮助功能、设置功能等；（二）经济可行性开发本系统所需要到的技术、资料、人员和开发环境都不需要额外的费用，因为在这个信息发达的时代很多技术、资料都是免费的，而这些免费的技术和资料足以开发出本文的特产销售系统；VisualStudioCode作为本次的开发环境也是可以免费使用的，这一点上可以省下一大笔支出；本文旨在开发一种功能简单、容易使用的系统，对网上购物的常用功能进行简化，使系统的操作更加方便用户使用，而这些本人都可以利用大学里所学到的知识来完成，故，在人员上也不需要费用的支出；综上所诉，故本系统具有经济可行性。（三）操作可行性本文开发的特产销售系统流程设计十分清晰、功能简单、容易使用；采用了网上购物软件的优点同时优化了网上购物软件的缺点，对网上购物的常用功能进行简化，使系统的操作更加方便用户的使用；本系统界面简明易懂，没有技术和操作上的难度，即时是小孩和老人也能够快速上手；所以本系统具有操作可行性。（四）技术可行性本文开发的特产销售系统使用了npm、Webpack、路由、axios、JavaScript、jQuery、HTML、HTML5、CSS、CSS3和VueWeb高级框架等技术，其中VueWeb高级框架是前端最熟悉也最容易上手的，JS脚本语言可以很好的实现页面效果，HTML5的新元素简化了web应用程序的搭建等等的好处；所使用的这些技术不仅容易上手更能快速达到我们所要的页面效果，即时出现报错情况也能根据报错提示的信息快速解决，所以，本系统在技术上是可行的。四、系统设计（一）系统结构图图1系统结构图如图1所示，本文所写的特产销售系统结构图主要有首页模块、分享模块、购物车模块和我的模块等四大功能模块，而每一个模块对应着多个小功能模块，共同实现开发特产销售系统。由此系统结构图可以清晰的看出特产销售系统模块简洁明了，与大多数的网上购物软件功能相似，但少了网上购物软件繁琐的程序和不必要的程序，呈现出一个功能强大操作简单的特产销售系统。本系统不限制用户任何条件，任何人都可以只需要申请一个账号登录即可开始购物之旅,但是不提倡小孩子独自使用该销售系统以免产生金钱过多的支出。使用该销售系统的用户必须保着诚信的理念购物，不得违反购物软件平台的条例。基于Web的呼伦贝尔特产销售系统，顾名思义是卖呼伦贝尔当地的特产,说起呼伦贝尔，很多人都会想起呼伦贝尔有非常美丽的大草原，但大多数人对呼伦贝尔的特产了解甚之又少，以为呼伦贝尔只有牛肉干和奶片这两种特产，殊不知呼伦贝尔有着双手都数不清的特产，通过本文所写大家可以进一步了解到呼伦贝尔的特产和文化。因为呼伦贝尔有着蓝蓝的天空，所以本次的销售系统主要的颜色为蓝色，蓝色可以给用户呈现出开阔的视觉效果，让用户看了有心情愉悦的感觉。（二）系统界面功能介绍呼伦贝尔特产销售系统以手机移动端的形式来呈现，因此呼伦贝尔特产销售系统的界面设计以手机移动端的设计标准进行设计。下面介绍特产销售系统的各个界面功能：用户登录界面图2用户登录界面图如图2所示，为用户登录页面，只有用户名、密码、验证码同时输对才可以登录成功；当用户名或者密码错误，则会提示用户名或者密码错误，请重新输入；当验证码为空或者验证码错误，则会提示请再次效验验证码。如图2的最后一张图片，登录成功则会提示欢迎您，登录成功，开始您的购物之旅吧！首页界面效果展示图3首页界面效果图如图3所示，本销售系统首先以轮播的形式来展示特产，用户不需要操作，特产图片会自动来回切换，用户如果对哪一个特产感兴趣只需要手动点击一下图片便可进入详情页介绍了解详情。其次，页面列出了销量最高的八种特产，每一个都可以通过点击图片进入对应的模块里，每一个分类里都会有种类非常多的特产。销售系统不定期会有直播卖货，每场直播开场都会有开播红包雨来调动用户观看直播的积极性，直播间会有主播给用户讲解特产，还会根据用户观看直播时长来兑换优惠券，开播的过程中会不定时秒杀特产，每场直播一个用户只能秒杀一份。每个月都会统计卖出最多的两种特产放在首页里，因为卖的最好的肯定是最受用户的欢迎，这种方式可以让新用户参考哪一种卖的最好，可以首先尝试热销款。首页的第二屏是各种特产的专区，用户可以通过下滑的方式了解查看特产信息，当下滑到一定的程度则不再显示特产专区，如果用户需要继续查看特产专区，则可以通过点击查看更多按钮；当用户想要回到最上方的特产专区，由于用划来划去的方式很慢，则用户可以点击收起按钮回到上方。淘好物界面效果展示图4淘好物界面效果图如图4所示，好物推荐区就是用户把自己觉得好吃的特产推荐给其他的用户，新用户一时不知道买什么特产就可以来好物推荐区参考其他用户的购买心得。用户可以发表评论并且可以添加特产图片，想要修改发表的内容可以删除评价后重新发表心得。此条评价只有用户自己删除，商家不可以删除用户的评价内容。购物车界面效果展示图5购物车界面效果图如图5所示，用户可以把心意的特产加入购物车里，购物车会显示特产的基本信息，包括价钱、规格和图片等；购物里有管理功能，当点击管理则每一个特产信息框都会出现一个删除的按钮，当点击删除则对应的特产信息框就会消失，如图5的第二张图片所示。当删除完成之后可以点击完成按钮，则删除按钮消失，完成按钮变为管理按钮。本次的特产销售系统仅用了前端技术完成，没有涉及到后端技术，一个销售系统仅用前端技术是无法完成支付功能的，故本系统没有实现支付的功能。我的界面效果展示图6我的界面效果图如图6所示，我的界面分别有用户的头像和基本信息等介绍，有收藏功能、查看订单功能、查看评价功能、帮助功能、设置功能等；其中用户可以通过点击头像的图片来更换头像，可以通过点击用户的信息来查看用户的更多信息。其中收藏功能、订单功能和评价功能用户都是可以通过点击来查看详细信息的，会跳转到相对应的页面里。用户如果需要帮助可以点击帮助功能，当点击帮助功能则会跳转到图6的第二张图片，首先会有几个热门的问题，如果用户的问题是这其中的一条，则可以点击相应问题就会有相应的答案，如果用户不是这几条的问题，则可以上传问题等待相关人员的回答。设置功能是我的模块里的重要功能，当想要退出本系统则可以点击设置按钮，则会跳转到图6的第三张图片，用户可以查看到当前登录的系统账户信息，确认信息后则可以点击退出登录退出本次账号。详情页效果展示图7详情页效果图如图7所示，详情页上方首先有选项卡效果的图片，其次下方有特产的介绍和价格，有收藏功能和加入购物车功能，当点击购物车和加入购物车时会跳转到购物车页，当点击立即购买会跳转到订单详情页面，订单详情页会有订单的基本信息和收货人的信息，因为前端技术暂时实现不了真正的购买功能，所以当提交订单只能实现一个静态的支付成功页面。五、代码实现（一）登录页面代码实现下面主要为登录页面的核心代码，当用户名、密码和验证码同时正确才可以登录成功，这段代码的核心是if判断和js方法，主要做了多个判断实现出的登录页面效果。（二）首页页面代码实现下面主要为首页页面的核心代码，首页代码主要通过循环来实现，利用循环可以减少代码量，提高系统的速度。首页的数据用的json的格式来实现的，利用json和axios来写的数据明了清晰，能够很清楚的知道是哪一部分的数据。首页模块json数据如下：（三）淘好物页面代码实现下面主要为淘好物页面的核心代码，淘好物代码主要利用了ElementUI组件、循环和js方法来完成。淘好物模块json数据如下：

（四）购物车页面代码实现下面主要为购物车页面的核心代码，购物车的大多数数据用的json的格式来实现的，同时也运用了js脚本语言和方法共同完成。购物车模块json数据如下：（五）我的页面代码实现下面主要为我的页面的核心代码，我的页面主要利用了if循环来实现，减少了代码量；同样也是利用json和axios来实现的数据。我的模块json数据如下：（六）详情页代码实现下面主要为详情页页面的核心代码，详情页页面运用选项卡效果、js方法和路由跳转等来实现开发。详情页模块json数据如下：系统测试将特产销售系统按照用户登录页面，首页页面,淘好物页面,我的页面和详情页页面分别给出测试用例，并从测试中发现的问题进行改正。首先测试用户登录页面，故意输错用户名、密码或者验证码来进行测试；其次是首页测试，首页的测试可以通过点击来查看；淘好物模块的测试可以通过发表评论来检测；购物车和支付功能因为涉及到后端技术，前端技术无法实现，所