【《基于Web的电脑配件购物网站设计与实现》7900字】

前言1.1问题的提出随着社会经济飞速发展，科技也不断的在进步，商品交易的形式也不再局限于传统的店面销售模式。电子商务这种互联网交易形式的出现，不仅降低了企业的经营成本，更是减少了中间商这一层的利润剥削并降低了物流成本，这也变相降低了人民的消费压力。网上购物网站五花八门，但是却缺少专营电脑配件的购物网站，本网站整个系统的规划，就是要完成一个售卖电脑城能够买到的所有产品的购物网站。1.2文章的研究背景网购是基于互联网的经济活动，如今企业的销售模式已经变为以计算机为主的智能化工具为代表的销售方式,当代企业竞争利益的最佳途径就是电子商务。人们逐渐接受网上购物,企业的经营重心也从传统的店面销售转移到了网络销售上来。

电子商务因为是在网络上售卖，所以它与传统商业有很大不同，不需要拥有实体店，就可以轻松覆盖全国甚至是全世界去进行商品交易，只要是有网络的地方都可以进行网络购物。电子商务的信息发送速度非常快，可以完成最及时的信息传播，完善后的信息可以快速发送到用户的面前，有网络的地方就都能看到它。反观传统销售，却依靠杂志、广告、电视媒体等传播，速度非常慢。电子商务还可以通过数据库收集客户的详细资料、浏览习惯等记录，详细明了客户的需求后，可以准确的向用户推送感兴趣的产品，从而增加销量，提高用户对于平台的黏性。电子商务的付款形式比传统容易而且风险低，身处移动互联网时代，一部手机就能轻松购买商品。正确填写完自己的地址就能收到自己购买的商品，方便又快捷。1.3系统功能目标通过这个购物网站，用户可以方便便捷的购买其所需的电脑配件。同时让用户拥有改进他自身信息的本领。网站允许未登录的用户浏览网页，但在购买时必须登录，且登录要拥有方便的跳转能力，使用户操作更加便捷，同时本网站可以登录管理员账户，管理员登录后可以对电脑配件进行上架、下架、价格修改、添加等操作。浏览者在购物时所选配件放到购物车里，购物车界面简洁明了，方便用户使用。1.4本文的结构本文结构分为系统分析（主要分析这个系统完成的难度），概要设计（主要是详细设计要做的功能），详细设计实现（本文所做的一些功能与配图），系统测试（以用户或管理员的身份测试一下系统）。（2）本文所写的内容是本系统实现了的功效原理与性能测验。依靠手动添加系统测试时的全页截图，图文一致的展现本系统所实现的功能。同时，对于实现界面中所使用的控件信息，本文也都通过表格展示在了对应的模块下。2系统分析2.1需求分析本网站的设计目的就是完成一个简易的电脑配件购物网站，用户在该电脑配件购物网站上只需要几分钟，就可以购买到到去电脑城几个小时才能买齐的所有配件。这也是本网站在五花八门的购物网站中独特的地方，拥有搜索商品的片面信息的优势，可以通过一些模糊的信息就能搜索到用户大体寻找的商品，通过点击图片来查看商品也是目前购物网站上都在用的方式，商品具体信息看完后如果用户想要购买，就可以填入收货地址等，在支付方面，本网站可以使用微信，网银等各式各样的网上付款。顾客的购物流程大致为，登录顾客的账号后跳转到主页，可以选择从菜单栏里通过目录来确定他们大致需要的商品，也可以选择通过搜索框搜索网站内的具体产品，新闻框内也可以浏览最新的打折商品，用户点击他感兴趣的商品就可以进入到商品详细页并付费购买，购买时填入收获地址，选择收获方式就完成了购物的流程。2.2可行性分析该系统开发主要使用Jsp开发技术与MySQL数据库技术，使用MyEclipse来开发程序。它们都具有不受威胁性高，速率敏捷等特点。而且该系统属于小网站，没有必要实现数据全部加密。在功能实现上，该系统采用的设计方式是分层设计，这样便于后期系统维护，该系统的设计方式从技术层面上来说是完全可行的。2.3软件环境Windows10家庭中文版数据库：MySql5开发环境：MyEclipes102.4相关技术介绍2.2.1B/S模式B/S模式也被称为B/S结构。伴随社会的提升，科技的进取，应用C/S结构的途径越是复杂。B/S结构就在这种情况下出现了，WWW浏览器可以展示B/S结构的界面，但B/S结构的事务逻辑却并不在浏览器中，而是存放在服务器端。B/S结构归根结底是网络结构的一种，维护成本低，维护方便是B/S结构相比其他模式的优势，能实现较为复杂的数据操作和访问且不受地域限制,电脑客户端的运行压力也会减轻，系统的维护成本也随之减轻。但缺点也不得不说，B/S结构的核心缺点就是企业对外网环境的依赖性，外网一旦中断的话，整个系统就会陷入瘫痪状态。2.4.2JAVA语言在Jsp程序的开发过程中，其对于Java语言的依附性越来越大，Java程序设计语言能够跨程序面向对象编程。为了使计算机具备看懂Java语言，编写Java语言的能力，Java语法就在这种需求下出现了，它让java语言编写更加的规范。Java语言算是静态面向对象中主流的编程语言，面向对象这个理论被Java语言诠释的很好。2.4.3Jsp+servletJsp是网络编程环境中最盛行的一种，它拥有将各种Web元素组合在一起的服务器技术。供给了Web应用程序运行时所须要的各种技术需求。Jsp在实质上属于Servlet的母亲，Servlet是它的一种独特展现方式，Jsp页面便是servlet。但JSP也有它不好的地方，它的复杂性很高，因为其跨平台的特性，所以无形中也家具了编程的复杂程度。2.4.4MySql5数据库MySQL是一个规范的C/S架构程序，MySQL可以关联数据库的管理系统，为Jsp供应数据库服务，也能完成客户端所请求的操作。MySQL与同类的关系型数据库不一样之处就是它的弹性，可以根据当前CPU的使用情况进行增减实例的操作，还可以通过插件提供不同种类的存储引擎，MySQL请求处理的过程会根据不同的存储引擎发生变化，不同的储存引擎执行时会产生很大的差异。3概要设计3.1系统功能设计3.1.1前台用户模块购物查询：主页最上面的搜索框，支持模糊查询，可以让用户更轻松地找到心中想要的商品；列表查寻让用户拥有不断细化他所需要商品类型的能力。用户注册与登录：作为一个购物网站，用户进入页面后正确显示购物注册页面，注册成功后要跳转到主页页面；登录能使注册过的用户成功注册，且登录页面的验证码要正确显示，可以更换，拥有非空验证。购物车付款：添加到购物车内可以方便用户继续在网站内购物，购物车内也可以实现更改商品的购买数量，但是添加的数量不能超过本系统的库存。用户地址选择：购物车页面购物时可以让用户便捷填写收货地址，也可以选择这个账户以前用过的地址。3.1.2后台管理模块查看用户订单：管理员登录后才拥有查看顾客购买订单的权力，可以对顾客的订单产生审核或者是修改等操作，审核通过后便可以发货。新增商品：进了新货可以在顾客可浏览的主页增加新的商品。下架商品：商品库存卖光后可以及时下架该商品。修改商品：商品的厂家若修改了商品信息，导致信息发生变化，管理员可以马上修改上架在本系统中的商品。3.2运行流程图为清楚表明各个实体之间的关系，系统设计者往往使用E-R图来描述实体类型、属性和联系方法。系统全局E-R图。页面表示层页面表示层业务逻辑层数据访问层数据库图3.1系统框架图用户用户购物商城主页购物车结算管理员后台管理系统订单审核图3.2运行流程图姓名身份证号姓名身份证号头像密码用户昵称邮箱地址电话用户信息图3.3用户信息管理图购物车详情购物车详情商品名称商品单价购买数量小计商品总价删除确认结算继续购物图3.4购物车系统管理图4详细设计与实现4.1数据库详细设计在本网站的数据存储是依靠MySql5数据库来制作，本系统在数据这块用的是一个工具类BaseDao，配置连接数据库的方式如下：配置数据源conn，定义数据源conn不为空，然后加载驱动Class.forName，驱动数据源的名字为jdbc，然后链接服务器localhost，链接数据库。创建一个语句将数据发送到数据库中，最后关闭资源。数据库中主要表的设计User用户表User用户表：在此表中储放管理员与用户的全部资料，表User如表3-1所示。表3-1User（用户资料表）编号FieldTypeComment（中文解释）1idint(20)NOTNULL编号2namevarchar(200)NULL用户真实姓名3nickNamevarchar(250)NOTNULL用户昵称4passwordvarchar(250)NOTNULL密码5identityCodevarchar(60)NULL身份证号6emailvarchar(80)NULL邮箱7telphonevarchar(11)NULL手机8typeInt(2)NOTNULL类型（后台/前台）9headImagevarchar(255)NULL用户头像10createdatetimeNOTNULL用户的创建时间2.商品信息表Product商品表：此表存储的则是网站中所有商品的全部信息，表Product具体结构如表3-3所示。表3-3Product(库存信息表)编号FieldTypeComment（中文解释）1idint（10）NOTNULL主键2namevarchar（200）NOTNULL名称3descriptionvarchar（1024）NULL描述4pricedoubleNOTNULL价格5stockint(11)NOTNULL库存6categoryLevellIdint(10)NULL分类17categoryLevel2Idint(10)NULL分类28categoryLevel3Idint(10)NULL分类39fileNamevarchar（200）NULL文件名称10isDeleteint(1)NULL是否删除3.库存分类表category表是用来存储电脑配件的目录表，可以提供给用户逐级浏览的效果，表category具体结构如表3-4所示。表3-4category（库存分类表）编号FieldTypeComment（中文解释）1idInt(10)NOTNULL主键2nameVarchar(20)NOTNULL名称3parentIdint(10)NOTNULL父级目录id4typeint(11)NULL级别（1：一级2：二级3：三级）5iconClassvarchar(255)NULL图标4.订单信息表order表是储存用户提交到管理员页面中已提交的订单信息，order表3-5所示。表3-5order（订单信息表）编号FieldTypeComment（中文解释）1uIdint(255)NULL用户主键2remarkvarchar(500)NULL收货地址说明3receiptNamevarchar(500)NULL收货人姓名4telphonevarchar(500)NULL收货人手机号5uAddressvarchar(500)NULL收货人地址6costdoubleNULL总消费7serialNumbervarchar(200)NULL订单号8statusint(11)NULL订单状态9createTimedatetimeNULL订单创建时间5.浏览记录表记录电脑配件购物网站中所有客户的浏览习惯，如表3-6所示。表3-6user_browse_records（浏览习惯表）编号FiedlTypeComment（中文解释）1idint(11)NOTNULL浏览记录主键ID2UserIdint(11)NOTNULL用户主键ID3Proidint(11)NOTNULL商品主键ID4categoryLevel1Idint(11)NOTNULL商品一级分类5categoryLevel1Idint(11)NOTNULL商品二级分类6categoryLevel1Idint(11)NOTNULL商品三级分类7CreatetimedatetimeNOTNULL浏览记录创建时间6.用户账户表记录电脑配件购物网站中所有客户的操作记录等，如表3-7所示。表3-7user_log(操作信息表）编号FieldTypeComment1idint(11)NOTNULL主键2logContentvarchar(200)NOTNULL日志内容3createTimedatetimeNOTNULL记录时间4logTypeint(11)NOTNULL日志类型：充值记录、消费记录5uIdint(11)NOTNULL用户id4.2前端功能4.2.1用户模块1.注册用户在购买时必须登录账号，如果该用户第一次到本网站购物，必需注册账号，注册的内容是用户的虚拟用户名、密码、确认密码、本人手机号与勾选用户协议。注册界面的设计如图4.2所示。图4.2注册界面完成这一效果的页面名为Regist.jsp，界面中提到的字符如表4-1所示。表4-1注册实现表控件定义名所属字符类中文解释UserNametext用户名Passwordpassword密码Passwordpassword确认密码usertelphonetext手机号usconfertext用户协议2.登录与判断身份过滤器（1）登录用户在登录界面可以进行的操作是输入用户名和密码，系统会自动与数据库里所有用户的信息做比照，若提交数据判断完成后与数据库信息匹配成功，则登录成功。登录窗口如图4.3所示。图4.3登录界面设计（2）判断身份过滤器本网站可以不需要登录就可以浏览内容，但是用户付款或者管理员操作都需要登录账户才可以进行操作，状态过滤器这块分为管理员和普通用户，以及游客浏览商品,没登录的时候是以游客的身份浏览本网站,可以看商品却不能点击加入购物车按钮，点击就会拦截下来，登录之后才会拥有相应的操作，没登录的时候直接点加入购物车就会自动进行拦截并帮用户跳转，身份过滤器的实现页面如图4.4所示。当游客浏览时想要购买商品的话，就会拦截跳转到登录，跳转的方式就像上图一样点击登录就会直接来到登录页面，核心代码如下：if(url.equals("/easybuyproject/index.jsp") ||url.equals("/easybuyproject/")){ response.sendRedirect("GoHome"); }elseif(url.indexOf("/AddShoppingCartServlet")>-1){ if(u!=null){ 任何用户购买商品的话，都要通过登录才行，没登录管理员本人也会拦截，拦截这个效果的目的就是区分身份，区分身份后会有不同的功能权限，身份过滤器的实现页面如图4.4所示。图4.4身份过滤器设计（3）用户信息完善注册成功并登录后，买家可自行完善个人信息，为提升用户对本网站的信任，登陆者也可以不进行实名认证。修改界面如图4.5所示。图4.5用户信息完善界面4.2.2用户使用界面1主页主页分为中上方搜寻栏，可以让用户一眼就看到，左边为父级目录，右边为消息展示。顶部的搜索支持模糊搜索与搜索记录，菜单区为左侧与搜索栏下方同时，增加美观的同时方便用户的使用，右侧界面为本网站的新闻部分，工作原理是前端js部门及时响应websocket发送过来的实时数据，获取服务器路径与webapps路径，设置webapps服务器的请求路径后，定义相应的函数，发生http请求接收到数据后转换数据对象并处理。图4.6所示。图4.6主页2.推荐购物区用户在主页即可看到部分电脑配件信息，本系统展示的推荐商品为销量最好，评论最优质的商品，界面为Index.jsp，其整体布局设计如图4.7所示。图4.7商品展示模块3.保存用户的搜索记录用户在使用首页搜索框搜索时会有记录的，这个搜索框拥有记录用户搜索记录的效果,用户鼠标放到搜索框就能快捷找到自己曾浏览过的商品。其整体布局设计如图4.8所示。图4.8商品搜索模块4.2.3购物车界面1.购物过程用户在浏览本页面时产生购买想法，在登录的前提下，点击加入购物车将会把这个商品直接添加到购物车中，购物过程如图4.9所示。图4.9选品流程图2.购物车展示功能实现界面设计如图4.10所示。图4.10选品预览界面3.收货地址当用户选品结束后，进入到确认订单信息页面，第一次使用本系统的用户是没有收货地址的，需要去设置一个收货地址，相关界面如下图4.11所示。图4.11收货地址填写界面4.3后端功能4.3.1管理员冻结用户界面这个效果是通过一个websocket协议实现的，功能就是让管理员可以冻结恶意用户,前台的用户如果被管理员冻结的话,就会立刻被强制下线，拥有即时通讯的效果，具体界面如下图4.12所示。图4.12管理员信息管理界面4.3.2订单管理模块管理员登录后可以处理用户下达的订单，根据店铺运作时间与收货地址等一系列情况，来决定是否立刻发货，订单处理界面如下图4.13所示。图4.13订单处理界面4.3.3商品库存界面管理员可以对店铺内所有商品的库存价格等作出修改，但是不允许修改商品图片，若商品卖完可以选择下架这个配件。商品库存界面如下图4.14所示。图4.14商品库存管理界面4..4管理员快捷添加商品管理员快捷添加商品是本系统的核心，首先我们是判断请求信息中的内容是否是multipart类型其次通过FileItemFactory创建文件工厂对象并用ServletFileUpload创建接收文件流对象,解析form表单中所有文件。以FileItem的类型存储到list集合中通过循环遍历集合中的每一个对象,hasNext()用.next()依次提取每一个对象并进行判断,获取到文件的名字,路径调用write方法通过文件对象把最终服务器路径和上传的文件写入到服务器中，如下图4.15所示。图4.15添加产品界面5系统测试5.1前台测试5.1.1用户登录测试点击登录后按框内的中文提示填写，当密码或账号不存在数据库内时，会立刻给出回应。以密码输入不一致为例，密码输入错误就会显示账号或密码错误，请稍后重试的字样，具体效果如图5.1所示。图5.1登录失败图例5.1.2电脑配件购买测试以购买华硕AMD为例进行购买测试。（1）搜索框中输入“华硕”进行搜索，如图5.2所示。图5.2产品搜索图例（2）点击图片即可跳转到商品详情页，如图5.3所示。图5.3商品详情界面（3）加入购物车后点击购买数量行里的+号即可增加购买数量，小计金额那里会根据商品数量增加或减少。如图5.4所示。图5.4购物车界面（4）鼠标点击确认结算按钮进入到确认订单界面，用户可以核查自己的个人信息，例如详细地址、手机号等等，信息有误可以直接进行信息修改，确认无误后选择快递的方式，本系统只提供了顺丰快递一种发货方式，信息全部确认完之后输入用户自己的付款密码，点击确认订单即可付款成功。如图5.5所示。图5.5订单确认界面（5）提交完成后界面表示为刚刚提交的订单内容。如图5.6所示。图5.6订单确认界面订单信息同时提供查看的效果，让用户拥有撤销订单的能力，同时确认系统是否发货。如图5.7所示。图5.7订单提交成功界面用户购买电脑配件的流程到这一步就完成了。5.2后台管理测试5.2.1管理员登录测试为了方便使用，管理员与用户都在同一页面登录，点击登录，输入管理员的账号密码，管理员账号密码是不允许注册的，直接在数据库中存入，界面效果为图5.8所示。图5.8登陆界面5.2.2产品信息管理测试（1）产品信息管理展示，进入产品信息管理界面，找到想要操作的产品，在操作那一栏可以选择上架、下架与修改产品信息，若点击下架，变为绿色上架两字的可上架状态，如图5.9所示。图5.9下架产品测试图（2）若产品价格发生变化，则管理员需点击修改按钮，页面跳转到修改商品页面，可以修改产品的备注、名称、价格、库存等，界面如5.10所示。图5.10修改商品测试图5.2.3用户信息管理测试若用户出现违规行为，管理员拥有阻止该用户登录的能力。封禁页面如图5.11所示。图5.11用户封禁测试图被封禁的用户在登录页面登录时将收到如下限制，界面如图5.12所示。图5.12用户封禁效果图5.2.4管理员添加商品测试若有新的商品需要在本系统出售，管理员可以在添加商品页面对该商品进行添加，详细信息李若商品名称、商品描述、价格、库存、以及选择该商品应填入的目录。此处以GIGABYTE技嘉主板做实验，结果界面如图5.13所示。图5.13产品上架测试图图5.14上架成功测试图管理员可进行的操作至此结束。结束语从接到这个项目题目开始，我就开始了每天查阅资料，构思思路的日子。为准备构写毕业论文更是泡在图书馆里每天查资料，系统的开发过程中更是遇到过各种困难，还好有同学和老师们的帮助，这个项目我才能够完成，做这个项目是我这大学四年遇到的最大挑战。这个项目让我收获很多，深刻地了解到了java业务的重要性，开阔了我的大脑思维，完成的过程中学到了很多java技巧。从一开始的毫无头绪到后来的不断优化，这个过程中不断地测试修改，提升的不仅是我的项目，