@TOC
ssm799基于MVC构架的网上食品店的设计与实现+vue
研究背景
自计算机发展以来给人们的生活带来了改变。第一代计算机为1946年美国设计，最开始用于复杂的科学计算，占地面积、开机时间要求都非常高，经过数十几的改变计算机技术才发展到今天。现如今已是电子时代、数据时代，所有的生活都离不开计算机和网络。工作中有各类办公软件、APP，娱乐中有各类游戏软件、视频软件等都为生活带来了便捷，特别是我国的手机支付功能更是领先世界。科技推动了时代的发展。现在人们购物大多已从传统的实体购物转换到线上购物。线上购物拥有更大的优点，商品种类全、价格优惠、售后有保障。由于传统实体购物需要亲力亲为，商品单一，价格不透明已渐渐在线上购物的打压下难以发展。
现在，网络覆盖范围扩大，价格便宜，各大商户都开放的有无线网络。手机也得到了普及，计算机技术也深入到手机中。普通生活、娱乐等都可以在线上解决。线上已成为趋势，大部分的行业都可以在线上开通业务，通过线上为人们解决问题，改变面对面方式，提高工作效率以及减少时间浪费。科技和经济的高速发展，必须有高素质的创新型人才才能跟上网络时代的步伐，科技的发展带来的最直接的影响就是数据库信息量非常的庞大，人们可以直接通过互联网获取到自己想要了解的任何信息，各种不同的工作方式都开始借助于互联网应运而生。为了满足当下时代的工作需求，所以必须采用计算机自动化的管理方式，这样才能提高工作效率。而各行各业都在此基础上进行了自己的网络化运营和管理，提供了一个更好的信息化解决方案，为企业和用户直接提供更的优质服务。
1.2课题研究现状
互联网的发展已经融入到了日常生活中，我们的衣食住行生活的方方面面都离不开网络，随处可见的网上购物平台，订餐外卖平台，生活场景种的各种扫码支付，都是借助于互联网的情景下产生的。网络更是成了一种新型的网络传播媒体，企业之间更是搭建自己的网上平台进行各种宣传，内部管理也是采用的计算机信息管理系统，可以很好的对企业进行更大范围的宣传，还能提高企业的工作效率，满足用户的各种需求，借助于互联网平台，可以起到事半功倍的效果。
现在管理商品的方式一般为一层分给一层的方式，也就是由第一级的负责人员把工作分配给下一级的人员，再由下一级人员分配给下下一级的人员，实现把工作细分给不同的工作人员，责任到人，一旦出现问题就可以快速的追究到根源。这种方式虽然可以把大的工作量简化成小的工作量，但对于高级管理人员来说信息统计、信息分析以及统管安排还是不好把控。
1.3课题实现意义
现在网上购物平台使用率高的有淘宝、京东、唯品会以及刚时兴出来的网红直播带货。对于商家来言，想要突破发展就需要加入电商平台，但现在的加入费用、运营费用、竞争力都非常高造成效果不好，甚至亏本的情况。淘宝、京东、唯品会这类平台都属于三方平台，商家遵守平台规定进行商品的销售、管理、展示，竞争力可想而知。网络直播带货需要的费用更高，对商家来言可谓雪上加霜。对于食品这种吃的商品，更需要严格的管理。本系统采用商家对用户的模式，商家利用本平台可以管理商品、订单等。本系统可以帮助商家工作管理，实现商品的无地域、无时间销售。购买用户可以随时浏览、查询商品，可以了解商品的详情以及商品的其它用户的评价内容。本系统可以帮助用户更快的选择商品和跟踪订单，帮助商家增加销售途径，减少经营费用。本基于MVC框架的网上食品店实现数据的自动化，减少商家的工作内容并实现数据的清晰化。计算机类的系统可以快速收集信息、根据用户命令快速完成要求，并且正确率高。把计算机技术应用到食品销售管理工作中去，可以实现用户自主购买食品，本系统可以快速把食品信息传送到浏览人手中，浏览人只需要点击就可以浏览、收藏、购买食品。解决食品购买的问题，解决用户档案审核的问题，本系统的开发非常有意义。
1.4课题内容
本基于MVC框架的网上食品店使用角色可以分为游客、注册用户、管理员。游客可以浏览商品信息、商品评价信息等，游客通过注册成为注册用户后可以购买商品和管理购物车、订单、个人信息、在线评价商品、参与论坛讨论等，管理员负责本系统的管理，可以发布商品、管理商品、审核注册用户信息以及查看商品的评价和进行用户订单管理、论坛管理等。本系统的内容涉及到食品销售管理工作中的方方面面，提高用户购买食品的速度以及加快食品发布速度。我国计算机技术和网络技术已发展非常先进，计算机类的管理系统可以帮助人们的工作，提供更专业的办公服务。本系统结合食品购买和食品管理与一体，为用户提供更全面的服务。
1.5论文结构安排
本论文的结构安排为三部分，分别为：
（1）第一部分，
摘要，本部分为简单的阐述，使读者可以对本论文有大致的了解；
外文翻译，采用英语对摘要进行翻译；
目录，本部分可以使读者对本论文有详细的了解。
（2）第二部分为正文部分，
绪论，本章从课题开发的来源、现状来进行介绍，总结出本系统开发的意义以及内容等；
系统分析，本章包括语言、技术等的介绍以及系统的需求分析、可行性分析、流程分析等；
系统设计，本章包括系统的功能结构图、数据库设计等；
系统实现，本章采用系统运行截图加文字进行本系统的详细介绍；
系统测试，本章采用测试的方法进行主要核心功能的测试介绍；
（3）第三部分为总结、致谢、参考文献。
第2章 系统使用相关技术
2.1 Java语言介绍
Java语言是一种分布式的简单的开发语言，有很好的特征，在安全方面、性能方面等。非常适合在Internet环境中使用，也是目前企业级运用中最常用的一个编程语言，具有很大的影响力。主要是通过面向对象的形式进行开发，这样的话，就更能满足人们的需求。在编程开发使用中，主要通过封装的方式，通过类来实现，具有很好的可编辑行和操作性，这就是面向对象语言的最大特性，还可以在同一个类中把共同特性的类封装起来，形成一个抽象类，抽象类形容的不是一个对象，而是一个实体，这样就使用过程中就可以进行实例化，达到更好的效果。类之间还可以进行继承，比如一个类可以把另个类的特征进行继承，这样就可以重复使用，所以说这种继承性的类实际上还是同一个类体，这样就可以达到最大的效果。通过java开发的代码还有很好的扩展性，可以通过不同的类达到的不同的效果，更好的提高使用效率，而且在后期维护方面非常的方便，开发的代码更加实用，更加简洁。运行代码的时候还可以多线程运行，很好的提高了系统的处理性能，有很好的垃圾回收机制，开发人员完全不用管，全部是由系统自动完成的，当有多余的代码垃圾的时候，系统会自动进行回收，从而释放占用的内存。而且Java语言可以应用在各种开发场景种，可以用于B/S架构程序的开发，也可以用来开发安卓，小程序等，还可以用来开发各种分布式系统等，使用范围非常的广泛。Java语言的执行过程采用的是先编译后解释的一个执行流程，把Java编写的源代码文件先生成Class文件，然后在进行执行，也可以理解为Java语言是一种半编译半解释的开发技术语言，也是非常热门受开发者喜欢的一种动态的开发语言。
2.2 Mysql数据库介绍
Mysql数据库是Oracle公司推出的一个数据库管理软件，有很好的性能设计，可以充分发挥和利用互联网的优势，而且在数据库管理方面非常的方便，支持图形化管理，非常适合新手的使用，可以直接在本地进行数据管理和配置，而且有很强大的数据处理能力，还有很好的安全性。在数据存储的过程中可以支持多处理器的存储结构，可以自动生产和处理sql语句，有很强大的数据读取和复制存储功能，最最重要的是一个开放式的数据软件，可以为开放人员提供一个很好的数据库管理平台。数据库存储支持各种不同的形式，比如像文字，图形，声音，视频等文件，都可以进行安全有效的存储，所以说数据是所有计算机系统开发中都需要用到的，通过数据库进行科学有效的管理，而且可以和不同的系统建立不同的接口，适应各种系统的数据存储。所以最简单的理解就是，数据库就是一个可以直接经过计算机处理后的数据，然后存放到一起就形成了一个数据库系统。而Mysql数据库是非常适合一些中小型企业开发的数据库 ，占用的地方非常的小，而且还是开源免费的，直接网上就能下载，存储的数据也是非常的多，符合用户的需求，最主要的是他的处理速度非常的好，还有很好的安全保障，是非常受开发者喜欢的一款数据库软件。
2.3 Tomcat服务器介绍
Tomcat服务器是一个小型的轻量级服务器，非常适合一些小型的系统和本地的服务器使用，特别适合一些新手开发者使用。Tomcat服务器主要是当成java程序的服务器使用，Tomcat服务器相当于就是Apache的一个扩展应用，区别就是他可以独立运行，当客户端上配置好Tomcat服务器以后，就可以直接通过服务器对HTML页面完成数据访问和响应。非常受程序员的喜欢，因为占用的运行空间非常的小时，不影响服务器性能，而且扩展性很好，支持很多开发过程中常用的功能，可以根据开发者的需求进行不断的改进和完善，所以说Tomcat服务器是目前使用非常广泛的一个服务器。
2.4 MVC框架介绍
MVC框架为一种由 Model-View-Controller组合而成的框架，属于一种简单的网页框架。在工作中通过页面向控制器发送请求，然后由控制器进行处理逻辑的调用，最后由逻辑层向持久层传送消息，最终由控制器调用视图进行数据的展示。MVC框架的最大特点就是非常的简单方便，非常适合一些中小项目的开发，通过这个系统模式，可以自动生成系统所需要的各种逻辑框架，开发者只需要编写对应的代码就可以，而且还可以有各种代码提示，可以直接调取所需要的各种函数和类，非常的方便，所以说MVC框架是目前非常主流的框架之一。
2.5 Idea调试软件介绍
随着软件系统的不断升级，功能也在不断的提升，在编写代码的时候，系统会自动帮你更新系统结构，不需要在手动进行更新，在编写一个表达式的时候，系统会自动跳出提示进行自动补全，而且还可以提示使用方法，当发现不用的代码的时候系统还会进行提示，像一些项目的类库和变量之类的路径可以随便设置到跟项目相关的任何位置，使兼容性更好，没有那么多的局限，通过这些额外的功能，使软件开发更加的方便，更加的简单。
2.6 Vue技术介绍
Vue技术在使用时可以转换成Servlet代码，然后再编译成二进制的机器码，当然也可以直接编译成二进制的机器码。Vue技术的特点为简单好用，可以快速的把静态页面变成动态的页面，它使用Javabean来把常用的代码来复制，可以减少编程人员的重复工作，同时Vue技术还拥有很多标签，可以支持更多的外在标签和内在的标签，还可以自定义标签，使编程人员在使用时更加的灵活，加快项目开发的速度。Vue技术的功能非常简单，只负责页面数据，负责页面的传输，所以更加的单纯，不容易出错。Vue技术是主导开发的一种用来创建动态页面的技术。Vue技术通过服务器来响应要求，再根据要求生成Html、Xml来进行转换成Web页面。Vue技术也属于一种脚本语言，常用来搭配Java语言使用，可以和静态的页面一起使用，把静态的页面改成动态的页面。
第3章 系统分析
3.1系统可行性分析
分析本系统在社会上的价值以及可能带来的趋势等内容。从各种角度进行研究和调查，并完成可行性报告。根据当前的环境、经济发展水平、技术发展情况、社会情况等进行研究，只有系统具有发展前景，可以带来价值才可以进行开发。系统是否可行决定了系统开发的成功性。想要系统的设计工作不会白费就需要经过详细的系统可行性分析。根据充分调查和参考相关论文发现，系统的可行性分析一般包括系统的技术可行性分析、系统的经济可行性分析、系统的操作可行性分析、系统的法律可行性四种。
3.1.1系统经济可行性分析
开发系统首要是考虑的开发期的费用，然后是开发后带来的经济效益，是否和投入成正比，必须能带来一定的收益才具备经济可行性。而开发所需要的费用并不多，就是一个编程软件和硬件设备之类，目前完全具备这些开发条件，而本系统开发成功后可以带来很多的用户，俗话说的话，用户就是流量，通过本系统大家都可以查看到自己想要的信息，功能非常的实用，可以为用户提供有用的信息，为用户提供帮助。本系统是Web型的网站，采用的Java语言开发的，开发周期比较短，而且技术成熟，所以在开发过程中没有过高的投入要求，有很好的经济可行性。所以开发本系统在经济上也是可行的。
3.1.2系统技术可行性分析
本系统采用的技术有Vue网页技术、Mysql数据库、B/s模式、Java语言等。
（1）通过Vue进行前台的页面开发，具有很好的稳定性，而且可以直接在线升级维护，可以更方便的实现数据管理，通过Vue的最大特征就是系统提前已经自动完成了很大不重要的简单工作，可以自动生成很多常规代码，这样减少很大的工作量。而且Vue技术非常成熟，可以参考的案例也非常多。
（2）数据库采用Mysql数据库，也是非常适合学生用的一款小型数据库，使用起来非常的简单，而且数据处理效率高。
（3）采用B/s模式的网站已经是目前的开发主流，也是未来的发展方向。
（4）采用Java语言进行后台代码的开发，是面向对象的开发语言，可以直接查看和调用已用的案例，可以直接调用XML服务，而且兼容性非常的强，不管是哪个平台，都可以直接调用，而且是通用的，可以提高开发者的工作效率，而且有很好的灵活性，使用起来非常的方便。
所以通过以上几点的分析，开发人员只要能熟练的操作以上的技术就行，具有开发技术可行性。
3.1.3系统操作可行性分析
因为开发本系统面向的用户不一定是专业的系统开发人员，也不一定懂计算机编程知识，所以如果在操作上比较困难的话，那就缺乏了最基础的实用性，那也就损失了很大的用户群体，那开发这个系统也就意义不大了。所以开发的系统界面一定要简单的直观的，而且响应速度要快，不能让用户有过多的等待，一个好的系统必须为用户带来流程的使用体验。因为本系统是采用B/s的架构模式进行开发的，所以只有安装的有浏览器和数据库服务器就可以进行系统的访问的使用。而且非常的简单易操作，普通用户只需要有最简单的互联网操作经验就行。
3.1.4法律可行性
开发所用到的编程软件都是开源免费的，都是从官网下载的。而且开发过程中都是自己原创的，没有抄袭任何其他系统。开发本系统所用到的技术都是老师上课所教的，所翻阅的相关的资料都是图书馆借阅的。
3.2系统需求分析
系统的需求分析从字面的意思就能看出来，主要就是分析系统为什么要开发，是否有市场需求，开发成功后能为用户带来什么好处。要想一个系统能够开发成功，那就要从多方面的进行分析，必须保证软件的实用性高，能满足不同人群的使用需求。
现在网上购物系统的技术发展已经非常成熟，各大电商平台的销售额也非常可观，特别是在一些重要的节日里一天的销售额都会达到几十亿。网上购物系统可以方便用户选择到更适合自己的商品，并且售后服务非常完善。目前，网上购物系统都涉及到各个方面，但没有专一的针对食品的购物网。现在实体商店里也会采用线上、线下相结合的方式进行商品的销售，由用户自主购物，管理人员在线发货、上新等，非常适合现代生活。基于MVC框架的网上食品店是时代的趋势，其需求性不言而喻。
3.2.1传统销售系统优缺点分析
在最早出现的销售系统中主要使用人为工作人员，这类销售系统主要是采用C/s模式，这种模式可以保证数据的安全和存储性，数据库采用的也都是复杂、高性能的数据库，这类销售系统需要使用人员经过定期的培训才可以使用。随着网络的快速发展，这类销售系统的缺点也逐渐暴露出来，由于采用C/s模式就必须要求固定的客户端，这就需要足够严格的客户端条件，一旦客户端出现问题，系统里的数据都会出现问题，稳定性差，而且C/s模式的系统最大的问题是不能多次修改，如果系统经过了多次的补充、修改就会造成运行出错，为系统的使用造成不便。传统的销售系统通常采用的是脚本语言，脚本语言不够成熟，更容易出错，造成使用人员的损失。
3.2.2本基于MVC框架的网上食品店分析
通过对传统销售系统的分析发现主要问题在于系统的模式架构上和数据库上。想要数据更为稳定就需要更稳定的数据库，好的数据库可以保证系统拥有更大的容错率和移植性，也可以在多种数据库中进行相互结合以此来保证系统里数据的安全。同时还需要注意系统的延续性，时代不断的发展，就会要求系统的服务更加的完善。想要使系统的生命周期更长就需要更为成熟的开发语言、技术、环境等。
本基于MVC框架的网上食品店采用的模式架构为B/s，B/s框架可以脱离固定的客户端，把系统部署到浏览器上供用户使用，还可以把功能进行模块划分使数据库和操作界面分开，这样可以实现当任何一方出现问题时，另一方不受影响。数据库采用Mysql，Mysql数据库可以单独运行，当用户在进行操作后可自动保存操作后的数据，改变需要去数据库里修改数据的问题。开发语言采用Java，Java语言为动态语言，使用时间长久，已发展的非常成熟。本系统的其它技术包括Idea运行软件，Vue网页技术，Html技术等都是经过时间考验的。
3.3系统功能分析
本人参考大量的网上购物软件以及充分调查消费者和商家的需求，设计出的本基于MVC框架的网上食品店使用角色为游客、注册用户、管理员。框架界面分为前台、注册用户操作界面、管理员操作界面。用户可以在前台浏览商品和公告信息完成商品的购买以及购物车管理和参与论坛讨论。在用户的后台可以管理自己的注册信息和收货地址信息、订单信息、评论信息等。管理员负责商品的维护和订单的发货以及用户信息、论坛信息、公告信息的管理等。
3.4系统性能分析
一个系统要有很好的实用性绝对不是说说而已，要从各个方面进行综合考虑，首先在系统操作方面，每个功能都需要设计的简单易操作，用户只需要用最简单的步骤就可以找到自己需要的界面；还有在系统的运行方面还要有足够的稳定性，不能出现系统奔溃的情况，而且还要有及时的响应，不能让用户有过多的等待，这样就造成了不好的体验，用户下次肯定不会在用了；最重要的一点就是一点要保障用户的个人隐私，保障用户的信息安全，当用户注册账号后需要对信息进行加密，保障用户的个人信息不泄露；系统代码方面还要以后一定的可扩展性，当需要一些系统功能的变动时，可以随时的进行修改调整；还要考虑后期系统的维护性，随着科技的不断发展，技术也会不断的创新，所以需要对系统进行维护和更新；数据库响应方面，一定要保证数据可以实时的读取信息，实时更新数据，不能有太大的延迟，以免造成信息滞后。在系统分析中还有重要的一点就是系统的性能分析，除却系统的功能分析其它问题都可以划分到系统的性能分析。主要包括系统数据问题、系统运行问题、系统安全问题。
- 系统数据问题表现在数据库的设计中，因为本系统的核心在于商品的购买，在购买操作中会引起多种数据的变化。想要数据在变化时不会出错就需要在数据库设计时注意不同数据字段、类型等的主外键联系；
- 系统的运行问题表现在多平台、多人在运行系统时的稳定性。系统的运行速度也需要注意，运行的卡顿、读码速度等都需要经过多次测试；
- 系统的安全性问题表现在不同角色的使用权限，游客做为权限最少的角色不能越权，管理员做为权限最多的角色要可以管理其它几种角色。
3.5用例图
根据功能分析得出，本系统的主要使用角色为管理员和注册用户。注册用户可以管理评价、浏览商品、购买商品以及管理购物车、订单、地址等。管理员可以管理系统信息、注册用户、商品信息以及订单信息、商品评价、分类信息等。系统用例图如下图3-1所示：
图3-1基于MVC框架的网上食品店用例图
3.6系统业务流程
系统的操作流程正确系统的数据才可以被正确调用。从数据的来源到去处进行分析形成数据的闭环。一个受欢迎的系统必然有一个好的系统操作流程，简单、友好的操作流程才可以使用户更快速的满足自己的要求。业务流程可以按照用户使用本系统的步骤进行设计。本系统中注册用户的流程为浏览商品、购买商品、加入购物车、管理订单、管理个人资料、对商品评价、管理收货地址等。管理员的流程为管理用户的订单、用户的注册资讯、管理商品等。基于MVC框架的网上食品店的业务流程如下图3-2所示：
图3-2基于MVC框架的网上食品店业务流程图
（1）用户注册是游客成为注册用户的必经之路，在注册时需要输入信息、判断信息。用户注册的流程图如下图3-3所示：
图3-3用户注册的流程图
（2）用户评价时需要判断是否为登录状态，然后判断评价的内容是否合法，用户评价功能可以实现用户也商家之间的沟通。用户评价流程图如下图3-4所示：
图3-4用户评价流程图
（3）购买商品的过程需要多种数据的配合，购买商品的流程属于本系统的核心。首页确定登录，然后浏览商品，加购物车，购买，结算等。商品购买流程如下图3-5所示：
图3-5商品购买流程图
第4章 系统设计
4.1系统体系结构
首先需要对市场先进行一个充分的了解和分析才能设计一个满意的合格的系统，一个最基本的系统首先要满足的首要条件就是要操作简单，还要有完整的功能流程，还要求具备很好的相应速度。这样才能让用户有一个很好的使用体验。所以系统的设计目标就是采用现有的网络开发技术开发一个实用的互联网信息平台。
系统的体系结构非常重要，往往决定了系统的质量和生命周期。针对不同的系统可以采用不同的系统体系结构。本系统为基于MVC框架的网上食品店，属于开放式的平台，所以在体系结构中采用B/s。B/s结构抛弃了固定客户端要求，采用服务器、客户端的模式。用户操作界面在前台展示，管理员操作界面在后台展示。B/s结构基于互联网，需要网络的支持，由用户在浏览器上发布命令，服务器负责向数据库传送命令，最后再由服务器把反馈的结果传回浏览器给用户进行呈现。
4.2系统功能结构
根据系统功能的分析、系统用例图进行系统功能的设计。本系统的功能结构可以分为前台、用户后台、管理员后台三部分。在系统功能结构设计时采用由下到上的方式进行设计，这样可以避免设计的缺失，可以把系统的功能完全化。首先设计所有的功能，然后把功能划分给适合的人员，由此一层一层的设计。系统的功能结构是系统实现的框架，本系统的主要结构为管理员和用户。管理员的功能为用户中心管理、论坛管理、商品信息管理、注册用户管理、基础数据管理等。用户的功能为在线注册与登录、商品信息浏览、个人资料信息管理、我的购物车管理、我的订单管理和商品评价等。本基于MVC框架的网上食品店用户功能结构图如下图4-1所示：
图4-1基于MVC框架的网上食品店用户功能结构图
基于MVC框架的网上食品店的管理员功能结构图如下图4-2所示：
图4-2基于MVC框架的网上食品店管理员功能结构图
4.3数据库设计
数据库是系统的一部分，是用来存储数据的仓库。系统在操作时能否出来正确的数据都依靠数据库的设计。数据库设计在系统设计中占有重大比例，对数据库的设计分为两步，第一步设计数据库ER图，第二步设计数据库表。用户进行数据访问时候只能通过正规的通道获取信息，防止非法获取用户数据，必须保证用户的数据安全，这就需要设计数据库的时候进行安全验证。任何一个系统中，数据库都是非常重要的一部分，因为数据库做为系统的数据存储，保障着系统的安全，如果数据库出错，那系统肯定也就出错。所以要选择适合自己系统的数据库，然后建立表结构，使系统有更好的关联性，保密性，和完整性。
4.3.1ER图设计
数据库ER图在设计时需要注意几点原则，ER图设计的就是实体、关系和属性，实体与实体之间的属性会存在冗余，所以要注意消除冗余。现在设计ER图时一般采用第二范式或者第三范式。实体之间的关系有一对一、一对多和多对多。根据本系统的特点，本系统设计的主要实体包括管理员信息、用户信息、商品信息、订单信息和帖子信息等。
- 管理员ER图包括的属性有管理员的编号、用户名和密码。管理员ER图如下图4-2所示：
图4-2管理员实体的ER图
- 商品信息包含的属性为商品的详细描述，有商品编号、商品名称等。商品信息ER图如下图4-3所示：
图4-3商品信息实体ER图
（3）注册用户信息的属性包括用户的个人资料，有姓名、性别、电话等。注册用户信息实体ER图如下图4-4所示：
图4-4注册用户实体ER图
（4）订单实体的属性有订单时间、订单编号、订单人等。订单实体ER图如下图4-5所示：
图4-5订单信息实体ER图
（5）评价信息实体的属性有评价人、评价内容、评价时间等。评价信息实体的ER图如下图4-6所示：
图4-6评价信息实体ER图
（6）本基于MVC框架的网上食品店的整体实体关系图如下图4-7所示：
图4-7系统关系ER图
4.3.2数据库表设计
系统中用来存储对象，并且有结构的集合称为数据库表。数据库表包含了系统中的所有数据，也可以称为集合。数据库表和EXEL建立的表格非常相似，每个表格里都有规定的表名、字段等信息。字段类型非常重要，决定了信息的分类。根据数据ER图的设计，本系统的数据库表有管理员信息表、用户信息表、商品信息表、评价信息表等。本系统的数据库表如下图4-1至4-12所示：
表4-1 address
表4-2 cart
表4-3 config
表4-4 dangao
表4-5 dangao_collection
表4-6 dangao_commentback
表4-7 dangao_order
表4-8 dictionary
表4-9 forum
表4-9 news
表4-10 token
表4-11 users
表4-12 yonghu
第5章 系统实现
5.1用户注册功能的界面实现
用户注册功能设计的目的是实现用户的操作。系统中想要进行操作就需要先成为注册用户，游客只能浏览信息。用户注册功能界面中设置了用户的资料字段，本界面的数据和用户信息表相连，当游客在本界面里注册成功，所填写的资料会保存到用户信息表中。用户注册功能的运行界面如下图5-1所示：
图5-1用户注册功能的运行界面
5.2登录功能的界面实现
用户注册成功后，需要登录。登录界面设计的目的是保证当前的使用角色等级。管理员同样需要登录后才可以进行操作。用户登录和管理员登录的界面分为两个，在登录时只需要填写用户账号和密码就可以实现。用户登录的运行界面如下图5-2所示：
图5-2用户登录的运行界面
管理员登录的界面中包含的元素有系统题目、输入框、登录按钮。管理员登录的条件是需要账号、密码、身份。管理员登录的运行界面如下图5-3所示：
图5-3管理员登录运行界面
5.3管理员功能的设计实现
5.3.1用户管理功能的实现界面
用户注册后的资料管理员可以在注册用户管理功能里看到，本功能设计的目的是审核注册用户的资料，当发现不当的使用用户可以删除其账号。当删除注册用户信息后相对应的用户信息表里的信息也会随着删除掉。用户管理功能的运行界面如下图5-4所示：
图5-4用户管理功能的运行界面
5.3.2 个人中心管理功能的实现界面
本功能可以实现对管理员登录密码、资料的修改。个人信息管理功能的运行界面如下图5-5所示：
图5-5个人信息管理功能的运行界面
5.3.3轮播图管理功能的实现界面
用户浏览的轮播图都是由管理员在此功能里进行维护添加的，同样当管理员添加、编辑轮播图信息后，数据库表中的轮播图信息表也会发生改变。轮播图管理功能的运行界面如下图5-6所示：
图5-6轮播图管理功能的运行界面
5.3.4 基础数据管理功能的实现界面
本功能可以管理分类信息、地区信息、公告类型信息、适宜人群信息，商品类型实现商品的条理管理。商品类型管理功能的运行界面如下图5-7所示：
图5-7商品类型管理运行界面
地区管理运行界面如下图5-8所示：
图5-8地区管理的运行界面展示
公告类型管理功能的实现界面如下图5-9所示：
图5-9公告类型管理功能的实现
适宜人群管理功能的实现界面如下图5-10所示：
图5-10查询适宜人群信息的实现
5.3.5 订单管理功能的实现界面
用户下订单后，管理员都可以在本功能里收到。当审核订单无误后可以进行下一步操作。本功能还可以看到用户否支付。订单管理功能的运行界面如下图5-11所示：
图5-11订单管理功能的运行界面
5.3.6 商品信息管理功能的界面实现
商品信息由管理员进行更新，在发布商品信息时可以显示发布时间。商品信息管理的运行界面如下图5-12所示：
图5-12商品信息管理功能的运行界面
5.3.7商品评价管理功能的实现
管理员可以查看和管理用户的评论信息，还可以回复，商品评价实现界面如下图5-13所示：
图5-13商品评价管理的实现界面
5.3.8论坛管理功能的实现
管理员可以审核用户的帖子以及回复用户的帖子。实现界面如下图5-14所示：
图5-14回复帖子管理功能的实现界面
5.3.9公告管理功能的实现界面
管理员可以新增和删除、修改公告内容。管理员查询公告信息的实现界面如下图5-15所示：
图5-15查询公告信息的实现
5.4用户角色功能的界面实现
5.4.1商品信息浏览功能的界面实现
用户的功能主要展示在前台，在前台可以浏览所有分类的商品。商品详情中主要展示商品的图片、价格、标题。商品信息浏览功能的运行界面如下图5-16所示：
图5-16浏览商品运行界面
商品详情的实现界面如下图5-17所示：
图5-17商品详情的实现界面
5.4.2提交订单功能的实现界面
选择商品点击购买可以跳转到提交订单界面，在本界面里需要收货地址。提交订单功能的运行界面如下图5-18所示：
图5-18用户提交订单的运行界面
5.4.3订单管理功能的实现界面
用户在提交订单后可以在个人后台里看到订单后的订单信息，可以进行一定的修改。订单管理功能的运行界面如下图5-19所示：
图5-19订单管理功能的运行界面
5.4.4购物车管理功能的界面实现
用户可以在购物车里修改购买的数量和删除商品、进行结账。购物车管理功能的实现界面如下图5-20所示：
图5-20购物车管理功能的实现界面
5.4.5用户个人中心功能的实现界面
用户可以进入个人中心修改查看自己的个人信息等，实现界面如下图5-21所示：
图5-21用户个人中心的实现界面
5.4.6收货地址管理功能的实现
用户可以设置自己的收货地址并修改和删除。实现界面如下图5-22所示：
图5-22收货地址管理功能的实现界面
5.4.7用户后台功能的实现
在用户的后台里可以管理自己的帖子信息和订单信息、评论信息、收藏信息。实现界面如下图5-23所示：
图5-23用户后台功能的实现界面
5.4.8论坛功能的实现界面
用户在前台可以浏览论坛帖子内容并可以发表自己的帖子，实现界面如下图5-24所示：
图5-24发布帖子的信息实现
5.4.9公告信息功能的实现
用户在前台可以浏览公告信息，公告信息也分为不同的分类方便用户查询。公告信息的实现界面如下图5-25所示：
图5-25公告信息的实现界面
第6章 系统测试
系统测试的概
FileUtil.java
package com.utils;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
/**
* @author yangliyuan
* @version 创建时间：2020年2月7日 下午8:01:14
* 类说明 :
*/
public class FileUtil {
public static byte[] FileToByte(File file) throws IOException {
// 将数据转为流
@SuppressWarnings("resource")
InputStream content = new FileInputStream(file);
ByteArrayOutputStream swapStream = new ByteArrayOutputStream();
byte[] buff = new byte[100];
int rc = 0;
while ((rc = content.read(buff, 0, 100)) > 0) {
swapStream.write(buff, 0, rc);
}
// 获得二进制数组
return swapStream.toByteArray();
}
}
DangaoOrderServiceImpl.java
package com.service.impl;
import com.utils.StringUtil;
import org.springframework.stereotype.Service;
import java.lang.reflect.Field;
import java.util.*;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import org.springframework.transaction.annotation.Transactional;
import com.utils.PageUtils;
import com.utils.Query;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import com.dao.DangaoOrderDao;
import com.entity.DangaoOrderEntity;
import com.service.DangaoOrderService;
import com.entity.view.DangaoOrderView;
/**
* 商品订单 服务实现类
*/
@Service("dangaoOrderService")
@Transactional
public class DangaoOrderServiceImpl extends ServiceImpl<DangaoOrderDao, DangaoOrderEntity> implements DangaoOrderService {
@Override
public PageUtils queryPage(Map<String,Object> params) {
if(params != null && (params.get("limit") == null || params.get("page") == null)){
params.put("page","1");
params.put("limit","10");
}
Page<DangaoOrderView> page =new Query<DangaoOrderView>(params).getPage();
page.setRecords(baseMapper.selectListView(page,params));
return new PageUtils(page);
}
}
CommonServiceImpl.java
package com.service.impl;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.dao.CommonDao;
import com.service.CommonService;
/**
* 系统用户
* @author
* @date
*/
@Service("commonService")
public class CommonServiceImpl implements CommonService {
@Autowired
private CommonDao commonDao;
@Override
public List<String> getOption(Map<String, Object> params) {
return commonDao.getOption(params);
}
@Override
public Map<String, Object> getFollowByOption(Map<String, Object> params) {
return commonDao.getFollowByOption(params);
}
/**
tableName 查询表
condition1 条件1
condition1Value 条件1值
average 计算平均评分
* */
public Map<String, Object> queryScore(Map<String, Object> params){
return commonDao.queryScore(params);
}
@Override
public void sh(Map<String, Object> params) {
commonDao.sh(params);
}
@Override
public int remindCount(Map<String, Object> params) {
return commonDao.remindCount(params);
}
@Override
public Map<String, Object> selectCal(Map<String, Object> params) {
return commonDao.selectCal(params);
}
@Override
public List<Map<String, Object>> selectGroup(Map<String, Object> params) {
return commonDao.selectGroup(params);
}
@Override
public List<Map<String, Object>> selectValue(Map<String, Object> params) {
return commonDao.selectValue(params);
}
@Override
public List<Map<String, Object>> chartBoth(Map<String, Object> params) {
return commonDao.chartBoth(params);
}
@Override
public List<Map<String, Object>> chartOne(Map<String, Object> params) {
return commonDao.chartOne(params);
}
/**
* 新的级联字典表的 分组求和统计
* @param params
* @return
*/
@Override
public List<Map<String, Object>> newSelectGroupSum(Map<String, Object> params) {
return commonDao.newSelectGroupSum(params);
}
/**
* 新的级联字典表的 分组条数统计
* @param params
* @return
*/
@Override
public List<Map<String, Object>> newSelectGroupCount(Map<String, Object> params) {
return commonDao.newSelectGroupCount(params);
}
/**
* 当前表的日期分组求和
* @param params
* @return
*/
@Override
public List<Map<String, Object>> newSelectDateGroupSum(Map<String, Object> params) {
return commonDao.newSelectDateGroupSum(params);
}
/**
* 查询字典表的分组统计总条数
* @param params
* @return
*/
@Override
public List<Map<String, Object>> newSelectDateGroupCount(Map<String, Object> params) {
return commonDao.newSelectDateGroupCount(params);
}
@Override
public int plusCloumNumber(Map<String, Object> params) {
return commonDao.plusCloumNumber(params);
}
@Override
public int reduceCloumNumber(Map<String, Object> params) {
return commonDao.reduceCloumNumber(params);
}
@Override
public int updateCloumValue(Map<String, Object> params) {
return commonDao.updateCloumValue(params);
}
/**
* 饼状图
* -- 饼状图 查询当前表
-- 查询字典表【月】
-- 统计 -- 查询某个月的每个类型的订单销售数量
-- 求和 -- 查询某个月的每个类型的订单销售额
-- 查询某个字符串【月】
-- 统计 -- 查询某个月的每个员工的订单销售数量
-- 求和 -- 查询某个月的每个员工的订单销售额
-- 查询时间【年】
-- 统计 -- 查询每个月的订单销售数量
-- 求和 -- 查询每个月的订单销售额
-- 饼状图 查询级联表
-- 查询字典表
-- 统计 -- 查询某个月的每个类型的订单销售数量
-- 求和 -- 查询某个月的每个类型的订单销售额
-- 查询某个字符串
-- 统计 -- 查询某个月的每个员工的订单销售数量
-- 求和 -- 查询某个月的每个员工的订单销售额
-- 查询时间
-- 统计 -- 统计每个月的订单销售数量
-- 求和 -- 查询每个月的订单销售额
*/
/**
* 柱状图
-- 柱状图 查询当前表
-- 某个【年，月】
-- 当前表 2 级联表 1
-- 统计
-- 【日期，字符串，下拉框】
-- 求和
-- 【日期，字符串，下拉框】
-- 柱状图 查询级联表
-- 某个【年，月】
-- 统计
-- 【日期，字符串，下拉框】
-- 求和
-- 【日期，字符串，下拉框】
*/
/**
* 柱状图求和
* @param params
* @return
*/
public List<Map<String, Object>> barSum(Map<String, Object> params){
return commonDao.barSum(params);
}
/**
* 柱状图统计
* @param params
* @return
*/
public List<Map<String, Object>> barCount(Map<String, Object> params){
return commonDao.barCount(params);
}
}
404.vue
<template>
<div class="content">
<img class="backgroud" src="@/assets/img/404.png" alt>
<div class="text main-text">出错了...页面失踪了</div>
<div>
<el-button class="text" @click="back()" type="text" icon="el-icon-back">返回</el-button>
</div>
</div>
</template>
<script>
export default {
methods: {
back() {
window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
}
}
};
</script>
<style lang="scss" scoped>
.content {
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 900px;
text-align: center;
.backgroud {
display: inline-block;
width: 200px;
height: 200px;
margin-top: 80px;
}
.main-text{
margin-top: 80px;
}
.text {
font-size: 24px;
font-weight: bold;
color: #333;
}
}
</style>
声明
本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。