基于web的购物网站系统设计与实现

目录TOC\o"1-3"\h\u2082摘要： 210821英文摘要： 3220391.引言 437391.1开发背景与意义 464201.2国内外研究现状 4260601.3研究内容 5252591.4论文架构 632422系统开发技术与环境 740422.2前端语言 767252.3后端技术 7147682.4开发框架 8285552.5系统数据库 8244732.6运行环境 8124812.6.1硬件环境 858312.6.2软件环境 8245542.7本章总结 9153113系统分析 10182743.1可行性分析 10141653.1.1经济可行性 1077203.1.2技术可行性 10147453.1.3操作可行性 10234773.2需求分析 11111433.2.1功能需求分析 1180173.2.2性能需求分析 12187243.3系统流程分析 13284823.3.1系统开发 13144833.3.2登录 13302873.3.3系统业务流程图 14189473.3.4数据流程图 15231383.4数据流程分析 17123533.4.1数据流图 17239013.4.2数据流图 18160813.4.3数据流图 19167213.5本章总结 19296304系统设计概要 20256234.1系统开发软件的选择 20244524.2系统总体功能设计 2018564.3系统数据库设计 209424.3.1概念模型设计 20118874.3.2数据库结构设计 2174854.4后端数据库交互介绍 23220314.4.1跨域解决方案 23257534.4.2数据库建立连接 24296744.4.3读取数据表 2490524.4.4查询数据表 2446754.4.5增加数据表记录 24198514.4.6修改数据表记录 25175844.5本章总结 25196895系统详细设计和实现 26196895.1用户模块设计 26112405.1.1用户登陆注册模块设计 2614054实现系统登录模块主要代码： 28148945.1.2系统首页模块设计 28120265.1.3系统商品信息模块设计 30210855.1.4系统商品购买模块设计 31107095.2管理员模块设计 32188735.2.1订单管理模块设计 32301015.2.2门店管理模块设计 3351425.2.3商品管理模块设计 34174805.3bootstarp框架应用 369085.4本章总结 39128536系统测试 39239316.1功能测试 39112986.2测试实例 39126596.3本章总结 41260167总结和展望 41299287.1总结 4169317.2展望 4126170参考文献 4124253致谢 42摘要：在信息化爆炸发展的当下，互联网新技术层出不穷。与此同时，电子商务的地位也是逐年升高，产值迅速增长。我们周遭的所有商品大都能通过互联网实现购买需求，京东、美团、淘宝等平台提供着我们日常需要的服务。网购的平台种类繁多。随着更新换代的发展，它们已经包含了非常多的功能。但这同时也将成为一把双刃剑，繁多的功能在方便我们操作同时也给我们带来了一些不便。针对于现在的网购平台功能繁多杂乱的问题。如何开发一款使用简单、页面简洁，不管是前台还是后台，相应的操作人员都能轻松上手的网上购物系统便成为了当下备注瞩目的问题。对此，本文拟开发一款采用B/S结构，不需要安装指定客户端便可以运行，同时操作简单的网上购物系统。本文将从所用编译语言入手，然后做出系统所对应的需求任务。之后，再进行具体的开发设计，详细探讨本文系统的功能模块、数据流程等，并且针对主要的功能模块进行剖析说明。以HTML+MYSQL+PHP的模式实现一款B2C模型的线上购物系统。关键词：基于web的购物系统；B/S；PHP；HTML；MYSQL英文摘要：Withtheexplosivedevelopmentofinformationtechnology,newInternettechnologiesemergeoneafteranother.Atthesametime,thestatusofe-commerceisalsoincreasingyearbyyear,andtheoutputvalueisgrowingrapidly.MostofthegoodsarounduscanbepurchasedthroughtheInternet.Jingdong,MeiTuan,Taobaoandotherplatformsprovidetheservicesweneedeveryday.Therearemanykindsofonlineshoppingplatforms.Withthedevelopmentofupgrading,theyhaveincludedmanyfunctions.Butitwillalsobecomeadouble-edgedsword.Variousfunctionsnotonlyfacilitateouroperation,butalsobringussomeinconvenience.Aimingattheproblemofvariousandmessyfunctionsofthecurrentonlineshoppingplatform.Howtodevelopanonlineshoppingsystemwithsimpleuseandsimplepages,whichcanbeeasilyusedbythecorrespondingoperators,whetherintheforegroundorbackground,hasbecomeanoticeableproblematpresent.Inthisregard,thispaperintendstodevelopanonlineshoppingsystemwithB/Sstructure,whichcanrunwithoutinstallingthespecifiedclientandsimpleoperationatthesametime.Thispaperwillstartwiththecompilerlanguageused,andthenmaketherequirementsandtaskscorrespondingtothesystem.Afterthat,thespecificdevelopmentanddesignarecarriedout,thefunctionalmodulesanddataflowofthesystemarediscussedindetail,andthemainfunctionalmodulesareanalyzedandexplained.AnonlineshoppingsystembasedonB2CmodelisrealizedinthemodeofHTML+MySQL+PHP.Keywords:Web-basedshoppingwebsitesystem；B/S；PHP；HTML；MYSQL引言1.1开发背景与意义在当前国际社会中，信息化发展程度在一定程度上已经可以代表一个国家科技发达、社会现代化的程度。表明在当前的科技发展趋势下，互连网已经是当今社会不可或缺的一部分。现如今在我们日常生活中，网络已经占据了重要地位，我们周遭的所有服务或者商品大都能通过互联网实现，比如京东、美团、淘宝等等平台都提供了我们日常需要的一些服务。从我们身边的这些现象也能清楚的看到未来互连网可以起到绝对关键的作用，将彻底成为我们日常生活或者是科技发展不可或缺的一部分。再从互联网的发展走进我们生活中，对于大多数用户，互联网最直接的应用就是网购，可以是各种形式的网购，购买生活用品、外卖、飞机票等等，网购的形式非常之多，同时，网购的平台也是种类繁多。随着一代一代网购平台的发展，这些小小的软件已经包含了非常多的功能。但这同时也将成为一把双刃剑，非常多的功能能方便我们操作同时也能让我们的操作带来一些不便，现在的大型网购平台的功能的繁多杂乱，因此，本文拟开发一款可以做到使用简单、页面简洁，不管是前台还是后台，相应的操作人员都能直接轻松上手使用的网络购物系统，力图进一步简化网络购物的功能和后台系统的操作。1.2国内外研究现状纵观国内外对于电子商务的研究和发展，美国得益于互联网技术的早期发展，其电子商务方面也已成为互联网世界的核心组成，在全球范围内有明显的优势，比如世界最大的电子商务平台亚马逊REF_Ref17458\r\h[1]。国内虽然起步较晚，但依靠快速的发展，如今在电子商务领域内也已名列前茅。与此同时，电商平台的发展格局也在不断变化。2000年ebay收购了易趣，2004年卓越被亚马逊所收购，2005年阿里巴巴全面地收购了雅虎中国等。REF_Ref20616\r\h[2]在表明电子商务快速发展的同时，也不难看出电商激烈的竞争环境，需要我们不断发现创造创新点REF_Ref21452\r\h[3]。再从当下国内发展较好的平台去看，比如京东、淘宝等等购物网站，它们经过数代更新发展，如今平台上囊括了各种功能。对于京东之类的网站，主营的是B2C的模式，界面清晰、分类详细，主营电子产品的同时也有服装、食品等等分类的商品，并且强调商品的高质量、高可信度。REF_Ref23807\r\h[4]使得相关商品销量节节高增，销售范围也逐步扩大，为旗下分销商打下良好信誉度。淘宝作为典型C2C的平台，主要是入驻的商家与买家之间的交易。商家信誉度一般由品牌支撑，商品数目众多，种类繁杂，当然价格也会随着品质有较大的落差。旗下天猫也以B2C的方式进行电子商务，但主要还是驻扎在平台上的商家提供服务。这种模式不仅为消费者提供了更多的商品选择，同时也提供了更多的工作岗位，缓解了当下社会的就业压力。可谓实现了双赢。当下国内外在线上交易平台的设计上常见为如下两种，B/S结构和C/S结构，B/S是浏览器和服务器，C/S即客户机和服务器。最初的开发模式都是C/S结构，主要流行于90年代初，而后才有B/S结构。但现在来看，B/S结构事实上也是C/S演变而来，而且，它相较于C/S改进了许多方面，从而发展至今。B/S结构的用户界面就是浏览器的界面，它使用浏览器代替了原先的客户端，并且通过浏览器实现了原先需要客户端才能实现的前后端通信，比如与数据库的交互。如今，基于B/S模式构建的系统已经支持许多种不同的主流浏览器，比如：Chrome、IE、Safari、Firefox等等，并且同时支持不同的操作系统如windows10和MacOS10等等。REF_Ref21452\r\h[3]由于不需要客户端，B/S结构在很大程度上降低了用户组的操作难度，减少了许多使用步骤。本文主要着眼于网购系统的简便性，本文拟开发一款采用B/S结构，不需要安装指定客户端便可以运行，同时操作简单的网上购物系统。1.3研究内容本系统的设计与实现包括以下几个阶段：设计、分析以及最后的实现。同时为了保证各个阶段任务的顺利完成，比如各个功能模块的实现，相对应的说明文档是不可或缺的。通过实现文档与目标预期文档的比对来查漏补缺，从而一步一步进行各个阶段的开发。保证每一步都不出错，尽量不在后续阶段返回重新改变前面阶段的成果。在本系统设计的最初阶段，主要结合所学的知识，进行相关资料的查阅之后，首先确定下后续所要使用的开发工具与方法。其次便是完成本系统的需求分析。在确定下开发工具与系统需求之后，再实际地进入到系统的实现中，也就是网络购物系统的设计与实现。经过确定，本系统的前端页面主要采用ps进行设计，html5、css3语言实现。数据库依靠mysql提供支持，包括相应数据的搜索查询删除改变以及相应用户的权限查询改变。动态页面实现依靠php对页面与数据库的交互进行实现。在完成上述步骤即最终完成了系统的实现之后，最后的阶段就是调试测试以及细节上的优化了。1.4论文架构本文结构组织如下：第1章为引言，主要介绍本文研究的背景和意义，国内外研究现状和本文研究的主要内容。第2章为系统开发技术与环境，主要介绍实现本文系统的关键技术和框架，以及开发环境。第3章为需求分析，主要包括可行性分析，功能需求分析和流程分析。第4章为系统设计概要，将对应于各个需求进行各个功能模块的设计。第5章为详细设计与系统实现，将从数据库、视图等多个方面阐述系统的开发与实现，对系统进行详细的介绍。第6章为系统测试，在系统完成后对系统进行功能测试，确保功能的实现。第7章是全文的总结。2系统开发技术与环境本章节主要介绍实现本系统的主要开发技术和环境配置。会先介绍本系统采用的各个编译语言，并说明其被选择的原因。后介绍实现本系统时用到的编译软件和硬件环境。2.2前端语言HTML中文也叫超文本标记语言。REF_Ref25684\r\h[5]不像c++、java之类的编程语言，HTML是作为标记语言来进行工作与开发的。所谓标记语言就是把文本和其他的一些数据信息进行结合，从而描述出一些电脑操作处理的电脑编码。REF_Ref26014\r\h[6]HTML作为标记语言，使用标记标签比如<html></html>来进行编写。相类似还有许多，各种功能标签，这些标签共同组成了html。也可以简单理解为标记语言就是一套标签。而html5的意思就是HTML发展的5.0版本，也是现在最新的版本，加入了许多新的标签比如<video>，使得HTML开发更简单更贴近现如今开发趋势。由于使用的是文本与文本标签，HTML最终处理实现的结果也是一个文本，通常为.html、.htm的后缀。HTML实现的是页面的结构，而页面的美化就交给了CSS，CSS也叫层叠样式表。作为HTML的皮肤，它描述了HTML各个结构的样式，比如位置、大小、颜色形状等等。为网页元素布局节省了大量工作。REF_Ref26070\r\h[7]CSS3作为新一代CSS，增加的动画效果更是节约了许多工作量。Javascript是编程语言，虽然名字带有Java，事实上，这是完全不同的、没有联系的两门语言。JAVAscript也简称为Js，Js最大的应用就是嵌入于HTML中，相较于HTML作为骨架，CSS作为皮肤，Js是作为动作的存在，来响应HTML元素的事件对象的实现，或者是读写HTML元素。2.3后端技术PHP也叫做超文本预处理器，其最大的特点是可以嵌入到HTML中来作为服务器编程语言。由于PHP语言开发之初的目的就是让人们可以更加快速简洁方便地开发自己的网站，因此PHP可以同时用于面向对象或者是过程的开发，在使用上非常的灵活。更重要的是PHP是一个开源软件项目，配套的软件基本也都是开源免费的，对于初入的学者，可以节约大量经费。虽然作为开源软件缺少了大型科技公司的支持，但是PHP社区发展到现在已经非常完善，足以解决各种疑难杂症。REF_Ref25929\r\h[8]而且用PHP开发会使得软件的跨平台型很强，可以做到不经修改同时运行在UNIX、LINUX、WINDOWS下。2.4开发框架Bootsrap作为一种前端框架，一般被用于移动开发中。其不仅仅包含了丰富的web组件，最重要的用途是用于响应式布局的开发。REF_Ref25684\r\h[5]即通过一种布局使网页可以正常显示在手机、pc端。主要靠的是Bootstrap的栅格化的布局，通过像栅栏一样把网页分成几份，配合media媒体查询使得屏幕在不同分辨率下呈现出不同的栅栏格局。从而使得pc网页即使运行在手机端也能正常显示。正是因为对于响应式布局的重要作用，Bootstrap一经推出就成为了github上重要的开源项目，一直活跃到现在。2.5系统数据库毫无疑问，MySQL是当下使用最为广泛的关系型数据库管理系统之一。和PHP一样，MySQL也是开源的，不需要授权费用也因此被使用非常广泛，不论是学习还是商用，都能看到MySQL的影子。体积小速度快也是本系统选择的原因。尽管功能不如大型数据库如SQLServer完善，但对于小型公司或者项目来说，已经是绰绰有余。MySQL使用标准的

SQL数据语言形式，而且还提供了许多PHP的API，使用小巧方便，查询速度也很快。REF_Ref26223\r\h[9]2.6运行环境2.6.1硬件环境本系统开发硬件设备如下：处理器为InterCOREI7，内存8GB，硬盘空间50G以上。较低的配置带来的是极高的适用性，使得用户体验更好。2.6.2软件环境软件环境指的是开发人员在开发软件的时候用到的工具。提前确定软件环境的原因就是如果可以筛选出自己较为熟悉的方案，那么会大量节约开发的人力物力。也可以大量减少会遇到的问题。因为选择适合自己的开发环境会对开发产生非常大的影响。做到不产生严重的bug，而是类似于查漏补缺的学习与开发状态。REF_Ref26324\r\h[13]本系统在开发时的软件环境主要如下：操作系统：window10系统开发工具：vscode数据库：Mysql软件开发语言：htmlphp2.7本章总结在本章所述工作结束之后，关于本系统所采用的技术、框架皆已介绍完毕。通过介绍完上述内容，本文已完成了对系统开发的前期准备工作，后续内容将全部围绕本系统来进行说明。3系统分析系统分析是工程作业中不可或缺的环节。是以全局最优化为目标，对系统的各个环节进行定性或者定量分析。在本文中，系统分析包括可行性分析，此环节分析系统的各个实现可行性，保证后续工作的顺利进行。然后是功能的需求分析，即分析本系统受众所需要的功能模块并完成设计。然后是系统流程分析，对所设计的模块进行实际的演示记录，将功能落实到各个具体的模块上。最后是数据流程分析，此环节讲述了本系统中数据的主要传递方向，也是各个功能模块之间联系的桥梁，具有重要意义。3.1可行性分析3.1.1经济可行性由于该系统简洁的功能面板和操作方式，因此对经济方面并没有特别高的要求。同时，简洁的功能面板使得该购物网站系统还具有良好的扩展空间，并且结构清晰使得业务扩展更为方便，相较于较低的开发成本，带来的效益将远高出成本，经济可行性是比较强的。同时在成本方面，mysql，php等等都是开源免费的语言或工具，同时，获得商品的详细信息的成本也可以忽略。多个方面都可以证实本系统的经济可行性。3.1.2技术可行性在技术可行性方面，html+php+mysql的开发模式已经是比较成熟的了，被许多开发人员所中意。html写前端页面，mysql提供数据库支持，php写后端交互，这样的开发模式清晰简单，可以快速上手操作，同时，发展完善的php社区也能解决遇到的疑难杂症，种种方面都证实了本系统的技术可行性。3.1.3操作可行性对于服务于普通客户的网站系统来说，操作可行性毋庸置疑是非常重要的。而且，操作方面的简易程度很大程度上决定了系统的将来的推广程度、推广难度。所以，我们在开发系统的时候必须考虑操作可行性。而对本系统而言，操作可行性毋庸置疑是成立的。首先，本系统基于web开发，通过浏览器即可使用。使用户与管理员都只需要通过浏览器而不需要安装指定客户端就可以进行相关操作。而且系统运行也只需要一台设备就能稳定实现。简洁的功能面板也使得此系统操作根本不需要相关指导培训就能立刻上手。在功能面板也是做好了需要的按钮提示等等。而且，网购模式对受众来说，已经是一种非常普及的方式了，操作方式也是类似，而且比目前的大多数购物系统更加简洁简单，非常好上手。多个方面来看，本系统的操作可行性是成立的。3.2需求分析系统的需求分析是系统计划中一个重要的阶段，是开发人员经过深思熟虑，充分了解用户的需求和对系统的定位并且确认之后，将用户口述化的需求等信息以具体实际的功能描述记录下来。通俗来讲此阶段就是分析出系统将要做什么，去实现什么，而不是先去考虑怎么实现。系统需求分析应该要做到非常完善的程度，而不是已经在开发阶段了再来修改需求，这是不允许的。系统需求在确立了之后，要求对其的修改要降到最低，尽量不改需求才能带来最高的开发收益。正是基于这些原因，系统需求是开发的全部阶段里非常重要的一部分。这要求了我们对需求的分析非常细致认真，同时不能出错，在记录下需求的时候不能出现矛盾的内容，同时需求内容应该以模块化的方式进行分析编写，以带来良好的代码或者功能追溯性以及后续的可扩展性。3.2.1功能需求分析首先做的是系统中将会存在的角色以及不同角色所对应的操作的介绍，包括在前台进行功能实现的用户和在后台登录操作的管理员。具体功能模块如下：图3-1前台普通用户角色和操作图3-2后台管理员角色和操作3.2.2性能需求分析在性能需求分析中，我们应该要具备如下要求的功能性：（1）安全需求由于在本系统中存储了许多的信息，不仅仅是商品商家信息，更重要的还有用户的隐私信息，比如用户的电话号码、邮箱或者是订单，都具有较高的隐私要求。对此，我们必须要有良好的安全性，同时对用户的权限做出限制，绝不能出现越权操作。要核实用户身份的真实性之后才可以进行操作。（2）便捷性由于本系统的受众是普通用户，因此系统里的所有功能必须要简介易上手易操作，而不需要操作手册等等的说明或者培训。对此，本系统在兼顾简介大方的同时，在功能模块方面，所有的功能也都是一目了然简洁易懂，操作简单，可以使用户操作起来非常方便，可以快速上手。（3）扩展性由于用户对系统的需求往往具有时效性，当下的需求与未来的功能需求可能会出现矛盾等情况。而系统的开发设计实现等都是以当前的需求进行的，对此，我们必须要考虑系统扩展简易程度或者能否进行后续的功能扩展。同时，在未来进行功能扩展的时候，不能对当前的功能结构产生比较大的影响。对此，系统的功能设计等等要做到模块化开发，以此来方便未来的扩展维护。（4）稳定性系统在划分功能模块的时候，要做到“高内聚，低耦合”，从而确保各个模块功能的独立性，即使一个功能模块出现了异常，也可以只修改相应模块并且不会对整体功能造成影响。这样系统在以后才能稳定运行。才能保证系统的可靠稳定。3.3系统流程分析3.3.1系统开发在系统实际开发中，我们首先要把需求分析放在第一位，以此为基础进行开发方式、流程的选择、制定。在选择好系统开发技术和模型之后，我们再设计数据库以及编写各个需求的功能模块的代码。在上述流程都完成了之后再进行最后的测试，在测试方面，往往通过黑盒测试，即忽视掉代码，只关注于系统的视图层进行各个功能的测试，在走完全部流程并且没有异常发生的时候，系统开发才算完成。具体的开发流程如下图所示图3-3系统开发流程图3.3.2登录在登陆流程方面，由于存在前台与后台两个视图，因此也有两个登录页面，但是不论是前台的登录界面还是后台的登录界面，其实现流程都是相同的。在输入相关的账号密码之后，系统会识别用户的角色，然后给予其登录相应界面的权限，而不会出现越权访问的情况。如果错误则会出现响应错误提示，相关的流程图例如下：图3-4登录流程图3.3.3系统业务流程图在业务流程中，我们最主要关注的是商品信息（包括详情、评价等等）、订单信息、交易流程。这也是本系统的核心业务功能，其他所有的功能都是基于服务这几个功能的情况下开发设计的。因此也是做出了相关的购买流程图例，如下所示：图3-5商品购买流程图3.3.4数据流程图对于数据库中传递的数据，包括订单信息、商品信息、用户信息等等的读取流程图示如下：图3-6数据读取流程图除了要读取相关数据之外，同时对于这些数据我们还要进行数据库的写入，即用户把数据传递给数据库并记录，数据写入的流程图示如下所述：图3-7数据写入流程图除了对于商品相关数据信息的读取与写入之外，还有很重要的数据内容是具体的不同的个人用户所对应的信息的读取和写入。不论是前台普通用户还是后台管理员用户，对其身份信息都要进行核验之后才能分配相关权限。过下图所示，如果登录判断中，所登录角色为普通用户，则允许登陆前台并对商品收藏评价购买或者自己的订单具有读取修改权限。如果是管理员角色，则允许登录后台管理系统，并对系统中的商品订单等具体信息进行增删改查的操作。除了对商品订单，管理员用户还可以在后台的用户列表查询所有前台注册的用户并对用户信息进行增删改查的操作，同时分配角色权限。用户的账号正常注册界面是在前台，但是注册的账号仅仅是普通用户的账号信息。也无法修改权限。管理员的权限只能通过后台增加管理员用户的操作来进行管理员账号的添加或者删除。具体的数据流程图示如下：图3-8角色数据流程图3.4数据流程分析根据上述数据流向分析，做出本系统的隔层的数据流图。3.4.1数据流图首先是用户登录模块的简单逻辑和数据流图，图示如下：图3-9数据流图用户在登录时，账号密码信息会在数据库中进行查询操作并返回结果。如果查询成功则依据查询到的角色信息展现相关的个人页面并展示相关数据。登录完成之后，在用户或者管理员对商品信息等进行操作的时候，数据首先传递给sql语句并完成相应的操作，添加或者删除等等最后再把数据返回给师徒展现相关操作的结果。3.4.2数据流图数据流图是用图示的方式来简洁地表面系统中数据的传递和功能的逻辑实现。下图是系统主要的数据走向也一些功能模块的数据流演示。主要数据源为用户和管理员。用户更多是对数据的查询操作，而管理员除了查询还包含对数据的修改操作。图示如下：图3-10数据流图3.4.3数据流图然后是管理员部分的数据流图介绍，在管理员部分，除了有用户管理的模块之外，还有商品订单门店的数据管理。数据流主体还是用户和管理员，具体数据流程图如下所示：图3-11数据流图3.5本章总结在完成本章系统分析之后，系统的需求基本已经落实到了各个功能模块上。数据在各个功能模块之间的传递方向也清晰易见。即完成了将需求从口头化到纸面化的转化。后续，在有了具体的功能模块的需求之后，本文将开展对于系统功能模块设计的介绍。

4系统设计概要4.1系统开发软件的选择在开发过程中，我主要采用的编译工具是vscode，这是一款能在桌面上运行的跨平台源代码编辑器，而且具有丰富的语言支持和扩展生态，支持html与php的编译。数据库选用了mysql来提供系统数据支持，同时用navicat来编译数据库。navicat是一款用户界面设计良好的数据库管理工具，非常容易学习。还能以单一管理工具连接多个数据库，在实际开发中应用广泛。4.2系统总体功能设计在认真思考了系统的全部需求并修改完善之后，正式划分出系统的功能模块，具体内容如下图所示：图4-1系统功能图4.3系统数据库设计4.3.1概念模型设计结束需求部分之后，首先设计的是数据库部分。具体来说，就是用自己所选用的数据库管理系统，即navicat来设计并且建立需要的数据表。确定好字段和表关联，最后要求做到数据存储一目了然并且可以正确地从数据库中拿到自己需要的数据。实现数据库正确传值，完成系统的数据部分的功能。在正式设计的第一步就是要确立我们需要的实体。实体指的是一类事物的集合，在数据库中也会用到这个概念，那么此系统数据库中的实体分别为以下几个部分：图4-2商品实体图图4-3分类实体图图4-4订单实体图图4-5门店实体图4.3.2数据库结构设计确立完实体之后就要结合实体与系统需求，分析实体与数据之间的关系、流向，然后进行数据库结构设计，除了要规范命名、控制字段的引用之外，最后完成的数据库结构还要尽量减少重复无用的数据，并且要能够稳定运行。以下是主要的数据表设计：表4-6：管理员信息表admin序号字段名数据类型长度主键允许空说明1user_idint5是否id作为主键，自动生成2usernamechar16否管理员名3passwordchar32否管理员密码4namechar60否管理员昵称5emailchar60否管理员邮箱6creat_dateint10否管理员创建时间表4-7：用户信息表user序号字段名数据类型长度主键允许空说明1user_idint8是否id根据注册顺序由系统自动生成2user_namechar16否用户名3passwordchar32否用户密码4emailchar60否用户邮箱5mobileint11否用户手机号码表4-8：商品信息表goods序号列名数据类型长度主键允许空说明1goods_idint8是否id根据插入顺序自动生成2cate_idint5否商品种类id3goods_namechar100否商品名4now_pricedecimal10否商品现价5original_pricedecimal10否商品原价6goods_imagechar30否商品图片7goods_briefchar255否商品详情8goods_kucunint4否商品库存数表4-9：订单信息表order序号列名数据类型长度主键允许空说明1idint10是否id根据插入顺序自动生成2order_idchar15否订单号由系统随机生成并且不重复3user_idmediumint8否用户id6order_statusint1否订单状态（1、未付款；2、未发货；3、未收货；4、已完成）7goods_amountdecimal10否商品总价格9order_amountdecimal10否订单总价格10beizhuvarchar240否订单备注11created_dateint10否订单创建日期4.4后端数据库交互介绍4.4.1跨域解决方案由于浏览器是按照同源策略工作的，即无法执行其他网站的脚本行为。因此我们需要修改header，以使得系统接受任何网站的访问请求，包括POST、GET等请求方式header('Content-Type:

text/html;charset=utf-8');header('Access-Control-Allow-Origin:*');header('Access-Control-Allow-Methods:POST,GET,OPTIONS');

header('Access-Control-Allow-Credentials:

true');

header('Access-Control-Allow-Headers:

Content-Type');4.4.2数据库建立连接在建立数据库链接之后，通过定义参数method来作为后续数据库增删改的标志，以区分对数据库的操作，并打包数据库操作函数使得函数可以重复调用，节省工作量。$conn

=

new

mysql($servername,$username,$password,$dbname);if($conn->connect_error){

die("连接失败",$conn->connect_error);}$method

=

$_POST['method'];4.4.3读取数据表执行时判断参数为getlist时，执行查询语句，进行数据表读取操作。将返回结果存入arr数组后，将结果打包为json格式传递给前端。同时通过code参数判断函数是否成功调用。if($method=='getlist'){

$sql="SELECT

*

FROM

sql";

$arr

=array();

$res=$conn->query($sql);

if($res->num_rows>0){

while($row=$res->fetch_assoc()){

array_push($arr,$row);

}

}

echo

json_encode(array('code'=>200,'data'=>$arr));}4.4.4查询数据表method参数为detail时执行查询一条记录的函数，和上述读取数据类似。if($method=='detail'){

$id

=

$_POST['id'];

$sql

=

"SELECT

*FROM

sql

where

id

=

$id";

echo

json_encode(array('code'=>200,'data'=>$conn->query($sql)->fetch_assoc()));}

4.4.5增加数据表记录method参数为add是需要执行“增”的操作，即把前端传递来的数据加入数据库中。若插入成功，则code返回200，否则，返回300，以此判断函数是否执行成功。同时返回插入记录的id。if($method

=

'add'){

$title

=

$_POST['title'];

$neirong

=

$_POST['neirong'];

$sql

=

"INSERT

into

sql

(title,neirong)

VALUES

('$title','$neirong')";

echo

json_encode(array('code'=>$conn->query($sql)?200:300,'data'=>$conn->insert_id));}4.4.6修改数据表记录修改操作与上述增加操作类似。将前端返回数据插入需要执行的数据库语句中参与执行。最后给出结果参数，判断是否执行成功。if($method

=

"xiugai"){

$title=$_POST['title'];

$neirong=$_POST['neirong'];

$id

=

$_POST['id'];

$sql

=

"UPDATE

sql

set

title

=

'$title',neirong='$neirong'

where

id

=$id";

echo

json_encode(array('code'=>$conn->query($sql)?200:300));}4.5本章总结至此，本系统的需求皆已经落实到具体的功能模块上。再落实系统需求完毕之后，就是依据上述概要设计进行各个功能模块的详细设计。

5系统详细设计和实现5.1用户模块设计5.1.1用户登陆注册模块设计首先是登录模块，登录模块同时也包括注册模块。首先，注册界面会提示用户输入必要的个人信息进行注册，个人信息会在用户需要修改密码的时候被引用进行身份认证。填写完注册相关信息，账号密码用于登录验证，邮箱用于在修改用户密码时候的验证。填写完毕后，如果信息格式无误并且账号邮箱并未被使用过，则会提示注册成功并且跳转到登录页面。此时也代表注册的用户信息已被成功加入数据库中。在登陆页面则是对数据库的查询操作，如果输入的账号密码与数据库中的用户信息表匹配，则登陆成功并且跳转到系统主页进行购买浏览商品的操作。如果系统没有查到相关账号，则提示登录失败并提示用户先进行注册。用户的注册界面如下图所示：图5-1系统注册模块界面实现系统注册主要程序段：<dl><dt><label

for="username">用户名：</label></dt><dd><input

name="username"

id="username"

type="text"

/><p></p></dd><dt><label

for="email">邮箱：</label></dt><dd><input

name="email"

id="email"

type="text"

placeholder="@"

/><p>电子邮箱地址</p></dd><dt><label

for="password">设置密码：</label></dt><dd><input

name="password"

id="password"

type="password"

/><p>密码长度为6~32个字符</p></dd></dl><dl><dt><label

for="repassword">确认密码：</label></dt><dd><input

name="repassword"

id="repassword"

type="password"/><p>确认密码</p></dd></dl>图5-2系统登录模块界面实现系统登录模块主要代码：<h2>用户登录</h2><dl><dt><i></i></dt><dd><input

name="username"

id="username"

type="text"

placeholder="请输入用户名"

/></dd></dl><dl><dt><i

class="icon"></i></dt><dd><input

name="password"

id="password"

type="password"

placeholder="请输入密码"

/></dd></dl>5.1.2系统首页模块设计在登陆之后会首先展示初始页也就是首页。首页上分布了跳转到各个功能页面的链接按钮。用户不但可以在首页浏览商品，也能进入自己的个人信息页进行信息的修改查询。首页决定了用户能否方面地使用系统。在此系统中，基本的功能都已经在首页完成了展示，可以让用户快速了解系统的各个功能，方便用户使用。首页视图如下：图5-3系统首页设计模块界面商品首页展示主要代码块：<li><div><a

href="<{url

c='goods'

a='index'

id=$v.goods_id}>"><img

alt=""

src="<{$common.baseurl}>/upload/goods/prime/150x150/<{$v.goods_image}>"

/></a></div><h3><a

href="<{url

c='goods'

a='index'

id=$v.goods_id}>"><{truncate($v.goods_name,

40)}></a></h3><p

class="price"><i>¥</i>

<{$v.now_price}></p>5.1.3系统商品信息模块设计然后是主要的商品信息部分，在这里，用户可以明了地看到各个商品。在首页点击不同的分类按钮也会显示不同的商品列表。在商品列表页或者是首页点击商品图片都可以跳转到商品的详情介绍页面进行购买，操作十分便捷。商品列表页如下图所示：图5-4商品信息模块界面商品列表展示主要代码块：<ul><{foreach

$goods_list

as

$v}><li><div

class="im"><a

href="<{url

c='goods'

a='index'

id=$v.goods_id}>"><img

alt=""

src="<{$common.baseurl}>/upload/goods/prime/150x150/<{$v.goods_image}>"

/></a></div><h3><a

title="<{$v.goods_name}>"

href="<{url

c='goods'

a='index'

id=$v.goods_id}>"><{truncate($v.goods_name,

40)}></a></h3><p

class="price"><i>¥</i>

<{$v.now_price}></p></li><{/foreach}></ul>5.1.4系统商品购买模块设计商品之后就是购物车模块，在购物车界面中，用户可以简洁明了地直接看到自己选择的所有商品。可以在此页面修改商品的数量或者是删除商品，从此页面也可以直接跳转到付款页面进行后续付款操作。商品购买界面如图所示：图5-5商品购买模块界面购物车功能主要程序段如下：<tr

class="cart-row"

data-key="${k}"><td><a

href="<{url

c='goods'

a='index'

id='${v.goods_id}'}>"

target="_blank"><img

src="<{$common.baseurl}>/upload/goods/prime/50x50/${v.goods_image}"

/></a> </td><td><div><a

href="<{url

c='goods'

a='index'

id='${v.goods_id}'}>"

target="_blank">${v.goods_name}</a><p

class="opts

c999

mt5">{@each

v.opts

as

o}<span

class="mr5">[${o.type}:

<font>${o.opt_text}</font>]</span>{@/each}</p></div></td><td><font>${v.now_price}

</font></td><td><button

type="button">-</button><input

type="text"

value="${v.qty}"

/><button

type="button">+</button></td><td><font>${v.subtotal}</font></td><td><a>删除</a></td></tr>5.2管理员模块设计5.2.1订单管理模块设计在后台管理系统中，管理员在登陆之后可以在列表中的订单管理中看到近期的所有订单并对订单进行相应操作，如查看详情或者进行发货操作。图5-6订单管理模块界面订单展示主要代码段：

<td><a>${v.order_id}</a></td>

<td>$${v.created_date}</td>

<td><b>${v.order_amount}</b></td>

<td>

<p>${v.receiver}

<font

>(<b>${v.mobile}</b>)</font>

</p>

<p>${vince}

${v.city}

${v.borough}

${v.address}</p>

<p>${v.zip}</p>

</td>

<td>${v.order_status}</td>5.2.2门店管理模块设计本系统还新增添了线下门店的介绍模块，在后台用管理员身份上传门店信息之后，用户在前台便可浏览线下门店的信息。同时后台管理用户也可以对这些信息进行增删改操作。具体操作界面如下图所示：图5-7门店管理界面实现门店信息主要程序段：

<td

width="20"><input

name="id[]"

type="checkbox"

value="${v.id}"

/></td>

<td

width="40">${v.id}</td>

<td><a

class="blue"

href="<{url

m=$MOD

c='article'

a='edit'

id='${v.id}'}>">${v.title}</a></td>

<td>$${v.cate_id|cate_text}</td>

<td

>$${v.created_date|format_date}</td>

<td>正常</td>5.2.3商品管理模块设计此功能模块是用来进行对商品的增删改操作的，服务对象为后台管理员用户，可以简单地使用ui即可完成对数据库的增删改操作，在这里，管理员可以直接看到所有商品并且可以简便地直接对商品进行增删改查等等操作，商品管理界面具体视图如下所示：图5-8商品管理界面实现商品信息展示功能，主要代码如下：<td

width="20"><input

name="id"

type="checkbox"

value="${v.goods_id}"

/></td><td

width="40">${v.goods_id}</td><a

href="index.php?m=<{$MOD}>&c=goods&a=edit&id=${v.goods_id}">${v.goods_name}</a><span

class="sign">新品</span><span

class="sign">推荐</span><span

class="sign">特价</span></td><td>${v.goods_sn}</td><td

class="red">${v.now_price}</td><td>${v.stock_qty}</td><td>上架</td><td>$${v.created_date|format_date}</td>

5.3bootstarp框架应用bootstrap核心原理是网格系统，即把父容器平均分为12份，按照自己的想法把他们分给子容器，结合媒体查询还可以进行容器的二次分配，就可以制作出强大的响应式网页视图。同时bootstap有大量的组件样式可以调用，使得页面布局更加简单方便快捷。同时api文档非常详细，调用方便。以下为bootstrap骨架文件<!doctypehtml><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><title>Bootstrap101Template</title><!--Bootstrap--><linkrel="stylesheet"href="/bootstrap/3.4.1/css/bootstrap.min.css"integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"crossorigin="anonymous"></head><body><h1>helloworld</h1><